├── public
    ├── favicon.ico
    ├── img
    │   └── Arash.jpg
    └── index.html
├── src
    ├── Components
    │   ├── Panel
    │   │   ├── SideBarLinks
    │   │   │   ├── SideBarLinks.module.css
    │   │   │   ├── SideBarLink
    │   │   │   │   ├── SideBarLink.module.css
    │   │   │   │   └── SideBarLink.jsx
    │   │   │   └── SideBarLinks.jsx
    │   │   ├── UserCard
    │   │   │   └── UserCard.jsx
    │   │   ├── UserProfile
    │   │   │   ├── UserProfile.module.css
    │   │   │   └── UserProfile.jsx
    │   │   ├── Panel.module.css
    │   │   ├── UserChangePassword
    │   │   │   └── UserChangePassword.jsx
    │   │   ├── Panel.jsx
    │   │   └── UserInformation
    │   │   │   └── UserInformation.jsx
    │   ├── Forms
    │   │   ├── FormInput
    │   │   │   ├── FormInput.module.css
    │   │   │   └── FormInput.jsx
    │   │   ├── Forms.module.css
    │   │   ├── LoginForm
    │   │   │   └── LoginForm.jsx
    │   │   └── RegisterForm
    │   │   │   └── RegisterForm.jsx
    │   └── Titles
    │   │   ├── Titles.module.css
    │   │   └── Titles.jsx
    ├── index.css
    ├── index.js
    ├── utils
    │   └── storage.js
    └── App.js
├── .gitignore
├── LICENSE
├── package.json
└── README.md


/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/UndeadMe/React-User-Panel/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/public/img/Arash.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/UndeadMe/React-User-Panel/HEAD/public/img/Arash.jpg


--------------------------------------------------------------------------------
/src/Components/Panel/SideBarLinks/SideBarLinks.module.css:
--------------------------------------------------------------------------------
1 | .sidebar-links {
2 |     border-radius: 30px;
3 |     box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 30px;
4 | }


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;500&display=swap');
2 | 
3 | *, html {
4 |   font-family: 'Poppins', sans-serif !important;
5 | }


--------------------------------------------------------------------------------
/src/Components/Forms/FormInput/FormInput.module.css:
--------------------------------------------------------------------------------
1 | .form-input {
2 |     padding: 12px 18px;
3 |     box-shadow: none !important;
4 | }
5 | .form-label {
6 |     font-size: 0.9rem;
7 |     margin-bottom: 10px;
8 | }


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom/client';
 3 | import './index.css';
 4 | import App from './App';
 5 | 
 6 | const root = ReactDOM.createRoot(document.getElementById('root'));
 7 | root.render(
 8 |   <React.StrictMode>
 9 |     <App />
10 |   </React.StrictMode>
11 | );


--------------------------------------------------------------------------------
/src/Components/Titles/Titles.module.css:
--------------------------------------------------------------------------------
 1 | .information-heading {
 2 |     font-size: 1.3rem;
 3 | }
 4 | .information-heading-text {
 5 |     font-size: 1rem;
 6 |     font-weight: lighter;
 7 | }
 8 | @media screen and (max-width: 441px) {
 9 |     .information-heading {
10 |         font-size: 1.1rem;
11 |         margin-bottom: 10px;
12 |     }
13 | }


--------------------------------------------------------------------------------
/src/Components/Forms/Forms.module.css:
--------------------------------------------------------------------------------
 1 | .container {
 2 |     min-height: 100vh !important;
 3 |     padding: 50px;
 4 | }
 5 | .submit-btn {
 6 |     padding: 12px 0;
 7 |     margin-top: 25px;
 8 | }
 9 | .form {
10 |     width: 50%;
11 | }
12 | @media screen and (max-width: 991px) {
13 |     .form {
14 |         width: 80%;
15 |     }
16 | }
17 | @media screen and (max-width: 575px) {
18 |     .form {
19 |         width: 90%;
20 |     }
21 | }


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | 
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | 
25 | .vscode/


--------------------------------------------------------------------------------
/src/Components/Panel/SideBarLinks/SideBarLink/SideBarLink.module.css:
--------------------------------------------------------------------------------
 1 | .sidebar-link {
 2 |     cursor: pointer;
 3 | }
 4 | .right-arrow-icon {
 5 |     transition: .4s;
 6 | }
 7 | .sidebar-link:hover .right-arrow-icon {
 8 |     transform: translateX(-10px);
 9 | }
10 | .right-arrow-icon.active {
11 |     transform: translateX(-10px);
12 | }
13 | .sidebar-link-border {
14 |     width: 100%;
15 |     display: flex;
16 |     justify-content: center;
17 |     padding: 15px 23px;
18 | }
19 | .sidebar-link-border div {
20 |     outline: 1px solid #f1f1f1;
21 |     width: 100%;
22 | }


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="theme-color" content="#000000" />
 8 |     <meta name="description" content="Web site created using create-react-app" />
 9 |     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
10 |     <title>React App</title>
11 |   </head>
12 |   <body>
13 |     <noscript>You need to enable JavaScript to run this app.</noscript>
14 |     <div id="root"></div>
15 |   </body>
16 | </html>
17 | 


--------------------------------------------------------------------------------
/src/Components/Titles/Titles.jsx:
--------------------------------------------------------------------------------
 1 | // import styles of this component
 2 | import styles from './Titles.module.css'
 3 | // import other pkg
 4 | import PropTypes from 'prop-types'
 5 | 
 6 | const Titles = ({ title, text }) => {
 7 |     return (
 8 |         <>
 9 |             <h1 className={`${styles['information-heading']} mt-1`}>{title}</h1>
10 |             <h3 className={`${styles['information-heading-text']} text-muted p-0`}>{text}</h3>
11 |         </>
12 |     )
13 | }
14 | 
15 | // validate component
16 | Titles.propTypes = {
17 |     title: PropTypes.string.isRequired,
18 |     text: PropTypes.string.isRequired,
19 | }
20 | 
21 | export default Titles


--------------------------------------------------------------------------------
/src/utils/storage.js:
--------------------------------------------------------------------------------
 1 | export const getStorage = storage => {
 2 |     if (storage === 'id') return localStorage.getItem(storage)
 3 |     return JSON.parse(localStorage.getItem(storage))
 4 | }
 5 | 
 6 | export const setUserId = id => localStorage.setItem('id', id) 
 7 | 
 8 | export const setUserInStorage = (storage, value) => localStorage.setItem(storage, JSON.stringify([ ...value ]))
 9 | 
10 | export const updateStorage = (users, myUser, login) => {
11 |     const myVerifyUserIdx = users.findIndex(user => user.id === myUser.id)
12 |     users.splice(myVerifyUserIdx, 1)
13 |     if (login) myUser.isLogin = login
14 |     users.push(myUser)
15 |     setUserInStorage('users', users)
16 | }


