style: form construction
This commit is contained in:
parent
de2e1428a1
commit
52786078c7
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
|
@ -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} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in New Issue