feat: agregar opciones de inicio de sesión y registro con Google y manual

This commit is contained in:
2026-08-19 11:58:05 -03:00
parent 63a85e8aab
commit 18fa523fbe
2 changed files with 430 additions and 174 deletions
+224 -94
View File
@@ -44,6 +44,7 @@ export default function Login(props: LoginProps) {
const [password, setPassword] = useState(""); const [password, setPassword] = useState("");
const [verificationCode, setVerificationCode] = useState(""); const [verificationCode, setVerificationCode] = useState("");
const [checkReadTerms, setCheckReadTerms] = useState(false); const [checkReadTerms, setCheckReadTerms] = useState(false);
const [loginMethod, setLoginMethod] = useState<"google" | "password">("google");
const clientId = process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID || ""; const clientId = process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID || "";
@@ -323,102 +324,132 @@ export default function Login(props: LoginProps) {
</> </>
)} )}
{!verification && !recovery && !recoveryCode && ( {!verification && !recovery && !recoveryCode && (
<h1 className="homeTitleHeader">Ingresar</h1> <>
)} <h1 className="homeTitleHeader">Ingresar</h1>
<Textbox <div
name="name" style={{
placeholder="Email" display: "grid",
type="text" gap: "10px",
value={email} marginBottom: "24px",
width="100%" textAlign: "left",
onChange={(e) => { }}
setEmail(e.target.value); >
}} <p
onKeyUp={(e) => { style={{
if (!verification && !recovery && !recoveryCode) { margin: 0,
if (e.key === "Enter") { color: "#777777",
document.getElementById("password")?.focus(); fontSize: "14px",
} textAlign: "center",
} }}
}} >
/> Elegí cómo querés acceder
{!recovery && ( </p>
<Textbox <button
name="password" type="button"
placeholder="Clave" onClick={() => setLoginMethod("google")}
type="password" style={{
value={password} border:
width="100%" loginMethod === "google"
onChange={(e) => { ? "2px solid var(--wine-dark)"
setPassword(e.target.value); : "1px solid #e1e1e1",
}} borderRadius: "14px",
onKeyUp={(e) => { background:
if (!verification && !recovery && !recoveryCode) { loginMethod === "google"
if (e.key === "Enter") { ? "rgba(111, 16, 50, 0.08)"
iniciarSesion(); : "#ffffff",
} color:
} loginMethod === "google"
}} ? "var(--wine-dark)"
/> : "#3f3f3f",
cursor: "pointer",
fontWeight: loginMethod === "google" ? 700 : 500,
padding: "14px 16px",
textAlign: "left",
boxShadow:
loginMethod === "google"
? "0 8px 18px rgba(111, 16, 50, 0.12)"
: "none",
}}
>
<span
style={{
display: "flex",
justifyContent: "space-between",
alignItems: "center",
gap: "12px",
}}
>
<span>Continuar con Google</span>
<span
style={{
borderRadius: "999px",
background: "var(--wine-dark)",
color: "#ffffff",
fontSize: "11px",
fontWeight: 700,
padding: "4px 8px",
}}
>
Recomendado
</span>
</span>
<span
style={{
display: "block",
marginTop: "4px",
color: "#777777",
fontSize: "13px",
fontWeight: 400,
}}
>
Más rápido, sin recordar otra contraseña.
</span>
</button>
<button
type="button"
onClick={() => setLoginMethod("password")}
style={{
border:
loginMethod === "password"
? "2px solid var(--wine-dark)"
: "1px solid #e1e1e1",
borderRadius: "14px",
background:
loginMethod === "password"
? "rgba(111, 16, 50, 0.08)"
: "#ffffff",
color:
loginMethod === "password"
? "var(--wine-dark)"
: "#3f3f3f",
cursor: "pointer",
fontWeight: loginMethod === "password" ? 700 : 500,
padding: "14px 16px",
textAlign: "left",
boxShadow:
loginMethod === "password"
? "0 8px 18px rgba(111, 16, 50, 0.12)"
: "none",
}}
>
<span>Email y clave</span>
<span
style={{
display: "block",
marginTop: "4px",
color: "#777777",
fontSize: "13px",
fontWeight: 400,
}}
>
Usá tu cuenta tradicional de TurnosXpress.
</span>
</button>
</div>
</>
)} )}
{(verification || recoveryCode) && ( {!verification && !recovery && !recoveryCode && loginMethod === "google" && (
<Textbox
placeholder="Código de verificaion"
type="text"
value={verificationCode}
width="100%"
onChange={(e) => {
setVerificationCode(e.target.value);
}}
/>
)}
{verification && (
<Button
name="btnLogin"
text="Verificar"
width="100%"
onClick={verificateLogin}
style={{ marginTop: "20px" }}
type="submit"
/>
)}
{recovery && (
<Button
name="btnLogin"
text="Enviar email"
width="100%"
onClick={sendRecoveryMail}
style={{ marginTop: "20px" }}
type="submit"
/>
)}
{recoveryCode && (
<Button
name="btnLogin"
text="Cambiar clave"
width="100%"
onClick={recoveryAccount}
style={{ marginTop: "20px" }}
type="submit"
/>
)}
{!verification && !recovery && !recoveryCode && (
<Button
name="btnLogin"
text="Ingresar"
width="100%"
onClick={iniciarSesion}
style={{ marginTop: "20px" }}
type="submit"
/>
)}
{!verification && !recovery && !recoveryCode && (
<div> <div>
<div <div
style={{ style={{
@@ -446,6 +477,105 @@ export default function Login(props: LoginProps) {
<ButtonGoogle termsReaded={checkReadTerms} /> <ButtonGoogle termsReaded={checkReadTerms} />
</div> </div>
)} )}
{(!verification && !recovery && !recoveryCode
? loginMethod === "password"
: true) && (
<>
<Textbox
name="name"
placeholder="Email"
type="text"
value={email}
width="100%"
onChange={(e) => {
setEmail(e.target.value);
}}
onKeyUp={(e) => {
if (!verification && !recovery && !recoveryCode) {
if (e.key === "Enter") {
document.getElementById("password")?.focus();
}
}
}}
/>
{!recovery && (
<Textbox
name="password"
placeholder="Clave"
type="password"
value={password}
width="100%"
onChange={(e) => {
setPassword(e.target.value);
}}
onKeyUp={(e) => {
if (!verification && !recovery && !recoveryCode) {
if (e.key === "Enter") {
iniciarSesion();
}
}
}}
/>
)}
{(verification || recoveryCode) && (
<Textbox
placeholder="Código de verificaion"
type="text"
value={verificationCode}
width="100%"
onChange={(e) => {
setVerificationCode(e.target.value);
}}
/>
)}
{verification && (
<Button
name="btnLogin"
text="Verificar"
width="100%"
onClick={verificateLogin}
style={{ marginTop: "20px" }}
type="submit"
/>
)}
{recovery && (
<Button
name="btnLogin"
text="Enviar email"
width="100%"
onClick={sendRecoveryMail}
style={{ marginTop: "20px" }}
type="submit"
/>
)}
{recoveryCode && (
<Button
name="btnLogin"
text="Cambiar clave"
width="100%"
onClick={recoveryAccount}
style={{ marginTop: "20px" }}
type="submit"
/>
)}
{!verification && !recovery && !recoveryCode && (
<Button
name="btnLogin"
text="Ingresar"
width="100%"
onClick={iniciarSesion}
style={{ marginTop: "20px" }}
type="submit"
/>
)}
</>
)}
{!recoveryCode && ( {!recoveryCode && (
<p style={{ marginTop: "20px" }}> <p style={{ marginTop: "20px" }}>
No tienes una cuenta?&nbsp; No tienes una cuenta?&nbsp;
+206 -80
View File
@@ -30,6 +30,7 @@ export default function RegisterPage() {
const [areaCode, setAreaCode] = useState(""); const [areaCode, setAreaCode] = useState("");
const [phone, setPhone] = useState(""); const [phone, setPhone] = useState("");
const [checkReadTerms, setCheckReadTerms] = useState(false); const [checkReadTerms, setCheckReadTerms] = useState(false);
const [registerMethod, setRegisterMethod] = useState<"google" | "manual">("google");
const registerUser = () => { const registerUser = () => {
const validationPhoneResult = validatePhone(areaCode, phone); const validationPhoneResult = validatePhone(areaCode, phone);
@@ -100,91 +101,216 @@ export default function RegisterPage() {
<h1 className="homeTitleHeader"> <h1 className="homeTitleHeader">
Registrate Gratis Registrate Gratis
</h1> </h1>
<Textbox
placeholder="Email"
type="text"
value={email}
width="100%"
onChange={(e) => {
setEmail(e.target.value);
}}
/>
<Textbox
placeholder="Clave"
type="password"
value={password}
width="100%"
onChange={(e) => {
setPassword(e.target.value);
}}
/>
<Textbox
placeholder="Nombre"
type="text"
value={firstName}
width="100%"
onChange={(e) => {
setFirstName(e.target.value);
}}
/>
<Textbox
placeholder="Apellido"
type="text"
value={lastName}
width="100%"
onChange={(e) => {
setLastName(e.target.value);
}}
/>
<TextPhone
label="Teléfono"
width="100%"
areaCode={areaCode}
number={phone}
onChangeArea={(
e: React.ChangeEvent<HTMLInputElement>
) => {
setAreaCode(e.target.value);
}}
onChangePhone={(
e: React.ChangeEvent<HTMLInputElement>
) => {
setPhone(e.target.value);
}}
/>
<div <div
style={{ style={{
display: "flex", display: "grid",
flexDirection: "row", gap: "10px",
alignItems: "flex-start", marginBottom: "24px",
justifyContent: "flex-start", textAlign: "left",
}} }}
> >
<Checkbox <p
checked={checkReadTerms} style={{
onClick={() => margin: 0,
setCheckReadTerms(!checkReadTerms) color: "#777777",
} fontSize: "14px",
/> textAlign: "center",
<div style={{ marginTop: "8px" }}> }}
Declaro que acepto los siguientes&nbsp; >
<Link href="/landing/terms"> Elegí cómo querés crear tu cuenta
Términos y condiciones </p>
</Link>{" "} <button
y{" "} type="button"
<Link href="/landing/privacy"> onClick={() => setRegisterMethod("google")}
Políticas de privacidad style={{
</Link> border:
</div> registerMethod === "google"
? "2px solid var(--wine-dark)"
: "1px solid #e1e1e1",
borderRadius: "14px",
background:
registerMethod === "google"
? "rgba(111, 16, 50, 0.08)"
: "#ffffff",
color:
registerMethod === "google"
? "var(--wine-dark)"
: "#3f3f3f",
cursor: "pointer",
fontWeight: registerMethod === "google" ? 700 : 500,
padding: "14px 16px",
textAlign: "left",
boxShadow:
registerMethod === "google"
? "0 8px 18px rgba(111, 16, 50, 0.12)"
: "none",
}}
>
<span
style={{
display: "flex",
justifyContent: "space-between",
alignItems: "center",
gap: "12px",
}}
>
<span>Continuar con Google</span>
<span
style={{
borderRadius: "999px",
background: "var(--wine-dark)",
color: "#ffffff",
fontSize: "11px",
fontWeight: 700,
padding: "4px 8px",
}}
>
Recomendado
</span>
</span>
<span
style={{
display: "block",
marginTop: "4px",
color: "#777777",
fontSize: "13px",
fontWeight: 400,
}}
>
Creá o ingresá a tu cuenta sin completar el formulario.
</span>
</button>
<button
type="button"
onClick={() => setRegisterMethod("manual")}
style={{
border:
registerMethod === "manual"
? "2px solid var(--wine-dark)"
: "1px solid #e1e1e1",
borderRadius: "14px",
background:
registerMethod === "manual"
? "rgba(111, 16, 50, 0.08)"
: "#ffffff",
color:
registerMethod === "manual"
? "var(--wine-dark)"
: "#3f3f3f",
cursor: "pointer",
fontWeight: registerMethod === "manual" ? 700 : 500,
padding: "14px 16px",
textAlign: "left",
boxShadow:
registerMethod === "manual"
? "0 8px 18px rgba(111, 16, 50, 0.12)"
: "none",
}}
>
<span>Registrarme con email</span>
<span
style={{
display: "block",
marginTop: "4px",
color: "#777777",
fontSize: "13px",
fontWeight: 400,
}}
>
Completá tus datos y validá tu cuenta por correo.
</span>
</button>
</div> </div>
<Button
name="btnLogin" {registerMethod === "google" && (
text="Registrarme" <Button
width="100%" name="btnSignupGoogle"
onClick={registerUser} text="Ir a continuar con Google"
style={{ marginTop: "20px" }} width="100%"
type="submit" onClick={() => goTo("/landing/login")}
/> style={{ marginTop: "20px" }}
type="button"
/>
)}
{registerMethod === "manual" && (
<>
<Textbox
placeholder="Email"
type="text"
value={email}
width="100%"
onChange={(e) => {
setEmail(e.target.value);
}}
/>
<Textbox
placeholder="Clave"
type="password"
value={password}
width="100%"
onChange={(e) => {
setPassword(e.target.value);
}}
/>
<Textbox
placeholder="Nombre"
type="text"
value={firstName}
width="100%"
onChange={(e) => {
setFirstName(e.target.value);
}}
/>
<Textbox
placeholder="Apellido"
type="text"
value={lastName}
width="100%"
onChange={(e) => {
setLastName(e.target.value);
}}
/>
<TextPhone
label="Teléfono"
width="100%"
areaCode={areaCode}
number={phone}
onChangeArea={(e: React.ChangeEvent<HTMLInputElement>) => {
setAreaCode(e.target.value);
}}
onChangePhone={(e: React.ChangeEvent<HTMLInputElement>) => {
setPhone(e.target.value);
}}
/>
<div
style={{
display: "flex",
flexDirection: "row",
alignItems: "flex-start",
justifyContent: "flex-start",
}}
>
<Checkbox
checked={checkReadTerms}
onClick={() => setCheckReadTerms(!checkReadTerms)}
/>
<div style={{ marginTop: "8px" }}>
Declaro que acepto los siguientes&nbsp;
<Link href="/landing/terms">Términos y condiciones</Link>{" "}
y <Link href="/landing/privacy">Políticas de privacidad</Link>
</div>
</div>
<Button
name="btnLogin"
text="Registrarme"
width="100%"
onClick={registerUser}
style={{ marginTop: "20px" }}
type="submit"
/>
</>
)}
<div style={{ marginTop: "10px" }}> <div style={{ marginTop: "10px" }}>
Ya tengo una cuenta!&nbsp; Ya tengo una cuenta!&nbsp;
<Link href="/landing/login"> <Link href="/landing/login">