From 18fa523fbe967dd553cdfaeb45bcf10aa7ff07de Mon Sep 17 00:00:00 2001
From: Horacio Daniel Ros <horaciodrs@gmail.com>
Date: Wed, 19 Aug 2026 11:58:05 -0300
Subject: [PATCH] =?UTF-8?q?feat:=20agregar=20opciones=20de=20inicio=20de?=
 =?UTF-8?q?=20sesi=C3=B3n=20y=20registro=20con=20Google=20y=20manual?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/app/components/Home/Login/Login.tsx   | 318 ++++++++++++------
 txclient/src/app/landing/signup/page.tsx      | 286 +++++++++++-----
 2 files changed, 430 insertions(+), 174 deletions(-)

diff --git a/txclient/src/app/components/Home/Login/Login.tsx b/txclient/src/app/components/Home/Login/Login.tsx
index 9858ad5..12110ab 100644
--- a/txclient/src/app/components/Home/Login/Login.tsx
+++ b/txclient/src/app/components/Home/Login/Login.tsx
@@ -44,6 +44,7 @@ export default function Login(props: LoginProps) {
     const [password, setPassword] = useState("");
     const [verificationCode, setVerificationCode] = useState("");
     const [checkReadTerms, setCheckReadTerms] = useState(false);
+    const [loginMethod, setLoginMethod] = useState<"google" | "password">("google");
 
     const clientId = process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID || "";
 
@@ -323,102 +324,132 @@ export default function Login(props: LoginProps) {
                                     </>
                                 )}
                                 {!verification && !recovery && !recoveryCode && (
-                                    <h1 className="homeTitleHeader">Ingresar</h1>
-                                )}
-                                <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();
-                                                }
-                                            }
-                                        }}
-                                    />
+                                    <>
+                                        <h1 className="homeTitleHeader">Ingresar</h1>
+                                        <div
+                                            style={{
+                                                display: "grid",
+                                                gap: "10px",
+                                                marginBottom: "24px",
+                                                textAlign: "left",
+                                            }}
+                                        >
+                                            <p
+                                                style={{
+                                                    margin: 0,
+                                                    color: "#777777",
+                                                    fontSize: "14px",
+                                                    textAlign: "center",
+                                                }}
+                                            >
+                                                Elegí cómo querés acceder
+                                            </p>
+                                            <button
+                                                type="button"
+                                                onClick={() => setLoginMethod("google")}
+                                                style={{
+                                                    border:
+                                                        loginMethod === "google"
+                                                            ? "2px solid var(--wine-dark)"
+                                                            : "1px solid #e1e1e1",
+                                                    borderRadius: "14px",
+                                                    background:
+                                                        loginMethod === "google"
+                                                            ? "rgba(111, 16, 50, 0.08)"
+                                                            : "#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) && (
-                                    <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 && (
+                                {!verification && !recovery && !recoveryCode && loginMethod === "google" && (
                                     <div>
                                         <div
                                             style={{
@@ -446,6 +477,105 @@ export default function Login(props: LoginProps) {
                                         <ButtonGoogle termsReaded={checkReadTerms} />
                                     </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 && (
                                     <p style={{ marginTop: "20px" }}>
                                         No tienes una cuenta?&nbsp;
diff --git a/txclient/src/app/landing/signup/page.tsx b/txclient/src/app/landing/signup/page.tsx
index 2cd33ec..9a5c892 100644
--- a/txclient/src/app/landing/signup/page.tsx
+++ b/txclient/src/app/landing/signup/page.tsx
@@ -30,6 +30,7 @@ export default function RegisterPage() {
     const [areaCode, setAreaCode] = useState("");
     const [phone, setPhone] = useState("");
     const [checkReadTerms, setCheckReadTerms] = useState(false);
+    const [registerMethod, setRegisterMethod] = useState<"google" | "manual">("google");
 
     const registerUser = () => {
         const validationPhoneResult = validatePhone(areaCode, phone);
@@ -100,91 +101,216 @@ export default function RegisterPage() {
                             <h1 className="homeTitleHeader">
                                 Registrate Gratis
                             </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
                                 style={{
-                                    display: "flex",
-                                    flexDirection: "row",
-                                    alignItems: "flex-start",
-                                    justifyContent: "flex-start",
+                                    display: "grid",
+                                    gap: "10px",
+                                    marginBottom: "24px",
+                                    textAlign: "left",
                                 }}
                             >
-                                <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>
+                                <p
+                                    style={{
+                                        margin: 0,
+                                        color: "#777777",
+                                        fontSize: "14px",
+                                        textAlign: "center",
+                                    }}
+                                >
+                                    Elegí cómo querés crear tu cuenta
+                                </p>
+                                <button
+                                    type="button"
+                                    onClick={() => setRegisterMethod("google")}
+                                    style={{
+                                        border:
+                                            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>
-                            <Button
-                                name="btnLogin"
-                                text="Registrarme"
-                                width="100%"
-                                onClick={registerUser}
-                                style={{ marginTop: "20px" }}
-                                type="submit"
-                            />
+
+                            {registerMethod === "google" && (
+                                <Button
+                                    name="btnSignupGoogle"
+                                    text="Ir a continuar con Google"
+                                    width="100%"
+                                    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" }}>
                                 Ya tengo una cuenta!&nbsp;
                                 <Link href="/landing/login">