Merge pull request #239 from So-Fan/staging

Staging

client/firebase.json

@@ -1,6 +1,6 @@
 {
   "hosting": {
-    "site": "sofan-app",
+    "site": "staging-sofan-app",
     "public": "build",
     "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
     "rewrites": [

client/src/Components/LoadingAnimation/LoadingAnimation.css

@@ -0,0 +1,101 @@
+.lds-ripple {
+  display: inline-block;
+  position: relative;
+  width: 80px;
+  height: 80px;
+}
+.lds-ripple div {
+  position: absolute;
+  border: 4px solid #f6d463;
+  opacity: 1;
+  border-radius: 50%;
+  animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
+}
+.lds-ripple div:nth-child(2) {
+  animation-delay: -0.5s;
+}
+.lds-ellipsis {
+  display: inline-block;
+  position: relative;
+  width: 80px;
+  height: 80px;
+}
+.lds-ellipsis div {
+  position: absolute;
+  top: 33px;
+  width: 13px;
+  height: 13px;
+  border-radius: 50%;
+  background: #f6d463;
+  animation-timing-function: cubic-bezier(0, 1, 1, 0);
+}
+.lds-ellipsis div:nth-child(1) {
+  left: 8px;
+  animation: lds-ellipsis1 0.6s infinite;
+}
+.lds-ellipsis div:nth-child(2) {
+  left: 8px;
+  animation: lds-ellipsis2 0.6s infinite;
+}
+.lds-ellipsis div:nth-child(3) {
+  left: 32px;
+  animation: lds-ellipsis2 0.6s infinite;
+}
+.lds-ellipsis div:nth-child(4) {
+  left: 56px;
+  animation: lds-ellipsis3 0.6s infinite;
+}
+@keyframes lds-ellipsis1 {
+  0% {
+    transform: scale(0);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+@keyframes lds-ellipsis3 {
+  0% {
+    transform: scale(1);
+  }
+  100% {
+    transform: scale(0);
+  }
+}
+@keyframes lds-ellipsis2 {
+  0% {
+    transform: translate(0, 0);
+  }
+  100% {
+    transform: translate(24px, 0);
+  }
+}
+@keyframes lds-ripple {
+  0% {
+    top: 36px;
+    left: 36px;
+    width: 0;
+    height: 0;
+    opacity: 0;
+  }
+  4.9% {
+    top: 36px;
+    left: 36px;
+    width: 0;
+    height: 0;
+    opacity: 0;
+  }
+  5% {
+    top: 36px;
+    left: 36px;
+    width: 0;
+    height: 0;
+    opacity: 1;
+  }
+  100% {
+    top: 0px;
+    left: 0px;
+    width: 72px;
+    height: 72px;
+    opacity: 0;
+  }
+}

client/src/Components/LoadingAnimation/LoadingAnimation.js

@@ -0,0 +1,27 @@
+import React from "react";
+import "./LoadingAnimation.css";
+function LoadingAnimation({ ellipsisAnimation }) {
+  return (
+    <>
+      {ellipsisAnimation ? (
+        <>
+          <div className="lds-ellipsis">
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+          </div>
+        </>
+      ) : (
+        <>
+          <div className="lds-ripple">
+            <div></div>
+            <div></div>
+          </div>
+        </>
+      )}
+    </>
+  );
+}
+
+export default LoadingAnimation;

client/src/Components/LoginSignupPopUp/ForgotPassword/ForgotPassword.css

@@ -132,6 +132,11 @@
 .forgot-password-popup-validation-message-title p {
   margin-top: 20px;
 }
+.forgot-password-popup-validation-message-email-address{
+  font-style: italic;
+  font-size: 18px;
+  color: #f6d463;
+}
 .forgot-password-popup-validation-message-title img {
   width: 50px;
   height: 50px;

client/src/Components/LoginSignupPopUp/ForgotPassword/ForgotPassword.js

@@ -34,7 +34,7 @@ function ForgotPassword({ setIsForgotPasswordClicked }) {
     const isValid = emailRegex.test(emailValue);
     setIsValidEmail(isValid);
   }
-  
+
   async function handleClickSendResetPasswordLink() {
     if (isValidEmail === true) {
       setIsForgotPasswordFirstSendMailLoading(true);
@@ -51,7 +51,7 @@ function ForgotPassword({ setIsForgotPasswordClicked }) {
       setIsMailValidAndButtonClicked(false);
     }
   }
-  
+
   async function handleForgotPasswordResendMailClick() {
     setIsForgotPasswordResendMailLoading(true);
     try {
@@ -64,7 +64,7 @@ function ForgotPassword({ setIsForgotPasswordClicked }) {
       setForgotPasswordDisplayMessageResend(false);
     }
   }
-  
+
   return (
     <>
       <>
@@ -78,7 +78,10 @@ function ForgotPassword({ setIsForgotPasswordClicked }) {
                     <p>
                       Si vous avez déjà créer un compte vérifiez vos mails !
                       Vous devriez avoir reçu un courriel pour réinitialiser
-                      votre mot de passe.
+                      votre mot de passe à cette addresse:{" "}
+                      <div className="forgot-password-popup-validation-message-email-address">
+                        {email}
+                      </div>
                     </p>
                     <p className="forgot-password-popup-validation-message-resend">
                       Vous n'avez pas reçu de mail ? Cliquez{" "}
@@ -146,6 +149,11 @@ function ForgotPassword({ setIsForgotPasswordClicked }) {
                     value={email}
                     onChange={handleEmailVerificationRegex}
                     placeholder="Entrez votre mail"
+                    onKeyDown={(e) => {
+                      if (e.key === "Enter") {
+                        handleClickSendResetPasswordLink(e);
+                      }
+                    }}
                   />
 
                   {email && !isValidEmail && (
@@ -159,6 +167,7 @@ function ForgotPassword({ setIsForgotPasswordClicked }) {
                   onClick={handleClickSendResetPasswordLink}
                   className="forgot-password-popup-validation-button"
                   disabled={!isValidEmail}
+
                 >
                   Valider
                 </button>