Merge pull request #23 from OZimbres/feat/login-logic

[feat] Lógica do `login` 'finalizada'
TeamXFive · Aug 28, 2024 · 60ed36d · 60ed36d
2 parents adad54f + f487f31
commit 60ed36d
Show file tree

Hide file tree

Showing 9 changed files with 321 additions and 324 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -7,6 +7,7 @@ import Account from "./pages/Account/Account.jsx";
 import SignIn from "./components/Account/SignIn/SignIn.jsx";
 import useAccountContext from "./hook/useAccountContext.jsx";
 import Header from "./components/header/header";
+import AccountAlerts from "./components/Alerts/AccountAlerts/AccountAlerts.jsx";
 
 export function App() {
     const [scrollDirection, setScrollDirection] = useState("up");
@@ -19,7 +20,7 @@ export function App() {
         isModalVisible, setIsModalVisible,
         setIsSignInVisible,
         isUserLogged,
-        setIsShowSignInCloseBtn
+        setIsShowSignInCloseBtn,
     } = useAccountContext();
 
     // Clicar no LINK do HEADER do LOGIN
@@ -34,9 +35,9 @@ export function App() {
             setIsModalVisible(false);
         } else {
             setIsModalVisible(true);
+            setIsSignInVisible(true);
         }
 
-        setIsSignInVisible(true);
 
         event.preventDefault(); // Previne o comportamento padrão de redirecionamento do LINK
     };
