Login/SignUp Screen

App Development
1

Hi,

I’m trying to practice creating Login and SignUp screens using Swiftui approach and not storyboard. I’m wondering if Chris has taught this in any of his app lessons. I couldn’t find any so I found this tutorial online that’s similar but it didn’t include a signup screen. Any advice on guidelines to create login and sign-up screens using the MVVM model with swiftui approach and not storyboard?

I also encounter some errors in the codes I followed from the tutorial online. Could anybody help to point me in the right direction? I attached my codes below.


import SwiftUI

struct LoginSignupView: View {
    @ObservedObject var viewModel: LoginSignupViewModel
    
    var emailTextField: some View {
        TextField("Email", text: $viewModel.emailText)
            .modifier(TextFieldCustomRoundedStyle())
    }
    var passwordTextField: some View {
        SecureField("Password", text: $viewModel.passwordText)
            .modifier(TextFieldCustomRoundedStyle())
    }
    
    var actionButton: some View {
        Button(viewModel.buttonTitle) {
            //action
        }.padding()
            .frame(maxWidth: .infinity)
            .foregroundColor(.white)
            .background(Color(.systemPink))
            .cornerRadius(16)
            .padding()
    }
    var body: some View {
        VStack {
            Text(viewModel.title)
                .font(.largeTitle)
                .fontWeight(.bold)
            Text(viewModel.subtitle)
                .font(.title2)
                .fontWeight(.semibold)
                .foregroundColor(Color(.systemGray2))
            Spacer().frame(height: 50)
            emailTextField
            passwordTextField
            actionButton
            
            Spacer()
            
           
            }
            
        }
    }


struct LoginSignupView_Previews: PreviewProvider {
    static var previews: some View {
        
        NavigationView {
            LoginSignupView(viewModel: .init(mode: .login))
        }.environment(\.colorScheme, .dark)
    }
}








import Foundation

final class LoginSignupViewModel: ObservableObject {
    private let mode: Mode
    @Published var emailText = ""
    @Published var passwordText = ""
    @Published var isValid = false
    
    init(mode: Mode) {
        self.mode = mode
        
    }
    var title: String {
        switch mode {
        case .login:
            return "Welcome back!"
        case .signup:
            return "Create an account"
        }
    }
    var subtitle: String {
        switch mode {
        case .login:
            return "Login with your email"
        case .signup:
            return "Sign up via email"
        }
    }
    var buttonTitle: String {
        switch mode {
        case .login:
            return "Login"
        case .signup:
            return "Sign up"
        }
    
        
        extension LoginSignupViewModel {
            enum Mode {
                case login
                case signup
            }
        }
    }
}





import Foundation

final class LoginSignupViewModel: ObservableObject {
    private let mode: Mode
    @Published var emailText = ""
    @Published var passwordText = ""
    @Published var isValid = false
    
    init(mode: Mode) {
        self.mode = mode
        
    }
    var title: String {
        switch mode {
        case .login:
            return "Welcome back!"
        case .signup:
            return "Create an account"
        }
    }
    var subtitle: String {
        switch mode {
        case .login:
            return "Login with your email"
        case .signup:
            return "Sign up via email"
        }
    }
    var buttonTitle: String {
        switch mode {
        case .login:
            return "Login"
        case .signup:
            return "Sign up"
        }
    
        
        extension LoginSignupViewModel {
            enum Mode {
                case login
                case signup
            }
        }
    }
}
2

There’s no courses yet in SwiftUI that have a custom login or custom sign-up screen incorporating email and password. The Chat App uses a phone number to login with and an authentication SMS is sent to you which provides a 6 digit code which you type into the verification screen.

Can you provide a link to the tutorial where you found this code?

3

I could not figure out what the author was trying to do but I changed a few things and this now works.

Login/Signup View

struct LoginSignupView: View {
    @ObservedObject var viewModel = LoginSignupViewModel()

    var emailTextField: some View {
        TextField("Email", text: $viewModel.emailText)
            .textFieldStyle(.roundedBorder)
    }
    var passwordTextField: some View {
        SecureField("Password", text: $viewModel.passwordText)
            .textFieldStyle(.roundedBorder)
    }

    var actionButton: some View {
        Button(viewModel.buttonTitle) {
            //action
        }.padding()
            .frame(maxWidth: .infinity)
            .foregroundColor(.white)
            .background(Color(.systemPink))
            .cornerRadius(16)
            .padding()
    }
    var body: some View {
        VStack {
            Text(viewModel.title)
                .font(.largeTitle)
                .fontWeight(.bold)
            Text(viewModel.subtitle)
                .font(.title2)
                .fontWeight(.semibold)
                .foregroundColor(Color(.systemGray2))
            Spacer().frame(height: 50)
            emailTextField
            passwordTextField
            actionButton

            Button {
                if viewModel.mode == .login {
                    viewModel.mode = .signup
                } else {
                    viewModel.mode = .login
                }
            } label: {
                Text("Switch to \(viewModel.mode == .signup ? "Login" : "Sign-Up")")
            }

            Spacer()
        }
        .padding(.horizontal)
    }
}

struct LoginSignupView_Previews: PreviewProvider {
    static var previews: some View {

        NavigationView {
            LoginSignupView()
        }.environment(\.colorScheme, .dark)
    }
}

View Model

final class LoginSignupViewModel: ObservableObject {
    @Published var mode: Mode = .login
    @Published var emailText = ""
    @Published var passwordText = ""
    @Published var isValid = false

    var title: String {
        switch mode {
        case .login:
            return "Welcome back!"
        case .signup:
            return "Create an account"
        }
    }
    var subtitle: String {
        switch mode {
        case .login:
            return "Login with your email"
        case .signup:
            return "Sign up via email"
        }
    }
    var buttonTitle: String {
        switch mode {
        case .login:
            return "Login"
        case .signup:
            return "Sign up"
        }
    }
}

extension LoginSignupViewModel {
    enum Mode {
        case login
        case signup
    }
}