--------------------------------------------------------------------------------
/src/Components/Panel/UserCard/UserCard.jsx:
--------------------------------------------------------------------------------
 1 | // import other component 
 2 | import UserProfile from '../UserProfile/UserProfile'
 3 | import SideBarLinks from '../SideBarLinks/SideBarLinks'
 4 | 
 5 | // import other pkg 
 6 | import PropTypes from 'prop-types'
 7 | 
 8 | const UserCard = ({ sidebarLinks, username, userBirthday, userEmail, onChangeToggle }) => {
 9 |     return (
10 |         <>
11 |             <UserProfile username={username} userBirthday={userBirthday} userEmail={userEmail} />
12 |             <SideBarLinks sidebarLinks={sidebarLinks} onChangeToggle={onChangeToggle} />
13 |         </>
14 |     )
15 | }
16 | 
17 | // validate the component
18 | UserCard.propTypes = {
19 |     sidebarLinks: PropTypes.array.isRequired,
20 |     username: PropTypes.string.isRequired,
21 |     userBirthday: PropTypes.string.isRequired,
22 |     userEmail: PropTypes.string.isRequired,
23 |     onChangeToggle: PropTypes.func.isRequired
24 | }
25 | 
26 | export default UserCard


--------------------------------------------------------------------------------
/src/Components/Panel/UserProfile/UserProfile.module.css:
--------------------------------------------------------------------------------
 1 | .user-profile {
 2 |     padding: 20px;
 3 |     border-radius: 30px;
 4 |     box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 30px;
 5 | }
 6 | .user-profile-label {
 7 |     position: relative;
 8 |     width: 150px;
 9 |     height: 150px;
10 |     border-radius: 100%;
11 |     display: flex;
12 |     cursor: pointer;
13 |     margin-top: -85px;
14 |     outline: 10px solid white;
15 | }
16 | .user-profile-label img {
17 |     width: 100%;
18 |     object-fit: cover;
19 |     border-radius: 100%;
20 | }
21 | .username {
22 |     font-size: 1.3rem;
23 |     font-weight: bolder;
24 | }
25 | .user-email {
26 |     font-size: 0.9rem;
27 |     font-weight: lighter;
28 | }
29 | .user-birthday {
30 |     font-size: 0.9rem;
31 | }
32 | .profile-icon-box {
33 |     position: absolute;
34 |     right: 5px;
35 |     bottom: 0;
36 |     border-radius: 100%;
37 |     padding: 5px 4.5px;
38 |     outline: 5px solid white;
39 |     display: flex;
40 | }


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2022 Arash
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "1",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@testing-library/jest-dom": "^5.16.4",
 7 |     "@testing-library/react": "^13.2.0",
 8 |     "@testing-library/user-event": "^13.5.0",
 9 |     "bootstrap": "^5.1.3",
10 |     "formik": "^2.2.9",
11 |     "iconsax-react": "^0.0.8",
12 |     "prop-types": "^15.8.1",
13 |     "react": "^18.1.0",
14 |     "react-bootstrap": "^2.3.1",
15 |     "react-dom": "^18.1.0",
16 |     "uuid": "^8.3.2",
17 |     "web-vitals": "^2.1.4",
18 |     "yup": "^0.32.11"
19 |   },
20 |   "overrides": {
21 |     "autoprefixer": "10.4.5"
22 |   },
23 |   "devDependencies": {
24 |     "react-scripts": "5.0.1"
25 |   },
26 |   "scripts": {
27 |     "start": "react-scripts start",
28 |     "build": "react-scripts build",
29 |     "test": "react-scripts test",
30 |     "eject": "react-scripts eject"
31 |   },
32 |   "eslintConfig": {
33 |     "extends": [
34 |       "react-app",
35 |       "react-app/jest"
36 |     ]
37 |   },
38 |   "browserslist": {
39 |     "production": [
40 |       ">0.2%",
41 |       "not dead",
42 |       "not op_mini all"
43 |     ],
44 |     "development": [
45 |       "last 1 chrome version",
46 |       "last 1 firefox version",
47 |       "last 1 safari version"
48 |     ]
49 |   }
50 | }
51 | 


--------------------------------------------------------------------------------
/src/Components/Panel/Panel.module.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     position: relative;
 3 | }
 4 | .panel-wrapper {
 5 |     width: 100%;
 6 |     min-height: 100vh;
 7 |     background-color: #fcfcfc;
 8 | }
 9 | .container {
10 |     width: 83%;
11 | }
12 | .panel {
13 |     width: 85%;
14 |     z-index: 2;
15 |     margin: 100px 0;
16 | }
17 | .panel-column {
18 |     border-radius: 30px;
19 |     box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 30px;
20 | }
21 | .log-out-btn {
22 |     position: absolute;
23 |     bottom: 20px;
24 |     left: 20px;
25 |     width: 140px;
26 |     padding: 8px 0;
27 |     z-index: 2;
28 | }
29 | .bg-overlay {
30 |     position: absolute;
31 |     top: 0;
32 |     left: 0;
33 |     background-image: url(/public/img/Arash.jpg);
34 |     background-size: cover;
35 |     background-position: center;
36 |     background-repeat: no-repeat;
37 |     width: 400px;
38 |     height: 100%;
39 | }
40 | .bg-overlay::before {
41 |     content: '';
42 |     position: absolute;
43 |     inset: 0;
44 |     width: 100%;
45 |     height: 100%;
46 |     background-color: rgba(0, 0, 0, 0.3);
47 | }
48 | @media screen and (max-width: 1200px) {
49 |     .panel {
50 |         width: 100%;
51 |     }
52 | }
53 | @media screen and (max-width: 992px) {
54 |     .container {
55 |         width: 100% ;
56 |         padding: 0 30px;
57 |     }
58 | }


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
 1 | import { useEffect, useState, useCallback } from 'react';
 2 | 
 3 | // import bootstrap
 4 | import 'bootstrap/dist/css/bootstrap.min.css'
 5 | 
 6 | // import my other component 
 7 | import RegisterForm from './Components/Forms/RegisterForm/RegisterForm'
 8 | import Panel from './Components/Panel/Panel';
 9 | import LoginForm from './Components/Forms/LoginForm/LoginForm';
10 | 
11 | // import utils
12 | import { getStorage } from './utils/storage';
13 | 
14 | const App = () => {
15 |   const [toggle, setToggle] = useState('');
16 |     
17 |   const changeToggle = (toggle) => setToggle(toggle)
18 |   
19 |   const checkIsInitStorage = () => getStorage('users') && getStorage('users').length !== 0
20 |   
21 |   const checkUserIsRegister = useCallback(() => {
22 |     if (checkIsInitStorage()) {
23 |       const userId = getStorage('id')
24 |       const users = getStorage('users')
25 |       
26 |       const [userRegistered] = users.filter(user => user.id === userId)
27 |       
28 |       userRegistered.isLogin && changeToggle('panel')
29 |       !userRegistered.isLogin && changeToggle('login')
30 |     } else changeToggle('register')
31 |   }, [])
32 | 
33 |   useEffect(() => {
34 |     checkUserIsRegister()
35 |   }, [checkUserIsRegister])
36 |   
37 |   
38 |   return (
39 |     <>
40 |       { toggle === 'register' && <RegisterForm onRegister={checkUserIsRegister}  onLogin={changeToggle} /> }
41 |       { toggle === 'login' && <LoginForm onRegister={changeToggle} onLogin={checkUserIsRegister} /> }
42 |       { toggle === 'panel' && <Panel onLogOut={checkUserIsRegister} /> }
43 |     </>
44 |   )
45 | }
46 | 
47 | export  default App