@@ -93,6 +94,8 @@ export function App() {
 
     return (
         <div className="page">
+            <AccountAlerts />
+
             <section className={`login-modal-container ${!isModalVisible && "hidden-modal"} ${scrollDirection === "down" && "cover-hidden-header"}`}>
                 <SignIn />
             </section>

diff --git a/src/components/Account/AccountCard.css b/src/components/Account/AccountCard.css
@@ -1,12 +1,22 @@
+/*-----===| DISPLAY: flex |===-----*/
+.account-card,
+.sign-in-container, .sign-up-container,
+.account-card-header,
+.account-card-form-container,
+.account-card-form,
+.fs-user, .fs-email, .fs-password, .fs-confirm-password,
+.account-card-switch {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+/*-----===| Styling |===-----*/
 .account-card {
     max-height: 80vh;
     max-width: 540px;
     width: 50vw;
     z-index: 801;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: space-between;
     padding: 10px 20px;
     border-radius: .75em;
     transform: translateY(0);
@@ -15,15 +25,18 @@
     color: var(--light-gray);
     border: solid 1px var(--dark-gray);
     position: absolute;
+
+    /*---=| display: flex |---*/
+    flex-direction: column;
+    justify-content: space-between;
 }
 .sign-in-container, .sign-up-container {
     height: auto;
     width: 100%;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
     transition: var(--all-500ms-custom);
+
+    /*---=| display: flex |---*/
+    flex-direction: column;
 }
 .hidden-account-card, .hidden-sign-in, .hidden-sign-up {
     opacity: 1;
@@ -36,10 +49,9 @@
     height: auto;
     width: 100%;
     padding: 5px 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
     position: relative;
+
+    /*---=| display: flex |---*/
 }
 .account-card-header h1 {
     font-size: 32px;
@@ -57,29 +69,30 @@
     flex: 1;
     height: auto;
     width: 100%;
-    display: flex;
+    overflow-y: auto;
+
+    /*---=| display: flex |---*/
     flex-direction: column;
-    align-items: center;
     justify-content: flex-start;
-    overflow-y: auto;
 }
 .account-card-form {
     flex: 1;
     height: auto;
     width: 90%;
-    display: flex;
+
+    /*---=| display: flex |---*/
     flex-direction: column;
-    align-items: center;
     justify-content: space-around;
 }
 .fs-user, .fs-email, .fs-password, .fs-confirm-password {
     height: auto;
     width: 100%;
-    display: flex;
-    align-items: start;
-    justify-content: flex-start;
     flex-wrap: wrap;
     margin: 5px 0 20px 0;
+    position: relative;
+
+    /*---=| display: flex |---*/
+    justify-content: flex-start;
 }
 .account-card-form label {
     color: var(--medium-gray);
@@ -95,12 +108,16 @@
     width: 100%;
     padding: 5px;
     margin: 5px 0;
-    border: 1px solid #000;
+    border: none;
     border-radius: 5px;
-    outline: solid 1px var(--dark-gray);
+    outline: 1px solid var(--dark-gray);
 }
+.account-card-form input.invalid-input{
+    outline: 1px solid var(--medium-red);
+}
+
 .account-card-form input:focus {
-    outline: solid 2px var(--light-gray);
+    outline: solid 1px var(--light-gray);
 }
 .account-card-form input[type="submit"] {
     background-color: var(--white-gray);
@@ -117,9 +134,7 @@
 .account-card-switch {
     height: auto;
     width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+    /*---=| display: flex |---*/
 }
 
 .switch-link {
@@ -131,26 +146,3 @@
     text-decoration: underline;
 }
 
-/*-----===| ALERTS |===-----*/
-.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);
-}
-.show-card-alert {
-    opacity: 1;
-    transform: translate(120%, 100%);
-}
diff --git a/src/components/Account/SignIn/SignIn.jsx b/src/components/Account/SignIn/SignIn.jsx
@@ -2,7 +2,7 @@ import "../AccountCard.css";
 import { IoIosClose } from "react-icons/io";
 import useAccountContext from "../../../hook/useAccountContext.jsx";
 import {useNavigate} from "react-router-dom";
-import {useState} from "react";
+import {useEffect, useState} from "react";
 
 function SignIn() {
 
@@ -14,22 +14,37 @@ function SignIn() {
         setIsUserLogged, setIsSignInVisible,
         setIsSignUpVisible, isShowSignInCloseBtn,
         setIsModalVisible,
-        userEmail, userPassword
+        registeredUsersList, setRegisteredUsersList,
+        setHasInteractedOnce,
+        isSignInErrorAlertVisible, setIsSignInErrorAlertVisible,
+        isSignInSuccessfulAlertVisible, setIsSignInSuccessfulAlertVisible
     } = useAccountContext();
 
     const handleCloseBtn = () => {
         setIsSignInVisible(false);
         setIsModalVisible(false);
     };
 
+    const findUser = (email) => {
+        return registeredUsersList.find(user => user.email === email);
+    }
+
     const handleSignInSubmit = (event) => {
 
         event.preventDefault();
 
-        if (email !== userEmail || password !== userPassword) {
-            alert("Email ou senha inválidos");
+        const user = findUser(email);
+
+        if (!user || user.password !== password) {
+            setIsSignInErrorAlertVisible(true);
+            setIsUserLogged(false);
 
         } else {
+            setRegisteredUsersList(registeredUsersList.map((user) => {
+                return [{user, email, password}];
+            }));
+
+            setIsSignInSuccessfulAlertVisible(true);
 
             setIsUserLogged(true);
             setIsSignInVisible(false);
@@ -41,12 +56,32 @@ function SignIn() {
         setIsSignInVisible(false);
         setIsModalVisible(false);
         setIsSignUpVisible(true);
+        setHasInteractedOnce(false);
 
         if (location.pathname !== "/account") {
             navigate("/account");
         }
     }
 
+    useEffect(() => {
+        if (isSignInErrorAlertVisible) {
+            const timer = setTimeout(() => {
+                setIsSignInErrorAlertVisible(false);
+            }, 2500);
+
+            return () => clearTimeout(timer);
+        }
+    }, [isSignInErrorAlertVisible]);
+    useEffect(() => {
+        if (isSignInSuccessfulAlertVisible) {
+            const timer = setTimeout(() => {
+                setIsSignInSuccessfulAlertVisible(false);
+            }, 2500);
+
+            return () => clearTimeout(timer);
+        }
+    }, [isSignInSuccessfulAlertVisible]);
+
     return (
         <>
             <div className={`account-card`} id="signIn">
@@ -76,7 +111,7 @@ function SignIn() {
                             />
                         </fieldset>
 
-                        <input type="submit" value="LOGIN" />
+                        <input type="submit" value="LOGIN"/>
                     </form>
                 </div>