Web: Client: Confirm: use FormWrapper

This commit is contained in:
Viktor Fomin 2022-07-25 19:42:53 +03:00
parent 73e834c09f
commit 586c3b9d6f
7 changed files with 386 additions and 363 deletions

View File

@ -12,6 +12,7 @@ import {
ButtonsWrapper,
} from "./StyledConfirm";
import withLoader from "../withLoader";
import FormWrapper from "@appserver/components/form-wrapper";
const ChangeOwnerForm = (props) => {
const { t, greetingTitle } = props;
@ -29,6 +30,7 @@ const ChangeOwnerForm = (props) => {
</Text>
</StyledHeader>
<FormWrapper>
<ButtonsWrapper>
<Button
className="button"
@ -48,6 +50,7 @@ const ChangeOwnerForm = (props) => {
//onClick={this.onCancelClick}
/>
</ButtonsWrapper>
</FormWrapper>
</StyledBody>
</StyledPage>
);

View File

@ -13,6 +13,7 @@ import { getPasswordErrorMessage } from "../../../../helpers/utils";
import { createPasswordHash } from "@appserver/common/utils";
import tryRedirectTo from "@appserver/common/utils/tryRedirectTo";
import toastr from "@appserver/components/toast/toastr";
import FormWrapper from "@appserver/components/form-wrapper";
const ChangePasswordForm = (props) => {
const {
@ -86,6 +87,7 @@ const ChangePasswordForm = (props) => {
</Text>
</StyledHeader>
<FormWrapper>
<div className="password-change-form">
<Text className="confirm-subtitle">{t("PassworResetTitle")}</Text>
<FieldContainer
@ -138,6 +140,7 @@ const ChangePasswordForm = (props) => {
onClick={onSubmit}
isDisabled={isLoading}
/>
</FormWrapper>
</StyledBody>
</StyledPage>
);

View File

@ -8,6 +8,7 @@ import Section from "@appserver/common/components/Section";
import { inject, observer } from "mobx-react";
import { StyledPage, StyledBody, StyledHeader } from "./StyledConfirm";
import withLoader from "../withLoader";
import FormWrapper from "@appserver/components/form-wrapper";
const ChangePhoneForm = (props) => {
const { t, greetingTitle } = props;
@ -29,6 +30,7 @@ const ChangePhoneForm = (props) => {
<Text>{t("PhoneSubtitle")}</Text>
</StyledHeader>
<FormWrapper>
<TextInput
className="phone-input"
id="phone"
@ -50,6 +52,7 @@ const ChangePhoneForm = (props) => {
tabIndex={2}
isDisabled={false}
/>
</FormWrapper>
</StyledBody>
</StyledPage>
);

View File

@ -32,6 +32,7 @@ import AppLoader from "@appserver/common/components/AppLoader";
import EmailInput from "@appserver/components/email-input";
import { smallTablet } from "@appserver/components/utils/device";
import { getPasswordErrorMessage } from "../../../../helpers/utils";
import FormWrapper from "@appserver/components/form-wrapper";
export const ButtonsWrapper = styled.div`
display: flex;
@ -554,6 +555,7 @@ const Confirm = (props) => {
</div>
</GreetingContainer>
<FormWrapper>
<RegisterContainer isGreetingMode={isGreetingMode}>
{ssoExists() && <ButtonsWrapper>{ssoButton()}</ButtonsWrapper>}
@ -693,11 +695,13 @@ const Confirm = (props) => {
onKeyDown={onKeyPress}
onValidateInput={onValidatePassword}
tooltipPasswordTitle={`${t("Common:PasswordLimitMessage")}:`}
tooltipPasswordLength={`${t("Common:PasswordMinimumLength")}: ${
settings ? settings.minLength : 8
}`}
tooltipPasswordLength={`${t(
"Common:PasswordMinimumLength"
)}: ${settings ? settings.minLength : 8}`}
tooltipPasswordDigits={`${t("Common:PasswordLimitDigits")}`}
tooltipPasswordCapital={`${t("Common:PasswordLimitUpperCase")}`}
tooltipPasswordCapital={`${t(
"Common:PasswordLimitUpperCase"
)}`}
tooltipPasswordSpecial={`${t(
"Common:PasswordLimitSpecialSymbols"
)}`}
@ -751,6 +755,7 @@ const Confirm = (props) => {
ssoUrl={ssoUrl}
/>
</RegisterContainer>
</FormWrapper>
</ConfirmContainer>
);
};

View File

@ -9,6 +9,7 @@ import { deleteSelf } from "@appserver/common/api/people";
import toastr from "@appserver/components/toast/toastr";
import { StyledPage, StyledBody, StyledHeader } from "./StyledConfirm";
import withLoader from "../withLoader";
import FormWrapper from "@appserver/components/form-wrapper";
const ProfileRemoveForm = (props) => {
const { t, greetingTitle, linkData, logout } = props;
@ -62,6 +63,7 @@ const ProfileRemoveForm = (props) => {
</Text>
</StyledHeader>
<FormWrapper>
<Button
className="confirm-button"
primary
@ -71,6 +73,7 @@ const ProfileRemoveForm = (props) => {
isDisabled={isLoading}
onClick={onDeleteProfile}
/>
</FormWrapper>
</StyledBody>
</StyledPage>
);

View File

@ -14,6 +14,7 @@ import toastr from "studio/toastr";
import ErrorContainer from "@appserver/common/components/ErrorContainer";
import { hugeMobile, tablet } from "@appserver/components/utils/device";
import Link from "@appserver/components/link";
import FormWrapper from "@appserver/components/form-wrapper";
const StyledForm = styled(Box)`
margin: 63px auto auto 216px;
@ -149,6 +150,7 @@ const TfaActivationForm = withLoader((props) => {
</Trans>
</Text>
</Box>
<FormWrapper>
<Box
displayProp="flex"
flexDirection="column"
@ -199,6 +201,7 @@ const TfaActivationForm = withLoader((props) => {
/>
</Box>
</Box>
</FormWrapper>
</StyledForm>
);
});

View File

@ -16,6 +16,7 @@ import {
smallTablet,
tablet,
} from "@appserver/components/utils/device";
import FormWrapper from "@appserver/components/form-wrapper";
const StyledForm = styled(Box)`
margin: 63px auto;
@ -86,6 +87,7 @@ const TfaAuthForm = withLoader((props) => {
return (
<StyledForm className="app-code-container">
<FormWrapper>
<Box className="app-code-description" marginProp="0 0 32px 0">
<Text isBold fontSize="14px" className="app-code-text">
{t("EnterAppCodeTitle")}
@ -141,6 +143,7 @@ const TfaAuthForm = withLoader((props) => {
/>
</Box>
</Box>
</FormWrapper>
</StyledForm>
);
});