--------------------------------------------------------------------------------
/src/Components/Panel/UserProfile/UserProfile.jsx:
--------------------------------------------------------------------------------
 1 | // import styles of this component
 2 | import styles from './UserProfile.module.css'
 3 | // import other pkgs
 4 | import { Import } from 'iconsax-react'
 5 | import PropTypes from 'prop-types';
 6 | 
 7 | const UserProfile = ({ userProfile='img/Arash.jpg', userBirthday, username, userEmail }) => {
 8 |     const capitalizeText = (text) => {
 9 |         const firstLetter = text.charAt(0).toUpperCase()
10 |         const otherLetters = text.slice(1)
11 |         return `${firstLetter}${otherLetters}`
12 |     }
13 | 
14 |     return (
15 |         <div className={`${styles['user-profile']} d-flex flex-column align-items-center border bg-white`}>
16 |             <label htmlFor="user-profile" className={styles['user-profile-label']}>
17 |                 <img src={userProfile} alt="" />
18 |                 <div className={`${styles['profile-icon-box']} bg-primary`}>
19 |                     <Import size='20' color="white" />
20 |                 </div>
21 |                 <input type="file" className="d-none" id='user-profile' />
22 |             </label>
23 |             <h1 className={`${styles.username} mt-3`}> {capitalizeText(username)} </h1>
24 |             <h4 className={`${styles['user-birthday']} mt-1`}>🥳 {userBirthday} 🥳</h4>
25 |             <h4 className={`${styles['user-email']} mt-1`}>{capitalizeText(userEmail)}</h4>
26 |         </div>
27 |     )
28 | }
29 | 
30 | // validate the component
31 | UserProfile.propTypes = {
32 |     userProfile: PropTypes.string,
33 |     username: PropTypes.string.isRequired,
34 |     userBirthday: PropTypes.string.isRequired,
35 |     userEmail: PropTypes.string.isRequired,
36 | }
37 | 
38 | export default UserProfile


--------------------------------------------------------------------------------
/src/Components/Panel/SideBarLinks/SideBarLink/SideBarLink.jsx:
--------------------------------------------------------------------------------
 1 | // import styles of this component
 2 | import styles from './SideBarLink.module.css'
 3 | 
 4 | // import other pkg to use
 5 | import { ArrowRight2 } from 'iconsax-react'
 6 | import PropTypes from 'prop-types'
 7 | 
 8 | const SideBarLink = ({ id, border, text, icon, href, active, onActive }) => {
 9 |     return (
10 |         <>
11 |             <li className={`${styles['sidebar-link']} d-flex justify-content-between align-items-center px-4`} onClick={() => onActive(id)}>
12 |                 {href ? (
13 |                     <a href={href} className='d-flex justify-content-between w-100 align-items-center text-decoration-none text-black'>
14 |                         {icon}
15 |                         <span>{text}</span>
16 |                         <ArrowRight2 className={`${styles['right-arrow-icon']}`} size='20' color="black" />
17 |                     </a>
18 |                 ) : (
19 |                     <>
20 |                         {icon}
21 |                         <span className={active ? 'text-primary' : 'text-black'}>{text}</span>
22 |                         <ArrowRight2 className={`${styles['right-arrow-icon']} ${active && styles.active}`} size='20' color="black" />
23 |                     </>
24 |                 )}
25 |             </li>
26 |             {border && <div className={styles['sidebar-link-border']}><div></div></div>}
27 |         </>
28 |     )
29 | }
30 | 
31 | // validate component
32 | SideBarLink.propTypes = {
33 |     id: PropTypes.number.isRequired,
34 |     className: PropTypes.string,
35 |     border: PropTypes.bool,
36 |     text: PropTypes.string.isRequired,
37 |     icon: PropTypes.element,
38 |     href: PropTypes.string,
39 |     active: PropTypes.bool,
40 |     onActive: PropTypes.func.isRequired,
41 | }
42 | 
43 | export default SideBarLink


--------------------------------------------------------------------------------
/src/Components/Panel/SideBarLinks/SideBarLinks.jsx:
--------------------------------------------------------------------------------
 1 | import { useState } from 'react'
 2 | 
 3 | // import styles of this component
 4 | import styles from './SideBarLinks.module.css'
 5 | 
 6 | // import other component to use
 7 | import SideBarLink from "./SideBarLink/SideBarLink";
 8 | 
 9 | // import other pkg 
10 | import PropTypes from 'prop-types'
11 | 
12 | const SideBarLinks = ({ sidebarLinks, onChangeToggle }) => {
13 |     const [linksState, setLinks] = useState({
14 |         links: [ ...sidebarLinks  ]
15 |     })
16 | 
17 |     const activeLink = (linkId) => {
18 |         linksState.links.forEach(link => link.active = false)
19 |         
20 |         const link = linksState.links.find(link => link.id === linkId)
21 |         if (!link.href) {
22 |             link.active = true
23 |             
24 |             setLinks(prev => {
25 |                 return {
26 |                     links: [
27 |                         ...prev.links
28 |                     ]
29 |                 }
30 |             })
31 | 
32 |             onChangeToggle(link.text.toLowerCase())
33 |         }
34 |     }
35 | 
36 |     return (
37 |         <div className={`${styles['sidebar-links']} mt-4 bg-white border px-2 py-4`}>
38 |             <ul className="m-0 p-0">
39 |                 {linksState.links.map(link => (
40 |                     <SideBarLink 
41 |                         key={link.id}
42 |                         id={link.id}
43 |                         href={link.href} 
44 |                         border={link.border}
45 |                         text={link.text} 
46 |                         icon={link.icon} 
47 |                         active={link.active} 
48 |                         onActive={activeLink}
49 |                     />
50 |                 ))}
51 |             </ul>
52 |         </div>
53 |     )
54 | }
55 | 
56 | // validate the component
57 | SideBarLinks.propTypes = {
58 |     sidebarLinks: PropTypes.array.isRequired,
59 |     onChangeToggle: PropTypes.func.isRequired,
60 | }
61 | 
62 | export default SideBarLinks


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | - dont see the shit codes ! it's just experiment 
 2 | # User Panel Usgin React ✨🔥
 3 | a few days ago I decided to do this project for myself as practice.This user panel created by react js and I used Formik and Yup for easier input validation 🙂🎈 and I just wanted to focus on  logic so I used react bootstrap to design the whole  pages.
 4 | 
 5 | # pages 
 6 |  login
 7 | - register
 8 | - user panel
 9 | 
