rmorawski/standardnotes-app-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: improve 2fa styles based on feedback (#635)

Browse Source 
* feat: improve 2fa styles based on feedback

* fix: preferences panes and dialogs electron compatibility

* fix: no horizontal line when opening two factor activation

* feat: improve two factor activation styles

* feat: further 2fa style improvements

* feat: padding 2fa widgets

* feat: add padding between QR code and content

* feat: refresh 2fa after passcode confirmation

* feat: don't autocomplete passwords for DecoratedInput
This commit is contained in:
Gorjan Petrovski
2021-09-17 18:14:53 +02:00
committed by GitHub
parent 9d85fbccc4
commit 8fb34f2e85
25 changed files with 494 additions and 228 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
app/assets/javascripts/preferences/panes/two-factor-auth/Verification.tsx
View File

@@ -2,51 +2,66 @@ import { Button } from '@/components/Button';
import { DecoratedInput } from '@/components/DecoratedInput';
import { observer } from 'mobx-react-lite';
import { FunctionComponent } from 'preact';
import { Bullet } from './Bullet';
import { TwoFactorActivation } from './TwoFactorActivation';
import {
ModalDialog,
ModalDialogButtons,
ModalDialogDescription,
ModalDialogLabel
ModalDialogLabel,
} from '@/components/shared/ModalDialog';
export const Verification: FunctionComponent<{
activation: TwoFactorActivation;
}> = observer(({ activation: act }) => {
const borderInv =
act.verificationStatus === 'invalid' ? 'border-dark-red' : '';
const secretKeyClass =
act.verificationStatus === 'invalid-secret' ? 'border-danger' : '';
const authTokenClass =
act.verificationStatus === 'invalid-auth-code' ? 'border-danger' : '';
return (
<ModalDialog>
<ModalDialogLabel closeDialog={act.cancelActivation}>
Step 3 of 3 - Verification
</ModalDialogLabel>
<ModalDialogDescription>
<div className="flex-grow flex flex-col gap-1">
<div className="flex flex-row items-center gap-2">
<ModalDialogDescription className="h-33">
<div className="flex-grow flex flex-col">
<div className="flex flex-row items-center">
<Bullet />
<div className="min-w-1" />
<div className="text-sm">
・Enter your <b>secret key</b>:
Enter your <b>secret key</b>:
</div>
<div className="min-w-2" />
<DecoratedInput
className={borderInv}
className={`w-92 ${secretKeyClass}`}
onChange={act.setInputSecretKey}
/>
</div>
<div className="flex flex-row items-center gap-2">
<div className="min-h-1" />
<div className="flex flex-row items-center">
<Bullet />
<div className="min-w-1" />
<div className="text-sm">
・Verify the <b>authentication code</b> generated by your
Verify the <b>authentication code</b> generated by your
authenticator app:
</div>
<div className="min-w-2" />
<DecoratedInput
className={`w-30 ${borderInv}`}
className={`w-30 ${authTokenClass}`}
onChange={act.setInputOtpToken}
/>
</div>
</div>
</ModalDialogDescription>
<ModalDialogButtons>
{act.verificationStatus === 'invalid' && (
<div className="text-sm color-danger">
Incorrect credentials, please try again.
{act.verificationStatus === 'invalid-auth-code' && (
<div className="text-sm color-danger flex-grow">
Incorrect authentication code, please try again.
</div>
)}
{act.verificationStatus === 'invalid-secret' && (
<div className="text-sm color-danger flex-grow">
Incorrect secret key, please try again.
</div>
)}
<Button