Web: Client: added error message
This commit is contained in:
parent
eccf52eba1
commit
b8ef6150ab
@ -4,6 +4,7 @@ import { Trans, withTranslation } from "react-i18next";
|
|||||||
import styled from "styled-components";
|
import styled from "styled-components";
|
||||||
import Button from "@appserver/components/button";
|
import Button from "@appserver/components/button";
|
||||||
import TextInput from "@appserver/components/text-input";
|
import TextInput from "@appserver/components/text-input";
|
||||||
|
import FieldContainer from "@appserver/components/field-container";
|
||||||
import Text from "@appserver/components/text";
|
import Text from "@appserver/components/text";
|
||||||
import PageLayout from "@appserver/common/components/PageLayout";
|
import PageLayout from "@appserver/common/components/PageLayout";
|
||||||
import { inject, observer } from "mobx-react";
|
import { inject, observer } from "mobx-react";
|
||||||
@ -75,12 +76,11 @@ const TfaActivationForm = withLoader((props) => {
|
|||||||
const url = await loginWithCodeAndCookie(code);
|
const url = await loginWithCodeAndCookie(code);
|
||||||
history.push(url || "/");
|
history.push(url || "/");
|
||||||
}
|
}
|
||||||
|
|
||||||
setIsLoading(false);
|
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
setError(e);
|
setError(e);
|
||||||
toastr.error(e);
|
toastr.error(e);
|
||||||
}
|
}
|
||||||
|
setIsLoading(false);
|
||||||
};
|
};
|
||||||
|
|
||||||
const onKeyPress = (target) => {
|
const onKeyPress = (target) => {
|
||||||
@ -114,25 +114,31 @@ const TfaActivationForm = withLoader((props) => {
|
|||||||
</Box>
|
</Box>
|
||||||
<Box displayProp="flex" className="app-code-wrapper">
|
<Box displayProp="flex" className="app-code-wrapper">
|
||||||
<Box className="app-code-input">
|
<Box className="app-code-input">
|
||||||
<TextInput
|
<FieldContainer
|
||||||
id="code"
|
labelVisible={false}
|
||||||
name="code"
|
|
||||||
type="text"
|
|
||||||
size={width <= 1024 ? "large" : "base"}
|
|
||||||
scale
|
|
||||||
isAutoFocussed
|
|
||||||
tabIndex={1}
|
|
||||||
placeholder={t("EnterCodePlaceholder")}
|
|
||||||
isDisabled={isLoading}
|
|
||||||
maxLength={6}
|
|
||||||
onChange={(e) => {
|
|
||||||
setCode(e.target.value);
|
|
||||||
setError("");
|
|
||||||
}}
|
|
||||||
value={code}
|
|
||||||
hasError={error ? true : false}
|
hasError={error ? true : false}
|
||||||
onKeyDown={onKeyPress}
|
errorMessage={error}
|
||||||
/>
|
>
|
||||||
|
<TextInput
|
||||||
|
id="code"
|
||||||
|
name="code"
|
||||||
|
type="text"
|
||||||
|
size={width <= 1024 ? "large" : "base"}
|
||||||
|
scale
|
||||||
|
isAutoFocussed
|
||||||
|
tabIndex={1}
|
||||||
|
placeholder={t("EnterCodePlaceholder")}
|
||||||
|
isDisabled={isLoading}
|
||||||
|
maxLength={6}
|
||||||
|
onChange={(e) => {
|
||||||
|
setCode(e.target.value);
|
||||||
|
setError("");
|
||||||
|
}}
|
||||||
|
value={code}
|
||||||
|
hasError={error ? true : false}
|
||||||
|
onKeyDown={onKeyPress}
|
||||||
|
/>
|
||||||
|
</FieldContainer>
|
||||||
</Box>
|
</Box>
|
||||||
<Box className="app-code-continue-btn" marginProp="0 0 0 8px">
|
<Box className="app-code-continue-btn" marginProp="0 0 0 8px">
|
||||||
<Button
|
<Button
|
||||||
|
@ -4,6 +4,7 @@ import { withTranslation } from "react-i18next";
|
|||||||
import styled from "styled-components";
|
import styled from "styled-components";
|
||||||
import Button from "@appserver/components/button";
|
import Button from "@appserver/components/button";
|
||||||
import TextInput from "@appserver/components/text-input";
|
import TextInput from "@appserver/components/text-input";
|
||||||
|
import FieldContainer from "@appserver/components/field-container";
|
||||||
import Text from "@appserver/components/text";
|
import Text from "@appserver/components/text";
|
||||||
import PageLayout from "@appserver/common/components/PageLayout";
|
import PageLayout from "@appserver/common/components/PageLayout";
|
||||||
import { inject, observer } from "mobx-react";
|
import { inject, observer } from "mobx-react";
|
||||||
@ -64,12 +65,11 @@ const TfaAuthForm = withLoader((props) => {
|
|||||||
const url = await loginWithCodeAndCookie(code);
|
const url = await loginWithCodeAndCookie(code);
|
||||||
history.push(url || "/");
|
history.push(url || "/");
|
||||||
}
|
}
|
||||||
|
|
||||||
setIsLoading(false);
|
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
setError(e);
|
setError(e);
|
||||||
toastr.error(e);
|
toastr.error(e);
|
||||||
}
|
}
|
||||||
|
setIsLoading(false);
|
||||||
};
|
};
|
||||||
|
|
||||||
const onKeyPress = (target) => {
|
const onKeyPress = (target) => {
|
||||||
@ -88,25 +88,31 @@ const TfaAuthForm = withLoader((props) => {
|
|||||||
</Box>
|
</Box>
|
||||||
<Box displayProp="flex" className="app-code-wrapper">
|
<Box displayProp="flex" className="app-code-wrapper">
|
||||||
<Box className="app-code-input">
|
<Box className="app-code-input">
|
||||||
<TextInput
|
<FieldContainer
|
||||||
id="code"
|
labelVisible={false}
|
||||||
name="code"
|
|
||||||
type="text"
|
|
||||||
size={width <= 1024 ? "large" : "base"}
|
|
||||||
scale
|
|
||||||
isAutoFocussed
|
|
||||||
tabIndex={1}
|
|
||||||
placeholder={t("EnterCodePlaceholder")}
|
|
||||||
isDisabled={isLoading}
|
|
||||||
maxLength={6}
|
|
||||||
onChange={(e) => {
|
|
||||||
setCode(e.target.value);
|
|
||||||
setError("");
|
|
||||||
}}
|
|
||||||
value={code}
|
|
||||||
hasError={error ? true : false}
|
hasError={error ? true : false}
|
||||||
onKeyDown={onKeyPress}
|
errorMessage={error}
|
||||||
/>
|
>
|
||||||
|
<TextInput
|
||||||
|
id="code"
|
||||||
|
name="code"
|
||||||
|
type="text"
|
||||||
|
size={width <= 1024 ? "large" : "base"}
|
||||||
|
scale
|
||||||
|
isAutoFocussed
|
||||||
|
tabIndex={1}
|
||||||
|
placeholder={t("EnterCodePlaceholder")}
|
||||||
|
isDisabled={isLoading}
|
||||||
|
maxLength={6}
|
||||||
|
onChange={(e) => {
|
||||||
|
setCode(e.target.value);
|
||||||
|
setError("");
|
||||||
|
}}
|
||||||
|
value={code}
|
||||||
|
hasError={error ? true : false}
|
||||||
|
onKeyDown={onKeyPress}
|
||||||
|
/>
|
||||||
|
</FieldContainer>
|
||||||
</Box>
|
</Box>
|
||||||
<Box className="app-code-continue-btn" marginProp="0 0 0 8px">
|
<Box className="app-code-continue-btn" marginProp="0 0 0 8px">
|
||||||
<Button
|
<Button
|
||||||
|
Loading…
Reference in New Issue
Block a user