Add Visibility Password 🙈

pull/2/head
Emre KARTAL 2 years ago
parent a16e003236
commit dddd873eb4

@ -9,6 +9,7 @@ import SwiftUI
struct Login: View { struct Login: View {
@State private var isPasswordVisible = true
@State private var username: String = "" @State private var username: String = ""
@State private var password: String = "" @State private var password: String = ""
var body: some View { var body: some View {
@ -34,7 +35,13 @@ struct Login: View {
) )
.padding(.bottom, 8) .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() .padding()
.background(Color.white.cornerRadius(9)) .background(Color.white.cornerRadius(9))
.frame(width: 300) .frame(width: 300)
@ -42,6 +49,18 @@ struct Login: View {
RoundedRectangle(cornerRadius: 9, style: .continuous) RoundedRectangle(cornerRadius: 9, style: .continuous)
.stroke(AllinColor.StrokeGrayColor, lineWidth: 1) .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) .foregroundColor(.black)
Text("Mot de passe oublié?") Text("Mot de passe oublié?")

@ -9,45 +9,97 @@ import SwiftUI
struct Register: View { struct Register: View {
@State private var isPasswordVisible = true
@State private var pseudo: String = "" @State private var pseudo: String = ""
@State private var username: String = "" @State private var username: String = ""
@State private var password: String = "" @State private var password: String = ""
@State private var passwordConfirm: String = "" @State private var passwordConfirm: String = ""
var body: some View { var body: some View {
GeometryReader { geometry in GeometryReader { geometry in
VStack(spacing: 15) { ScrollView {
Spacer() VStack(spacing: 15) {
Text("On a besoin de ça!") Spacer()
.betTextStyle(weight: .semibold, color: AllinColor.StartTextColor, size: 40) VStack {
Text("Promis cest rapide.") if (pseudo != "") {
.frame(width: 220) Text("Bonjour "+pseudo+",")
.multilineTextAlignment(.center) .betTextStyle(weight: .semibold, color: AllinColor.StartTextColor, size: 40)
.betTextStyle(weight: .regular, color: AllinColor.StartTextColor, size: 20) .lineLimit(1)
.padding(.bottom, 60) .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)
}
TextField("", text: $pseudo, prompt: Text("Pseudo").foregroundColor(.gray)) Text("Promis cest 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() .padding()
.background(Color.white.cornerRadius(9)) .background(Color.white.cornerRadius(9))
.frame(width: 300) .frame(width: 300)
.foregroundColor(.black)
.overlay( .overlay(
RoundedRectangle(cornerRadius: 9, style: .continuous) RoundedRectangle(cornerRadius: 9, style: .continuous)
.stroke(AllinColor.StrokeGrayColor, lineWidth: 1) .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) .foregroundColor(.black)
.padding(.bottom, 8)
.overlay( .overlay(
RoundedRectangle(cornerRadius: 9, style: .continuous) HStack {
.stroke(AllinColor.StrokeGrayColor, lineWidth: 1) 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() .padding()
.background(Color.white.cornerRadius(9)) .background(Color.white.cornerRadius(9))
.frame(width: 300) .frame(width: 300)
@ -55,36 +107,41 @@ struct Register: View {
RoundedRectangle(cornerRadius: 9, style: .continuous) RoundedRectangle(cornerRadius: 9, style: .continuous)
.stroke(AllinColor.StrokeGrayColor, lineWidth: 1) .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( .overlay(
RoundedRectangle(cornerRadius: 9, style: .continuous) HStack {
.stroke(AllinColor.StrokeGrayColor, lineWidth: 1) Spacer()
Button(action: {
isPasswordVisible.toggle()
}) {
Image(systemName: isPasswordVisible ? "eye.slash" : "eye")
.foregroundColor(.gray)
}
.padding(.bottom, 8)
.padding(.trailing, 8)
}
) )
.foregroundColor(.black) .foregroundColor(.black)
.padding(.bottom, 50) .padding(.bottom, 50)
Button(action: {}) { Button(action: {}) {
Text("S'inscrire") Text("S'inscrire")
.betTextStyle(weight: .bold, color: .white, size: 17) .betTextStyle(weight: .bold, color: .white, size: 17)
} }
.frame(width: 300, height: 60) .frame(width: 300, height: 60)
.background(LinearGradient(gradient: .background(LinearGradient(gradient:
Gradient(colors:[AllinColor.TopBarColorPink,AllinColor.TopBarColorPurple,AllinColor.TopBarColorBlue]), Gradient(colors:[AllinColor.TopBarColorPink,AllinColor.TopBarColorPurple,AllinColor.TopBarColorBlue]),
startPoint: .leading, endPoint: .trailing)) startPoint: .leading, endPoint: .trailing))
.cornerRadius(13) .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)
}
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)
} }
} }

@ -14,7 +14,7 @@ struct TopBarView: View {
var body: some View { var body: some View {
ZStack{ ZStack{
HStack{ HStack{
Button(action: {withAnimation{ self.showMenu = !self.showMenu }}) { Button(action: {withAnimation{ self.showMenu.toggle() }}) {
Image("menu") Image("menu")
.resizable() .resizable()
.frame(width: 26,height: 15) .frame(width: 26,height: 15)

Loading…
Cancel
Save