Skip to content

Commit

Permalink
Add submit functionality when pressing enter key on a field
Browse files Browse the repository at this point in the history
  • Loading branch information
@Jona-Internxt
Jona-Internxt committed Oct 2, 2024
1 parent fc79cca commit cea58d7
Show file tree
Hide file tree
Showing 6 changed files with 181 additions and 162 deletions.
3 changes: 2 additions & 1 deletion .eslintrc.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
"max-len": "off",
// This is throwing error on App.tsx even with no code changes on CRA 5.
"@typescript-eslint/no-empty-function": "off",
"cypress/unsafe-to-chain-command": "off"
"cypress/unsafe-to-chain-command": "off",
"linebreak-style": "off"
}
}
95 changes: 49 additions & 46 deletions src/app/newSettings/Sections/Account/Account/components/AccountDetailsModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,8 @@ const AccountDetailsModal = ({
return value.length > 0 && value.length < 20;
};

const onSave = async () => {
const onSave = async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
if (!validate(nameValue)) {
setStatus({ tag: 'error', type: 'NAME_INVALID' });
} else if (!validate(lastnameValue)) {
Expand All @@ -66,55 +67,57 @@ const AccountDetailsModal = ({

return (
<Modal isOpen={isOpen} onClose={onClose}>
<div className="flex flex-col space-y-5">
<h1 className="text-2xl font-medium text-gray-80">
{translate('views.account.tabs.account.accountDetails.editProfile.title')}
</h1>
<div className="flex space-x-3">
<Input
disabled={status.tag === 'loading'}
label={translate('views.account.tabs.account.accountDetails.name')}
value={nameValue}
onChange={setNameValue}
accent={nameIsInvalid ? 'error' : undefined}
message={nameIsInvalid ? 'This name is invalid' : undefined}
name="firstName"
/>
<Input
disabled={status.tag === 'loading'}
label={translate('views.account.tabs.account.accountDetails.lastname')}
value={lastnameValue}
onChange={setLastnameValue}
accent={lastnameIsInvalid ? 'error' : undefined}
message={lastnameIsInvalid ? 'This lastname is invalid' : undefined}
name="lastName"
/>
</div>
<form onSubmit={onSave}>
<div className="flex flex-col space-y-5">
<h1 className="text-2xl font-medium text-gray-80">
{translate('views.account.tabs.account.accountDetails.editProfile.title')}
</h1>
<div className="flex space-x-3">
<Input
disabled={status.tag === 'loading'}
label={translate('views.account.tabs.account.accountDetails.name')}
value={nameValue}
onChange={setNameValue}
accent={nameIsInvalid ? 'error' : undefined}
message={nameIsInvalid ? 'This name is invalid' : undefined}
name="firstName"
/>
<Input
disabled={status.tag === 'loading'}
label={translate('views.account.tabs.account.accountDetails.lastname')}
value={lastnameValue}
onChange={setLastnameValue}
accent={lastnameIsInvalid ? 'error' : undefined}
message={lastnameIsInvalid ? 'This lastname is invalid' : undefined}
name="lastName"
/>
</div>

<div className="flex items-end space-x-3">
<Input
disabled
className="flex-1"
label={translate('views.account.tabs.account.accountDetails.card.email')}
value={emailValue}
name="email"
/>
<div className="flex h-11 items-center">
<Button disabled={status.tag === 'loading'} variant="secondary" onClick={openEditEmail}>
{translate('actions.change')}
</Button>
<div className="flex items-end space-x-3">
<Input
disabled
className="flex-1"
label={translate('views.account.tabs.account.accountDetails.card.email')}
value={emailValue}
name="email"
/>
<div className="flex h-11 items-center">
<Button disabled={status.tag === 'loading'} variant="secondary" onClick={openEditEmail}>
{translate('actions.change')}
</Button>
</div>
</div>
</div>

<div className="flex justify-end">
<Button disabled={status.tag === 'loading'} variant="secondary" onClick={onClose}>
{translate('actions.cancel')}
</Button>
<Button loading={status.tag === 'loading'} className="ml-2" onClick={onSave}>
{status.tag === 'loading' ? translate('actions.saving') : translate('actions.save')}
</Button>
<div className="flex justify-end">
<Button disabled={status.tag === 'loading'} variant="secondary" onClick={onClose}>
{translate('actions.cancel')}
</Button>
<Button type="submit" loading={status.tag === 'loading'} className="ml-2">
{status.tag === 'loading' ? translate('actions.saving') : translate('actions.save')}
</Button>
</div>
</div>
</div>
</form>
</Modal>
);
};
Expand Down
75 changes: 39 additions & 36 deletions src/app/newSettings/Sections/Account/Security/components/ChangePasswordModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,8 @@ const ChangePasswordModal = ({

const isConfirmationWrong = passwordPayload.password.slice(0, passwordConfirmation.length) !== passwordConfirmation;

async function handleSubmit() {
async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
e.preventDefault();
setIsLoading(true);
await changePassword(passwordPayload.password, currentPassword, email);
notificationsService.show({ text: translate('success.passwordChanged'), type: ToastType.Success });
Expand All @@ -53,41 +54,43 @@ const ChangePasswordModal = ({

return (
<Modal isOpen={isOpen} onClose={onClose}>
<h1 className="text-2xl font-medium text-gray-80">{translate('modals.changePasswordModal.title')}</h1>
<ValidPassword
username={email}
className="mt-4"
label={translate('modals.changePasswordModal.newPassword')}
value={passwordPayload.password}
onChange={setPasswordPayload}
disabled={isLoading}
dataTest="new-password"
/>
<Input
value={passwordConfirmation}
onChange={setPasswordConfirmation}
variant="password"
className="mt-3"
label={translate('modals.changePasswordModal.confirmPassword')}
accent={isConfirmationWrong ? 'error' : undefined}
message={isConfirmationWrong ? translate('modals.changePasswordModal.errors.doesntMatch') : undefined}
disabled={isLoading}
dataTest="new-password-confirmation"
/>
<div className="mt-3 flex justify-end">
<Button variant="secondary" disabled={isLoading} onClick={onClose}>
{translate('actions.cancel')}
</Button>
<Button
loading={isLoading}
onClick={handleSubmit}
disabled={!passwordPayload.valid || passwordConfirmation !== passwordPayload.password}
className="ml-2"
dataTest="next-button"
>
{translate('modals.changePasswordModal.title')}
</Button>
</div>
<form onSubmit={handleSubmit}>
<h1 className="text-2xl font-medium text-gray-80">{translate('modals.changePasswordModal.title')}</h1>
<ValidPassword
username={email}
className="mt-4"
label={translate('modals.changePasswordModal.newPassword')}
value={passwordPayload.password}
onChange={setPasswordPayload}
disabled={isLoading}
dataTest="new-password"
/>
<Input
value={passwordConfirmation}
onChange={setPasswordConfirmation}
variant="password"
className="mt-3"
label={translate('modals.changePasswordModal.confirmPassword')}
accent={isConfirmationWrong ? 'error' : undefined}
message={isConfirmationWrong ? translate('modals.changePasswordModal.errors.doesntMatch') : undefined}
disabled={isLoading}
dataTest="new-password-confirmation"
/>
<div className="mt-3 flex justify-end">
<Button variant="secondary" disabled={isLoading} onClick={onClose}>
{translate('actions.cancel')}
</Button>
<Button
loading={isLoading}
type="submit"
disabled={!passwordPayload.valid || passwordConfirmation !== passwordPayload.password}
className="ml-2"
dataTest="next-button"
>
{translate('modals.changePasswordModal.title')}
</Button>
</div>
</form>
</Modal>
);
};
Expand Down
51 changes: 28 additions & 23 deletions .../newSettings/Sections/Account/Security/components/TwoFactorAuthenticationDisableModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,8 @@ const TwoFactorAuthenticationDisableModal = ({
const [status, setStatus] = useState<'ready' | 'error' | 'loading'>('ready');
const [authCode, setAuthCode] = useState('');

async function handleDisable() {
async function handleDisable(e: React.FormEvent<HTMLFormElement>) {
e.preventDefault();
setStatus('loading');
try {
const { encryptedSalt } = await userHas2FAStored();
Expand All @@ -48,28 +49,32 @@ const TwoFactorAuthenticationDisableModal = ({

return (
<Modal isOpen={isOpen} onClose={onClose}>
<h1 className="text-2xl font-medium text-gray-80">{translate('views.account.tabs.security.2FA.titleDisable')}</h1>
<Input
className="mt-4"
label={translate('views.account.tabs.security.2FA.modal.2FALabelCode') as string}
disabled={status === 'loading'}
accent={status === 'error' ? 'error' : undefined}
message={
status === 'error'
? (translate('views.account.tabs.security.2FA.modal.errors.incorrect') as string)
: undefined
}
value={authCode}
onChange={setAuthCode}
/>
<div className="mt-4 flex justify-end">
<Button onClick={onClose} variant="secondary" disabled={status === 'loading'}>
{translate('actions.cancel')}
</Button>
<Button className="ml-2" loading={status === 'loading'} onClick={handleDisable} disabled={authCode.length < 6}>
{translate('actions.disable')}
</Button>
</div>
<form onSubmit={handleDisable}>
<h1 className="text-2xl font-medium text-gray-80">
{translate('views.account.tabs.security.2FA.titleDisable')}
</h1>
<Input
className="mt-4"
label={translate('views.account.tabs.security.2FA.modal.2FALabelCode') as string}
disabled={status === 'loading'}
accent={status === 'error' ? 'error' : undefined}
message={
status === 'error'
? (translate('views.account.tabs.security.2FA.modal.errors.incorrect') as string)
: undefined
}
value={authCode}
onChange={setAuthCode}
/>
<div className="mt-4 flex justify-end">
<Button onClick={onClose} variant="secondary" disabled={status === 'loading'}>
{translate('actions.cancel')}
</Button>
<Button className="ml-2" type="submit" loading={status === 'loading'} disabled={authCode.length < 6}>
{translate('actions.disable')}
</Button>
</div>
</form>
</Modal>
);
};
Expand Down
67 changes: 36 additions & 31 deletions ...p/newSettings/Sections/Account/Security/components/TwoFactorAuthenticationEnableModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,8 @@ const TwoFactorAuthenticationEnableModal = ({
const [activateState, setActivateState] = useState<'ready' | 'error' | 'loading'>('ready');
const [activateValue, setActivateValue] = useState('');

async function handleActivate() {
async function handleActivate(e: React.FormEvent<HTMLFormElement>) {
e.preventDefault();
if (qr) {
try {
setActivateState('loading');
Expand Down Expand Up @@ -134,37 +135,41 @@ const TwoFactorAuthenticationEnableModal = ({

return (
<Modal isOpen={isOpen} onClose={onClose}>
<h1 className="text-2xl font-medium text-gray-80">{translate('views.account.tabs.security.2FA.modal.title')}</h1>
<h2 className="mt-5 flex items-center">
<p className="mt-0.5 text-gray-50">
{translate('views.account.tabs.security.2FA.modal.stepsLabel', {
current: step + 1,
total: steps.length,
})}
</p>
<p className="ml-2 text-xl font-medium text-gray-80">{steps[step]}</p>
</h2>
{parts[step]}
<div className="flex justify-end">
<Button
variant="secondary"
onClick={step === 0 ? onClose : () => setStep(step - 1)}
disabled={activateState === 'loading'}
>
{step === 0 ? translate('actions.cancel') : translate('actions.back')}
</Button>
<div className="ml-2">
{step !== steps.length - 1 ? (
<Button onClick={() => setStep(step + 1)} disabled={qr === null && step === 1}>
{translate('actions.next')}
</Button>
) : (
<Button onClick={handleActivate} disabled={activateValue.length < 6} loading={activateState === 'loading'}>
{translate('views.account.tabs.security.2FA.modal.button')}
</Button>
)}
<form onSubmit={handleActivate}>
<h1 className="text-2xl font-medium text-gray-80">
{translate('views.account.tabs.security.2FA.modal.title')}
</h1>
<h2 className="mt-5 flex items-center">
<p className="mt-0.5 text-gray-50">
{translate('views.account.tabs.security.2FA.modal.stepsLabel', {
current: step + 1,
total: steps.length,
})}
</p>
<p className="ml-2 text-xl font-medium text-gray-80">{steps[step]}</p>
</h2>
{parts[step]}
<div className="flex justify-end">
<Button
variant="secondary"
onClick={step === 0 ? onClose : () => setStep(step - 1)}
disabled={activateState === 'loading'}
>
{step === 0 ? translate('actions.cancel') : translate('actions.back')}
</Button>
<div className="ml-2">
{step !== steps.length - 1 ? (
<Button onClick={() => setStep(step + 1)} disabled={qr === null && step === 1}>
{translate('actions.next')}
</Button>
) : (
<Button type="submit" disabled={activateValue.length < 6} loading={activateState === 'loading'}>
{translate('views.account.tabs.security.2FA.modal.button')}
</Button>
)}
</div>
</div>
</div>
</form>
</Modal>
);
};
Expand Down
Loading

0 comments on commit cea58d7

Please sign in to comment.