register feature

src/App.js

@@ -41,7 +41,7 @@ function App() {
             component={ForgotPasswordPage}
           />
           <RouteRedirectToAdmin
-            path="/register"
+            path="/dk"
             exact={true}
             component={RegisterPage}
           />

src/_components/Alert/success.js

@@ -5,12 +5,12 @@ import { useDispatch } from 'react-redux';
 function AlertSuccess(props) {
     const dispatch = useDispatch();
 
-    let autoClose = setTimeout(() => {
-        close();
-    }, 2000);
+    // let autoClose = setTimeout(() => {
+    //     close();
+    // }, 2000);
 
     function close() {
-        clearTimeout(autoClose);
+        // clearTimeout(autoClose);
         props.onComplete();
         dispatch(alertActions.clear());
 

src/_components/Header/HeaderMain/index.js

@@ -2,11 +2,15 @@ import { Link } from "react-router-dom";
 import './HeaderMain.style.scss'
 import { useState } from "react";
 import {history} from '../../../_helpers/history'
+import { apiCaller } from "../../../_helpers";
 export default function HeaderMain() {
   const [isHoverLogout, setIsHoverLogout] = useState(false)
 
-  const handleLogout = () => {
-    history.replace('/login')
+  const handleLogout = async () => {
+    await apiCaller('/logout', "POST", {})
+    window.location.href = "/login";
+    localStorage.removeItem("authentication");
+    localStorage.removeItem("access_token");
   }
 
   return (

src/_constants/register.js

@@ -1,4 +1,10 @@
 export const STEP_REGISTER = {
   CREATE_ACCOUNT: 'CREATE_ACCOUNT',
   CREATE_INFORMATION: 'CREATE_INFORMATION',
+}
+
+
+export const roleRegister = {
+  agents: 'agents',
+  general: 'general',
 }

src/_containers/RegisterPage/CreateAccount/index.scss

@@ -1,4 +1,12 @@
+@import "/src/_styles/mixin";
+
 .register_step {
+
+
+    @include screen_mobile {
+        padding-top: 0;
+    }
+
     .title_register {
         margin-bottom: 18px;
 
@@ -47,6 +55,19 @@
     margin: 0 auto;
     margin-top: 50px;
 
+    @include screen_mobile {
+        max-width: unset;
+    }
+
+    .register-content-form {
+        gap: 32px;
+
+        @include screen_mobile {
+            flex-direction: column;
+            gap: 0;
+        }
+    }
+
     .title {
         font-size: 32px;
         text-transform: uppercase;
@@ -59,8 +80,54 @@
         margin: 24px 0;
     }
 
+    .login_text {
+        font-size: 18px;
+        color: #00b9b7;
+        font-weight: 600
+    }
 }
 
 .register-side {
     flex: 1;
+
+    .gender_female,
+    .gender_male {
+        margin-left: 16px;
+    }
+
+    .image-gender {
+        width: 64px;
+        height: 64px;
+
+        @include screen_mobile {
+            width: 44px;
+            height: 44px;
+        }
+    }
+
+    .radio-role {
+        display: flex;
+        align-items: center;
+    }
+
+    .radio-btn-role {
+        width: 20px;
+        height: 20px;
+        margin: 0;
+        margin-right: 6px;
+    }
+
+    input[type=radio] {
+        appearance: none;
+        border-radius: 50%;
+        background-clip: content-box;
+        border: 1px solid #000;
+        background-color: #fff;
+    }
+
+    input[type="radio"]:checked {
+        background-color: #00b9b7;
+        padding: 2px;
+        border: 2px solid #00b9b7;
+    }
 }

src/_containers/RegisterPage/index.js

@@ -10,7 +10,7 @@ export default function RegisterPage() {
     <div className="bg-login rel">
       <HeaderCurve></HeaderCurve>
       <div>
-        <div className="sunE-form-container login-form-container">
+        <div className="sunE-form-container register-form-container">
         <div className="sunE-custom-form register-form-container_content responsive_small_screen_margin_login">
           <h2 className="title text-center">Đăng ký đại lý</h2>
           <div className="sunE-login-app">