contentoh-components-library 21.0.37 → 21.0.40

package/dist/components/molecules/VerificationCodeResetPasswordLogin/index.js

@@ -7,6 +7,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.VerificationCodeResetPasswordLogin = void 0;
 
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/asyncToGenerator"));
+
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 
 var _styles = require("./styles");
@@ -29,18 +33,92 @@ var _utils = require("./utils");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-var VerificationCodeResetPasswordLogin = function VerificationCodeResetPasswordLogin() {
+var VerificationCodeResetPasswordLogin = function VerificationCodeResetPasswordLogin(props) {
   var _useState = (0, _react.useState)(false),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      emptyVerificationCode = _useState2[0],
-      setEmptyVerificationCode = _useState2[1];
+      resend = _useState2[0],
+      setResend = _useState2[1];
 
-  var _useState3 = (0, _react.useState)(),
+  var _useState3 = (0, _react.useState)(""),
       _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      inputCodeVerificationAll = _useState4[0],
-      setInputCodeVerificationAll = _useState4[1];
+      awsError = _useState4[0],
+      setAwsError = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(false),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      emptyVerificationCode = _useState6[0],
+      setEmptyVerificationCode = _useState6[1];
+
+  var _useState7 = (0, _react.useState)(),
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      inputCodeVerificationAll = _useState8[0],
+      setInputCodeVerificationAll = _useState8[1];
 
   var inputPositions = [1, 2, 3, 4, 5, 6];
+  (0, _react.useEffect)(function () {
+    props.confirmationError !== "" && setEmptyVerificationCode(false);
+  }, [props.confirmationError]);
+
+  var checkCode = function checkCode(e) {
+    var valid = true;
+    e.preventDefault();
+    var code = "";
+
+    if (awsError === "" && !emptyVerificationCode) {
+      inputPositions.map(function (position) {
+        return code = code + document.querySelector("#verificationCodeInput".concat(position)).value;
+      });
+
+      if (sessionStorage.getItem("resetError")) {
+        JSON.parse(sessionStorage.getItem("confirmationCode")) === code && (valid = false);
+      }
+
+      sessionStorage.setItem("confirmationCode", JSON.stringify(code));
+      setEmptyVerificationCode(false);
+      valid && !sessionStorage.getItem("resetPasswordProcess") && props.setPaso(6);
+      valid && sessionStorage.getItem("resetPasswordProcess") && props.setPaso(8);
+    }
+  };
+
+  var validateResend = /*#__PURE__*/function () {
+    var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(e) {
+      return _regenerator.default.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              e.preventDefault(); //const email = JSON.parse(sessionStorage.getItem("email"));
+
+              _context.prev = 1;
+              _context.next = 4;
+              return props.Auth.forgotPassword(email);
+
+            case 4:
+              sessionStorage.setItem("email", JSON.stringify(email));
+              sessionStorage.setItem("resetPasswordProcess", JSON.stringify("true"));
+              props.setPaso(5);
+              setResend(true);
+              _context.next = 14;
+              break;
+
+            case 10:
+              _context.prev = 10;
+              _context.t0 = _context["catch"](1);
+              setAwsError(_context.t0.code);
+              console.log(_context.t0.message);
+
+            case 14:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee, null, [[1, 10]]);
+    }));
+
+    return function validateResend(_x) {
+      return _ref.apply(this, arguments);
+    };
+  }();
+
   (0, _react.useEffect)(function () {
     setInputCodeVerificationAll(document.querySelectorAll("[id^='verificationCodeInput']"));
   }, []);
@@ -53,8 +131,11 @@ var VerificationCodeResetPasswordLogin = function VerificationCodeResetPasswordL
     })
   }, "2"), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: "user",
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
-      text: "Ingresa el código de verificación enviado a:",
+    children: [sessionStorage.getItem("email") && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
+      text: "Ingrese el c\xF3digo de verificaci\xF3n enviado a: ".concat(JSON.parse(sessionStorage.getItem("email"))),
+      headerType: "input-name-header"
+    }), !sessionStorage.getItem("email") && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
+      text: "Ingrese c\xF3digo de verificaci\xF3n enviado a: ".concat(JSON.parse(sessionStorage.getItem("nuevoRegistro")).email),
       headerType: "input-name-header"
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "verification-code",
@@ -71,10 +152,30 @@ var VerificationCodeResetPasswordLogin = function VerificationCodeResetPasswordL
       })
     }), emptyVerificationCode && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
       children: "Ingrese su c\xF3digo de verificaci\xF3n"
