[feat] Validações Sign Up

Signed-off-by: LoriaLawrenceZ <lorenzozimbresfilmmaker@gmail.com>
TeamXFive · Aug 27, 2024 · 40e9a51 · 40e9a51
1 parent fb7a082
commit 40e9a51
Show file tree

Hide file tree

Showing 5 changed files with 96 additions and 29 deletions.
diff --git a/src/App.css b/src/App.css
@@ -1,6 +1,5 @@
 /*-----===| App.jsx |===-----*/
 .page {
-    min-height: 200vh;
     width: 100%;
     display: flex;
     flex-direction: column;
@@ -46,12 +45,19 @@
     z-index: 900;
 }
 
-.header-logo {
+.header-title-container {
     height: calc(3vh + 30px);
     width: 100%;
     padding: 15px 0;
     filter: invert(0.75);
 }
+.header-title {
+    font-family: 'Syncopate', sans-serif;
+    font-size: 3vh;
+    padding: 0;
+    margin: 0;
+    line-height: auto;
+}
 
 .header-nav {
     height: 5vh;

diff --git a/src/App.jsx b/src/App.jsx
@@ -99,9 +99,9 @@ export function App() {
 
             <React.Fragment>
                 <header className={`page-header glass-effect ${scrollDirection === "down" && "hide-header"}`}>
-                    <figure className="header-logo">
-                        <img src="src/assets/icons/chat.svg" alt="Logo Header"/>
-                    </figure>
+                    <div className="header-title-container">
+                        <h1 className={`header-title`}>DEX</h1>
+                    </div>
 
                     <nav className="header-nav">
                         <div className="header-nav-links">

diff --git a/src/components/Account/AccountCard.css b/src/components/Account/AccountCard.css
@@ -76,17 +76,19 @@
     height: auto;
     width: 100%;
     display: flex;
-    flex-direction: column;
     align-items: start;
-    justify-content: center;
-    margin: 5px 0;
+    justify-content: flex-start;
+    flex-wrap: wrap;
+    margin: 5px 0 20px 0;
 }
 .account-card-form label {
     color: var(--medium-gray);
     transition: var(--all-500ms-custom);
 }
+.fs-user:focus-within label,
 .fs-email:focus-within label,
-.fs-password:focus-within label {
+.fs-password:focus-within label,
+.fs-confirm-password:focus-within label {
     color: var(--light-gray);
 }
 .account-card-form input {
@@ -130,7 +132,25 @@
 }
 
 /*-----===| ALERTS |===-----*/
-.account-card-allert {
+.account-card-error-alert {
+    border: solid 1px var(--medium-red);
+    background-color: rgba(var(--medium-red-rgb), 0.1);
+}
+.account-card-success-alert {
+    border: solid 1px var(--medium-green);
+    background-color: rgba(var(--medium-green-rgb), 0.1);
+}
+.account-card-error-alert , .account-card-success-alert {
+    border-radius: 5px;
+    padding: 3px 6px;
     position: absolute;
+    opacity: 0;
+    transform: translate(240%, 100%);
+    align-self: flex-start;
+    right: 0;
+    transition: var(--all-500ms-custom);
 }
-.hidden-card-alert {}
+.show-card-alert {
+    opacity: 1;
+    transform: translate(120%, 100%);
+}
diff --git a/src/components/Account/SignUp/SignUp.jsx b/src/components/Account/SignUp/SignUp.jsx
@@ -1,6 +1,6 @@
 import "../AccountCard.css";
 import useAccountContext from "../../../hook/useAccountContext.jsx";
-import {useState} from "react";
+import {useEffect, useState} from "react";
 
 function SignUp() {
 
@@ -10,20 +10,45 @@ function SignUp() {
     const [password, setPassword] = useState("");
     const [confirmPassword, setConfirmPassword] = useState("");
     // ALERTS //
+    const [isUserValid, setIsUserValid] = useState(true);
+    const [isEmailValid, setIsEmailValid] = useState(true);
     const [isPasswordMatch, setIsPasswordMatch] = useState(true);
+    const [isPasswordMatchOK, setIsPasswordMatchOK] = useState(false);
 
     const {
         setIsSignInVisible,
         setIsSignUpVisible
     } = useAccountContext();
 
-    const handleConfirmPassword = () => {
+    const handleUserValidation = () => {
+        setIsUserValid(user.length > 0);
+    }
+
+    const handleEmailValidation = () => {
+        const emailRegex = /^[a-z0-9.]+@[a-z0-9]+\.[a-z]+(\.[a-z]+)?$/i;
+        setIsEmailValid(emailRegex.test(email));
+    }
 
+    const handleConfirmPassword = () => {
+        setIsPasswordMatch((password === confirmPassword));
+        setIsPasswordMatchOK(false);
+    }
+    const handleConfirmPasswordOK = () => {
+        setIsPasswordMatchOK(password === confirmPassword && (password.trim() !== "" && confirmPassword.trim() !== ""));
     }
 
-    const handleSignUpSubmit = () => {}
+    const handleSignUpSubmit = (event) => {
+        if (user.trim() === "" || !isUserValid || !isEmailValid || !isPasswordMatchOK) {
+            event.preventDefault();
+        }
+
+        if (password.trim() === "" || confirmPassword.trim() === "") {
+            setIsPasswordMatch(false);
+        }
+    }
 
     const handleFazerLoginBtn = () => {
+        // Sumindo Sign Up e aparecendo Sign In
         setIsSignUpVisible(false);
         setIsSignInVisible(true);
     };
@@ -40,47 +65,55 @@ function SignUp() {
                         <fieldset className="fs-user">
                             <label htmlFor="user">Usuário</label>
                             <input
-                                type="text" name="user" id="user" placeholder="Usuário" required
+                                type="text" name="user" id="user" placeholder="Usuário"
                                 value={user}
                                 autoFocus={true}
                                 onChange={(event) => setUser(event.target.value)}
+                                onKeyUp={handleUserValidation}
                             />
+
+                            <span
+                                className={`account-card-error-alert glass-effect ${!isUserValid && "show-card-alert"}`}>Preencha corretamente!</span>
                         </fieldset>
 
                         <fieldset className="fs-email">
                             <label htmlFor="email">Email</label>
                             <input
-                                type="text" name="email" id="email" placeholder="Email" required
+                                type="text" name="email" id="email" placeholder="Email"
                                 value={email}
                                 onChange={(event) => setEmail(event.target.value)}
+                                onKeyUp={handleEmailValidation}
                             />
+
+                            <span className={`account-card-error-alert glass-effect ${!isEmailValid && "show-card-alert"}`}>Preencha o email corretamente!</span>
                         </fieldset>
 
                         <fieldset className="fs-password">
                             <label htmlFor="password">Senha</label>
                             <input
-                                type="password" name="password" id="password" placeholder="Senha" required
+                                type="password" name="password" id="password" placeholder="Senha"
                                 value={password}
                                 onChange={(event) => setPassword(event.target.value)}
+                                onKeyUp={handleConfirmPassword}
+                                onBlur={handleConfirmPasswordOK}
                             />
+
+                            <span className={`account-card-error-alert glass-effect ${!isPasswordMatch && "show-card-alert"}`}>As senhas não coincidem!</span>
+                            <span className={`account-card-success-alert glass-effect ${isPasswordMatchOK && "show-card-alert"}`}>As senhas coincidem!</span>
                         </fieldset>
 
                         <fieldset className="fs-confirm-password">
                             <label htmlFor="confirm-password">Confirmar senha</label>
                             <input
-                                type="password" name="confirm-password" id="confirm-password" placeholder="Confirmar senha" required
+                                type="password" name="confirm-password" id="confirm-password" placeholder="Confirmar senha"
                                 value={confirmPassword}
-                                onChange={(event) => {setConfirmPassword(event.target.value);}}
-                                onBlur={() => {
-                                    if (password !== confirmPassword) {
-                                        setIsPasswordMatch(false);
-                                    } else {
-                                        setIsPasswordMatch(true);
-                                    }
-                                }}
+                                onChange={(event) => setConfirmPassword(event.target.value)}
+                                onKeyUp={handleConfirmPassword}
+                                onBlur={handleConfirmPasswordOK}
                             />
 
-                            <span className={`account-card-alert ${isPasswordMatch && "hidden-card-alert"}`}>As senhas não coincidem!</span>
+                            <span className={`account-card-error-alert glass-effect ${!isPasswordMatch && "show-card-alert"}`}>As senhas não coincidem!</span>
+                            <span className={`account-card-success-alert glass-effect ${isPasswordMatchOK && "show-card-alert"}`}>As senhas coincidem!</span>
                         </fieldset>
 
                         <input type="submit" value="SIGN UP"/>

diff --git a/src/index.css b/src/index.css
@@ -1,3 +1,4 @@
+@import url('https://fonts.googleapis.com/css2?family=Syncopate:wght@400;700&display=swap');
 /*-----===| CONFIG + VARIÁVEIS |===-----*/
 * {
   margin: 0;
@@ -12,7 +13,6 @@
 
   color-scheme: light dark;
   color: var(--white-gray);
-  background-color: var(--light-gray);
 
   font-synthesis: none;
   text-rendering: optimizeLegibility;
@@ -23,17 +23,26 @@
 
   /*---=| COLORS |=---*/
   /*-| Original |-*/
+  /*Black n White*/
   --white-gray: #F9F9F9FF;
   --light-gray: #CCCCCCFF;
   --medium-gray:  #8C8C8CFF;
   --dark-gray: #454545FF;
   --black-gray: #191919FF;
+  /*Colors*/
+  --medium-red: #ff0000;
+  --medium-green: #00ff00;
+
   /*-| When alpha is necessary |-*/
+  /*Black n White*/
   --white-gray-rgb: 249, 249, 249;
   --light-gray-rgb: 204, 204, 204;
   --medium-gray-rgb: 140, 140, 140;
   --dark-gray-rgb: 69, 69, 69;
   --black-gray-rgb: 25, 25, 25;
+  /*Colors*/
+  --medium-red-rgb: 255, 0, 0;
+  --medium-green-rgb: 0, 255, 0;
 
   --all-500ms-custom: all .5s cubic-bezier(0.85, 0.15, 0.15, 0.85);
   --all-200ms-ease-in-out: all .2s cubic-bezier(0.85, 0.15, 0.15, 0.85);
@@ -111,7 +120,6 @@ button:focus-visible {
 @media (prefers-color-scheme: light) {
   :root {
     color: #213547;
-    background-color: var(--light-gray);
   }
   a:hover {
     color: #747bff;