my-files-sample/BeReal/Login/Components/LoginForm.swift

//
//  LoginForm.swift
//  BeReal
//
//  Created by Javier Cicchelli on 01/12/2022.
//  Copyright © 2022 Röck+Cöde. All rights reserved.
//

import SwiftUI

struct LoginForm: View {
    
    // MARK: Bindings
    
    @Binding var username: String
    @Binding var password: String
    @Binding var errorMessage: String?
    
    // MARK: Body
    
    var body: some View {
        VStack(
            alignment: .leading,
            spacing: 16
        ) {
            TextField(
                "Username",
                text: $username
            )
            .textContentType(.username)
            .autocapitalization(.none)
            .disableAutocorrection(true)
            .keyboardType(.default)
            
            Divider()
            
            SecureField(
                "Password",
                text: $password
            )
            .textContentType(.password)
            .autocapitalization(.none)
            .disableAutocorrection(true)
            .keyboardType(.default)
            
            if let errorMessage {
                Divider()
                
                Text(errorMessage)
                    .font(.body)
                    .foregroundColor(.red)
            }
        }
        .frame(maxWidth: .infinity, alignment: .leading)
        .padding(16)
        .background(Color.white)
        .cornerRadius(8)
        .onAppear {
            setClearButtonIfNeeded()
        }
    }
}

// MARK: - Helpers

private extension LoginForm {
    func setClearButtonIfNeeded() {
        guard UITextField.appearance().clearButtonMode != .whileEditing else { return }
        
        UITextField.appearance().clearButtonMode = .whileEditing
    }
}

// MARK: - Previews

struct LoginForm_Previews: PreviewProvider {
    static var previews: some View {
        LoginForm(
            username: .constant("Some username"),
            password: .constant("Some Password"),
            errorMessage: .constant(nil)
        )
        .previewDisplayName("Login form with no error message")
        
        LoginForm(
            username: .constant("Some username"),
            password: .constant("Some Password"),
            errorMessage: .constant("Some error goes in here...")
        )
        .previewDisplayName("Login form with some error message")
    }
}