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

Login:Components:TfaAuthForm: remove styles

Browse Source
This commit is contained in:
Darya Umrikhina 2024-08-01 15:06:10 +04:00
parent e69309a544
commit ea1a99f2f6
2 changed files with 52 additions and 122 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
packages/login/src/components/TfaAuthForm/TfaAuthForm.styled.tsx
View File

@ -1,64 +0,0 @@
// (c) Copyright Ascensio System SIA 2009-2024
//
// This program is a free software product.
// You can redistribute it and/or modify it under the terms
// of the GNU Affero General Public License (AGPL) version 3 as published by the Free Software
// Foundation. In accordance with Section 7(a) of the GNU AGPL its Section 15 shall be amended
// to the effect that Ascensio System SIA expressly excludes the warranty of non-infringement of
// any third-party rights.
//
// This program is distributed WITHOUT ANY WARRANTY, without even the implied warranty
// of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For details, see
// the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
//
// You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia, EU, LV-1021.
//
// The interactive user interfaces in modified source and object code versions of the Program must
// display Appropriate Legal Notices, as required under Section 5 of the GNU AGPL version 3.
//
// Pursuant to Section 7(b) of the License you must retain the original Product logo when
// distributing the program. Pursuant to Section 7(e) we decline to grant you any rights under
// trademark law for use of our trademarks.
//
// All the Product's GUI elements, including illustrations and icon sets, as well as technical writing
// content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
"use client";
import styled from "styled-components";
import { Box } from "@docspace/shared/components/box";
import { mobile } from "@docspace/shared/utils";
export const StyledForm = styled(Box)`
margin: 56px auto;
display: flex;
flex-direction: column;
flex: 1fr;
@media ${mobile} {
margin: 0 auto;
width: 100%;
}
.portal-logo {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
padding-bottom: 40px;
}
.app-code-wrapper {
width: 100%;
}
.app-code-text {
margin-bottom: 8px;
}
.app-code-continue-btn {
margin-top: 8px;
}
`;

110
packages/login/src/components/TfaAuthForm/index.tsx
View File

@ -31,9 +31,8 @@ import { ChangeEvent, useContext, useState } from "react";
import { validateTfaCode } from "@docspace/shared/api/settings";
import { loginWithTfaCode } from "@docspace/shared/api/user";
import { FormWrapper } from "@docspace/shared/components/form-wrapper";
import { toastr } from "@docspace/shared/components/toast";
import PortalLogo from "@docspace/shared/components/portal-logo/PortalLogo";
import { Box } from "@docspace/shared/components/box";
import { Text } from "@docspace/shared/components/text";
import { FieldContainer } from "@docspace/shared/components/field-container";
@ -49,8 +48,6 @@ import withLoader from "@/HOCs/withLoader";
import { TError, WithLoaderProps } from "@/types";
import { ConfirmRouteContext } from "../ConfirmRoute";
import { StyledForm } from "./TfaAuthForm.styled";
type TfaAuthFormProps = {
passwordHash: TPasswordHash;
userName?: string;
@ -119,63 +116,60 @@ const TfaAuthForm = ({
};
return (
<StyledForm className="app-code-container">
<PortalLogo className="portal-logo" />
<FormWrapper>
<Box className="app-code-description" marginProp="0 0 32px 0">
<Text isBold fontSize="14px" className="app-code-text">
{t("EnterAppCodeTitle")}
</Text>
<Text>{t("EnterAppCodeDescription")}</Text>
</Box>
<Box
displayProp="flex"
flexDirection="column"
className="app-code-wrapper"
>
<Box className="app-code-input">
<FieldContainer
labelVisible={false}
hasError={error ? true : false}
errorMessage={error}
>
<TextInput
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
<>
<Box className="app-code-description" marginProp="0 0 32px 0">
<Text isBold fontSize="14px" className="app-code-text">
{t("EnterAppCodeTitle")}
</Text>
<Text>{t("EnterAppCodeDescription")}</Text>
</Box>
<Box
displayProp="flex"
flexDirection="column"
className="app-code-wrapper"
>
<Box className="app-code-input">
<FieldContainer
labelVisible={false}
hasError={error ? true : false}
errorMessage={error}
>
<TextInput
id="code"
name="code"
type={InputType.text}
size={InputSize.large}
scale
primary
size={ButtonSize.medium}
tabIndex={3}
label={
isLoading
? t("Common:LoadingProcessing")
: t("Common:ContinueButton")
}
isDisabled={!code.length || isLoading}
isLoading={isLoading}
onClick={onSubmit}
isAutoFocussed
tabIndex={1}
placeholder={t("EnterCodePlaceholder")}
isDisabled={isLoading}
maxLength={6}
onChange={onChangeInput}
value={code}
hasError={error ? true : false}
onKeyDown={onKeyPress}
/>
</Box>
</FieldContainer>
</Box>
</FormWrapper>
</StyledForm>
<Box className="app-code-continue-btn">
<Button
scale
primary
size={ButtonSize.medium}
tabIndex={3}
label={
isLoading
? t("Common:LoadingProcessing")
: t("Common:ContinueButton")
}
isDisabled={!code.length || isLoading}
isLoading={isLoading}
onClick={onSubmit}
/>
</Box>
</Box>
</>
);
};