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 [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,8 +324,164 @@ export default function Login(props: LoginProps) {
|
|||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
{!verification && !recovery && !recoveryCode && (
|
{!verification && !recovery && !recoveryCode && (
|
||||||
|
<>
|
||||||
<h1 className="homeTitleHeader">Ingresar</h1>
|
<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 && !recovery && !recoveryCode && loginMethod === "google" && (
|
||||||
|
<div>
|
||||||
|
<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>
|
||||||
|
<ButtonGoogle termsReaded={checkReadTerms} />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{(!verification && !recovery && !recoveryCode
|
||||||
|
? loginMethod === "password"
|
||||||
|
: true) && (
|
||||||
|
<>
|
||||||
<Textbox
|
<Textbox
|
||||||
name="name"
|
name="name"
|
||||||
placeholder="Email"
|
placeholder="Email"
|
||||||
@@ -417,34 +574,7 @@ export default function Login(props: LoginProps) {
|
|||||||
type="submit"
|
type="submit"
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
</>
|
||||||
{!verification && !recovery && !recoveryCode && (
|
|
||||||
<div>
|
|
||||||
<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>
|
|
||||||
<ButtonGoogle termsReaded={checkReadTerms} />
|
|
||||||
</div>
|
|
||||||
)}
|
)}
|
||||||
{!recoveryCode && (
|
{!recoveryCode && (
|
||||||
<p style={{ marginTop: "20px" }}>
|
<p style={{ marginTop: "20px" }}>
|
||||||
|
|||||||
@@ -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,6 +101,140 @@ export default function RegisterPage() {
|
|||||||
<h1 className="homeTitleHeader">
|
<h1 className="homeTitleHeader">
|
||||||
Registrate Gratis
|
Registrate Gratis
|
||||||
</h1>
|
</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 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>
|
||||||
|
|
||||||
|
{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
|
<Textbox
|
||||||
placeholder="Email"
|
placeholder="Email"
|
||||||
type="text"
|
type="text"
|
||||||
@@ -141,14 +276,10 @@ export default function RegisterPage() {
|
|||||||
width="100%"
|
width="100%"
|
||||||
areaCode={areaCode}
|
areaCode={areaCode}
|
||||||
number={phone}
|
number={phone}
|
||||||
onChangeArea={(
|
onChangeArea={(e: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
e: React.ChangeEvent<HTMLInputElement>
|
|
||||||
) => {
|
|
||||||
setAreaCode(e.target.value);
|
setAreaCode(e.target.value);
|
||||||
}}
|
}}
|
||||||
onChangePhone={(
|
onChangePhone={(e: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
e: React.ChangeEvent<HTMLInputElement>
|
|
||||||
) => {
|
|
||||||
setPhone(e.target.value);
|
setPhone(e.target.value);
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
@@ -162,19 +293,12 @@ export default function RegisterPage() {
|
|||||||
>
|
>
|
||||||
<Checkbox
|
<Checkbox
|
||||||
checked={checkReadTerms}
|
checked={checkReadTerms}
|
||||||
onClick={() =>
|
onClick={() => setCheckReadTerms(!checkReadTerms)}
|
||||||
setCheckReadTerms(!checkReadTerms)
|
|
||||||
}
|
|
||||||
/>
|
/>
|
||||||
<div style={{ marginTop: "8px" }}>
|
<div style={{ marginTop: "8px" }}>
|
||||||
Declaro que acepto los siguientes
|
Declaro que acepto los siguientes
|
||||||
<Link href="/landing/terms">
|
<Link href="/landing/terms">Términos y condiciones</Link>{" "}
|
||||||
Términos y condiciones
|
y <Link href="/landing/privacy">Políticas de privacidad</Link>
|
||||||
</Link>{" "}
|
|
||||||
y{" "}
|
|
||||||
<Link href="/landing/privacy">
|
|
||||||
Políticas de privacidad
|
|
||||||
</Link>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<Button
|
<Button
|
||||||
@@ -185,6 +309,8 @@ export default function RegisterPage() {
|
|||||||
style={{ marginTop: "20px" }}
|
style={{ marginTop: "20px" }}
|
||||||
type="submit"
|
type="submit"
|
||||||
/>
|
/>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
<div style={{ marginTop: "10px" }}>
|
<div style={{ marginTop: "10px" }}>
|
||||||
Ya tengo una cuenta!
|
Ya tengo una cuenta!
|
||||||
<Link href="/landing/login">
|
<Link href="/landing/login">
|
||||||
|
|||||||
Reference in New Issue
Block a user