+    }), sessionStorage.getItem("resetError") && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+      children: "C\xF3digo de verifiaci\xF3n incorrecto"
+    }), props.confirmationError === "LimitExceededException" && !emptyVerificationCode && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+      children: "Haz realizado demasiados intentos, intentalo m\xE1s tarde"
+    }), props.confirmationError === "CodeMismatchException" && !emptyVerificationCode && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+      children: "C\xF3digo de verificaci\xF3n incorrecto"
+    }), props.confirmationError === "ExpiredCodeException" && !emptyVerificationCode && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+      children: "El c\xF3digo ingresado est\xE1 expirado"
+    }), props.confirmationError === "InternalErrorException" && !emptyVerificationCode && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+      children: "Algo sali\xF3 mal, porfavor vuelva a intentarlo"
+    }), awsError === "LimitExceededException" && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+      children: "Haz realizado demasiados intentos, intentalo m\xE1s tarde"
+    }), awsError === "InternalErrorException" && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+      children: "Algo sali\xF3 mal, porfavor vuelva a intentarlo"
+    }), resend && awsError === "" && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+      className: "resendTrue",
+      children: "Se reenvi\xF3 el c\xF3digo de verificaci\xF3n correctamente"
     })]
   }, "3"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: "resend-code",
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+      onClick: function onClick(e) {
+        return validateResend(e);
+      },
       children: "Reenviar c\xF3digo de verificaci\xF3n"
     })
   }, "4"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -83,12 +184,16 @@ var VerificationCodeResetPasswordLogin = function VerificationCodeResetPasswordL
       buttonType: "general-default-button",
       label: "Enviar",
       onClick: function onClick(e) {
-        return (0, _utils.validate)(inputCodeVerificationAll, setEmptyVerificationCode);
+        (0, _utils.validate)(inputCodeVerificationAll, setEmptyVerificationCode);
+        checkCode(e);
       }
     })
   }, "5"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: "reset-password",
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+      onClick: function onClick() {
+        return props.setPaso(10);
+      },
       children: "Regresar..."
     })
   }, "6")];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "contentoh-components-library",
