deblan-mirror/borgwarehouse
deblan-mirror/borgwarehouse
1
0
Fork 0
mirror of https://github.com/Ravinou/borgwarehouse synced 2024-06-10 18:02:13 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: change username

Browse source
This commit is contained in:
bsourisse 2023-01-12 18:21:05 +01:00
parent cb65d9c1d1
commit 5b1169c4a2
1 changed files with 58 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

92
Containers/UserSettings/UsernameSettings/UsernameSettings.js
View file

@ -8,6 +8,7 @@ import { SpinnerDotted } from 'spinners-react';
//Components //Components
import Error from '../../../Components/UI/Error/Error'; import Error from '../../../Components/UI/Error/Error';
import Info from '../../../Components/UI/Info/Info';
export default function UsernameSettings(props) { export default function UsernameSettings(props) {
//Var //Var
@ -25,12 +26,14 @@ export default function UsernameSettings(props) {
register, register,
handleSubmit, handleSubmit,
control, control,
reset,
formState: { errors, isSubmitting, isValid }, formState: { errors, isSubmitting, isValid },
} = useForm({ mode: 'onChange' }); } = useForm({ mode: 'onChange' });
////State ////State
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState(); const [error, setError] = useState();
const [info, setInfo] = useState(false);
////Functions ////Functions
//Form submit Handler for ADD a repo //Form submit Handler for ADD a repo
@ -57,7 +60,8 @@ export default function UsernameSettings(props) {
} else { } else {
reset(); reset();
setIsLoading(false); setIsLoading(false);
toast.success('Email edited !', { setInfo(true);
toast.success('Username edited !', {
position: 'top-right', position: 'top-right',
autoClose: 5000, autoClose: 5000,
hideProgressBar: false, hideProgressBar: false,
@ -77,42 +81,62 @@ export default function UsernameSettings(props) {
</div> </div>
<div className={classes.setting}> <div className={classes.setting}>
<div className={classes.bwFormWrapper}> <div className={classes.bwFormWrapper}>
<form {info ? (
onSubmit={handleSubmit(formSubmitHandler)} //For local JWTs (cookie) without an OAuth provider, Next-Auth does not allow
className={classes.bwForm} //at the time this code is written to refresh client-side session information
> //without triggering a logout.
<p> //I chose to inform the user to reconnect rather than force logout.
{error && <Error message={error} />} <Info message='Please, logout to update your session.' />
<input ) : (
type='email' <form
placeholder={props.username} onSubmit={handleSubmit(formSubmitHandler)}
{...register('email', { className={classes.bwForm}
required: true, >
})} <p>
/> {error && <Error message={error} />}
{errors.email && <input
errors.email.type === 'required' && ( type='text'
placeholder={props.username}
{...register('username', {
required: 'A username is required.',
pattern: {
value: /^[a-z]{5,15}$/,
message:
'Only a-z characters are allowed.',
},
maxLength: {
value: 10,
message: '15 characters max.',
},
minLength: {
value: 5,
message: '5 characters min.',
},
})}
/>
{errors.username && errors.username && (
<small className={classes.errorMessage}> <small className={classes.errorMessage}>
This field is required. {errors.username.message}
</small> </small>
)} )}
</p> </p>
<button <button
className='defaultButton' className='defaultButton'
disabled={!isValid || isSubmitting} disabled={!isValid || isSubmitting}
> >
{isLoading ? ( {isLoading ? (
<SpinnerDotted <SpinnerDotted
size={20} size={20}
thickness={150} thickness={150}
speed={100} speed={100}
color='#fff' color='#fff'
/> />
) : ( ) : (
'Update your username' 'Update your username'
)} )}
</button> </button>
</form> </form>
)}
</div> </div>
</div> </div>
</div> </div>