Go to Qiita Advent Calendar Top
LoginSignup
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@aporoxy(あぽろ)

SwiftUI】ログイン認証について アカウント作成ページの作成

Posted at

はじめに

前回の続きです。今回は、アカウントを持っていない場合に、新規でアカウントを作成するためのページについてまとめていきます。今回も以下の動画を参考にまとめていきます

参考動画

ソースコード

import SwiftUI

struct LoginView: View {
    @State private var email: String = ""
    @State private var password: String = ""
    @State private var Isloading: Bool = false // ログインボタンを押下されたかの判定
    @State private var createAccount: Bool = false // アカウントを作成するかどうかの判定
    
    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"){
                try? await Task.sleep(for : .seconds(5)) // 非同期タスク内で、キャンセルされるかもしれない5秒待機を、例外無視で行う
            } onStatusChange : { isLogin in
                Isloading = isLogin // ログイン状態をIsloading に渡している
            }
            .padding(.top, 20)
            .padding(.horizontal , 10)
            .disabled(!isSignInButtonEnabled) // メアド・パスワードが入力されていないとアクティブにしない
            
            HStack{
                Text("アカウントをお持ちではないですか？")
                Button{
                    createAccount.toggle() // アカウントを作成する判定
                } label: {
                    Text("アカウントを作成")
                        .underline()
                }
            }
            .fontWeight(.medium)
            .padding(.top, 10)
            .foregroundStyle(Color.primary)
            .frame(maxWidth: .infinity)
            
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity , alignment: .topLeading)
        .padding(.top, 20)
        .allowsTightening(!Isloading) // テキストの文字間を詰めてもよいかを指定するモディファイア
        .opacity(Isloading ? 0.8 : 1) //もし isLoading が true なら 0.8、そうでなければ 1.0 を返す (? は if 分の役割 )
        .sheet(isPresented:$createAccount){
            RegisterAccont()
                .presentationDetents([.height(400)])
                .presentationBackground(.background)
        }
    }
    
    // メアド・パスワードが入力されていなかった場合は Sign In ボタンをアクティブにしない
    var isSignInButtonEnabled: Bool {
        !email.isEmpty && !password.isEmpty // only empty
//        !email.isEmpty && password.count >= 8 // パスワードの文字列が8文字以上
    }
}

// アカウント作成　View
struct RegisterAccont: View {
    @State private var email: String = ""
    @State private var password: String = ""
    @State private var passwordconfirmation: String = ""
    @State private var Isloading: Bool = false // ログインボタンを押下されたかの判定
    
    var body: some View {
        VStack(alignment:.leading , spacing: 10){
            VStack(alignment:.leading , spacing: 8){
                Text("アカウントを作成しましょう")
                    .font(.title)
                Text("簡単に作成可能です")
                    .textScale(.secondary)
            }
            .fontWeight(.medium)
//            .padding(10)
            .padding(.top , 20)
            .padding(.horizontal , 20)
            
            CustomTextField(hint:"Eメール アドレス" , symbol : "mail" , value : $email)
                .padding(.horizontal , 20)
                .padding(.top , 20)
            CustomTextField(hint:"パスワード" , symbol : "lock" ,  isPassword: true , value : $password)
                .padding(.horizontal , 20)
                .padding(.top , 20)
            CustomTextField(hint:"パスワードの確認" , symbol : "lock" ,  isPassword: true , value : $passwordconfirmation)
                .padding(.horizontal , 20)
                .padding(.top , 20)
            // Sign In ボタン
            SignInView(title: "アカウントを作成"){
                try? await Task.sleep(for : .seconds(5)) // 非同期タスク内で、キャンセルされるかもしれない5秒待機を、例外無視で行う
            } onStatusChange : { isLogin in
                Isloading = isLogin // ログイン状態をIsloading に渡している
            }
            .padding(.top, 20)
            .padding(.horizontal , 10)
            .disabled(!isSignInButtonEnabled) // メアド・パスワードが入力されていないとアクティブにしない
            
            Spacer(minLength: 0)
            
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity , alignment: .topLeading)
        .padding(.top, 20)
        .allowsTightening(!Isloading) // テキストの文字間を詰めてもよいかを指定するモディファイア
        .opacity(Isloading ? 0.8 : 1) //もし isLoading が true なら 0.8、そうでなければ 1.0 を返す (? は if 分の役割 )
    }
    
