SwiftUI Login Screen Design – Default

Default Design – Login Screen in SwiftUI

This Login Screen built in SwiftUI has a very simple design, just for the username and password inputs, and a button to submit this login information.

ContentView.swift

import SwiftUI

struct ContentView: View {
    var body: some View {
        LoginScreen()
    }
}


struct LoginScreen: View {
    @State private var username: String = ""
    @State private var password: String = ""
    
    var body: some View {
        VStack {
            //login title
            Text("Login")
                .font(.title)
            
            //username textfield
            TextField(
                "Username",
                text: $username
            )
            .disableAutocorrection(true)
            .autocapitalization(.none)
            .textFieldStyle(RoundedBorderTextFieldStyle())
            
            //password textfield
            SecureField(
                "Password",
                text: $password
            )
            .textFieldStyle(RoundedBorderTextFieldStyle())
            
            //submit button
            Button(action: {
                logIn(username: username, password: password)
            }){
                Text("Login")
            }
        }
        .padding(.all)
    }
}

func logIn(username: String, password: String) {
    print(username)
    print(password)
}