【SwiftUI】ログイン認証について ボタンのアクティブ・非アクティブについて

はじめに

前回の続きです。今回は、以下の動画を参考にして、Sign In ボタンのアクティブ・非アクティブについてまとめます。

参考動画

ソースコード

struct LoginView: View {
    @State private var email: String = ""
    @State private var password: String = ""
    
    var body: some View {
        VStack(alignment:.leading , spacing: 10){
            VStack(alignment:.leading , spacing: 8){
                Text("ログインページです")
                    .font(.largeTitle)
                Text("ログインフォームを表示します")
                    .font(.callout)
            }
            .fontWeight(.medium)
            .padding(10)
            
            CustomTextField(hint:"Eメール アドレス" , symbol : "mail" , value : $email)
                .padding(.top, 10)
                .padding(.horizontal,10)
            
            CustomTextField(hint:"パスワード" , symbol : "key" ,  isPassword: true , value : $password)
                .padding(.top, 10)
                .padding(.horizontal,10)
            
            // パスワードを忘れた際のボタンを記載
            Button("パスワードを忘れましたか？") {
                //content
            }
            .tint(.primary)
            .frame(maxWidth: .infinity , alignment: .trailing)
            .padding(.top , 10)
            .padding(.horizontal , 10)
            
            // Sign In ボタン
            SignInView(title: "Sign In"){
                // content
            } onStatusChange : { isLogin in
                // content
            }
            .padding(.top, 20)
            .padding(.horizontal , 10)
            .disabled(!isSignInButtonEnabled) // メアド・パスワードが入力されていないとアクティブにしない
            
            HStack{
                Text("アカウントをお持ちではないですか？")
                Button{
                    
                } label: {
                    Text("Sign Up")
                        .underline()
                }
            }
            .fontWeight(.medium)
            .padding(.top, 10)
            .foregroundStyle(Color.primary)
            .frame(maxWidth: .infinity)
            
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity , alignment: .topLeading)
        .padding(.top, 20)
    }
    
    // メアド・パスワードが入力されていなかった場合は Sign In ボタンをアクティブにしない
    var isSignInButtonEnabled: Bool {
        !email.isEmpty && !password.isEmpty
    }
}

Sign In ボタンの切り替え

未入力の場合は、Sign In ボタンをアクティブにしない

以下の変数を記載し、Sign In ボタンに .disabled(!isSignInButtonEnabled) の、モディファイアを与えることで、ボタンのアクティブ状態の切り替えを実行する
今回は、空欄かどうかしか判定していないので、細かい条件（8文字以上 , 記号を含めたパスワード）を設定することで、アクティブ条件を変更することも可能

変数

// 以下の条件を満たしていれば、True
var isSignInButtonEnabled: Bool {
    !email.isEmpty && !password.isEmpty
}

アクティブ・非アクティブのモディファイア

// Sign In ボタン
SignInView(title: "Sign In"){
    // content
} onStatusChange : { isLogin in
    // content
}
.padding(.top, 20)
.padding(.horizontal , 10)
.disabled(!isSignInButtonEnabled) // これを入力！

isSignInButtonEnabled が True ならアクティブとなる

実際の画面

非アクティブ 画面

アクティブ 画面

終わりに

簡単ですが、今回はここまでです。次回は認証のロード画面についてまとめます。