-  "version": "21.0.37",
+  "version": "21.0.40",
   "dependencies": {
     "@aws-amplify/auth": "^4.5.3",
     "@aws-amplify/datastore": "^3.11.0",

package/src/components/atoms/GeneralInput/index.js

@@ -14,6 +14,9 @@ export const GeneralInput = ({
   inputsArray,
   maxLength,
   inputSize,
+  onChange,
+  required,
+  defaultValue,
 }) => {
   const [textValue, setTextValue] = useState({ value: inputValue ?? "" });
 
@@ -42,6 +45,9 @@ export const GeneralInput = ({
           value={textValue.value}
           onInput={(e) => onHandleChange(e)}
           maxLength={maxLength && maxLength}
+          onChange={onChange}
+          required={required}
+          defaultValue={defaultValue}
         />
       ) : (
         <textarea

package/src/components/atoms/GradientPanel/styles.js

@@ -37,6 +37,7 @@ export const Container = styled.div`
   }
 
   &.home-login {
+    width: 100%;
     .credenciales {
       & + * {
         margin-top: 30px;

package/src/components/atoms/Loading/index.js

@@ -1,8 +1,10 @@
 import { Container } from "./styles";
+import { LogoImage } from "../LogoImage";
 
 export const Loading = () => {
   return (
     <Container >
+      <LogoImage/>
       <div className="loader">
         <span className="first"></span>
         <span className="second"></span>

package/src/components/atoms/Loading/styles.js

@@ -1,17 +1,26 @@
 import styled from "styled-components";
 
 export const Container = styled.div`
-  display: flex;
   justify-content: center;
   align-items: center;
-  height: 100%;
-  width: 100%;
+  height: 100vh;
+  width: 50%;
+  position: relative;
+  img {
+    width: 80%;
+    position: absolute;
+    bottom: 55%;
+    left: 10%;
+  }
   .loader {
     display: flex;
     justify-content: center;
     align-items: center;
-    height: 100%;
-    width: 100%;
+    height: 10%;
+    width: 50%;
+    position: absolute;
+    bottom: 45%;
+    left:25%;
     span {
       display: inline-block;
       border-radius: 100%;

package/src/components/molecules/EmailResetPasswordLogin/index.js

@@ -6,13 +6,13 @@ import { ScreenHeader } from "../../atoms/ScreenHeader";
 import { GlobalColors, FontFamily } from "../../../global-files/variables";
 import { TagAndInput } from "../../molecules/TagAndInput";
 import { Button } from "../../atoms/GeneralButton";
-import { Auth } from "aws-amplify";
 
 export const EmailResetPasswordLogin = (props) => {
   const [emptyEmail, setEmptyEmail] = useState(false);
   const [invalidEmail, setInvalidEmail] = useState(false);
   const [showErrors, setShowErrors] = useState(false);
   const [awsError, setAwsError] = useState("");
+
   const validate = async (e) => {
     let valid = true;
     setShowErrors(true);
@@ -29,7 +29,7 @@ export const EmailResetPasswordLogin = (props) => {
 
     if (valid) {
       try {
-        await Auth.forgotPassword(email);
+        await props.Auth.forgotPassword(email);
         sessionStorage.setItem("email", JSON.stringify(email));
         sessionStorage.setItem("resetPasswordProcess", JSON.stringify("true"));
         props.setPaso(5);

package/src/components/molecules/LoginPasswordStrength/index.js

@@ -1,15 +1,19 @@
 import { Container, ItemPasswordStrength, Password } from "./styles";
 import { useEffect, useState } from "react";
 import { TagAndInput } from "../TagAndInput";
+
 export const LoginPasswordStrength = ({
   emptyPassword,
   emptyConfirmPassword,
   matchPasswords,
+  onChange,
+  required,
 }) => {
   const [passwordStrength, setPasswordStrength] = useState(0);
   let upperCaseLetters = /[A-Z]/g;
   let numbers = /[0-9]/g;
   let specialChar = /[‘!’,‘@’,‘#’,‘$’,‘%’,‘^’,‘&’,‘*’]/g;
+
   useEffect(() => {
     const inputValue = document.getElementById("newPasswordInput");
     inputValue.addEventListener(
@@ -20,6 +24,7 @@ export const LoginPasswordStrength = ({
       false
     );
   }, []);
+
   const updateInfo = (e, newValue) => {
     switch (e.target.id) {
       case "newPasswordInput":
@@ -41,6 +46,7 @@ export const LoginPasswordStrength = ({
         return;
     }
   };
+
   return (
     <Container>
       <div className="user" key={"3"}>
@@ -48,6 +54,8 @@ export const LoginPasswordStrength = ({
           inputType={"password"}
           inputId={"newPasswordInput"}
           label={"Ingrese su nueva contraseña"}
+          required={required}
+          onChange={onChange}
         />
         {emptyPassword && (
           <label>La contraseña debe ser minimo de 8 caracteres</label>
@@ -76,6 +84,8 @@ export const LoginPasswordStrength = ({
           inputType={"password"}
           inputId={"confirmPasswordInput"}
           label={"Confirme la nueva contraseña"}
+          required={required}
+          onChange={onChange}
         />
         {emptyConfirmPassword && !emptyPassword && (
           <label>Confirme la contraseña</label>
@@ -86,4 +96,4 @@ export const LoginPasswordStrength = ({
       </div>
     </Container>
   );
-};
+};

package/src/components/molecules/RegistrationFirstStep/index.js

@@ -14,11 +14,10 @@ export const RegistrationFirstStep = (props) => {
   const [emptyEmail, setEmptyEmail] = useState(false);
   const [emptyJob, setEmptyJob] = useState(false);
   const [emptyPhone, setEmptyPhone] = useState(false);
-  const [emptyCountry, setEmptyCountry] = useState(true);
-  const [showErrors, setShowErrors] = useState(false);
-  const [regError, setRegError] = useState(false);
+  const [emptyCountry, setEmptyCountry] = useState(false);
+  const [invalidEmail, setInvalidEmail] = useState(false);
   const [phoneFormatError, setPhoneFormatError] = useState(false);
-  const [emailFormatError, setEmailFormatError] = useState(false);
+  const [regError, setRegError] = useState(false);
 
   useEffect(() => {
     JSON.parse(sessionStorage.getItem("nuevoRegistro")).name === "" &&
@@ -32,97 +31,71 @@ export const RegistrationFirstStep = (props) => {
       setEmptyCountry(false);
       setEmptyPhone(false);
     }
-
     sessionStorage.getItem("resetPasswordProcess") &&
       sessionStorage.getItem("resetPasswordProcess");
   }, []);
 
-  let paisesEsp = [
-    "Argentina",
-    "Colombia",
-    "Costa Rica",
-    "Ecuador",
-    "El Salvador",
-    "Honduras",
-    "México",
-    "Panamá",
-    "Perú",
-  ];
-  const updateInfo = (e, newValue) => {
-    let nuevoUsuario = JSON.parse(sessionStorage.getItem("nuevoRegistro"));
-    switch (e.target.id) {
-      case "nameInput":
-        nuevoUsuario.name = newValue;
-        newValue === "" ? setEmptyName(true) : setEmptyName(false);
-        break;
-      case "lastNameInput":
-        nuevoUsuario.lastName = newValue;
-        newValue === "" ? setEmptyLastName(true) : setEmptyLastName(false);
-        break;
-      case "emailInput":
-        nuevoUsuario.email = newValue;
-        newValue === "" ? setEmptyEmail(true) : setEmptyEmail(false);
-        if (
-          !/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/.test(
-            newValue
-          )
-        ) {
-          setEmailFormatError(true);
-        } else {
-          setEmailFormatError(false);
-        }
-        break;
-      case "jobInput":
-        nuevoUsuario.position = newValue;
-        newValue === "" ? setEmptyJob(true) : setEmptyJob(false);
-        break;
-      case "phoneInput":
-        Array.from(newValue).forEach((digit, i) => {
-          newValue.charCodeAt(i) < 48
-            ? setPhoneFormatError(true)
-            : setPhoneFormatError(false);
-          newValue.charCodeAt(i) > 57
-            ? setPhoneFormatError(true)
-            : setPhoneFormatError(false);
-        });
-        nuevoUsuario.phone = `${JSON.parse(
-          sessionStorage.getItem("countryCodeSelect")
-        )}${newValue}`;
-        newValue === "" ? setEmptyPhone(true) : setEmptyPhone(false);
-        break;
-      case "countrySelect":
-        nuevoUsuario.country = newValue;
-        newValue === "" || newValue === "Selecciona tu país"
-          ? setEmptyCountry(true)
-          : setEmptyCountry(false);
-        break;
-      case "countryCodeSelect":
-        sessionStorage.setItem("countryCode", JSON.stringify(newValue));
-        nuevoUsuario.phone = `${JSON.parse(
-          sessionStorage.getItem("countryCode")
-        )}${document.querySelector("#phoneInput").value}`;
-        break;
-      default:
-        return;
-    }
-    sessionStorage.setItem("nuevoRegistro", JSON.stringify(nuevoUsuario));
-  };
-
   const validateForm = (evt) => {
     let valid = true;
     evt.preventDefault();
-    setShowErrors(true);
-    emptyName && (valid = false);
-    emptyLastName && (valid = false);
-    emptyEmail && (valid = false);
-    emptyJob && (valid = false);
-    emptyPhone && (valid = false);
-    emptyCountry && (valid = false);
-    phoneFormatError && (valid = false);
-    emailFormatError && (valid = false);
-    !regError && valid && props.setPaso((paso) => props.paso + 1);
-    regError && valid && props.setPaso(4);
+    const name = document.querySelector("#nameInput").value;
+    const lastName = document.querySelector("#lastNameInput").value;
+    const email = document.querySelector("#emailInput").value;
+    const job = document.querySelector("#jobInput").value;
+    const phone = document.querySelector("#phoneInput").value;
+    const country = document.querySelector("#countrySelect").value;
+    const countryCode = document.querySelector("#countryCodeSelect").value;
+    name === "" ? setEmptyName(true) : setEmptyName(false);
+    lastName === "" ? setEmptyLastName(true) : setEmptyLastName(false);
+    email === "" ? setEmptyEmail(true) : setEmptyEmail(false);
+    job === "" ? setEmptyJob(true) : setEmptyJob(false);
+    phone === "" ? setEmptyPhone(true) : setEmptyPhone(false);
+    !/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/.test(
+      email
+    )
+      ? setInvalidEmail(true)
+      : setInvalidEmail(false);
+    country === "" || country === "+ tu país"
+      ? setEmptyCountry(true)
+      : setEmptyCountry(false);
+    Array.from(phone).forEach((digit, i) => {
+      phone.charCodeAt(i) < 48
+        ? setPhoneFormatError(true)
+        : setPhoneFormatError(false);
+      phone.charCodeAt(i) > 57
+        ? setPhoneFormatError(true)
+        : setPhoneFormatError(false);
+    });
+    let nuevoUsuario = JSON.parse(sessionStorage.getItem("nuevoRegistro"));
+    if (
+      !emptyName ||
+      !emptyLastName ||
+      !emptyEmail ||
+      !emptyJob ||
+      !emptyPhone ||
+      !emptyCountry ||
+      !invalidEmail ||
+      !phoneFormatError
+    ) {
+      sessionStorage.setItem("countryCode", JSON.stringify(countryCode));
+      nuevoUsuario.name = name;
+      nuevoUsuario.lastName = lastName;
+      nuevoUsuario.email = email;
+      nuevoUsuario.position = job;
+      nuevoUsuario.phone = `${JSON.parse(
+        sessionStorage.getItem("countryCode")
+      )}${phone}`;
+      nuevoUsuario.country = country;
+      sessionStorage.setItem("nuevoRegistro", JSON.stringify(nuevoUsuario));
+      !regError && valid && props.setPaso((paso) => props.paso + 1);
+      regError && valid && props.setPaso(4);
+      console.log("rediring");
+    } else {
+      valid = false;
+      console.log("code");
+    }
   };
+
   const loginRight = [
     <LogoImage key="1" />,
     <div className="credenciales" key={"2"}>
@@ -139,17 +112,14 @@ export const RegistrationFirstStep = (props) => {
           inputId={"nameInput"}
           label={"Nombre"}
           inputPlaceHolder={"Nombre"}
-          defaultValue={
-            JSON.parse(sessionStorage.getItem("nuevoRegistro")).name
-          }
-          required
-          onInput={(e) => updateInfo(e, e.target.value)}
+          required={"required"}
         />
         <TagAndInput
           inputType={"text"}
           inputId={"lastNameInput"}
           label={"Apellido"}
           inputPlaceHolder={"Apellido"}
+          required={"required"}
         />
       </div>
       {emptyName && <label>Ingrese su nombre</label>}
@@ -159,14 +129,21 @@ export const RegistrationFirstStep = (props) => {
         inputId={"emailInput"}
         label={"Correo electrónico"}
         inputPlaceHolder={"username@contentoh.com"}
+        required={"required"}
       />
-      {emptyEmail && <label>Ingrese su correo</label>}
+      {regError &&
+        JSON.parse(sessionStorage.getItem("registrationError")) ===
+          "emailExists" && (
+          <label>Ya existe una cuenta asociada a este correo</label>
+        )}
+      {emptyEmail && <label>Ingrese su email</label>}
       {invalidEmail && !emptyEmail && <label>Ingrese un correo válido</label>}
       <TagAndInput
         inputType={"text"}
         inputId={"jobInput"}
         label={"Puesto laboral"}
         inputPlaceHolder={"Puesto dentro de la empresa"}
+        required={"required"}
       />
       {emptyJob && <label>Ingrese su puesto</label>}
       <ScreenHeader text={"Teléfono"} headerType={"input-name-header"} />
@@ -186,9 +163,16 @@ export const RegistrationFirstStep = (props) => {
           inputId={"phoneInput"}
           inputType={"text"}
           inputPlaceholder={"Teléfono"}
+          required={"required"}
         />
       </div>
+      {regError &&
+        JSON.parse(sessionStorage.getItem("registrationError")) ===
+          "phoneFormatError" && <label>Introduzca un número válido</label>}
       {emptyPhone && <label>Ingrese su número de teléfono</label>}
+      {phoneFormatError && (
+        <label>Introduzca un número valido ( Solo numeros )</label>
+      )}
       <ScreenHeader text={"País"} headerType={"input-name-header"} />
       <select name="select" className="country-options" id="countrySelect">
         <option value="value1" selected>
@@ -209,7 +193,7 @@ export const RegistrationFirstStep = (props) => {
       <Button
         buttonType={"general-default-button"}
         label={"Enviar"}
-        onClick={(e) => validate(e)}
+        onClick={(e) => validateForm(e)}
       />
     </div>,
     <div className="progress-bar" key="5">
@@ -223,20 +207,18 @@ export const RegistrationFirstStep = (props) => {
       key="6"
     />,
     <div className="new-login" key="7">
-      <p className="pre-registro">
+      <p className="pre-registro" onClick={() => props.setPaso(7)}>
         ¿Ya tienes una cuenta?<span> Inicia Sesión</span>
       </p>
     </div>,
   ];
   return (
     <Container>
-      <div>
-        <GradientPanel
-          componentsArray={loginRight}
-          panelType={"home-login"}
-          panelColor={GlobalColors.white}
-        />
-      </div>
+      <GradientPanel
+        componentsArray={loginRight}
+        panelType={"home-login"}
+        panelColor={GlobalColors.white}
+      />
     </Container>
   );
-};
+};

package/src/components/molecules/RegistrationFirstStep/styles.js

@@ -75,7 +75,10 @@ export const Container = styled.div`
     .new-login {
       & + * {
         margin-top: 20px;
+        p {
+          cursor: pointer;
+        }
       }
     }
   }
-`;
+`;