skip to Main Content

I am currently making the user path for login and registration on my IOS application being a beginner I need to have an opinion on my code and how I can when the email address is valid and change view in my current project I have created several view for different screen

Thank you in advance

import SwiftUI

struct Registration: View {
    // MARK: - Properties
    @State private var email = ""
    @State private var Error = false
    @State private var ValidationButton = false
    
    // Check email
    var isEmailValid: Bool {
        let emailRegex = #"^[A-Z0-9a-z._%+-]+@[A-Za-z0-9.-]+.[A-Za-z]{2,}$"#
        return NSPredicate(format: "SELF MATCHES %@", emailRegex).evaluate(with: email)
    }
    
    // MARK: - Body
    var body: some View {
        NavigationView {
            VStack(alignment: .leading, spacing: 40) {
                VStack(spacing: 18) {
                    VStack(alignment: .leading, spacing: 5) {
                        Text("Welcome!")
                            .font(.title)
                            .fontWeight(.bold)
                        Text("Enter your e-mail in order to log in or create an account")
                            .multilineTextAlignment(.leading)
                    }
                    .frame(maxWidth: .infinity, alignment: .leading)
                    
                    HStack(spacing: 16) {
                        Image(systemName: "envelope.fill")
                            .imageScale(.large)
                            .foregroundColor(Color.primary)
                        
                        TextField("Email", text: $email, onEditingChanged: { editing in
                            if !editing {
                                Error = !isEmailValid
                                ValidationButton = isEmailValid
                            }
                        })
                        .font(.system(size: 20))
                        .frame(maxWidth: .infinity, alignment: .leading)
                        .foregroundColor(.primary)
                        
                        if ValidationButton {
                            Button(action: {
                                print("Email validated")
                            }) {
                                Image(systemName: "arrow.forward.square.fill")
                                    .font(.system(size: 35))
                            }
                            .padding(.leading, 8)
                        }
                    }
                    .padding(.horizontal, 16)
                    .frame(minHeight: 55)
                    .overlay(
                        RoundedRectangle(cornerRadius: 6)
                            .stroke(Error ? Color.red : Color.primary)
                    )
                    
                    if Error {
                        Text("Please enter a valid email address")
                            .foregroundColor(.red)
                            .padding(.leading, 16)
                            .frame(maxWidth: .infinity, alignment: .leading)
                    }
                }
                .foregroundColor(.primary)
                
                HStack(spacing: 10) {
                    Rectangle()
                        .fill(Color(.separator))
                        .frame(height: 1)
                    Text("or continue with")
                        .fixedSize(horizontal: true, vertical: true)
                        .frame(maxWidth: .infinity)
                    Rectangle()
                        .fill(Color(.separator))
                        .frame(height: 1)
                }
                
                HStack(alignment: .top, spacing: 12) {
                    Button(action: {
                        print("Tap on Apple button")
                    }) {
                        ZStack {
                            RoundedRectangle(cornerRadius: 6)
                                .fill(Color(.systemGray5))
                            
                            Image(systemName: "apple.logo")
                                .font(.system(size: 19))
                                .foregroundColor(Color.primary)
                        }
                    }
                    
                    Button(action: {
                        print("Tap on Google button")
                    }) {
                        ZStack {
                            RoundedRectangle(cornerRadius: 6)
                                .fill(Color(.systemGray5))
                            
                            Image(systemName: "apple.logo")
                                .font(.system(size: 19))
                                .foregroundColor(Color.primary)
                        }
                    }
                    
                    Button(action: {
                        print("Tap on Facebook button")
                    }) {
                        ZStack {
                            RoundedRectangle(cornerRadius: 6)
                                .fill(Color(.systemGray5))
                            
                            Image(systemName: "apple.logo")
                                .font(.system(size: 19))
                                .foregroundColor(Color.primary)
                        }
                    }
                }
                .frame(maxHeight: 50)
                
            }
            .padding(.horizontal, 16)
            .background(Color(.systemBackground))
            .navigationBarHidden(true)
        }
        .navigationViewStyle(StackNavigationViewStyle())
    }
}

struct RegistrationView_Previews: PreviewProvider {
    static var previews: some View {
        Registration()
    }
}

to try to solve my problem I tried to make a NavigationLink by looking well on the official documentation apple but it did not work and I do not know if it is the good method thank you to you

2

Answers


  1. If you are looking to leverage NavigationLink, you can do something like this instead of the Button you have:

    if ValidationButton {
         NavigationLink {
              Text("hello world")
         } label: {
              Image(systemName: "arrow.forward.square.fill")
                   .font(.system(size: 35))
         }
         .padding(.leading, 8)
    }
    
    Login or Signup to reply.
  2. If you want to navigate to next view after validating an email, you can use NavigationLink:

    @State private var goToHomeView = false // declare this variable
    
    if ValidationButton {
                            Button(action: {
                                print("Email validated")
                                goToHomeView = true
                            }) {
                                Image(systemName: "arrow.forward.square.fill")
                                    .font(.system(size: 35))
                            }
                            .padding(.leading, 8)
                            .background(
                                NavigationLink(
                                    destination: HomeView(),
                                    isActive: $goToHomeView,
                                    label: {
                                        EmptyView()
                                    })
                                .hidden()
                            )
                        }
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search