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

67
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,9 +38,9 @@ const TfaActivationForm = (props) => {
if (target.code === "Enter") onSubmit();
};
const key = "QWERTYUIOP"; //TODO: get key from api
return (
<PageLayout>
<PageLayout.SectionBody>
<StyledForm className="set-app-container">
<div>
<Box className="set-app-description" marginProp="0 0 32px 0">
@ -50,12 +52,12 @@ const TfaActivationForm = (props) => {
t={t}
i18nKey="SetAppInstallDescription"
ns="Confirm"
key={key}
key={secretKey}
>
<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.
your secret key <strong>{{ key: secretKey }}</strong> then
enter 6-digit code from your application in the field below.
</Text>
</Trans>
</Box>
@ -89,22 +91,47 @@ const TfaActivationForm = (props) => {
</Box>
</div>
<div id="qrcode">
<img src="images/fakeQR.png" alt="QR-code"></img>
<img src={qrCode} height="180px" width="180px" alt="QR-code"></img>
</div>
</StyledForm>
);
};
const TfaActivationFormWrapper = (props) => {
return (
<PageLayout>
<PageLayout.SectionBody>
<TfaActivationForm {...props} />
</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))));