feat: agregar opciones de inicio de sesión y registro con Google y manual
This commit is contained in:
@@ -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?
|
||||
|
||||
@@ -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
|
||||
<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
|
||||
<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!
|
||||
<Link href="/landing/login">
|
||||
|
||||
Reference in New Issue
Block a user