10 | # Login page
11 | ![Screenshot 2022-06-02 122209](https://user-images.githubusercontent.com/89915857/171581524-e5ae72f8-1a5e-4878-a339-703278d1462f.png)
12 | as I said I didn't want to focous on the design and design take my all of times so It's a simple page for the login.
13 | ## Login Inputs
14 | - Username 
15 | - Email
16 | - Password
17 | # Register Page
18 | ![Screenshot 2022-06-02 122457](https://user-images.githubusercontent.com/89915857/171582086-05fc7f34-5131-464b-b468-c6b7e6a83a78.png)
19 | as you know this page is for user register and you all of the inputs handled by the yup and formik and it maked me so easy and relax for the validation.
20 | ## register inputs
21 | - Username
22 | - Email
23 | - Birthday
24 | - Password
25 | - Confirm Password
26 | 
27 | # User Panel
28 | ![Screenshot 2022-06-02 124331](https://user-images.githubusercontent.com/89915857/171585603-4845b892-8fff-49f3-b855-d8685e83468c.png)
29 | this page is for the users and all the data has to be dynamic. users can change their information by information page and change password page.
30 | 
31 | ## Information Page
32 | ![Screenshot 2022-06-02 131603](https://user-images.githubusercontent.com/89915857/171592246-cce8f8ab-1e63-4f5f-b8ec-39f94ef09b3e.png)
33 | 
34 | 
35 | ## Change Password Page
36 | ![Screenshot 2022-06-02 131611](https://user-images.githubusercontent.com/89915857/171592343-fc263921-41a8-4db5-adfc-1adc6e935a04.png)
37 | 
38 | 
39 | # Components Structure
40 | ```
41 | ├───Forms
42 | │   ├───FormInput
43 | │   ├───LoginForm
44 | │   └───RegisterForm
45 | ├───Panel
46 | │   ├───SideBarLinks
47 | │   │   └───SideBarLink
48 | │   ├───UserCard
49 | │   ├───UserChangePassword
50 | │   ├───UserInformation
51 | │   └───UserProfile
52 | └───Titles
53 | ```
54 | 
55 | # Features
56 | - [x] Users can change their information
57 | - [x] simple ui design
58 | - [x] responsive
59 | - [ ] users can upload their own profiles and banner
60 | - [x] Users can set their first name and last name
61 | 


--------------------------------------------------------------------------------
/src/Components/Forms/FormInput/FormInput.jsx:
--------------------------------------------------------------------------------
 1 | import { PureComponent } from 'react'
 2 | 
 3 | // import styles of this component
 4 | import styles from "./FormInput.module.css"
 5 | // import react bootstrap components 
 6 | import { FormGroup, FormLabel, FormControl, FormText } from 'react-bootstrap'
 7 | // import pkgs
 8 | import PropTypes  from 'prop-types'
 9 | 
10 | class FormInput extends PureComponent {
11 |     render() {
12 |         // props
13 |         const {
14 |             inpClass='',
15 |             className='', 
16 |             controlId, 
17 |             name, 
18 |             text, 
19 |             placeholder, 
20 |             type="text", 
21 |             as,
22 |             errMsg, 
23 |             successMsg, 
24 |             valid, 
25 |             invalid, 
26 |             size='md',
27 |             value,
28 |             onChange,
29 |             xs,
30 |             sm,
31 |             md,
32 |             lg,
33 |         } = this.props
34 |         
35 |         return (
36 |             <FormGroup controlId={controlId} className={className} as={as} xs={xs} sm={sm} md={md} lg={lg}>
37 |                 <FormLabel className={styles['form-label']}>{text}</FormLabel>
38 |                 <FormControl 
39 |                     isInvalid={invalid}
40 |                     isValid={valid}
41 |                     type={type} 
42 |                     className={`${styles["form-input"]} ${inpClass}`} 
43 |                     size={size}
44 |                     placeholder={placeholder}
45 |                     autoComplete="off"
46 |                     name={name}
47 |                     value={value}
48 |                     onChange={onChange}
49 |                     spellCheck="off"
50 |                 />
51 |                 {invalid && <FormText className="text-danger">{ errMsg }</FormText>}
52 |                 {valid && <FormText className="text-success">{ successMsg }</FormText>}
53 |             </FormGroup>
54 |         )
55 |     }
56 | }
57 | 
58 | // validate this component
59 | FormInput.propTypes = {
60 |     inpClass: PropTypes.string,
61 |     className: PropTypes.string,
62 |     controlId: PropTypes.string.isRequired,
63 |     name: PropTypes.string.isRequired,
64 |     text: PropTypes.string.isRequired,
65 |     placeholder: PropTypes.string.isRequired, 
66 |     type: PropTypes.string, 
67 |     as: PropTypes.elementType,
68 |     errMsg: PropTypes.string.isRequired, 
69 |     successMsg: PropTypes.string.isRequired, 
70 |     valid: PropTypes.bool.isRequired, 
71 |     invalid: PropTypes.bool.isRequired, 
72 |     size: PropTypes.string,
73 |     value: PropTypes.string.isRequired,
74 |     onChange: PropTypes.func.isRequired
75 | }
76 | 
77 | export default FormInput


--------------------------------------------------------------------------------
/src/Components/Panel/UserChangePassword/UserChangePassword.jsx:
--------------------------------------------------------------------------------
  1 | import { useState } from 'react';
  2 | 
  3 | // import other component
  4 | import Titles from '../../Titles/Titles'
  5 | import FormInput from '../../Forms/FormInput/FormInput'
  6 | 
  7 | // import other pkg
  8 | import { Form, Button } from 'react-bootstrap'
  9 | import { useFormik } from 'formik'
 10 | import { string, object, ref } from 'yup'
 11 | 
 12 | const UserChangePassword = ({ password, onChangeInfo }) => {
 13 |     const [submit, setSubmit] = useState(false)
 14 | 
 15 |     const formik = useFormik({
 16 |         initialValues: {
 17 |             currentPassword: '',
 18 |             newPassword: '',
 19 |             confirmNewPassword: '',
 20 |         },
 21 |         validationSchema: object({
 22 |             currentPassword: string().required('please enter your current password')
 23 |                 .min(8, 'your current password must be 8 characters or more')
 24 |                 .matches(/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[a-zA-Z]).{8,}$/, 'invalid password'),
 25 |                 
 26 |             newPassword: string().required('please enter your new password')
 27 |                 .min(8, 'your new password must be 8 characters or more')
 28 |                 .matches(/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[a-zA-Z]).{8,}$/, 'invalid password'),
 29 | 
 30 |             confirmNewPassword: string().required('please enter your confirm new password')
 31 |                 .matches(/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[a-zA-Z]).{8,}$/, 'invalid password')
 32 |                 .oneOf([ref('newPassword')], 'your confirm new password must match')
 33 |         }),
 34 |         onSubmit: (values, { setFieldError }) => {
 35 |             if (values.currentPassword === password)
 36 |                 onChangeInfo(['password'], [values.newPassword])
 37 |             else
 38 |                 setFieldError('currentPassword', "your current password isn't true")
 39 |         }
 40 |     })
 41 | 
 42 |     return (
 43 |         <>
 44 |             <Titles title="Welcome to the change password" text="change your password as you want" />
 45 | 
 46 |             <Form className="mt-5" noValidate onSubmit={formik.handleSubmit}>
 47 |                 <FormInput 
 48 |                     type="Password"
 49 |                     className="p-0"
 50 |                     inpClass='px-3 py-2'
 51 |                     name="currentPassword"
 52 |                     controlId="current-password-input"
 53 |                     text="Current Password"
 54 |                     placeholder="Enter your Current Password"
 55 |                     valid={submit && !formik.errors.currentPassword ? true : false}
 56 |                     errMsg={formik.errors.currentPassword || ''}
 57 |                     invalid={submit && formik.errors.currentPassword ? true : false}
 58 |                     successMsg="done"
 59 |                     {...formik.getFieldProps('currentPassword')}
 60 |                 />
 61 |                 <FormInput 
 62 |                     type="password"
 63 |                     inpClass='px-3 py-2'
 64 |                     className="p-0 mt-3"
 65 |                     name="newPassword"
 66 |                     controlId="new-password-input"
 67 |                     text="New Password"
 68 |                     placeholder="Enter your New Password"
 69 |                     valid={submit && !formik.errors.newPassword ? true : false}
 70 |                     errMsg={formik.errors.newPassword || ''}
 71 |                     invalid={submit && formik.errors.newPassword ? true : false}
 72 |                     successMsg="done"
 73 |                     {...formik.getFieldProps('newPassword')}
 74 |                 />
 75 |                 <FormInput 
 76 |                     type="password"
 77 |                     inpClass='px-3 py-2'
 78 |                     className="p-0 mt-3"
 79 |                     name="confirmNewPassword"
 80 |                     controlId="confirm-new-password-input"
 81 |                     text="Confirm New Password"
 82 |                     placeholder="Enter your Confirm New Password"
 83 |                     valid={submit && !formik.errors.confirmNewPassword ? true : false}
 84 |                     errMsg={formik.errors.confirmNewPassword || ''}
 85 |                     invalid={submit && formik.errors.confirmNewPassword ? true : false}
 86 |                     successMsg="done"
 87 |                     {...formik.getFieldProps('confirmNewPassword')}
 88 |                 />
 89 |                 <Button 
 90 |                     variant="primary" 
 91 |                     disabled={submit && !formik.isValid ? true : false}
 92 |                     className='mt-5 py-2 px-4' 
 93 |                     type="submit" 
 94 |                     onClick={() => setSubmit(true)}>
 95 |                     Update
 96 |                 </Button>
 97 |             </Form>
 98 |         </>
 99 |     )
100 | }
101 | 
102 | export default UserChangePassword


--------------------------------------------------------------------------------
/src/Components/Forms/LoginForm/LoginForm.jsx:
--------------------------------------------------------------------------------
  1 | import { useState } from 'react'
  2 | 
  3 | // import styles of this component
  4 | import styles from '../Forms.module.css'
  5 | 
  6 | // import other component
  7 | import FormInput from '../FormInput/FormInput'
  8 | 
  9 | // import other pkgs
 10 | import { Container, Form, Button } from 'react-bootstrap'
 11 | import { useFormik } from 'formik'
 12 | import { object, string } from 'yup'
 13 | import PropTypes from 'prop-types'
 14 | 
 15 | // import utils 
 16 | import { getStorage, setUserId, updateStorage } from '../../../utils/storage'
 17 | 
 18 | const LoginForm = ({ onRegister, onLogin }) => {
 19 |     const [submit, setSubmit] = useState(false)
 20 | 
 21 |     const formik = useFormik({
 22 |         initialValues: {
 23 |             username: '',
 24 |             email: '',
 25 |             password: '',
 26 |         },
 27 |         validationSchema: object({
 28 |             username: string().required('please enter your username')
 29 |                 .max(15, 'your username must be 15 characters or less')
 30 |                 .min(4, 'your username must be 4 characters or more'),
 31 |             email: string().email('invalid email').required('please enter your email'),
 32 |             password: string().required('please enter your password')
 33 |                 .min(8, 'your password must be 8 characters or more')
 34 |                 .matches(/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[a-zA-Z]).{8,}$/, 'invalid password'),
 35 |         }),
 36 |         onSubmit: ({ username, email, password }, { setFieldError }) => {
 37 |             const users = getStorage('users')
 38 |             const myVerifyUser = users && users.find(user => user.username === username)
 39 |             
 40 |             if (users && myVerifyUser) {
 41 |                 if (myVerifyUser.email === email && myVerifyUser.password === password)
 42 |                     login(myVerifyUser)
 43 |                 else if (myVerifyUser.email !== email)
 44 |                     setFieldError('email', `your email isn't true`)
 45 |                 else 
 46 |                     setFieldError('password', `your password isn't correct`)
 47 |             } else
 48 |                 setFieldError('username', 'your username not found')
 49 |         }
 50 |     })
 51 | 
 52 |     const login = (myVerifyUser) => {
 53 |         const users = getStorage('users')
 54 |         updateStorage(users, myVerifyUser, true)
 55 |         setUserId(myVerifyUser.id)
 56 |         onLogin()
 57 |     }
 58 | 
 59 |     return (
 60 |         <Container fluid className={`${styles.container} d-flex justify-content-center align-items-center px-5`}>
 61 |             <Form noValidate className={styles.form} onSubmit={formik.handleSubmit}>
 62 |                 <h2>Login</h2>
 63 | 
 64 |                 <FormInput
 65 |                     className="mb-4 mt-5"
 66 |                     name="username"
 67 |                     controlId="username-input"
 68 |                     text="Username"
 69 |                     placeholder="Enter your Username"
 70 |                     errMsg={formik.errors.username || ''}
 71 |                     successMsg="done"
 72 |                     invalid={submit && formik.errors.username ? true : false}
 73 |                     valid={submit && !formik.errors.username ? true : false}
 74 |                     {...formik.getFieldProps('username')}
 75 |                 />
 76 | 
 77 |                 <FormInput  
 78 |                     className="mb-4"
 79 |                     name="email"
 80 |                     controlId="email-input"
 81 |                     text="Email"
 82 |                     placeholder="Enter your Email"
 83 |                     errMsg={formik.errors.email || ''}
 84 |                     successMsg="done"
 85 |                     invalid={submit && formik.errors.email ? true : false}
 86 |                     valid={submit && !formik.errors.email ? true : false}
 87 |                     {...formik.getFieldProps('email')}
 88 |                 />
 89 | 
 90 |                 <FormInput
 91 |                     className="mb-4"
 92 |                     name="password"
 93 |                     controlId="password-input"
 94 |                     text="Password"
 95 |                     placeholder="Enter your Password"
 96 |                     type="password"
 97 |                     errMsg={formik.errors.password || ''}
 98 |                     successMsg="done"
 99 |                     invalid={submit && formik.errors.password ? true : false}
100 |                     valid={submit && !formik.errors.password ? true : false}
101 |                     {...formik.getFieldProps('password')}
102 |                 />
103 | 
104 |                 <Button 
105 |                     onClick={() => onRegister('register')}
106 |                     className='shadow-none mt-4 p-0'
107 |                     type="button"
108 |                     variant="">
109 |                     you dont' have any account ?
110 |                 </Button>
111 | 
112 |                 <Button 
113 |                     className={`${styles["submit-btn"]} w-100`} 
114 |                     onClick={() => setSubmit(true)}
115 |                     disabled={submit && !formik.isValid ? true : false}
116 |                     variant="primary" 
117 |                     type="submit">
118 |                     Login
119 |                 </Button>
120 |             </Form>
121 |         </Container>
122 |     )
123 | }
124 | 
125 | // validate the component
126 | LoginForm.propTypes = {
127 |     onRegister: PropTypes.func.isRequired, 
128 |     onLogin: PropTypes.func.isRequired,
129 | }
130 | 
131 | export default LoginForm


--------------------------------------------------------------------------------
/src/Components/Panel/Panel.jsx:
--------------------------------------------------------------------------------
  1 | import { PureComponent } from 'react'
  2 | import { createPortal } from 'react-dom';
  3 | 
  4 | // import styles of this component
  5 | import styles from './Panel.module.css'
  6 | 
  7 | // import other component
  8 | import UserCard from './UserCard/UserCard'
  9 | import UserInformation from './UserInformation/UserInformation'
 10 | import UserChangePassword from './UserChangePassword/UserChangePassword'
 11 | 
 12 | // import other pkgs
 13 | import { UserEdit, Lock, ProfileCircle, Code1 } from "iconsax-react";
 14 | import { Row, Col, Button } from 'react-bootstrap'
 15 | import PropTypes from 'prop-types'
 16 | 
 17 | // import utils
 18 | import { getStorage, updateStorage } from './../../utils/storage';
 19 | 
 20 | class Panel extends PureComponent {
 21 |     constructor(props) {
 22 |         super(props)
 23 |         this.myVerifyUser = this.getUserFromStorage()
 24 |         
 25 |         this.state = {
 26 |             user: {...this.initState(this.myVerifyUser)},
 27 |             toggle: 'information',
 28 |         }
 29 |         
 30 |         this.sidebarLinks = [
 31 |             {
 32 |                 id: 1,
 33 |                 border: true,
 34 |                 text: 'Information',
 35 |                 icon: <UserEdit size='20' color="black"/>,
 36 |                 active: true,
 37 |             },
 38 |             {
 39 |                 id: 2,
 40 |                 border: true,
 41 |                 text: 'Password',
 42 |                 icon: <Lock size="20" color="black" />,
 43 |                 active: false,
 44 |             },
 45 |             {
 46 |                 id: 3,
 47 |                 border: true,
 48 |                 text: 'Profile',
 49 |                 icon: <ProfileCircle size="20" color="black" />,
 50 |                 active: false,
 51 |             },
 52 |             {
 53 |                 id: 4,
 54 |                 border: false,
 55 |                 href: 'https://github.com/Banana021s/React-User-Panel',
 56 |                 text: 'Github repo',
 57 |                 icon: <Code1 size="20" color="black" />,
 58 |             }
 59 |         ]
 60 | 
 61 |         this.logOut = this.logOut.bind(this)
 62 |         this.changeToggle = this.changeToggle.bind(this)
 63 |         this.changeUserInformation = this.changeUserInformation.bind(this)
 64 |     }
 65 | 
 66 |     getUserFromStorage() {
 67 |         const users = getStorage('users')
 68 |         const userId = getStorage('id')
 69 |         const myVerifyUser = users.find(user => user.id === userId)
 70 |         
 71 |         return myVerifyUser
 72 |     }
 73 | 
 74 |     initState({ id, username, email, birthday, password, isLogin, firstName, lastName }) {
 75 |         return ({ id, username, email, birthday, password, firstName, lastName, isLogin, })
 76 |     }
 77 | 
 78 |     logOut() {
 79 |         this.changeUserInformation(['isLogin'], [false])
 80 |     }
 81 | 
 82 |     componentDidUpdate() {
 83 |         updateStorage(getStorage('users'), this.state.user)
 84 |         !this.state.user.isLogin && this.props.onLogOut()
 85 |     }
 86 | 
 87 |     changeToggle(toggle) {
 88 |         this.setState({ toggle })
 89 |     }
 90 | 
 91 |     changeUserInformation(keyInfos, valInfos) {
 92 |         let newInfo = {}
 93 |         
 94 |         keyInfos.forEach((keyInfo, idx) => (
 95 |             newInfo[keyInfo] = valInfos[idx]
 96 |         ))
 97 | 
 98 |         this.setState(prev => {
 99 |             return {
100 |                 user: {
101 |                     ...prev.user,
102 |                     ...newInfo,
103 |                 }
104 |             }
105 |         })
106 |     }
107 |         
108 |     render() {
109 |         return (
110 |             <div className={`${styles['panel-wrapper']} d-flex align-items-center justify-content-center`}>
111 |                 {/* <div className={styles['bg-overlay']}></div> TODO */} 
112 |                 <div className={`${styles.container} d-flex justify-content-center align-items-center p-0`}>
113 |                     <Row className={`${styles['panel']} flex-column flex-md-row justify-content-center align-items-center px-3`}>
114 |                         <Col xs={12} sm={8} md={4} className="d-flex flex-column justify-content-center p-0">
115 |                             <UserCard 
116 |                                 username={this.state.user.username} 
117 |                                 userBirthday={this.state.user.birthday} 
118 |                                 userEmail={this.state.user.email} 
119 |                                 sidebarLinks={this.sidebarLinks}
120 |                                 onChangeToggle={this.changeToggle}
121 |                             />
122 |                         </Col>
123 |                         
124 |                         <Col xs={12} sm={8} md={7} className={`${styles['panel-column']} bg-white border mt-5 mt-md-0 ms-md-5 p-5`}>
125 |                             {this.state.toggle === 'information' && (
126 |                                 <UserInformation 
127 |                                     username={this.state.user.username}
128 |                                     firstName={this.state.user.firstName}
129 |                                     lastName={this.state.user.lastName}
130 |                                     email={this.state.user.email} 
131 |                                     birthday={this.state.user.birthday} 
132 |                                     onChangeInfo={this.changeUserInformation}
133 |                                 />
134 |                             )}
135 |                             {this.state.toggle === 'password' && (
136 |                                 <UserChangePassword 
137 |                                     password={this.state.user.password}
138 |                                     onChangeInfo={this.changeUserInformation} 
139 |                                 />
140 |                             )}
141 |                         </Col>
142 |                     </Row>
143 |                 </div >
144 |                 {createPortal((
145 |                     <Button 
146 |                         variant="primary" 
147 |                         className={styles["log-out-btn"]} 
148 |                         onClick={this.logOut}>
149 |                         Log out
150 |                     </Button>
151 |                 ), document.getElementById("root"))}
152 |             </div>
153 |         )
154 |     }
155 | }
156 | 
157 | // validate component
158 | Panel.propTypes = {
159 |     onLogOut: PropTypes.func.isRequired
160 | }
161 | 
162 | export default Panel


--------------------------------------------------------------------------------
/src/Components/Forms/RegisterForm/RegisterForm.jsx:
--------------------------------------------------------------------------------
  1 | import { useState } from 'react';
  2 | 
  3 | // import styles of this component
  4 | import styles from '../Forms.module.css'
  5 | 
  6 | // import other component to use
  7 | import FormInput from '../FormInput/FormInput';
  8 | 
  9 | // import other pkg to use
 10 | import { useFormik } from 'formik';
 11 | import { object, string, date, ref } from 'yup'
 12 | import PropTypes from 'prop-types';
 13 | import { v4 as uniqid } from 'uuid';
 14 | import { Container, Button, Form } from 'react-bootstrap';
 15 | 
 16 | // import utils 
 17 | import { getStorage, setUserId, setUserInStorage } from '../../../utils/storage';
 18 | 
 19 | const RegisterForm = ({ onRegister, onLogin }) => {
 20 |     const [submit, setSubmit] = useState(false)
 21 | 
 22 |     const formik = useFormik({
 23 |         initialValues: {
 24 |             username: '',
 25 |             email: '',
 26 |             birthday: '',
 27 |             password: '',
 28 |             confirmPassword: '',
 29 |         },
 30 |         validationSchema: object({
 31 |             username: string().required('please enter your username')
 32 |                 .max(15, 'your username must be 15 characters or less')
 33 |                 .min(4, 'your username must be 4 characters or more'),
 34 |             email: string().email('invalid email').required('Please enter your email'),
 35 |             birthday: date().required('please enter your birthday date')
 36 |                 .min('1922-01-01', 'your birthday date must be 1922-01-01 or more')
 37 |                 .max('2022-05-22', 'invalid birthday date'),
 38 |             password: string().required('please enter your password')
 39 |                 .min(8, 'your password must be 8 characters or more')
 40 |                 .matches(/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[a-zA-Z]).{8,}$/, 'invalid password'),
 41 |             confirmPassword: string().required('please enter your confirm password')
 42 |                 .oneOf([ref('password')], 'your confirm password must match'),
 43 |         }),
 44 |         onSubmit: (values, { setFieldError }) => {
 45 |             if (getStorage('users')) {
 46 |                 const [isIterateUsername, isIterateEmail] = checkUser(values.username, values.email)
 47 |                 
 48 |                 if (isIterateUsername) 
 49 |                     setFieldError('username', 'please change your username')
 50 |                 else if (isIterateEmail) 
 51 |                     setFieldError('email', 'please change your email')
 52 |                 else {
 53 |                     const userId = uniqid()
 54 |                     const users = getStorage('users')
 55 |                     const user = { id: userId, ...values, isLogin: true, }
 56 |                     users.push(user)
 57 | 
 58 |                     setUserId(userId)
 59 |                     setUserInStorage('users', users)
 60 |                     onRegister()
 61 |                 }
 62 |             } else {
 63 |                 const userId = uniqid()
 64 |                 const users = [{ id: userId, ...values, isLogin: true, }]
 65 |                 
 66 |                 setUserId(userId)
 67 |                 setUserInStorage('users', users)
 68 |                 onRegister()
 69 |             }
 70 |         }
 71 |     })
 72 | 
 73 |     const checkUser = (username, email) => {
 74 |         const users = getStorage('users')
 75 |         const isIterateUsername = users.some(user => user.username === username)
 76 |         const isIterateEmail = users.some(user => user.email === email)
 77 | 
 78 |         return [isIterateUsername , isIterateEmail]
 79 |     }
 80 | 
 81 |     return (
 82 |         <Container fluid className={`${styles.container} d-flex justify-content-center align-items-center px-5`}>
 83 |             <Form noValidate className={styles.form} onSubmit={formik.handleSubmit}>
 84 |                 <h2>Register</h2>
 85 | 
 86 |                 <FormInput 
 87 |                     className="mt-5 mb-4"
 88 |                     controlId="usernameInp"
 89 |                     name="username"
 90 |                     text="Username"
 91 |                     placeholder="Enter your username"
 92 |                     invalid={submit && formik.errors.username ? true : false}
 93 |                     errMsg={formik.errors.username || ''}
 94 |                     valid={submit && !formik.errors.username ? true : false}
 95 |                     successMsg="done"
 96 |                     {...formik.getFieldProps('username')}
 97 |                 />
 98 | 
 99 |                 <FormInput 
100 |                     className="mb-4"
101 |                     controlId="emailInp"
102 |                     name="email"
103 |                     text="Email"
104 |                     placeholder="Enter your Email"
105 |                     invalid={submit && formik.errors.email ? true : false}
106 |                     errMsg={formik.errors.email || ''}
107 |                     valid={submit && !formik.errors.email ? true : false}
108 |                     successMsg="done"
109 |                     {...formik.getFieldProps('email')}
110 |                 />
111 | 
112 |                 <FormInput 
113 |                     className="mb-4"
114 |                     type="date"
115 |                     controlId="birthdayInp"
116 |                     name="birthday"
117 |                     text="birthday"
118 |                     placeholder="Enter your birthday date"
119 |                     invalid={submit && formik.errors.birthday ? true : false}
120 |                     errMsg={formik.errors.birthday || ''}
121 |                     valid={submit && !formik.errors.birthday ? true : false}
122 |                     successMsg="done"
123 |                     {...formik.getFieldProps('birthday')}
124 |                 />
125 | 
126 |                 <FormInput 
127 |                     className="mb-4"
128 |                     type="password"
129 |                     controlId="passwordInp"
130 |                     name="password"
131 |                     text="Password"
132 |                     placeholder="Enter your Password"
133 |                     invalid={submit && formik.errors.password ? true : false}
134 |                     errMsg={formik.errors.password || ''}
135 |                     valid={submit && !formik.errors.password ? true : false}
136 |                     successMsg="done"
137 |                     {...formik.getFieldProps('password')}
138 |                 />
139 | 
140 |                 <FormInput 
141 |                     className="mb-4"
142 |                     type="password"
143 |                     controlId="confirmPasswordInp"
144 |                     name="confirmPassword"
145 |                     text="Confirm Password"
146 |                     placeholder="Enter your Confirm Password"
147 |                     invalid={submit && formik.errors.confirmPassword ? true : false}
148 |                     errMsg={formik.errors.confirmPassword || ''}
149 |                     valid={submit && !formik.errors.confirmPassword ? true : false}
150 |                     successMsg="done"
151 |                     {...formik.getFieldProps('confirmPassword')}
152 |                 />
153 | 
154 |                 <Button 
155 |                     onClick={() => onLogin('login')}
156 |                     className='shadow-none mt-4 p-0'
157 |                     type="button"
158 |                     variant="">
159 |                     you have an account ?
160 |                 </Button>
161 | 
162 |                 <Button 
163 |                     className={`${styles["submit-btn"]} w-100`} 
164 |                     onClick={() => setSubmit(true)}
165 |                     disabled={submit && !formik.isValid ? true : false}
166 |                     variant="primary" 
167 |                     type="submit">
168 |                     Register
169 |                 </Button>
170 |             </Form>
171 |         </Container>
172 |     )
173 | }
174 | 
175 | // validate component
176 | RegisterForm.propTypes = {
177 |     onRegister: PropTypes.func.isRequired,
178 |     onLogin: PropTypes.func.isRequired,
179 | }
180 | 
181 | export default RegisterForm


