Add verify page

public/locales/en/translation.json

@@ -487,6 +487,11 @@
     "forgetPassServerError": "Error recovering password, try again!",
     "forgetPassEmailForgetError": "Email format is incorrect!"
   },
+  "userPage": {
+    "title": "",
+    "success": "Email verified successfully.",
+    "failed": "Verification failed, please try again!"
+  },
   "footer": {
     "darkMode": "Dark Mode",
     "aboutUs" : "About Us",

public/locales/fa/translation.json

@@ -487,6 +487,11 @@
     "forgetPassServerError": "خطا در بازیابی رمز، دوباره تلاش کنید",
     "forgetPassEmailForgetError": "فرمت ایمیل صحیح نیست."
   },
+  "userPage": {
+    "title": "",
+    "success": "ایمیل با موفقیت تائید شد.",
+    "failed": "ایمیل تائید نشد، دوباره تلاش کنید!"
+  },
   "footer": {
     "darkMode": "تم تاریک",
     "aboutUs": "درباره ما",

src/assets/images.js

@@ -30,7 +30,8 @@ import squareLoading from "./images/src/squareLoading.gif";
 import squareLoadingLight from "./images/src/squareLoadingLight.gif";
 import linearLoading from "./images/src/linearLoading.gif";
 import linearLoadingBgOrange from "./images/src/linearLoadingBgOrange.gif";
-
+import approveAnimation from "./images/src/approveAnimation.gif";
+import rejectAnimation from "./images/src/rejectAnimation.gif";
 
 export const images = {
   opexLogo_light: opexLogo_light,
@@ -65,5 +66,6 @@ export const images = {
   squareLoadingLight: squareLoadingLight,
   linearLoading: linearLoading,
   linearLoadingBgOrange: linearLoadingBgOrange,
-
+  approveAnimation: approveAnimation,
+  rejectAnimation: rejectAnimation
 };

src/components/Button/Button.js

@@ -1,8 +1,9 @@
 import React from "react";
 
-const Button = ({buttonTitle,buttonClass,innerRef, ...rest}) => {
+const Button = ({buttonTitle,buttonClass,buttonStyle,innerRef, ...rest}) => {
     return (
         <button
+            style={buttonStyle}
             className={`${buttonClass} button cursor-pointer`}
             {...rest}
             ref={innerRef}

src/components/FullWidthError/FullWidthError.js

@@ -2,6 +2,10 @@ import {useDispatch} from "react-redux";
 import useQuery from "../../Hooks/useQuery";
 import {loadConfig} from "../../store/actions";
 import {useTranslation} from "react-i18next";
+import Button from "../Button/Button";
+import classes from "../../pages/User/User.module.css";
+import React from "react";
+import {images} from "../../assets/images";
 
 const FullWidthError = () => {
     const dispatch = useDispatch();
@@ -12,11 +16,36 @@ const FullWidthError = () => {
         const impersonate = query.get("impersonate");
         dispatch(loadConfig(impersonate))
     }
+
+    const thisButton = {
+        background: 'var(--bgGreen)',
+        color: '#000'
+    }
+
+    const thisContainer = {
+        backgroundImage: `url("${images.spaceStar}")`,
+    }
+
+    const thisContent = {
+        position: 'fixed',
+        top: '27.5%',
+        left: '37.5%',
+        width: '25%',
+        height: '45%',
+        backgroundColor: 'var(--cardBodyAlpha)',
+    }
+
     return (
-        <div className="loading-container">
-            <div className="column ai-center jc-center">
-                <p className="text-center text-color">{t("errorPage.errorText")}</p>
-                <button className="button reload-btn mt-05 cursor-pointer" onClick={tryLoadConfig}>{t('errorPage.reload')}</button>
+        <div className={`container ${classes.container} move-image flex jc-center ai-center text-red`} style={thisContainer}>
+            <div className={`column jc-around ai-center card-border py-1`} style={thisContent}>
+                <img src={images.reject} alt="error" className={`img-lg-plus floating`}/>
+                <span>{t("errorPage.errorText")}</span>
+                <Button
+                    buttonStyle={thisButton}
+                    buttonClass={`px-2`}
+                    buttonTitle={t("errorPage.reload")}
+                    onClick={tryLoadConfig}
+                />
             </div>
         </div>
     );

src/components/FullWidthLoading/FullWidthError.module.css

@@ -0,0 +1,139 @@
+.container{
+    direction: ltr;
+    height: 100vh;
+    background-color: var(--cardBody);
+}
+.dash {
+    width: 30px;
+    height: 10px;
+    border-radius: 8px;
+    margin: 0 15px;
+    background: var(--textColor);
+    box-shadow: 0 0 2px 0 var(--textColor);
+}
+
+.one {
+    margin-right: -18px;
+    transform-origin: center left;
+    animation: spin 3s linear infinite;
+}
+
+.two {
+    transform-origin: center right;
+    animation: spin2 3s linear infinite;
+    animation-delay: 0.2s;
+}
+
+.three {
+    transform-origin: center right;
+    animation: spin3 3s linear infinite;
+    animation-delay: 0.3s;
+}
+
+.four {
+    transform-origin: center right;
+    animation: spin4 3s linear infinite;
+    animation-delay: 0.4s;
+}
+
+@keyframes spin {
+    0% {
+        transform: rotate(0deg);
+    }
+    25% {
+        transform: rotate(360deg);
+    }
+    30% {
+        transform: rotate(370deg);
+    }
+    35% {
+        transform: rotate(360deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+@keyframes spin2 {
+    0% {
+        transform: rotate(0deg);
+    }
+    20% {
+        transform: rotate(0deg);
+    }
+    30% {
+        transform: rotate(-180deg);
+    }
+    35% {
+        transform: rotate(-190deg);
+    }
+    40% {
+        transform: rotate(-180deg);
+    }
+    78% {
+        transform: rotate(-180deg);
+    }
+    95% {
+        transform: rotate(-360deg);
+    }
+    98% {
+        transform: rotate(-370deg);
+    }
+    100% {
+        transform: rotate(-360deg);
+    }
+}
+
+@keyframes spin3 {
+    0% {
+        transform: rotate(0deg);
+    }
+    27% {
+        transform: rotate(0deg);
+    }
+    40% {
+        transform: rotate(180deg);
+    }
+    45% {
+        transform: rotate(190deg);
+    }
+    50% {
+        transform: rotate(180deg);
+    }
+    62% {
+        transform: rotate(180deg);
+    }
+    75% {
+        transform: rotate(360deg);
+    }
+    80% {
+        transform: rotate(370deg);
+    }
+    85% {
+        transform: rotate(360deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+@keyframes spin4 {
+    0% {
+        transform: rotate(0deg);
+    }
+    38% {
+        transform: rotate(0deg);
+    }
+    60% {
+        transform: rotate(-360deg);
+    }
+    65% {
+        transform: rotate(-370deg);
+    }
+    75% {
+        transform: rotate(-360deg);
+    }
+    100% {
+        transform: rotate(-360deg);
+    }
+}

src/components/FullWidthLoading/FullWidthLoading.js

@@ -1,13 +1,18 @@
+import React from 'react';
+import classes from './FullWidthError.module.css'
+
 const FullWidthLoading = () => {
-  return (
-    <div className="loading-container">
-      <div className="row ai-center jc-center">
-        <div className="dash one" />
-        <div className="dash two" />
-        <div className="dash three" />
-        <div className="dash four" />
-      </div>
-    </div>
-  );
+    return (
+        <div className={`container ${classes.container} flex jc-center ai-center`}>
+            <div className="row ai-center jc-center">
+                <div className={`${classes.dash} ${classes.one}`} />
+                <div className={`${classes.dash} ${classes.two}`} />
+                <div className={`${classes.dash} ${classes.three}`} />
+                <div className={`${classes.dash} ${classes.four}`} />
+            </div>
+        </div>
+    );
 };
+
 export default FullWidthLoading;
+