From 52786078c73aa1c7381440ad88207cee3a1c3b29 Mon Sep 17 00:00:00 2001 From: bsourisse Date: Wed, 11 Jan 2023 15:00:37 +0100 Subject: [PATCH] style: form construction --- Containers/UserSettings/UserSettings.js | 241 +++++++++++++++++- .../UserSettings/UserSettings.module.css | 126 +++++++++ pages/account/index.js | 176 +------------ styles/default.css | 3 - 4 files changed, 365 insertions(+), 181 deletions(-) diff --git a/Containers/UserSettings/UserSettings.js b/Containers/UserSettings/UserSettings.js index 113717b..ba222ea 100644 --- a/Containers/UserSettings/UserSettings.js +++ b/Containers/UserSettings/UserSettings.js @@ -1,10 +1,14 @@ //Lib import { ToastContainer, toast } from 'react-toastify'; import 'react-toastify/dist/ReactToastify.css'; +import classes from './UserSettings.module.css'; +import { useState } from 'react'; +import { useForm } from 'react-hook-form'; +import { SpinnerDotted } from 'spinners-react'; //Components -export default function RepoList() { +export default function UserSettings(props) { //Var const toastOptions = { position: 'top-right', @@ -16,9 +20,238 @@ export default function RepoList() { progress: undefined, }; + const { + register, + handleSubmit, + formState: { errors }, + reset, + } = useForm(); + + ////State + const [isLoading, setIsLoading] = useState(false); + const [error, setError] = useState(); + + ////Functions + //Form submit Handler for ADD a repo + const formSubmitHandler = async (data) => { + //Remove old error + setError(); + //Loading button on submit to avoid multiple send. + setIsLoading(true); + //POST API to send the new and old password + const response = await fetch('/api/account/updatePassword', { + method: 'PUT', + headers: { + 'Content-type': 'application/json', + }, + body: JSON.stringify(data), + }); + const result = await response.json(); + + if (!response.ok) { + setIsLoading(false); + reset(); + setError(result.message); + setTimeout(() => setError(), 4000); + } else { + reset(); + setIsLoading(false); + toast.success('🔑 Password edited !', { + position: 'top-right', + autoClose: 5000, + hideProgressBar: false, + closeOnClick: true, + pauseOnHover: true, + draggable: true, + progress: undefined, + }); + } + }; + return ( - <> -

TEST

- +
+
+

+ Welcome{' '} + {props.status === 'authenticated' && props.data.user.name}{' '} + 👋 +

+
+ + {/* PASSWORD */} +
+
+

Password

+
+
+ {error && } +
+
+ + {errors.oldPassword && + errors.oldPassword.type === 'required' && ( + + This field is required. + + )} +

+ + {errors.newPassword && ( + + This field is required. + + )} +

+ +
+
+
+
+ {/* USERNAME */} +
+
+

Username

+
+
+ {error && } +
+
+

+ + {errors.email && + errors.email.type === 'required' && ( + + This field is required. + + )} +

+ +
+
+
+
+ {/* EMAIL */} +
+
+

Email

+
+
+ {error && } +
+
+

+ + {errors.email && + errors.email.type === 'required' && ( + + This field is required. + + )} +

