Login:Components:TfaActivationForm: remove styles
This commit is contained in:
parent
ea1a99f2f6
commit
c61daab2e6
@ -28,144 +28,9 @@
|
|||||||
|
|
||||||
import styled from "styled-components";
|
import styled from "styled-components";
|
||||||
|
|
||||||
import {
|
import { mobile, tablet } from "@docspace/shared/utils";
|
||||||
mobile,
|
|
||||||
tablet,
|
|
||||||
getCorrectFourValuesStyle,
|
|
||||||
} from "@docspace/shared/utils";
|
|
||||||
import { Box } from "@docspace/shared/components/box";
|
import { Box } from "@docspace/shared/components/box";
|
||||||
|
|
||||||
export const StyledPage = styled.div`
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
margin: 0 auto;
|
|
||||||
max-width: 960px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
|
|
||||||
@media ${tablet} {
|
|
||||||
padding: 0 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media ${mobile} {
|
|
||||||
width: 100%;
|
|
||||||
padding: ${({ theme }) =>
|
|
||||||
getCorrectFourValuesStyle("32px 8px 0 16px", theme.interfaceDirection)};
|
|
||||||
|
|
||||||
.language-combo-box {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.subtitle {
|
|
||||||
margin-bottom: 32px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.password-form {
|
|
||||||
width: 100%;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.subtitle {
|
|
||||||
margin-bottom: 32px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.language-combo-box {
|
|
||||||
position: absolute;
|
|
||||||
right: 28px;
|
|
||||||
top: 28px;
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
export const StyledContent = styled.div`
|
|
||||||
min-height: 100vh;
|
|
||||||
flex: 1 0 auto;
|
|
||||||
flex-direction: column;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
margin: 0 auto;
|
|
||||||
-webkit-box-orient: vertical;
|
|
||||||
-webkit-box-direction: normal;
|
|
||||||
|
|
||||||
@media ${mobile} {
|
|
||||||
width: 100%;
|
|
||||||
justify-content: start;
|
|
||||||
min-height: 100%;
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
export const StyledHeader = styled.div`
|
|
||||||
.title {
|
|
||||||
margin-bottom: 32px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.subtitle {
|
|
||||||
margin-bottom: 32px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.portal-logo {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
padding-bottom: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media ${mobile} {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
export const StyledBody = styled.div`
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
margin: 56px auto;
|
|
||||||
|
|
||||||
@media ${mobile} {
|
|
||||||
width: 100%;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title {
|
|
||||||
margin-bottom: 32px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.subtitle {
|
|
||||||
margin-bottom: 32px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.portal-logo {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
padding-bottom: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.password-field-wrapper {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.password-change-form {
|
|
||||||
margin-top: 32px;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.phone-input {
|
|
||||||
margin-bottom: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.delete-profile-confirm {
|
|
||||||
margin-bottom: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.phone-title {
|
|
||||||
margin-bottom: 8px;
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
export const StyledForm = styled(Box)`
|
export const StyledForm = styled(Box)`
|
||||||
margin: 56px auto;
|
margin: 56px auto;
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -200,14 +65,19 @@ export const StyledForm = styled(Box)`
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.portal-logo {
|
.logo-wrapper {
|
||||||
padding-bottom: 40px;
|
height: 44px;
|
||||||
|
width: auto;
|
||||||
|
|
||||||
@media ${tablet} {
|
@media ${tablet} {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media ${mobile} {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.set-app-description {
|
.set-app-description {
|
||||||
|
@ -29,13 +29,11 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { ChangeEvent, useContext, useState } from "react";
|
import { ChangeEvent, useContext, useState } from "react";
|
||||||
import { useTheme } from "styled-components";
|
|
||||||
import { Trans, useTranslation } from "react-i18next";
|
import { Trans, useTranslation } from "react-i18next";
|
||||||
|
|
||||||
import { Link, LinkTarget } from "@docspace/shared/components/link";
|
import { Link, LinkTarget } from "@docspace/shared/components/link";
|
||||||
import { combineUrl } from "@docspace/shared/utils/combineUrl";
|
import { combineUrl } from "@docspace/shared/utils/combineUrl";
|
||||||
import { Text } from "@docspace/shared/components/text";
|
import { Text } from "@docspace/shared/components/text";
|
||||||
import PortalLogo from "@docspace/shared/components/portal-logo/PortalLogo";
|
|
||||||
import { Box } from "@docspace/shared/components/box";
|
import { Box } from "@docspace/shared/components/box";
|
||||||
import { FormWrapper } from "@docspace/shared/components/form-wrapper";
|
import { FormWrapper } from "@docspace/shared/components/form-wrapper";
|
||||||
import { FieldContainer } from "@docspace/shared/components/field-container";
|
import { FieldContainer } from "@docspace/shared/components/field-container";
|
||||||
@ -50,8 +48,6 @@ import { TColorScheme } from "@docspace/shared/themes";
|
|||||||
import { TPasswordHash } from "@docspace/shared/api/settings/types";
|
import { TPasswordHash } from "@docspace/shared/api/settings/types";
|
||||||
import { loginWithTfaCode } from "@docspace/shared/api/user";
|
import { loginWithTfaCode } from "@docspace/shared/api/user";
|
||||||
import { validateTfaCode } from "@docspace/shared/api/settings";
|
import { validateTfaCode } from "@docspace/shared/api/settings";
|
||||||
import { getLogoUrl } from "@docspace/shared/utils";
|
|
||||||
import { WhiteLabelLogoType } from "@docspace/shared/enums";
|
|
||||||
|
|
||||||
import {
|
import {
|
||||||
TFA_ANDROID_APP_URL,
|
TFA_ANDROID_APP_URL,
|
||||||
@ -62,11 +58,8 @@ import withLoader from "@/HOCs/withLoader";
|
|||||||
import { TError, WithLoaderProps } from "@/types";
|
import { TError, WithLoaderProps } from "@/types";
|
||||||
import { ConfirmRouteContext } from "../ConfirmRoute";
|
import { ConfirmRouteContext } from "../ConfirmRoute";
|
||||||
|
|
||||||
import {
|
|
||||||
StyledContent,
|
import { GreetingContainer } from "../GreetingContainer";
|
||||||
StyledForm,
|
|
||||||
StyledPage,
|
|
||||||
} from "./TfaActivationForm.styled";
|
|
||||||
|
|
||||||
const PROXY_BASE_URL = combineUrl(window.ClientConfig?.proxy?.url, "/profile");
|
const PROXY_BASE_URL = combineUrl(window.ClientConfig?.proxy?.url, "/profile");
|
||||||
|
|
||||||
@ -137,123 +130,113 @@ const TfaActivationForm = ({
|
|||||||
if (event.code === "Enter" || event.code === "NumpadEnter") onSubmit();
|
if (event.code === "Enter" || event.code === "NumpadEnter") onSubmit();
|
||||||
};
|
};
|
||||||
|
|
||||||
const theme = useTheme();
|
|
||||||
|
|
||||||
const logoUrl = getLogoUrl(WhiteLabelLogoType.LoginPage, !theme.isBase);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<StyledPage>
|
<>
|
||||||
<StyledContent>
|
<Box className="set-app-description" marginProp="0 0 32px 0">
|
||||||
<StyledForm className="set-app-container">
|
<GreetingContainer />
|
||||||
<Box className="set-app-description" marginProp="0 0 32px 0">
|
|
||||||
<PortalLogo className="portal-logo" />
|
|
||||||
<Text isBold fontSize="14px" className="set-app-title">
|
|
||||||
{t("SetAppTitle")}
|
|
||||||
</Text>
|
|
||||||
|
|
||||||
<Trans
|
<Text isBold fontSize="14px" className="set-app-title">
|
||||||
t={t}
|
{t("SetAppTitle")}
|
||||||
i18nKey="SetAppDescription"
|
</Text>
|
||||||
ns="Confirm"
|
|
||||||
productName={t("Common:ProductName")}
|
<Trans
|
||||||
|
t={t}
|
||||||
|
i18nKey="SetAppDescription"
|
||||||
|
ns="Confirm"
|
||||||
|
productName={t("Common:ProductName")}
|
||||||
|
>
|
||||||
|
The two-factor authentication is enabled to provide additional portal
|
||||||
|
security. Configure your authenticator application to continue work on
|
||||||
|
the portal. For example you could use Google Authenticator for
|
||||||
|
<Link
|
||||||
|
color={currentColorScheme?.main?.accent}
|
||||||
|
href={TFA_ANDROID_APP_URL}
|
||||||
|
target={LinkTarget.blank}
|
||||||
|
>
|
||||||
|
Android
|
||||||
|
</Link>
|
||||||
|
and{" "}
|
||||||
|
<Link
|
||||||
|
color={currentColorScheme?.main?.accent}
|
||||||
|
href={TFA_IOS_APP_URL}
|
||||||
|
target={LinkTarget.blank}
|
||||||
|
>
|
||||||
|
iOS
|
||||||
|
</Link>{" "}
|
||||||
|
or Authenticator for{" "}
|
||||||
|
<Link
|
||||||
|
color={currentColorScheme?.main?.accent}
|
||||||
|
href={TFA_WIN_APP_URL}
|
||||||
|
target={LinkTarget.blank}
|
||||||
|
>
|
||||||
|
Windows Phone
|
||||||
|
</Link>{" "}
|
||||||
|
.
|
||||||
|
</Trans>
|
||||||
|
|
||||||
|
<Text className="set-app-text">
|
||||||
|
<Trans
|
||||||
|
t={t}
|
||||||
|
i18nKey="SetAppInstallDescription"
|
||||||
|
ns="Confirm"
|
||||||
|
key={secretKey}
|
||||||
|
>
|
||||||
|
To connect your apllication scan the QR code or manually enter your
|
||||||
|
secret key <strong>{{ secretKey }}</strong> then enter 6-digit code
|
||||||
|
from your application in the field below.
|
||||||
|
</Trans>
|
||||||
|
</Text>
|
||||||
|
</Box>
|
||||||
|
<FormWrapper id="tfa-activation-form">
|
||||||
|
<Box
|
||||||
|
displayProp="flex"
|
||||||
|
flexDirection="column"
|
||||||
|
className="app-code-wrapper"
|
||||||
|
>
|
||||||
|
<div className="qrcode-wrapper">
|
||||||
|
<img src={qrCode} height="180px" width="180px" alt="QR-code" />
|
||||||
|
</div>
|
||||||
|
<Box className="app-code-input">
|
||||||
|
<FieldContainer
|
||||||
|
labelVisible={false}
|
||||||
|
hasError={error ? true : false}
|
||||||
|
errorMessage={error}
|
||||||
>
|
>
|
||||||
The two-factor authentication is enabled to provide additional
|
<TextInput
|
||||||
portal security. Configure your authenticator application to
|
id="code"
|
||||||
continue work on the portal. For example you could use Google
|
name="code"
|
||||||
Authenticator for
|
type={InputType.text}
|
||||||
<Link
|
size={InputSize.large}
|
||||||
color={currentColorScheme?.main?.accent}
|
scale
|
||||||
href={TFA_ANDROID_APP_URL}
|
isAutoFocussed
|
||||||
target={LinkTarget.blank}
|
tabIndex={1}
|
||||||
>
|
placeholder={t("EnterCodePlaceholder")}
|
||||||
Android
|
isDisabled={isLoading}
|
||||||
</Link>
|
maxLength={6}
|
||||||
and{" "}
|
onChange={onChangeInput}
|
||||||
<Link
|
value={code}
|
||||||
color={currentColorScheme?.main?.accent}
|
hasError={error ? true : false}
|
||||||
href={TFA_IOS_APP_URL}
|
onKeyDown={onKeyPress}
|
||||||
target={LinkTarget.blank}
|
/>
|
||||||
>
|
</FieldContainer>
|
||||||
iOS
|
|
||||||
</Link>{" "}
|
|
||||||
or Authenticator for{" "}
|
|
||||||
<Link
|
|
||||||
color={currentColorScheme?.main?.accent}
|
|
||||||
href={TFA_WIN_APP_URL}
|
|
||||||
target={LinkTarget.blank}
|
|
||||||
>
|
|
||||||
Windows Phone
|
|
||||||
</Link>{" "}
|
|
||||||
.
|
|
||||||
</Trans>
|
|
||||||
|
|
||||||
<Text className="set-app-text">
|
|
||||||
<Trans
|
|
||||||
t={t}
|
|
||||||
i18nKey="SetAppInstallDescription"
|
|
||||||
ns="Confirm"
|
|
||||||
key={secretKey}
|
|
||||||
>
|
|
||||||
To connect your apllication scan the QR code or manually enter
|
|
||||||
your secret key <strong>{{ secretKey }}</strong> then enter
|
|
||||||
6-digit code from your application in the field below.
|
|
||||||
</Trans>
|
|
||||||
</Text>
|
|
||||||
</Box>
|
</Box>
|
||||||
<FormWrapper>
|
<Box className="app-code-continue-btn">
|
||||||
<Box
|
<Button
|
||||||
displayProp="flex"
|
scale
|
||||||
flexDirection="column"
|
primary
|
||||||
className="app-code-wrapper"
|
size={ButtonSize.medium}
|
||||||
>
|
tabIndex={3}
|
||||||
<div className="qrcode-wrapper">
|
label={
|
||||||
<img src={qrCode} height="180px" width="180px" alt="QR-code" />
|
isLoading ? t("Common:LoadingProcessing") : t("SetAppButton")
|
||||||
</div>
|
}
|
||||||
<Box className="app-code-input">
|
isDisabled={!code.length || isLoading}
|
||||||
<FieldContainer
|
isLoading={isLoading}
|
||||||
labelVisible={false}
|
onClick={onSubmit}
|
||||||
hasError={error ? true : false}
|
/>
|
||||||
errorMessage={error}
|
</Box>
|
||||||
>
|
</Box>
|
||||||
<TextInput
|
</FormWrapper>
|
||||||
id="code"
|
</>
|
||||||
name="code"
|
|
||||||
type={InputType.text}
|
|
||||||
size={InputSize.large}
|
|
||||||
scale
|
|
||||||
isAutoFocussed
|
|
||||||
tabIndex={1}
|
|
||||||
placeholder={t("EnterCodePlaceholder")}
|
|
||||||
isDisabled={isLoading}
|
|
||||||
maxLength={6}
|
|
||||||
onChange={onChangeInput}
|
|
||||||
value={code}
|
|
||||||
hasError={error ? true : false}
|
|
||||||
onKeyDown={onKeyPress}
|
|
||||||
/>
|
|
||||||
</FieldContainer>
|
|
||||||
</Box>
|
|
||||||
<Box className="app-code-continue-btn">
|
|
||||||
<Button
|
|
||||||
scale
|
|
||||||
primary
|
|
||||||
size={ButtonSize.medium}
|
|
||||||
tabIndex={3}
|
|
||||||
label={
|
|
||||||
isLoading
|
|
||||||
? t("Common:LoadingProcessing")
|
|
||||||
: t("SetAppButton")
|
|
||||||
}
|
|
||||||
isDisabled={!code.length || isLoading}
|
|
||||||
isLoading={isLoading}
|
|
||||||
onClick={onSubmit}
|
|
||||||
/>
|
|
||||||
</Box>
|
|
||||||
</Box>
|
|
||||||
</FormWrapper>
|
|
||||||
</StyledForm>
|
|
||||||
</StyledContent>
|
|
||||||
</StyledPage>
|
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user