style: form construction

This commit is contained in:
bsourisse 2023-01-11 15:00:37 +01:00
parent de2e1428a1
commit 52786078c7
4 changed files with 365 additions and 181 deletions

View File

@ -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 (
<>
<h1>TEST</h1>
</>
<div className={classes.containerSettings}>
<div>
<h1 style={{ color: '#494b7a', textAlign: 'center' }}>
Welcome{' '}
{props.status === 'authenticated' && props.data.user.name}{' '}
👋
</h1>
</div>
{/* PASSWORD */}
<div className={classes.containerSetting}>
<div className={classes.settingCategory}>
<h2>Password</h2>
</div>
<div className={classes.setting}>
{error && <Error message={error} />}
<div className={classes.bwFormWrapper}>
<form
onSubmit={handleSubmit(formSubmitHandler)}
className={classes.bwForm}
>
<input
type='password'
placeholder='Actual password'
{...register('oldPassword', {
required: true,
})}
/>
{errors.oldPassword &&
errors.oldPassword.type === 'required' && (
<small
style={{
color: 'red',
display: 'block',
marginTop: '3px',
}}
>
This field is required.
</small>
)}
<p>
<input
type='password'
placeholder='New password'
{...register('newPassword', {
required: true,
})}
/>
{errors.newPassword && (
<small
style={{
color: 'red',
display: 'block',
marginTop: '3px',
}}
>
This field is required.
</small>
)}
</p>
<button
className='defaultButton'
disabled={isLoading}
>
{isLoading ? (
<SpinnerDotted
size={20}
thickness={150}
speed={100}
color='#fff'
/>
) : (
'Update your email'
)}
</button>
</form>
</div>
</div>
</div>
{/* USERNAME */}
<div className={classes.containerSetting}>
<div className={classes.settingCategory}>
<h2>Username</h2>
</div>
<div className={classes.setting}>
{error && <Error message={error} />}
<div className={classes.bwFormWrapper}>
<form
onSubmit={handleSubmit(formSubmitHandler)}
className={classes.bwForm}
>
<p>
<input
type='username'
defaultValue={props.data.user.name}
{...register('username', {
required: true,
})}
/>
{errors.email &&
errors.email.type === 'required' && (
<small
style={{
color: 'red',
display: 'block',
marginTop: '3px',
}}
>
This field is required.
</small>
)}
</p>
<button
className='defaultButton'
disabled={isLoading}
>
{isLoading ? (
<SpinnerDotted
size={20}
thickness={150}
speed={100}
color='#fff'
/>
) : (
'Update your username'
)}
</button>
</form>
</div>
</div>
</div>
{/* EMAIL */}
<div className={classes.containerSetting}>
<div className={classes.settingCategory}>
<h2>Email</h2>
</div>
<div className={classes.setting}>
{error && <Error message={error} />}
<div className={classes.bwFormWrapper}>
<form
onSubmit={handleSubmit(formSubmitHandler)}
className={classes.bwForm}
>
<p>
<input
type='email'
defaultValue={props.data.user.email}
{...register('email', {
required: true,
})}
/>
{errors.email &&
errors.email.type === 'required' && (
<small
style={{
color: 'red',
display: 'block',
marginTop: '3px',
}}
>
This field is required.
</small>
)}
</p>
<button
className='defaultButton'
disabled={isLoading}
>
{isLoading ? (
<SpinnerDotted
size={20}
thickness={150}
speed={100}
color='#fff'
/>
) : (
'Update your password'
)}
</button>
</form>
</div>
</div>
</div>
</div>
);
}

View File

@ -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;
}

View File

@ -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 (
<>
<Head>
<title>Account - BorgWarehouse</title>
</Head>
<UserSettings />
<div
style={{
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
}}
>
<div>
<h1 style={{ color: '#494b7a', textAlign: 'center' }}>
Welcome {status === 'authenticated' && data.user.name}{' '}
👋
</h1>
</div>
<div
style={{
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
margin: '15px 0 0 0 ',
width: 'auto',
}}
>
<section
style={{ display: 'flex', justifyContent: 'center' }}
>
<main
style={{
backgroundColor: '#212942',
padding: '30px',
borderRadius: '10px',
boxShadow:
'0 14px 28px rgba(0, 0, 0, .2), 0 10px 10px rgba(0, 0, 0, .2)',
height: '100%',
borderTop: '10px solid #704dff',
animation: 'ease-in 0.3s 1 normal none',
width: '360px',
}}
>
<h1
style={{
color: '#a1a4ad',
letterSpacing: '1.5px',
textAlign: 'center',
marginBottom: '2.5em',
}}
>
Change your password
</h1>
{error && <Error message={error} />}
<form onSubmit={handleSubmit(formSubmitHandler)}>
<p>
<input
type='password'
placeholder='Actual password'
className='signInInput'
{...register('oldPassword', {
required: true,
})}
/>
{errors.oldPassword &&
errors.oldPassword.type ===
'required' && (
<small
style={{
color: 'red',
display: 'block',
marginTop: '3px',
}}
>
This field is required.
</small>
)}
</p>
<p>
<input
type='password'
placeholder='New password'
className='signInInput'
{...register('newPassword', {
required: true,
})}
/>
{errors.newPassword && (
<small
style={{
color: 'red',
display: 'block',
marginTop: '3px',
}}
>
This field is required.
</small>
)}
</p>
<div
style={{
display: 'flex',
justifyContent: 'center',
}}
>
<button
className='signInButton'
disabled={isLoading}
>
{isLoading ? (
<SpinnerDotted
size={20}
thickness={150}
speed={100}
color='#fff'
/>
) : (
'Update your password'
)}
</button>
</div>
</form>
</main>
</section>
</div>
</div>
<UserSettings status={status} data={data} />
</>
);
}

View File

@ -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;