From dddd873eb4a5cc15aba03c271036eef16e4cf9ee Mon Sep 17 00:00:00 2001 From: "emre.kartal" Date: Mon, 25 Sep 2023 18:15:57 +0200 Subject: [PATCH] Add Visibility Password :see_no_evil: --- Sources/allin/allin/Screens/LoginScreen.swift | 21 ++- .../allin/allin/Screens/RegisterScreen.swift | 157 ++++++++++++------ Sources/allin/allin/Views/TopBarView.swift | 2 +- 3 files changed, 128 insertions(+), 52 deletions(-) diff --git a/Sources/allin/allin/Screens/LoginScreen.swift b/Sources/allin/allin/Screens/LoginScreen.swift index 2cfcd30..dd1f28c 100644 --- a/Sources/allin/allin/Screens/LoginScreen.swift +++ b/Sources/allin/allin/Screens/LoginScreen.swift @@ -9,6 +9,7 @@ import SwiftUI struct Login: View { + @State private var isPasswordVisible = true @State private var username: String = "" @State private var password: String = "" var body: some View { @@ -34,7 +35,13 @@ struct Login: View { ) .padding(.bottom, 8) - TextField("", text: $password, prompt: Text("Mot de passe").foregroundColor(.gray)) + Group { + if isPasswordVisible { + SecureField("", text: $password, prompt: Text("Mot de passe").foregroundColor(.gray)) + } else { + TextField("", text: $password, prompt: Text("Mot de passe").foregroundColor(.gray)) + } + } .padding() .background(Color.white.cornerRadius(9)) .frame(width: 300) @@ -42,6 +49,18 @@ struct Login: View { RoundedRectangle(cornerRadius: 9, style: .continuous) .stroke(AllinColor.StrokeGrayColor, lineWidth: 1) ) + .overlay( + HStack { + Spacer() + Button(action: { + isPasswordVisible.toggle() + }) { + Image(systemName: isPasswordVisible ? "eye.slash" : "eye") + .foregroundColor(.gray) + } + .padding(.trailing, 8) + } + ) .foregroundColor(.black) Text("Mot de passe oublié?") diff --git a/Sources/allin/allin/Screens/RegisterScreen.swift b/Sources/allin/allin/Screens/RegisterScreen.swift index 9e75bbf..b4ab25f 100644 --- a/Sources/allin/allin/Screens/RegisterScreen.swift +++ b/Sources/allin/allin/Screens/RegisterScreen.swift @@ -9,45 +9,97 @@ import SwiftUI struct Register: View { + @State private var isPasswordVisible = true @State private var pseudo: String = "" @State private var username: String = "" @State private var password: String = "" @State private var passwordConfirm: String = "" var body: some View { GeometryReader { geometry in - VStack(spacing: 15) { - Spacer() - Text("On a besoin de ça!") - .betTextStyle(weight: .semibold, color: AllinColor.StartTextColor, size: 40) - Text("Promis c’est rapide.") - .frame(width: 220) - .multilineTextAlignment(.center) - .betTextStyle(weight: .regular, color: AllinColor.StartTextColor, size: 20) - .padding(.bottom, 60) - - TextField("", text: $pseudo, prompt: Text("Pseudo").foregroundColor(.gray)) + ScrollView { + VStack(spacing: 15) { + Spacer() + VStack { + if (pseudo != "") { + Text("Bonjour "+pseudo+",") + .betTextStyle(weight: .semibold, color: AllinColor.StartTextColor, size: 40) + .lineLimit(1) + .padding([.trailing, .leading], 30) + } else { + Text("Bonjour,") + .betTextStyle(weight: .semibold, color: AllinColor.StartTextColor, size: 40) + .lineLimit(1) + .padding([.trailing, .leading], 30) + } + Text("On a besoin de ça!") + .betTextStyle(weight: .semibold, color: AllinColor.StartTextColor, size: 40) + } + + Text("Promis c’est rapide.") + .frame(width: 220) + .multilineTextAlignment(.center) + .betTextStyle(weight: .regular, color: AllinColor.StartTextColor, size: 20) + .padding(.bottom, 60) + + TextField("", text: $pseudo, prompt: Text("Pseudo").foregroundColor(.gray)) + .padding() + .background(Color.white.cornerRadius(9)) + .frame(width: 300) + .foregroundColor(.black) + .overlay( + RoundedRectangle(cornerRadius: 9, style: .continuous) + .stroke(AllinColor.StrokeGrayColor, lineWidth: 1) + ) + .padding(.bottom, 8) + + TextField("", text: $username, prompt: Text("Email").foregroundColor(.gray)) + .padding() + .background(Color.white.cornerRadius(9)) + .frame(width: 300) + .foregroundColor(.black) + .overlay( + RoundedRectangle(cornerRadius: 9, style: .continuous) + .stroke(AllinColor.StrokeGrayColor, lineWidth: 1) + ) + .padding(.bottom, 8) + + Group { + if isPasswordVisible { + SecureField("", text: $password, prompt: Text("Mot de passe").foregroundColor(.gray)) + } else { + TextField("", text: $password, prompt: Text("Mot de passe").foregroundColor(.gray)) + } + } .padding() .background(Color.white.cornerRadius(9)) .frame(width: 300) - .foregroundColor(.black) .overlay( RoundedRectangle(cornerRadius: 9, style: .continuous) .stroke(AllinColor.StrokeGrayColor, lineWidth: 1) ) - .padding(.bottom, 8) - - TextField("", text: $username, prompt: Text("Email").foregroundColor(.gray)) - .padding() - .background(Color.white.cornerRadius(9)) - .frame(width: 300) .foregroundColor(.black) + .padding(.bottom, 8) .overlay( - RoundedRectangle(cornerRadius: 9, style: .continuous) - .stroke(AllinColor.StrokeGrayColor, lineWidth: 1) + HStack { + Spacer() + Button(action: { + isPasswordVisible.toggle() + }) { + Image(systemName: isPasswordVisible ? "eye.slash" : "eye") + .foregroundColor(.gray) + } + .padding(.bottom, 8) + .padding(.trailing, 8) + } ) - .padding(.bottom, 8) - - TextField("", text: $password, prompt: Text("Mot de passe").foregroundColor(.gray)) + + Group { + if isPasswordVisible { + SecureField("", text: $passwordConfirm, prompt: Text("Confirmation du Mot de passe").foregroundColor(.gray)) + } else { + TextField("", text: $passwordConfirm, prompt: Text("Confirmation du Mot de passe").foregroundColor(.gray)) + } + } .padding() .background(Color.white.cornerRadius(9)) .frame(width: 300) @@ -55,38 +107,43 @@ struct Register: View { RoundedRectangle(cornerRadius: 9, style: .continuous) .stroke(AllinColor.StrokeGrayColor, lineWidth: 1) ) - .foregroundColor(.black) - .padding(.bottom, 8) - - TextField("", text: $passwordConfirm, prompt: Text("Confirmation du Mot de passe").foregroundColor(.gray)) - .padding() - .background(Color.white.cornerRadius(9)) - .frame(width: 300) .overlay( - RoundedRectangle(cornerRadius: 9, style: .continuous) - .stroke(AllinColor.StrokeGrayColor, lineWidth: 1) + HStack { + Spacer() + Button(action: { + isPasswordVisible.toggle() + }) { + Image(systemName: isPasswordVisible ? "eye.slash" : "eye") + .foregroundColor(.gray) + } + .padding(.bottom, 8) + .padding(.trailing, 8) + } ) .foregroundColor(.black) .padding(.bottom, 50) - - Button(action: {}) { - Text("S'inscrire") - .betTextStyle(weight: .bold, color: .white, size: 17) + + Button(action: {}) { + Text("S'inscrire") + .betTextStyle(weight: .bold, color: .white, size: 17) + } + .frame(width: 300, height: 60) + .background(LinearGradient(gradient: + Gradient(colors:[AllinColor.TopBarColorPink,AllinColor.TopBarColorPurple,AllinColor.TopBarColorBlue]), + startPoint: .leading, endPoint: .trailing)) + .cornerRadius(13) + + Spacer() + + HStack(spacing: 0) { + Text("Tu as déjà un compte? ") + .betTextStyle(weight: .regular, color: AllinColor.StartTextColor, size: 16) + Text("Se connecter") + .betTextStyle(weight: .semibold, color: AllinColor.PurpleText, size: 16) + } + } - .frame(width: 300, height: 60) - .background(LinearGradient(gradient: - Gradient(colors:[AllinColor.TopBarColorPink,AllinColor.TopBarColorPurple,AllinColor.TopBarColorBlue]), - startPoint: .leading, endPoint: .trailing)) - .cornerRadius(13) - - Spacer() - HStack(spacing: 0) { - Text("Tu as déjà un compte? ") - .betTextStyle(weight: .regular, color: AllinColor.StartTextColor, size: 16) - Text("Se connecter") - .betTextStyle(weight: .semibold, color: AllinColor.PurpleText, size: 16) - } - + } .frame(width: geometry.size.width, height: geometry.size.height) .background(AllinColor.StartBackground) diff --git a/Sources/allin/allin/Views/TopBarView.swift b/Sources/allin/allin/Views/TopBarView.swift index 141fd6b..3168483 100644 --- a/Sources/allin/allin/Views/TopBarView.swift +++ b/Sources/allin/allin/Views/TopBarView.swift @@ -14,7 +14,7 @@ struct TopBarView: View { var body: some View { ZStack{ HStack{ - Button(action: {withAnimation{ self.showMenu = !self.showMenu }}) { + Button(action: {withAnimation{ self.showMenu.toggle() }}) { Image("menu") .resizable() .frame(width: 26,height: 15)