    // メアド・パスワードが入力されていない + パスワードと確認パスワードが一致しない場合は Sign In ボタンをアクティブにしない
    var isSignInButtonEnabled: Bool {
        !email.isEmpty && !password.isEmpty && password == passwordconfirmation // only empty
//        !email.isEmpty && password.count >= 8 // パスワードの文字列が8文字以上
    }
}

アカウント作成

import SwiftUI

struct LoginView: View {
    @State private var email: String = ""
    @State private var password: String = ""
    @State private var Isloading: Bool = false // ログインボタンを押下されたかの判定
    @State private var createAccount: Bool = false // アカウントを作成するかどうかの判定
    
    var body: some View {
        VStack(alignment:.leading , spacing: 10){
            // 中略
            
            HStack{
                Text("アカウントをお持ちではないですか？")
                Button{
                    createAccount.toggle() // アカウントを作成する判定
                } label: {
                    Text("アカウントを作成")
                        .underline()
                }
            }
            // 中略
        }
        // 中略
        .sheet(isPresented:$createAccount){
            RegisterAccont()
                .presentationDetents([.height(400)])
                .presentationBackground(.background)
        }
    }
}

createAccount.toggle() にてアカウント作成をするかどうかの判定をする。
createAccount = true となった際に、シートモディファイアを呼び出し、アカウント作成ページを表示する

アカウント作成ページ

// アカウント作成　View
struct RegisterAccont: View {
    @State private var email: String = ""
    @State private var password: String = ""
    @State private var passwordconfirmation: String = ""
    @State private var Isloading: Bool = false // ログインボタンを押下されたかの判定
    
    var body: some View {
        VStack(alignment:.leading , spacing: 10){
            VStack(alignment:.leading , spacing: 8){
                Text("アカウントを作成しましょう")
                    .font(.title)
                Text("簡単に作成可能です")
                    .textScale(.secondary)
            }
            .fontWeight(.medium)
//            .padding(10)
            .padding(.top , 20)
            .padding(.horizontal , 20)
            
            CustomTextField(hint:"Eメール アドレス" , symbol : "mail" , value : $email)
                .padding(.horizontal , 20)
                .padding(.top , 20)
            CustomTextField(hint:"パスワード" , symbol : "lock" ,  isPassword: true , value : $password)
                .padding(.horizontal , 20)
                .padding(.top , 20)
            CustomTextField(hint:"パスワードの確認" , symbol : "lock" ,  isPassword: true , value : $passwordconfirmation)
                .padding(.horizontal , 20)
                .padding(.top , 20)
            // Sign In ボタン
            SignInView(title: "アカウントを作成"){
                try? await Task.sleep(for : .seconds(5)) // 非同期タスク内で、キャンセルされるかもしれない5秒待機を、例外無視で行う
            } onStatusChange : { isLogin in
                Isloading = isLogin // ログイン状態をIsloading に渡している
            }
            .padding(.top, 20)
            .padding(.horizontal , 10)
            .disabled(!isSignInButtonEnabled) // メアド・パスワードが入力されていないとアクティブにしない
            
            Spacer(minLength: 0)
            
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity , alignment: .topLeading)
        .padding(.top, 20)
        .allowsTightening(!Isloading) // テキストの文字間を詰めてもよいかを指定するモディファイア
        .opacity(Isloading ? 0.8 : 1) //もし isLoading が true なら 0.8、そうでなければ 1.0 を返す (? は if 分の役割 )
    }
    
    // メアド・パスワードが入力されていない + パスワードと確認パスワードが一致しない場合は Sign In ボタンをアクティブにしない
    var isSignInButtonEnabled: Bool {
        !email.isEmpty && !password.isEmpty && password == passwordconfirmation // only empty
//        !email.isEmpty && password.count >= 8 // パスワードの文字列が8文字以上
    }
}

差分

// 新たに入力項目を追加
CustomTextField(hint:"パスワードの確認" , symbol : "lock" ,  isPassword: true , value : $passwordconfirmation)
    .padding(.horizontal , 20)
    .padding(.top , 20)

CustomTextField(hint:"パスワードの確認" , symbol : "lock" , isPassword: true , value : $passwordconfirmation) にてパスワードの再入力を求める

var isSignInButtonEnabled: Bool {
    !email.isEmpty && !password.isEmpty && password == passwordconfirmation // only empty
}

E-mail , password が空欄ではない かつ　password と 確認用 password が一致しない限りは、アカウント作成のボタンをアクティブにしない

実際の画面

終わりに

今回は、アカウント作成のページについてまとめました。基本的には、ログインページ (Sign In) となんら変更点ありませんが、新規作成ということで、パスワードの確認画面の追加が必須でしたので、それの対応をしました。では、また！

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?