--------------------------------------------------------------------------------
/src/Components/Panel/UserInformation/UserInformation.jsx:
--------------------------------------------------------------------------------
  1 | import { useState } from 'react';
  2 | 
  3 | // import other component
  4 | import FormInput from '../../Forms/FormInput/FormInput';
  5 | import Titles from '../../Titles/Titles';
  6 | 
  7 | // import other pkg
  8 | import { Form, Row, Col, Button } from 'react-bootstrap';
  9 | import { useFormik } from 'formik';
 10 | import { object, string, date } from 'yup'
 11 | import PropTypes from 'prop-types';
 12 | 
 13 | // import utils
 14 | import { getStorage } from '../../../utils/storage';
 15 | 
 16 | 
 17 | const UserInformation = ({ username , firstName, lastName, email, birthday, onChangeInfo }) => {
 18 |     const [submit, setSubmit] = useState(false)
 19 | 
 20 |     const isNotIterateEmail = (username, email) => {
 21 |         const users = getStorage('users')
 22 |         
 23 |         const [isNotIterateUsername, isNotIterateEmail] = users.map(user => (
 24 |             user.username !== username && user.email === email
 25 |         ))
 26 | 
 27 |         return ((!isNotIterateUsername && !isNotIterateEmail) || (isNotIterateUsername && isNotIterateEmail)) ? true : false
 28 |     }
 29 | 
 30 |     const formik = useFormik({
 31 |         initialValues: {
 32 |             firstName: firstName ? firstName : '',
 33 |             lastName: lastName ? lastName : '',
 34 |             email,
 35 |             birthday,
 36 |         },
 37 |         validationSchema: object({
 38 |             firstName: string().max(10, 'your fisrt name must be 10 or less'),
 39 |             lastName: string().max(10, 'your fisrt name must be 10 or less'),
 40 |             email: string().required('please enter your email').email('invalid email'),
 41 |             birthday: date().required('please enter your birthday date')
 42 |                 .min('1922-01-01', 'your birthday date must be 1922-01-01 or more')
 43 |                 .max('2022-05-22', 'invalid birthday date'),
 44 |         }),
 45 |         onSubmit: ({ firstName, lastName, email, birthday }, { setFieldError }) => {
 46 |             const boolIsIterateEmail =  isNotIterateEmail(username, email)
 47 |             
 48 |             if (boolIsIterateEmail) {
 49 |                 if (!firstName && !lastName) {
 50 |                     onChangeInfo(
 51 |                         ['firstName', 'lastName', 'email', 'birthday'], 
 52 |                         ['', '', email, birthday]
 53 |                     )
 54 |                 } else if (!firstName) {
 55 |                     onChangeInfo(
 56 |                         ['firstName' , 'lastName', 'email', 'birthday'],
 57 |                         ['', lastName, email, birthday]
 58 |                     )
 59 |                 } else if (!lastName) {
 60 |                     onChangeInfo(
 61 |                         ['firstName', 'lastName','email', 'birthday'],
 62 |                         [firstName, '' , email, birthday]
 63 |                     )
 64 |                 } else {
 65 |                     onChangeInfo(
 66 |                         ['firstName', 'lastName', 'email', 'birthday'],
 67 |                         [firstName, lastName, email, birthday]
 68 |                     )
 69 |                 }
 70 |             } else 
 71 |                 setFieldError('email', "you can't choose this email")
 72 |         }
 73 |     })
 74 | 
 75 |     return (
 76 |         <>
 77 |             <Titles title='Welcome to the Information' text="check or change your information as you want" />
 78 |             
 79 |             <Form noValidate onSubmit={formik.handleSubmit}>
 80 |                 <Row className="mt-5 px-3">
 81 |                     <FormInput 
 82 |                         xs={12}
 83 |                         lg
 84 |                         as={Col}
 85 |                         inpClass='py-2'
 86 |                         className="p-0"
 87 |                         name="firstName"
 88 |                         controlId="first-name-input"
 89 |                         text="First Name"
 90 |                         placeholder='Arash'
 91 |                         size='sm'
 92 |                         invalid={formik.values.firstName === '' ? false : (
 93 |                             submit && formik.errors.firstName ? true : false
 94 |                         )}
 95 |                         errMsg={formik.errors.firstName || ''}
 96 |                         valid={formik.values.firstName === '' ? false : (
 97 |                             submit && !formik.errors.firstName ? true : false
 98 |                         )}
 99 |                         successMsg="done"
100 |                         {...formik.getFieldProps('firstName')}
101 |                     />
102 |                     <FormInput 
103 |                         xs={12}
104 |                         lg
105 |                         as={Col}
106 |                         inpClass='py-2'
107 |                         className="p-0 ms-lg-5 mt-3 mt-lg-0"
108 |                         name="lastName"
109 |                         controlId="last-name-input"
110 |                         text="Last Name"
111 |                         placeholder="Karimi"
112 |                         size='sm'
113 |                         invalid={formik.values.lastName === '' ? false : (
114 |                             submit && formik.errors.lastName ? true : false
115 |                         )}
116 |                         errMsg={formik.errors.lastName || ''}
117 |                         valid={formik.values.lastName === '' ? false : (
118 |                             submit && !formik.errors.lastName ? true : false
119 |                         )}
120 |                         successMsg="done"
121 |                         {...formik.getFieldProps('lastName')}
122 |                     />
123 |                 </Row>
124 | 
125 |                 <Row className="mt-3 mt-lg-4 px-3">
126 |                     <FormInput 
127 |                         xs={12}
128 |                         lg
129 |                         as={Col}
130 |                         inpClass='py-2'
131 |                         className="p-0"
132 |                         name="email"
133 |                         controlId="email-input"
134 |                         text="Email"
135 |                         placeholder="Enter your Email"
136 |                         size='sm'
137 |                         errMsg={formik.errors.email || ''}
138 |                         successMsg="done"
139 |                         invalid={submit && formik.errors.email ? true : false}
140 |                         valid={submit && !formik.errors.email ? true : false}
141 |                         {...formik.getFieldProps('email')}
142 |                     />
143 |                     <FormInput 
144 |                         xs={12}
145 |                         lg
146 |                         as={Col}
147 |                         inpClass='py-2'
148 |                         className="p-0 ms-lg-5 mt-3 mt-lg-0"
149 |                         name="birthday"
150 |                         controlId="birthday-input"
151 |                         text="birthday"
152 |                         size='sm'
153 |                         placeholder="Enter your birthday"
154 |                         type="date"
155 |                         invalid={submit && formik.errors.birthday ? true : false}
156 |                         errMsg={formik.errors.birthday || ''}
157 |                         valid={submit && !formik.errors.birthday ? true : false}
158 |                         successMsg="done"
159 |                         {...formik.getFieldProps('birthday')}
160 |                     />
161 |                 </Row>
162 |                 <Button 
163 |                     onClick={() => setSubmit(true)}
164 |                     disabled={submit && !formik.isValid ? true : false}
165 |                     variant="primary" className='mt-5 py-2 px-4'
166 |                     type="submit">
167 |                     Update
168 |                 </Button>
169 |             </Form>
170 |         </>
171 |     )
172 | }
173 | 
174 | // validate the component
175 | UserInformation.propTypes = {
176 |     username: PropTypes.string.isRequired, 
177 |     firstName: PropTypes.string.isRequired,
178 |     lastName: PropTypes.string.isRequired,
179 |     email: PropTypes.string.isRequired, 
180 |     birthday: PropTypes.string.isRequired, 
181 |     onChangeInfo: PropTypes.func.isRequired,
182 | }
183 | 
184 | export default UserInformation


--------------------------------------------------------------------------------