IlyaSobolev/DocSpace-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Web: Client: get secret key and qr

Browse Source
This commit is contained in:
Viktor Fomin 2021-05-14 15:59:40 +03:00
parent 77f17d55b6
commit 9f83d67ffb
1 changed files with 94 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

161
web/ASC.Web.Client/src/components/pages/Confirm/sub-components/tfaActivation.js
View File

@ -9,6 +9,9 @@ import PageLayout from "@appserver/common/components/PageLayout";
import { inject, observer } from "mobx-react";
import Box from "@appserver/components/box";
import Link from "@appserver/components/link";
import withLoader from "../withLoader";
import toastr from "studio/toastr";
import ErrorContainer from "@appserver/common/components/ErrorContainer";
const StyledForm = styled(Box)`
margin: 63px auto auto 216px;
@ -21,9 +24,8 @@ const StyledForm = styled(Box)`
margin-bottom: 14px;
}
`;
const TfaActivationForm = (props) => {
const { t } = props;
const TfaActivationForm = withLoader((props) => {
const { t, secretKey, qrCode } = props;
const [code, setCode] = useState("");
const [isLoading, setIsLoading] = useState(false);
@ -36,75 +38,100 @@ const TfaActivationForm = (props) => {
if (target.code === "Enter") onSubmit();
};
const key = "QWERTYUIOP"; //TODO: get key from api
return (
<StyledForm className="set-app-container">
<div>
<Box className="set-app-description" marginProp="0 0 32px 0">
<Text isBold fontSize="14px" className="set-app-text">
{t("SetAppTitle")}
</Text>
<Text className="set-app-text">{t("SetAppDescription")}</Text>
<Trans
t={t}
i18nKey="SetAppInstallDescription"
ns="Confirm"
key={key}
>
<Text>
To connect your apllication scan the QR code or manually enter
your secret key <strong>{{ key }}</strong> then enter 6-digit code
from your application in the field below.
</Text>
</Trans>
</Box>
<Box displayProp="flex">
<Box className="app-code-input">
<TextInput
id="code"
name="code"
type="text"
size="base"
scale
isAutoFocussed
tabIndex={1}
placeholder={t("EnterCodePlaceholder")}
isDisabled={isLoading}
onChange={(e) => setCode(e.target.value)}
value={code}
/>
</Box>
<Box className="app-code-continue-btn" marginProp="0 0 0 8px">
<Button
primary
size="medium"
tabIndex={3}
label={isLoading ? t("LoadingProcessing") : t("SetAppButton")}
isDisabled={!code.length || isLoading}
isLoading={isLoading}
onClick={onSubmit}
/>
</Box>
</Box>
</div>
<div id="qrcode">
<img src="images/fakeQR.png" alt="QR-code"></img>
</div>
</StyledForm>
);
};
const TfaActivationFormWrapper = (props) => {
return (
<PageLayout>
<PageLayout.SectionBody>
<TfaActivationForm {...props} />
<StyledForm className="set-app-container">
<div>
<Box className="set-app-description" marginProp="0 0 32px 0">
<Text isBold fontSize="14px" className="set-app-text">
{t("SetAppTitle")}
</Text>
<Text className="set-app-text">{t("SetAppDescription")}</Text>
<Trans
t={t}
i18nKey="SetAppInstallDescription"
ns="Confirm"
key={secretKey}
>
<Text>
To connect your apllication scan the QR code or manually enter
your secret key <strong>{{ key: secretKey }}</strong> then
enter 6-digit code from your application in the field below.
</Text>
</Trans>
</Box>
<Box displayProp="flex">
<Box className="app-code-input">
<TextInput
id="code"
name="code"
type="text"
size="base"
scale
isAutoFocussed
tabIndex={1}
placeholder={t("EnterCodePlaceholder")}
isDisabled={isLoading}
onChange={(e) => setCode(e.target.value)}
value={code}
/>
</Box>
<Box className="app-code-continue-btn" marginProp="0 0 0 8px">
<Button
primary
size="medium"
tabIndex={3}
label={isLoading ? t("LoadingProcessing") : t("SetAppButton")}
isDisabled={!code.length || isLoading}
isLoading={isLoading}
onClick={onSubmit}
/>
</Box>
</Box>
</div>
<div id="qrcode">
<img src={qrCode} height="180px" width="180px" alt="QR-code"></img>
</div>
</StyledForm>
</PageLayout.SectionBody>
</PageLayout>
);
});
const TfaActivationWrapper = (props) => {
const { t, getSecretKeyAndQR, linkData, setIsLoaded, setIsLoading } = props;
const [secretKey, setSecretKey] = useState("");
const [qrCode, setQrCode] = useState("");
const [error, setError] = useState(null);
useEffect(async () => {
try {
setIsLoading(true);
const confirmKey = linkData.confirmHeader;
const res = await getSecretKeyAndQR(confirmKey);
setSecretKey(res.manualEntryKey);
setQrCode(res.qrCodeSetupImageUrl);
} catch (e) {
setError(e);
toastr.error(e);
}
setIsLoaded(true);
setIsLoading(false);
}, []);
return error ? (
<ErrorContainer bodyText={error} />
) : (
<TfaActivationForm secretKey={secretKey} qrCode={qrCode} {...props} />
);
};
export default inject(({ auth }) => ({
isLoaded: auth.isLoaded,
}))(withRouter(withTranslation("Confirm")(observer(TfaActivationFormWrapper))));
export default inject(({ auth, confirm }) => ({
setIsLoaded: confirm.setIsLoaded,
setIsLoading: confirm.setIsLoading,
getSecretKeyAndQR: auth.tfaStore.getSecretKeyAndQR,
}))(withRouter(withTranslation("Confirm")(observer(TfaActivationWrapper))));