chore: move all components into Components dir with pascal case (#934)
This commit is contained in:
Mo
@@ -0,0 +1,73 @@
|
||||
import { Icon } from '@/components/Icon';
|
||||
import {
|
||||
Disclosure,
|
||||
DisclosureButton,
|
||||
DisclosurePanel,
|
||||
} from '@reach/disclosure';
|
||||
import { FunctionComponent } from 'preact';
|
||||
import { MouseEventHandler } from 'react';
|
||||
import { useState, useRef, useEffect } from 'preact/hooks';
|
||||
import { IconType } from '@standardnotes/snjs';
|
||||
|
||||
const DisclosureIconButton: FunctionComponent<{
|
||||
className?: string;
|
||||
icon: IconType;
|
||||
onMouseEnter?: MouseEventHandler;
|
||||
onMouseLeave?: MouseEventHandler;
|
||||
}> = ({ className = '', icon, onMouseEnter, onMouseLeave }) => (
|
||||
<DisclosureButton
|
||||
onMouseEnter={onMouseEnter}
|
||||
onMouseLeave={onMouseLeave}
|
||||
className={`no-border cursor-pointer bg-transparent hover:brightness-130 p-0 ${
|
||||
className ?? ''
|
||||
}`}
|
||||
>
|
||||
<Icon type={icon} />
|
||||
</DisclosureButton>
|
||||
);
|
||||
|
||||
/**
|
||||
* AuthAppInfoPopup is an info icon that shows a tooltip when clicked
|
||||
* Tooltip is dismissible by clicking outside
|
||||
*
|
||||
* Note: it can be generalized but more use cases are required
|
||||
* @returns
|
||||
*/
|
||||
export const AuthAppInfoTooltip: FunctionComponent = () => {
|
||||
const [isClicked, setClicked] = useState(false);
|
||||
const [isHover, setHover] = useState(false);
|
||||
const ref = useRef(null);
|
||||
|
||||
useEffect(() => {
|
||||
const dismiss = () => setClicked(false);
|
||||
document.addEventListener('mousedown', dismiss);
|
||||
return () => {
|
||||
document.removeEventListener('mousedown', dismiss);
|
||||
};
|
||||
}, [ref]);
|
||||
|
||||
return (
|
||||
<Disclosure
|
||||
open={isClicked || isHover}
|
||||
onChange={() => setClicked(!isClicked)}
|
||||
>
|
||||
<div className="relative">
|
||||
<DisclosureIconButton
|
||||
icon="info"
|
||||
className="mt-1"
|
||||
onMouseEnter={() => setHover(true)}
|
||||
onMouseLeave={() => setHover(false)}
|
||||
/>
|
||||
<DisclosurePanel>
|
||||
<div
|
||||
className={`bg-inverted-default color-inverted-default text-center rounded shadow-overlay
|
||||
py-1.5 px-2 absolute w-103 -top-10 -left-51`}
|
||||
>
|
||||
Some apps, like Google Authenticator, do not back up and restore
|
||||
your secret keys if you lose your device or get a new one.
|
||||
</div>
|
||||
</DisclosurePanel>
|
||||
</div>
|
||||
</Disclosure>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,9 @@
|
||||
import { FunctionComponent } from 'preact';
|
||||
|
||||
export const Bullet: FunctionComponent<{ className?: string }> = ({
|
||||
className = '',
|
||||
}) => (
|
||||
<div
|
||||
className={`min-w-1 min-h-1 rounded-full bg-inverted-default ${className} mr-2`}
|
||||
/>
|
||||
);
|
||||
@@ -0,0 +1,23 @@
|
||||
import { FunctionComponent } from 'preact';
|
||||
|
||||
import { IconButton } from '../../../IconButton';
|
||||
|
||||
import { useState } from 'preact/hooks';
|
||||
|
||||
export const CopyButton: FunctionComponent<{ copyValue: string }> = ({
|
||||
copyValue: secretKey,
|
||||
}) => {
|
||||
const [isCopied, setCopied] = useState(false);
|
||||
return (
|
||||
<IconButton
|
||||
focusable={false}
|
||||
title="Copy to clipboard"
|
||||
icon={isCopied ? 'check' : 'copy'}
|
||||
className={isCopied ? 'success' : undefined}
|
||||
onClick={() => {
|
||||
navigator?.clipboard?.writeText(secretKey);
|
||||
setCopied(() => true);
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,6 @@
|
||||
import { MfaProvider, UserProvider } from '../../providers';
|
||||
|
||||
export interface MfaProps {
|
||||
userProvider: UserProvider;
|
||||
mfaProvider: MfaProvider;
|
||||
}
|
||||
@@ -0,0 +1,94 @@
|
||||
import { Button } from '@/components/Button';
|
||||
import { DecoratedInput } from '@/components/DecoratedInput';
|
||||
import { IconButton } from '@/components/IconButton';
|
||||
import { observer } from 'mobx-react-lite';
|
||||
import { FunctionComponent } from 'preact';
|
||||
import { CopyButton } from './CopyButton';
|
||||
import { Bullet } from './Bullet';
|
||||
import { downloadSecretKey } from './download-secret-key';
|
||||
import { TwoFactorActivation } from './TwoFactorActivation';
|
||||
import {
|
||||
ModalDialog,
|
||||
ModalDialogButtons,
|
||||
ModalDialogDescription,
|
||||
ModalDialogLabel,
|
||||
} from '@/components/Shared/ModalDialog';
|
||||
|
||||
export const SaveSecretKey: FunctionComponent<{
|
||||
activation: TwoFactorActivation;
|
||||
}> = observer(({ activation: act }) => {
|
||||
const download = (
|
||||
<IconButton
|
||||
focusable={false}
|
||||
title="Download"
|
||||
icon="download"
|
||||
onClick={() => {
|
||||
downloadSecretKey(act.secretKey);
|
||||
}}
|
||||
/>
|
||||
);
|
||||
return (
|
||||
<ModalDialog>
|
||||
<ModalDialogLabel
|
||||
closeDialog={() => {
|
||||
act.cancelActivation();
|
||||
}}
|
||||
>
|
||||
Step 2 of 3 - Save secret key
|
||||
</ModalDialogLabel>
|
||||
<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">
|
||||
<b>Save your secret key</b>{' '}
|
||||
<a
|
||||
target="_blank"
|
||||
href="https://standardnotes.com/help/21/where-should-i-store-my-two-factor-authentication-secret-key"
|
||||
>
|
||||
somewhere safe
|
||||
</a>
|
||||
:
|
||||
</div>
|
||||
<div className="min-w-2" />
|
||||
<DecoratedInput
|
||||
disabled={true}
|
||||
right={[<CopyButton copyValue={act.secretKey} />, download]}
|
||||
text={act.secretKey}
|
||||
/>
|
||||
</div>
|
||||
<div className="h-2" />
|
||||
<div className="flex flex-row items-center">
|
||||
<Bullet />
|
||||
<div className="min-w-1" />
|
||||
<div className="text-sm">
|
||||
You can use this key to generate codes if you lose access to your
|
||||
authenticator app.{' '}
|
||||
<a
|
||||
target="_blank"
|
||||
href="https://standardnotes.com/help/22/what-happens-if-i-lose-my-2fa-device-and-my-secret-key"
|
||||
>
|
||||
Learn more
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ModalDialogDescription>
|
||||
<ModalDialogButtons>
|
||||
<Button
|
||||
className="min-w-20"
|
||||
type="normal"
|
||||
label="Back"
|
||||
onClick={() => act.openScanQRCode()}
|
||||
/>
|
||||
<Button
|
||||
className="min-w-20"
|
||||
type="primary"
|
||||
label="Next"
|
||||
onClick={() => act.openVerification()}
|
||||
/>
|
||||
</ModalDialogButtons>
|
||||
</ModalDialog>
|
||||
);
|
||||
});
|
||||
@@ -0,0 +1,79 @@
|
||||
import { FunctionComponent } from 'preact';
|
||||
import { observer } from 'mobx-react-lite';
|
||||
|
||||
import QRCode from 'qrcode.react';
|
||||
|
||||
import { DecoratedInput } from '@/components/DecoratedInput';
|
||||
import { Button } from '@/components/Button';
|
||||
import { TwoFactorActivation } from './TwoFactorActivation';
|
||||
import { AuthAppInfoTooltip } from './AuthAppInfoPopup';
|
||||
import {
|
||||
ModalDialog,
|
||||
ModalDialogButtons,
|
||||
ModalDialogDescription,
|
||||
ModalDialogLabel,
|
||||
} from '@/components/Shared/ModalDialog';
|
||||
import { CopyButton } from './CopyButton';
|
||||
import { Bullet } from './Bullet';
|
||||
|
||||
export const ScanQRCode: FunctionComponent<{
|
||||
activation: TwoFactorActivation;
|
||||
}> = observer(({ activation: act }) => {
|
||||
return (
|
||||
<ModalDialog>
|
||||
<ModalDialogLabel closeDialog={act.cancelActivation}>
|
||||
Step 1 of 3 - Scan QR code
|
||||
</ModalDialogLabel>
|
||||
<ModalDialogDescription className="h-33">
|
||||
<div className="w-25 h-25 flex items-center justify-center bg-info">
|
||||
<QRCode
|
||||
className="border-neutral-contrast-bg border-solid border-2"
|
||||
value={act.qrCode}
|
||||
size={100}
|
||||
/>
|
||||
</div>
|
||||
<div className="min-w-5" />
|
||||
<div className="flex-grow flex flex-col">
|
||||
<div className="flex flex-row items-center">
|
||||
<Bullet />
|
||||
<div className="min-w-1" />
|
||||
<div className="text-sm">
|
||||
Open your <b>authenticator app</b>.
|
||||
</div>
|
||||
<div className="min-w-2" />
|
||||
<AuthAppInfoTooltip />
|
||||
</div>
|
||||
<div className="min-h-2" />
|
||||
<div className="flex flex-row items-center">
|
||||
<Bullet className="self-start mt-2" />
|
||||
<div className="min-w-1" />
|
||||
<div className="text-sm flex-grow">
|
||||
<b>Scan this QR code</b> or <b>add this secret key</b>:
|
||||
</div>
|
||||
</div>
|
||||
<div className="min-h-2" />
|
||||
<DecoratedInput
|
||||
className="ml-4 w-92"
|
||||
disabled={true}
|
||||
text={act.secretKey}
|
||||
right={[<CopyButton copyValue={act.secretKey} />]}
|
||||
/>
|
||||
</div>
|
||||
</ModalDialogDescription>
|
||||
<ModalDialogButtons>
|
||||
<Button
|
||||
className="min-w-20"
|
||||
type="normal"
|
||||
label="Cancel"
|
||||
onClick={() => act.cancelActivation()}
|
||||
/>
|
||||
<Button
|
||||
className="min-w-20"
|
||||
type="primary"
|
||||
label="Next"
|
||||
onClick={() => act.openSaveSecretKey()}
|
||||
/>
|
||||
</ModalDialogButtons>
|
||||
</ModalDialog>
|
||||
);
|
||||
});
|
||||
@@ -0,0 +1,138 @@
|
||||
import { MfaProvider } from '../../providers';
|
||||
import { action, makeAutoObservable, observable } from 'mobx';
|
||||
|
||||
type ActivationStep =
|
||||
| 'scan-qr-code'
|
||||
| 'save-secret-key'
|
||||
| 'verification'
|
||||
| 'success';
|
||||
type VerificationStatus =
|
||||
| 'none'
|
||||
| 'invalid-auth-code'
|
||||
| 'invalid-secret'
|
||||
| 'valid';
|
||||
|
||||
export class TwoFactorActivation {
|
||||
public readonly type = 'two-factor-activation' as const;
|
||||
|
||||
private _activationStep: ActivationStep;
|
||||
|
||||
private _2FAVerification: VerificationStatus = 'none';
|
||||
|
||||
private inputSecretKey = '';
|
||||
private inputOtpToken = '';
|
||||
|
||||
constructor(
|
||||
private mfaProvider: MfaProvider,
|
||||
private readonly email: string,
|
||||
private readonly _secretKey: string,
|
||||
private _cancelActivation: () => void,
|
||||
private _enabled2FA: () => void
|
||||
) {
|
||||
this._activationStep = 'scan-qr-code';
|
||||
|
||||
makeAutoObservable<
|
||||
TwoFactorActivation,
|
||||
| '_secretKey'
|
||||
| '_authCode'
|
||||
| '_step'
|
||||
| '_enable2FAVerification'
|
||||
| 'inputOtpToken'
|
||||
| 'inputSecretKey'
|
||||
>(
|
||||
this,
|
||||
{
|
||||
_secretKey: observable,
|
||||
_authCode: observable,
|
||||
_step: observable,
|
||||
_enable2FAVerification: observable,
|
||||
inputOtpToken: observable,
|
||||
inputSecretKey: observable,
|
||||
},
|
||||
{ autoBind: true }
|
||||
);
|
||||
}
|
||||
|
||||
get secretKey(): string {
|
||||
return this._secretKey;
|
||||
}
|
||||
|
||||
get activationStep(): ActivationStep {
|
||||
return this._activationStep;
|
||||
}
|
||||
|
||||
get verificationStatus(): VerificationStatus {
|
||||
return this._2FAVerification;
|
||||
}
|
||||
|
||||
get qrCode(): string {
|
||||
return `otpauth://totp/2FA?secret=${this._secretKey}&issuer=Standard%20Notes&label=${this.email}`;
|
||||
}
|
||||
|
||||
cancelActivation(): void {
|
||||
this._cancelActivation();
|
||||
}
|
||||
|
||||
openScanQRCode(): void {
|
||||
if (this._activationStep === 'save-secret-key') {
|
||||
this._activationStep = 'scan-qr-code';
|
||||
}
|
||||
}
|
||||
|
||||
openSaveSecretKey(): void {
|
||||
const preconditions: ActivationStep[] = ['scan-qr-code', 'verification'];
|
||||
if (preconditions.includes(this._activationStep)) {
|
||||
this._activationStep = 'save-secret-key';
|
||||
}
|
||||
}
|
||||
|
||||
openVerification(): void {
|
||||
this.inputOtpToken = '';
|
||||
this.inputSecretKey = '';
|
||||
if (this._activationStep === 'save-secret-key') {
|
||||
this._activationStep = 'verification';
|
||||
this._2FAVerification = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
openSuccess(): void {
|
||||
if (this._activationStep === 'verification') {
|
||||
this._activationStep = 'success';
|
||||
}
|
||||
}
|
||||
|
||||
setInputSecretKey(secretKey: string): void {
|
||||
this.inputSecretKey = secretKey;
|
||||
}
|
||||
|
||||
setInputOtpToken(otpToken: string): void {
|
||||
this.inputOtpToken = otpToken;
|
||||
}
|
||||
|
||||
enable2FA(): void {
|
||||
if (this.inputSecretKey !== this._secretKey) {
|
||||
this._2FAVerification = 'invalid-secret';
|
||||
return;
|
||||
}
|
||||
|
||||
this.mfaProvider
|
||||
.enableMfa(this.inputSecretKey, this.inputOtpToken)
|
||||
.then(
|
||||
action(() => {
|
||||
this._2FAVerification = 'valid';
|
||||
this.openSuccess();
|
||||
})
|
||||
)
|
||||
.catch(
|
||||
action(() => {
|
||||
this._2FAVerification = 'invalid-auth-code';
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
finishActivation(): void {
|
||||
if (this._activationStep === 'success') {
|
||||
this._enabled2FA();
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
import { observer } from 'mobx-react-lite';
|
||||
import { FunctionComponent } from 'preact';
|
||||
import { TwoFactorActivation } from './TwoFactorActivation';
|
||||
import { SaveSecretKey } from './SaveSecretKey';
|
||||
import { ScanQRCode } from './ScanQRCode';
|
||||
import { Verification } from './Verification';
|
||||
import { TwoFactorSuccess } from './TwoFactorSuccess';
|
||||
|
||||
export const TwoFactorActivationView: FunctionComponent<{
|
||||
activation: TwoFactorActivation;
|
||||
}> = observer(({ activation: act }) => {
|
||||
switch (act.activationStep) {
|
||||
case 'scan-qr-code':
|
||||
return <ScanQRCode activation={act} />;
|
||||
case 'save-secret-key':
|
||||
return <SaveSecretKey activation={act} />;
|
||||
case 'verification':
|
||||
return <Verification activation={act} />;
|
||||
case 'success':
|
||||
return <TwoFactorSuccess activation={act} />;
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,151 @@
|
||||
import { MfaProvider, UserProvider } from '@/components/Preferences/providers';
|
||||
import { action, makeAutoObservable, observable } from 'mobx';
|
||||
import { TwoFactorActivation } from './TwoFactorActivation';
|
||||
|
||||
type TwoFactorStatus =
|
||||
| 'two-factor-enabled'
|
||||
| TwoFactorActivation
|
||||
| 'two-factor-disabled';
|
||||
|
||||
export const is2FADisabled = (
|
||||
status: TwoFactorStatus
|
||||
): status is 'two-factor-disabled' => status === 'two-factor-disabled';
|
||||
|
||||
export const is2FAActivation = (
|
||||
status: TwoFactorStatus
|
||||
): status is TwoFactorActivation =>
|
||||
(status as TwoFactorActivation)?.type === 'two-factor-activation';
|
||||
|
||||
export const is2FAEnabled = (
|
||||
status: TwoFactorStatus
|
||||
): status is 'two-factor-enabled' => status === 'two-factor-enabled';
|
||||
|
||||
export class TwoFactorAuth {
|
||||
private _status: TwoFactorStatus | 'fetching' = 'fetching';
|
||||
private _errorMessage: string | null;
|
||||
|
||||
constructor(
|
||||
private readonly mfaProvider: MfaProvider,
|
||||
private readonly userProvider: UserProvider
|
||||
) {
|
||||
this._errorMessage = null;
|
||||
|
||||
makeAutoObservable<
|
||||
TwoFactorAuth,
|
||||
'_status' | '_errorMessage' | 'deactivateMfa' | 'startActivation'
|
||||
>(
|
||||
this,
|
||||
{
|
||||
_status: observable,
|
||||
_errorMessage: observable,
|
||||
deactivateMfa: action,
|
||||
startActivation: action,
|
||||
},
|
||||
{ autoBind: true }
|
||||
);
|
||||
}
|
||||
|
||||
private startActivation(): void {
|
||||
const setDisabled = action(() => (this._status = 'two-factor-disabled'));
|
||||
const setEnabled = action(() => {
|
||||
this._status = 'two-factor-enabled';
|
||||
this.fetchStatus();
|
||||
});
|
||||
this.mfaProvider
|
||||
.generateMfaSecret()
|
||||
.then(
|
||||
action((secret) => {
|
||||
this._status = new TwoFactorActivation(
|
||||
this.mfaProvider,
|
||||
this.userProvider.getUser()!.email,
|
||||
secret,
|
||||
setDisabled,
|
||||
setEnabled
|
||||
);
|
||||
})
|
||||
)
|
||||
.catch(
|
||||
action((e) => {
|
||||
this.setError(e.message);
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
private deactivate2FA(): void {
|
||||
this.mfaProvider
|
||||
.disableMfa()
|
||||
.then(
|
||||
action(() => {
|
||||
this.fetchStatus();
|
||||
})
|
||||
)
|
||||
.catch(
|
||||
action((e) => {
|
||||
this.setError(e.message);
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
isLoggedIn(): boolean {
|
||||
return this.userProvider.getUser() != undefined;
|
||||
}
|
||||
|
||||
fetchStatus(): void {
|
||||
if (!this.isLoggedIn()) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!this.isMfaFeatureAvailable()) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.mfaProvider
|
||||
.isMfaActivated()
|
||||
.then(
|
||||
action((active) => {
|
||||
this._status = active ? 'two-factor-enabled' : 'two-factor-disabled';
|
||||
this.setError(null);
|
||||
})
|
||||
)
|
||||
.catch(
|
||||
action((e) => {
|
||||
this._status = 'two-factor-disabled';
|
||||
this.setError(e.message);
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
private setError(errorMessage: string | null): void {
|
||||
this._errorMessage = errorMessage;
|
||||
}
|
||||
|
||||
toggle2FA(): void {
|
||||
if (!this.isLoggedIn()) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!this.isMfaFeatureAvailable()) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this._status === 'two-factor-disabled') {
|
||||
return this.startActivation();
|
||||
}
|
||||
|
||||
if (this._status === 'two-factor-enabled') {
|
||||
return this.deactivate2FA();
|
||||
}
|
||||
}
|
||||
|
||||
get errorMessage(): string | null {
|
||||
return this._errorMessage;
|
||||
}
|
||||
|
||||
get status(): TwoFactorStatus | 'fetching' {
|
||||
return this._status;
|
||||
}
|
||||
|
||||
isMfaFeatureAvailable(): boolean {
|
||||
return this.mfaProvider.isMfaFeatureAvailable();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,91 @@
|
||||
import { FunctionComponent } from 'preact';
|
||||
import {
|
||||
Title,
|
||||
Text,
|
||||
PreferencesGroup,
|
||||
PreferencesSegment,
|
||||
} from '../../components';
|
||||
import { Switch } from '../../../Switch';
|
||||
import { observer } from 'mobx-react-lite';
|
||||
import { is2FAActivation, is2FADisabled, TwoFactorAuth } from './TwoFactorAuth';
|
||||
import { TwoFactorActivationView } from './TwoFactorActivationView';
|
||||
|
||||
const TwoFactorTitle: FunctionComponent<{ auth: TwoFactorAuth }> = observer(
|
||||
({ auth }) => {
|
||||
if (!auth.isLoggedIn()) {
|
||||
return <Title>Two-factor authentication not available</Title>;
|
||||
}
|
||||
if (!auth.isMfaFeatureAvailable()) {
|
||||
return <Title>Two-factor authentication not available</Title>;
|
||||
}
|
||||
return <Title>Two-factor authentication</Title>;
|
||||
}
|
||||
);
|
||||
|
||||
const TwoFactorDescription: FunctionComponent<{ auth: TwoFactorAuth }> =
|
||||
observer(({ auth }) => {
|
||||
if (!auth.isLoggedIn()) {
|
||||
return <Text>Sign in or register for an account to configure 2FA.</Text>;
|
||||
}
|
||||
if (!auth.isMfaFeatureAvailable()) {
|
||||
return (
|
||||
<Text>
|
||||
A paid subscription plan is required to enable 2FA.{' '}
|
||||
<a target="_blank" href="https://standardnotes.com/features">
|
||||
Learn more
|
||||
</a>
|
||||
.
|
||||
</Text>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<Text>An extra layer of security when logging in to your account.</Text>
|
||||
);
|
||||
});
|
||||
|
||||
const TwoFactorSwitch: FunctionComponent<{ auth: TwoFactorAuth }> = observer(
|
||||
({ auth }) => {
|
||||
if (!(auth.isLoggedIn() && auth.isMfaFeatureAvailable())) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (auth.status === 'fetching') {
|
||||
return <div class="sk-spinner normal info" />;
|
||||
}
|
||||
|
||||
return (
|
||||
<Switch checked={!is2FADisabled(auth.status)} onChange={auth.toggle2FA} />
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
export const TwoFactorAuthView: FunctionComponent<{
|
||||
auth: TwoFactorAuth;
|
||||
}> = observer(({ auth }) => {
|
||||
return (
|
||||
<>
|
||||
<PreferencesGroup>
|
||||
<PreferencesSegment>
|
||||
<div className="flex flex-row items-center">
|
||||
<div className="flex-grow flex flex-col">
|
||||
<TwoFactorTitle auth={auth} />
|
||||
<TwoFactorDescription auth={auth} />
|
||||
</div>
|
||||
<div className="flex flex-col justify-center items-center min-w-15">
|
||||
<TwoFactorSwitch auth={auth} />
|
||||
</div>
|
||||
</div>
|
||||
</PreferencesSegment>
|
||||
|
||||
{auth.errorMessage != null && (
|
||||
<PreferencesSegment>
|
||||
<Text className="color-danger">{auth.errorMessage}</Text>
|
||||
</PreferencesSegment>
|
||||
)}
|
||||
</PreferencesGroup>
|
||||
{auth.status !== 'fetching' && is2FAActivation(auth.status) && (
|
||||
<TwoFactorActivationView activation={auth.status} />
|
||||
)}
|
||||
</>
|
||||
);
|
||||
});
|
||||
@@ -0,0 +1,36 @@
|
||||
import { Button } from '@/components/Button';
|
||||
import ModalDialog, {
|
||||
ModalDialogButtons,
|
||||
ModalDialogDescription,
|
||||
ModalDialogLabel,
|
||||
} from '@/components/Shared/ModalDialog';
|
||||
import { Subtitle } from '@/components/Preferences/components';
|
||||
import { observer } from 'mobx-react-lite';
|
||||
import { FunctionComponent } from 'preact';
|
||||
import { TwoFactorActivation } from './TwoFactorActivation';
|
||||
|
||||
export const TwoFactorSuccess: FunctionComponent<{
|
||||
activation: TwoFactorActivation;
|
||||
}> = observer(({ activation: act }) => (
|
||||
<ModalDialog>
|
||||
<ModalDialogLabel closeDialog={act.finishActivation}>
|
||||
Successfully Enabled
|
||||
</ModalDialogLabel>
|
||||
<ModalDialogDescription>
|
||||
<div className="flex flex-row items-center justify-center pt-2">
|
||||
<Subtitle>
|
||||
Two-factor authentication has been successfully enabled for your
|
||||
account.
|
||||
</Subtitle>
|
||||
</div>
|
||||
</ModalDialogDescription>
|
||||
<ModalDialogButtons>
|
||||
<Button
|
||||
className="min-w-20"
|
||||
type="primary"
|
||||
label="Finish"
|
||||
onClick={act.finishActivation}
|
||||
/>
|
||||
</ModalDialogButtons>
|
||||
</ModalDialog>
|
||||
));
|
||||
@@ -0,0 +1,82 @@
|
||||
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,
|
||||
} from '@/components/Shared/ModalDialog';
|
||||
|
||||
export const Verification: FunctionComponent<{
|
||||
activation: TwoFactorActivation;
|
||||
}> = observer(({ activation: act }) => {
|
||||
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 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>:
|
||||
</div>
|
||||
<div className="min-w-2" />
|
||||
<DecoratedInput
|
||||
className={`w-92 ${secretKeyClass}`}
|
||||
onChange={act.setInputSecretKey}
|
||||
/>
|
||||
</div>
|
||||
<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
|
||||
authenticator app:
|
||||
</div>
|
||||
<div className="min-w-2" />
|
||||
<DecoratedInput
|
||||
className={`w-30 ${authTokenClass}`}
|
||||
onChange={act.setInputOtpToken}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</ModalDialogDescription>
|
||||
<ModalDialogButtons>
|
||||
{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
|
||||
className="min-w-20"
|
||||
type="normal"
|
||||
label="Back"
|
||||
onClick={act.openSaveSecretKey}
|
||||
/>
|
||||
<Button
|
||||
className="min-w-20"
|
||||
type="primary"
|
||||
label="Next"
|
||||
onClick={act.enable2FA}
|
||||
/>
|
||||
</ModalDialogButtons>
|
||||
</ModalDialog>
|
||||
);
|
||||
});
|
||||
@@ -0,0 +1,13 @@
|
||||
// Temporary implementation until integration
|
||||
export function downloadSecretKey(text: string) {
|
||||
const link = document.createElement('a');
|
||||
const blob = new Blob([text], {
|
||||
type: 'text/plain;charset=utf-8',
|
||||
});
|
||||
link.href = window.URL.createObjectURL(blob);
|
||||
link.setAttribute('download', 'standardnotes_2fa_key.txt');
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
link.remove();
|
||||
window.URL.revokeObjectURL(link.href);
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
import { FunctionComponent } from 'preact';
|
||||
import { useState } from 'preact/hooks';
|
||||
import { MfaProps } from './MfaProps';
|
||||
import { TwoFactorAuth } from './TwoFactorAuth';
|
||||
import { TwoFactorAuthView } from './TwoFactorAuthView';
|
||||
|
||||
export const TwoFactorAuthWrapper: FunctionComponent<MfaProps> = (props) => {
|
||||
const [auth] = useState(
|
||||
() => new TwoFactorAuth(props.mfaProvider, props.userProvider)
|
||||
);
|
||||
auth.fetchStatus();
|
||||
return <TwoFactorAuthView auth={auth} />;
|
||||
};
|
||||
Reference in New Issue
Block a user