Web: Client: added tfa login

This commit is contained in:
Viktor Fomin 2021-05-17 16:33:53 +03:00
parent fadd46112c
commit 97a0dda7a6
2 changed files with 45 additions and 8 deletions

View File

@ -25,13 +25,20 @@ const StyledForm = styled(Box)`
}
`;
const TfaActivationForm = withLoader((props) => {
const { t, secretKey, qrCode } = props;
const { t, secretKey, qrCode, loginWithCode, user, hash, history } = props;
const [code, setCode] = useState("");
const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState(null);
const onSubmit = () => {
console.log(`Received code: ${code}`);
const onSubmit = async () => {
try {
const url = await loginWithCode(user, hash, code);
history.push(url || "/");
} catch (e) {
setError(e);
toastr.error(e);
}
};
const onKeyPress = (target) => {
@ -100,12 +107,25 @@ const TfaActivationForm = withLoader((props) => {
});
const TfaActivationWrapper = (props) => {
const { t, getSecretKeyAndQR, linkData, setIsLoaded, setIsLoading } = props;
const {
t,
getSecretKeyAndQR,
linkData,
setIsLoaded,
setIsLoading,
loginWithCode,
location,
history,
} = props;
const { user, hash } = location.state;
const [secretKey, setSecretKey] = useState("");
const [qrCode, setQrCode] = useState("");
const [error, setError] = useState(null);
console.log(linkData);
useEffect(async () => {
try {
setIsLoading(true);
@ -126,7 +146,13 @@ const TfaActivationWrapper = (props) => {
return error ? (
<ErrorContainer bodyText={error} />
) : (
<TfaActivationForm secretKey={secretKey} qrCode={qrCode} {...props} />
<TfaActivationForm
secretKey={secretKey}
qrCode={qrCode}
user={user}
hash={hash}
{...props}
/>
);
};
@ -134,4 +160,5 @@ export default inject(({ auth, confirm }) => ({
setIsLoaded: confirm.setIsLoaded,
setIsLoading: confirm.setIsLoading,
getSecretKeyAndQR: auth.tfaStore.getSecretKeyAndQR,
loginWithCode: auth.loginWithCode,
}))(withRouter(withTranslation("Confirm")(observer(TfaActivationWrapper))));

View File

@ -9,6 +9,7 @@ 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 toastr from "studio/toastr";
const StyledForm = styled(Box)`
margin: 63px auto auto 216px;
@ -21,13 +22,21 @@ const StyledForm = styled(Box)`
`;
const TfaAuthForm = (props) => {
const { t } = props;
const { t, loginWithCode, location, history } = props;
const { user, hash } = location.state;
const [code, setCode] = useState("");
const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState(null);
const onSubmit = () => {
console.log(`Received code: ${code}`);
const onSubmit = async () => {
try {
const url = await loginWithCode(user, hash, code);
history.push(url || "/");
} catch (e) {
setError(e);
toastr.error(e);
}
};
const onKeyPress = (target) => {
@ -86,4 +95,5 @@ const TfaAuthFormWrapper = (props) => {
export default inject(({ auth }) => ({
isLoaded: auth.isLoaded,
loginWithCode: auth.loginWithCode,
}))(withRouter(withTranslation("Confirm")(observer(TfaAuthFormWrapper))));