Merge pull request #431 from bounswe/frontend/dev-emailVerification-f…

…orm-validation

Frontend: Email Verification Form Validation

learnify/web/src/App.js

@@ -2,7 +2,6 @@ import { BrowserRouter, Routes, Route} from 'react-router-dom';
 import './App.css';
 import EmailVerificationPage from './pages/EmailVerificationPage';
 import ForgetPassword from './pages/ForgetPassword';
-import Header from './pages/Header';
 import LoginForm from './pages/LoginForm';
 import HomePage from './pages/HomePage';
 import SignUpForm from './pages/SignUpForm';

learnify/web/src/buttonIndex.js

@@ -0,0 +1,41 @@
+import React, { Component } from "react";
+
+export default class ButtonLoader extends Component {
+  state = {
+    loading: false,
+    orange: true
+  };
+
+  changeColor(){
+    this.setState({orange: !this.state.orange})
+  }
+
+  fetchData = () => {
+    this.setState({ loading: true , orange: false});
+
+    //Faking API call here
+    setTimeout(() => {
+      this.setState({ loading: false , orange: true});
+    }, 180000);
+  };
+
+  render() {
+    const { loading } = this.state;
+
+    let btn_class = this.state.orange ? "btn-orange" : "btn-grey";
+
+    return (
+      <div>
+        <button className={btn_class} onClick={this.fetchData} disabled={loading}>
+          {loading && (
+            <i
+              className="fa fa-refresh fa-spin"
+            />
+          )}
+          {loading && <span>Please Wait 3 Minutes Before Resending</span>}
+          {!loading && <span>Resend</span>}
+        </button>
+      </div>
+    );
+  }
+}

learnify/web/src/pages/EmailVerificationPage.js

@@ -1,22 +1,39 @@
-import React, {useState,setState} from 'react';
-import { NavLink} from 'react-router-dom';
+import React from 'react';
+import { NavLink, useNavigate } from 'react-router-dom';
+import { useForm } from "react-hook-form";
+import { yupResolver } from '@hookform/resolvers/yup'
+import * as Yup from 'yup'
+import 'bootstrap/dist/css/bootstrap.min.css'
 import './style.css'
 import logo from '../images/logo-dblue.png'
 import illustration from '../images/learn-illustration.png'
+import ButtonLoader from "../buttonIndex";
 
 function EmailVerificationPage() {
 
-    const [verificationCode, setVerificationCode] = useState(null);
+    const formSchema = Yup.object().shape({
+        verificationCode: Yup.string()
+            .required("Verification Code is required!")
+            .matches(
+                /^\d{4}$/,
+                "Verification Code must contain exactly 4 digit number!"
+            ),
+    })
+    const formOptions = { resolver: yupResolver(formSchema) }
 
-    const handleInputChange = (e) => {
-        const {id , value} = e.target;
-        if(id === "verificationCode"){
-            setVerificationCode(value);
-        }
-    }
+    const { register, handleSubmit, formState } = useForm(
+        formOptions,
+        {defaultValues: {
+            verificationCode: "",
+        }});
+    const { errors } = formState
+
+    const navigate = useNavigate();
 
-    const handleSubmit  = () => {
-        console.log(verificationCode);
+    const onSubmit = (data, event) => {
+        console.log(data, event);
+        event.preventDefault();
+        navigate('/home-page', {replace: true});
     }
 
     return(
@@ -34,30 +51,42 @@ function EmailVerificationPage() {
             </div>
             <div className='rightPart'>
                 <div className='welcome-navigation'>
-                    <NavLink to="/" activeClassName="welcome-navigation-item-active" className="welcome-navigation-item">
+                    <NavLink to="/" className="welcome-navigation-item">
                         Sign Up
                     </NavLink>
                     <div className='space-8'/>
-                    <NavLink to="/login" activeClassName="welcome-navigation-item-active" className="welcome-navigation-item">
-                        Sign In
+                    <NavLink to="/login" className="welcome-navigation-item">
+                        Login
                     </NavLink>
                 </div>
-                <div className="form">
+                <div className='space-20'/>
+                <form onSubmit={handleSubmit(onSubmit)}>
                     <div className="form-body">
                         <div className="verificationCode">
                             <label className="form__label" for="verificationCode">VERIFICATION CODE </label>
                             <div className='space-3'></div>
                             <div>
-                                <input className="form__input" type="text" value={verificationCode} onChange = {(e) => handleInputChange(e)} id="verificationCode" placeholder="Verification Code"/>
+                                <input
+                                    className={`form-control ${errors.verificationCode ? 'is-invalid' : ''}`}
+                                    type="verificationCode" 
+                                    placeholder="Verification Code"
+                                    {...register('verificationCode')}
+                                />
+                                <div className="invalid-feedback">{errors.verificationCode?.message}</div>
                             </div>
                         </div>
                     </div>
                     <div class="signup-button">
-                        <NavLink to="/home-page">
-                            <button onClick={()=>handleSubmit()} type="submit" class="btn-orange">Verify</button>
-                        </NavLink>
+                        <button 
+                            onClick={handleSubmit(onSubmit)}
+                            type="submit" 
+                            class="btn-orange">
+                                Verify
+                        </button>
+                    <div className='space-8'/>
+                    <ButtonLoader />
                     </div>
-                </div>
+                </form>
             </div>
         </div>
     )       

learnify/web/src/pages/ForgetPassword.js

@@ -1,4 +1,4 @@
-import React, {useState,setState} from 'react';
+import React, {useState} from 'react';
 import { NavLink} from 'react-router-dom';
 import './style.css'
 import logo from '../images/logo-dblue.png'

learnify/web/src/pages/LoginForm.js

@@ -1,4 +1,4 @@
-import React, {useState,setState} from 'react';
+import React, {useState} from 'react';
 import {NavLink} from 'react-router-dom';
 import './style.css'
 import logo from '../images/logo-dblue.png'

learnify/web/src/pages/style.css

@@ -202,7 +202,27 @@ body{
     padding-right: 15px;
     text-align: center;
     touch-action: manipulation;
-    transition: background-color 0.167s cubic-bezier(0.4, 0, 0.2, 1) 0s, box-shadow 0.167s cubic-bezier(0.4, 0, 0.2, 1) 0s, color 0.167s cubic-bezier(0.4, 0, 0.2, 1) 0s;
+    transition: background-color 0s cubic-bezier(0.4, 0, 0.2, 1) 0s, box-shadow 0s cubic-bezier(0.4, 0, 0.2, 1) 0s, color 0s cubic-bezier(0.4, 0, 0.2, 1) 0s;
+}
+
+.btn-grey{
+    align-items: center;
+    background-color: #808080;
+    border: 0;
+    border-radius: 100px;
+    box-sizing: border-box;
+    color:#1746A2;
+    cursor: pointer;
+    font-family: 'Open Sans' sans-serif;
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 20px;
+    padding: 5px;
+    padding-left: 15px;
+    padding-right: 15px;
+    text-align: center;
+    touch-action: manipulation;
+    transition: background-color 0s cubic-bezier(0.4, 0, 0.2, 1) 0s, box-shadow 0s cubic-bezier(0.4, 0, 0.2, 1) 0s, color 0s cubic-bezier(0.4, 0, 0.2, 1) 0s;
 }
 
 .btn-white{
@@ -259,4 +279,4 @@ body{
     color: linen;
     opacity: 1;
     pointer-events: none;
-}
+}