+ +
+
+
+
+
); } diff --git a/Containers/UserSettings/UserSettings.module.css b/Containers/UserSettings/UserSettings.module.css index e69de29..de716a5 100644 --- a/Containers/UserSettings/UserSettings.module.css +++ b/Containers/UserSettings/UserSettings.module.css @@ -0,0 +1,126 @@ +.containerSettings { + display: flex; + flex-direction: column; + width: 100%; + max-width: 1000px; + margin-top: 10px; +} + +.containerSetting { + display: flex; + flex-flow: row wrap; + width: calc(100% + 24px); + margin: 40px 20px 20px 5px; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); + border-radius: 5px; + text-align: left; + padding: 32px 24px; + animation: entrance ease-in 0.3s 1 normal none; +} + +@keyframes entrance { + 0% { + opacity: 0; + } + + 50% { + opacity: 0.5; + } + + 100% { + opacity: 1; + } +} + +.settingCategory { + max-width: 33.3333%; + width: 100%; +} +.settingCategory h2 { + color: #494b7a; + margin: 0; +} + +.setting { + max-width: 66.6666%; + width: 100%; +} + +/* Forms */ + +.bwForm { + width: 80%; + border-radius: 5px; + text-align: left; +} + +.bwFormWrapper { + text-align: center; + margin: auto; + width: 100%; + height: auto; + color: #494b7a; +} + +.bwForm label { + display: block; + margin-bottom: 8px; + text-align: center; + margin-top: 20px; + color: #494b7a; +} + +.bwForm input, +.bwForm textarea, +.bwForm select { + border: 1px solid #6d4aff21; + font-size: 16px; + height: auto; + margin: 0; + margin-bottom: 0px; + outline: 0; + padding: 15px; + width: 100%; + background-color: #f5f5f5; + border-radius: 5px; + /* color: #1b1340; */ + color: #494b7a; + box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03) inset; +} + +.bwForm textarea { + resize: vertical; +} + +.bwForm textarea:focus, +.bwForm input:focus, +.bwForm select:focus { + outline: 1px solid #6d4aff; + box-shadow: 0 0 10px 3px rgba(110, 74, 255, 0.605); +} + +.bwForm .invalid { + background: #f3c7c7; + border: 1px solid #e45454; + outline: 1px solid #ff4a4a; +} + +.bwForm .invalid:focus { + background: #f3c7c7; + border: 1px solid #e45454; + outline: 1px solid #ff4a4a; + box-shadow: 0 0 10px 3px rgba(255, 74, 74, 0.605); +} + +.bwForm button { + display: block; +} +.bwForm button:hover { + display: block; +} + +.errorMessage { + color: red; + display: block; + margin-top: 3px; +} diff --git a/pages/account/index.js b/pages/account/index.js index e6d87b6..27a367e 100644 --- a/pages/account/index.js +++ b/pages/account/index.js @@ -1,196 +1,24 @@ //Lib import Head from 'next/head'; -import { useForm } from 'react-hook-form'; -import { useState } from 'react'; -import { SpinnerDotted } from 'spinners-react'; -import { toast } from 'react-toastify'; import 'react-toastify/dist/ReactToastify.css'; import { useSession } from 'next-auth/react'; import { authOptions } from '../../pages/api/auth/[...nextauth]'; import { unstable_getServerSession } from 'next-auth/next'; //Components -import Error from '../../Components/UI/Error/Error'; import UserSettings from '../../Containers/UserSettings/UserSettings'; export default function Account() { ////Var - const { - register, - handleSubmit, - formState: { errors }, - reset, - } = useForm(); const { status, data } = useSession(); - ////State - const [isLoading, setIsLoading] = useState(false); - const [error, setError] = useState(); - - ////Functions - //Form submit Handler for ADD a repo - const formSubmitHandler = async (data) => { - //Remove old error - setError(); - //Loading button on submit to avoid multiple send. - setIsLoading(true); - //POST API to send the new and old password - const response = await fetch('/api/account/updatePassword', { - method: 'PUT', - headers: { - 'Content-type': 'application/json', - }, - body: JSON.stringify(data), - }); - const result = await response.json(); - - if (!response.ok) { - setIsLoading(false); - reset(); - setError(result.message); - setTimeout(() => setError(), 4000); - } else { - reset(); - setIsLoading(false); - toast.success('🔑 Password edited !', { - position: 'top-right', - autoClose: 5000, - hideProgressBar: false, - closeOnClick: true, - pauseOnHover: true, - draggable: true, - progress: undefined, - }); - } - }; - return ( <> Account - BorgWarehouse - -
-
-

- Welcome {status === 'authenticated' && data.user.name}{' '} - 👋 -

-
-
-
-
-

- Change your password -

- {error && } -
-

- - {errors.oldPassword && - errors.oldPassword.type === - 'required' && ( - - This field is required. - - )} -

-

- - {errors.newPassword && ( - - This field is required. - - )} -

-
- -
-
-
-
-
-
+ + ); } diff --git a/styles/default.css b/styles/default.css index c09d980..cd57bbd 100644 --- a/styles/default.css +++ b/styles/default.css @@ -30,7 +30,6 @@ code { padding: 10px 15px; background-color: #6d4aff; color: white; - margin: 5px; border-radius: 4px; cursor: pointer; text-decoration: none; @@ -43,7 +42,6 @@ code { padding: 10px 15px; background-color: #4f31ce; color: white; - margin: 5px; border-radius: 4px; cursor: pointer; text-decoration: none; @@ -56,7 +54,6 @@ code { padding: 10px 15px; background-color: #4f31ce; color: white; - margin: 5px; border-radius: 4px; cursor: pointer; text-decoration: none;