Web: Client: Confirm: use FormWrapper

web/ASC.Web.Client/src/components/pages/Confirm/sub-components/changeOwner.js

@@ -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,25 +30,27 @@ const ChangeOwnerForm = (props) => {
           </Text>
         </StyledHeader>
 
-        <ButtonsWrapper>
-          <Button
-            className="button"
-            primary
-            size="normal"
-            label={t("Common:SaveButton")}
-            tabIndex={2}
-            isDisabled={false}
-            //onClick={this.onAcceptClick} // call toast with t("ConfirmOwnerPortalSuccessMessage")
-          />
-          <Button
-            className="button"
-            size="normal"
-            label={t("Common:CancelButton")}
-            tabIndex={2}
-            isDisabled={false}
-            //onClick={this.onCancelClick}
-          />
-        </ButtonsWrapper>
+        <FormWrapper>
+          <ButtonsWrapper>
+            <Button
+              className="button"
+              primary
+              size="normal"
+              label={t("Common:SaveButton")}
+              tabIndex={2}
+              isDisabled={false}
+              //onClick={this.onAcceptClick} // call toast with t("ConfirmOwnerPortalSuccessMessage")
+            />
+            <Button
+              className="button"
+              size="normal"
+              label={t("Common:CancelButton")}
+              tabIndex={2}
+              isDisabled={false}
+              //onClick={this.onCancelClick}
+            />
+          </ButtonsWrapper>
+        </FormWrapper>
       </StyledBody>
     </StyledPage>
   );

web/ASC.Web.Client/src/components/pages/Confirm/sub-components/changePassword.js

@@ -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,58 +87,60 @@ const ChangePasswordForm = (props) => {
           </Text>
         </StyledHeader>
 
-        <div className="password-change-form">
-          <Text className="confirm-subtitle">{t("PassworResetTitle")}</Text>
-          <FieldContainer
-            className="form-field"
-            isVertical={true}
-            labelVisible={false}
-            hasError={isPasswordErrorShow && !passwordValid}
-            errorMessage={`${t(
-              "Common:PasswordLimitMessage"
-            )}: ${getPasswordErrorMessage(t, settings)}`}
-          >
-            <PasswordInput
-              className="confirm-input"
-              simpleView={false}
-              passwordSettings={settings}
-              id="password"
-              inputName="password"
-              placeholder={t("Common:Password")}
-              type="password"
-              inputValue={password}
+        <FormWrapper>
+          <div className="password-change-form">
+            <Text className="confirm-subtitle">{t("PassworResetTitle")}</Text>
+            <FieldContainer
+              className="form-field"
+              isVertical={true}
+              labelVisible={false}
               hasError={isPasswordErrorShow && !passwordValid}
-              size="large"
-              scale={true}
-              tabIndex={1}
-              autoComplete="current-password"
-              onChange={onChangePassword}
-              onValidateInput={onValidatePassword}
-              onBlur={onBlurPassword}
-              onKeyDown={onKeyPress}
-              tooltipPasswordTitle={`${t("Common:PasswordLimitMessage")}:`}
-              tooltipPasswordLength={`${t("Common:PasswordMinimumLength")}: ${
-                settings ? settings.minLength : 8
-              }`}
-              tooltipPasswordDigits={`${t("Common:PasswordLimitDigits")}`}
-              tooltipPasswordCapital={`${t("Common:PasswordLimitUpperCase")}`}
-              tooltipPasswordSpecial={`${t(
-                "Common:PasswordLimitSpecialSymbols"
-              )}`}
-              generatePasswordTitle={t("Wizard:GeneratePassword")}
-            />
-          </FieldContainer>
-        </div>
+              errorMessage={`${t(
+                "Common:PasswordLimitMessage"
+              )}: ${getPasswordErrorMessage(t, settings)}`}
+            >
+              <PasswordInput
+                className="confirm-input"
+                simpleView={false}
+                passwordSettings={settings}
+                id="password"
+                inputName="password"
+                placeholder={t("Common:Password")}
+                type="password"
+                inputValue={password}
+                hasError={isPasswordErrorShow && !passwordValid}
+                size="large"
+                scale={true}
+                tabIndex={1}
+                autoComplete="current-password"
+                onChange={onChangePassword}
+                onValidateInput={onValidatePassword}
+                onBlur={onBlurPassword}
+                onKeyDown={onKeyPress}
+                tooltipPasswordTitle={`${t("Common:PasswordLimitMessage")}:`}
+                tooltipPasswordLength={`${t("Common:PasswordMinimumLength")}: ${
+                  settings ? settings.minLength : 8
+                }`}
+                tooltipPasswordDigits={`${t("Common:PasswordLimitDigits")}`}
+                tooltipPasswordCapital={`${t("Common:PasswordLimitUpperCase")}`}
+                tooltipPasswordSpecial={`${t(
+                  "Common:PasswordLimitSpecialSymbols"
+                )}`}
+                generatePasswordTitle={t("Wizard:GeneratePassword")}
+              />
+            </FieldContainer>
+          </div>
 
-        <Button
-          className="confirm-button"
-          primary
-          size="normal"
-          label={t("Common:Create")}
-          tabIndex={5}
-          onClick={onSubmit}
-          isDisabled={isLoading}
-        />
+          <Button
+            className="confirm-button"
+            primary
+            size="normal"
+            label={t("Common:Create")}
+            tabIndex={5}
+            onClick={onSubmit}
+            isDisabled={isLoading}
+          />
+        </FormWrapper>
       </StyledBody>
     </StyledPage>
   );

web/ASC.Web.Client/src/components/pages/Confirm/sub-components/changePhone.js

@@ -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,27 +30,29 @@ const ChangePhoneForm = (props) => {
           <Text>{t("PhoneSubtitle")}</Text>
         </StyledHeader>
 
-        <TextInput
-          className="phone-input"
-          id="phone"
-          name="phone"
-          type="phone"
-          size="large"
-          scale={true}
-          isAutoFocussed={true}
-          tabIndex={1}
-          hasError={false}
-          guide={false}
-        />
+        <FormWrapper>
+          <TextInput
+            className="phone-input"
+            id="phone"
+            name="phone"
+            type="phone"
+            size="large"
+            scale={true}
+            isAutoFocussed={true}
+            tabIndex={1}
+            hasError={false}
+            guide={false}
+          />
 
-        <Button
-          className="confirm-button"
-          primary
-          size="normal"
-          label={t("GetCode")}
-          tabIndex={2}
-          isDisabled={false}
-        />
+          <Button
+            className="confirm-button"
+            primary
+            size="normal"
+            label={t("GetCode")}
+            tabIndex={2}
+            isDisabled={false}
+          />
+        </FormWrapper>
       </StyledBody>
     </StyledPage>
   );

web/ASC.Web.Client/src/components/pages/Confirm/sub-components/createUser.js

@@ -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,160 +555,181 @@ const Confirm = (props) => {
         </div>
       </GreetingContainer>
 
-      <RegisterContainer isGreetingMode={isGreetingMode}>
-        {ssoExists() && <ButtonsWrapper>{ssoButton()}</ButtonsWrapper>}
+      <FormWrapper>
+        <RegisterContainer isGreetingMode={isGreetingMode}>
+          {ssoExists() && <ButtonsWrapper>{ssoButton()}</ButtonsWrapper>}
 
-        {oauthDataExists() && (
-          <>
-            <ButtonsWrapper>{providerButtons()}</ButtonsWrapper>
-            {providers && providers.length > 2 && (
-              <Link
-                isHovered
-                type="action"
-                fontSize="13px"
-                fontWeight="600"
-                color="#3B72A7"
-                className="more-label"
-                onClick={moreAuthOpen}
-              >
-                {t("Common:ShowMore")}
-              </Link>
-            )}
-          </>
-        )}
+          {oauthDataExists() && (
+            <>
+              <ButtonsWrapper>{providerButtons()}</ButtonsWrapper>
+              {providers && providers.length > 2 && (
+                <Link
+                  isHovered
+                  type="action"
+                  fontSize="13px"
+                  fontWeight="600"
+                  color="#3B72A7"
+                  className="more-label"
+                  onClick={moreAuthOpen}
+                >
+                  {t("Common:ShowMore")}
+                </Link>
+              )}
+            </>
+          )}
 
-        {(oauthDataExists() || ssoExists()) && (
-          <div className="line">
-            <Text color="#A3A9AE" className="or-label">
-              {t("Or")}
-            </Text>
-          </div>
-        )}
+          {(oauthDataExists() || ssoExists()) && (
+            <div className="line">
+              <Text color="#A3A9AE" className="or-label">
+                {t("Or")}
+              </Text>
+            </div>
+          )}
 
-        <form className="auth-form-container">
-          <div className="auth-form-fields">
-            <FieldContainer
-              className="form-field"
-              isVertical={true}
-              labelVisible={false}
-              hasError={isEmailErrorShow && !emailValid}
-              errorMessage={
-                emailErrorText
-                  ? t(`Common:${emailErrorText}`)
-                  : t("Common:RequiredField")
-              }
-            >
-              <EmailInput
-                id="login"
-                name="login"
-                type="email"
+          <form className="auth-form-container">
+            <div className="auth-form-fields">
+              <FieldContainer
+                className="form-field"
+                isVertical={true}
+                labelVisible={false}
                 hasError={isEmailErrorShow && !emailValid}
-                value={email}
-                placeholder={t("Common:Email")}
-                size="large"
-                scale={true}
-                isAutoFocussed={true}
-                tabIndex={1}
-                isDisabled={isLoading}
-                autoComplete="username"
-                onChange={onChangeEmail}
-                onBlur={onBlurEmail}
-                onValidateInput={onValidateEmail}
-                forwardedRef={inputRef}
-              />
-            </FieldContainer>
+                errorMessage={
+                  emailErrorText
+                    ? t(`Common:${emailErrorText}`)
+                    : t("Common:RequiredField")
+                }
+              >
+                <EmailInput
+                  id="login"
+                  name="login"
+                  type="email"
+                  hasError={isEmailErrorShow && !emailValid}
+                  value={email}
+                  placeholder={t("Common:Email")}
+                  size="large"
+                  scale={true}
+                  isAutoFocussed={true}
+                  tabIndex={1}
+                  isDisabled={isLoading}
+                  autoComplete="username"
+                  onChange={onChangeEmail}
+                  onBlur={onBlurEmail}
+                  onValidateInput={onValidateEmail}
+                  forwardedRef={inputRef}
+                />
+              </FieldContainer>
 
-            <FieldContainer
-              className="form-field"
-              isVertical={true}
-              labelVisible={false}
-              hasError={!fnameValid}
-              errorMessage={errorText ? errorText : t("Common:RequiredField")}
-            >
-              <TextInput
-                id="first-name"
-                name="first-name"
-                type="text"
+              <FieldContainer
+                className="form-field"
+                isVertical={true}
+                labelVisible={false}
                 hasError={!fnameValid}
-                value={fname}
-                placeholder={t("FirstName")}
-                size="large"
-                scale={true}
-                tabIndex={1}
-                isDisabled={isLoading}
-                onChange={onChangeFname}
-                onKeyDown={onKeyPress}
-              />
-            </FieldContainer>
+                errorMessage={errorText ? errorText : t("Common:RequiredField")}
+              >
+                <TextInput
+                  id="first-name"
+                  name="first-name"
+                  type="text"
+                  hasError={!fnameValid}
+                  value={fname}
+                  placeholder={t("FirstName")}
+                  size="large"
+                  scale={true}
+                  tabIndex={1}
+                  isDisabled={isLoading}
+                  onChange={onChangeFname}
+                  onKeyDown={onKeyPress}
+                />
+              </FieldContainer>
 
-            <FieldContainer
-              className="form-field"
-              isVertical={true}
-              labelVisible={false}
-              hasError={!snameValid}
-              errorMessage={errorText ? errorText : t("Common:RequiredField")}
-            >
-              <TextInput
-                id="last-name"
-                name="last-name"
-                type="text"
+              <FieldContainer
+                className="form-field"
+                isVertical={true}
+                labelVisible={false}
                 hasError={!snameValid}
-                value={sname}
-                placeholder={t("Common:LastName")}
-                size="large"
-                scale={true}
-                tabIndex={1}
-                isDisabled={isLoading}
-                onChange={onChangeSname}
-                onKeyDown={onKeyPress}
-              />
-            </FieldContainer>
+                errorMessage={errorText ? errorText : t("Common:RequiredField")}
+              >
+                <TextInput
+                  id="last-name"
+                  name="last-name"
+                  type="text"
+                  hasError={!snameValid}
+                  value={sname}
+                  placeholder={t("Common:LastName")}
+                  size="large"
+                  scale={true}
+                  tabIndex={1}
+                  isDisabled={isLoading}
+                  onChange={onChangeSname}
+                  onKeyDown={onKeyPress}
+                />
+              </FieldContainer>
 
-            <FieldContainer
-              className="form-field"
-              isVertical={true}
-              labelVisible={false}
-              hasError={isPasswordErrorShow && !passwordValid}
-              errorMessage={`${t(
-                "Common:PasswordLimitMessage"
-              )}: ${getPasswordErrorMessage(t, settings)}`}
-            >
-              <PasswordInput
-                simpleView={false}
-                hideNewPasswordButton
-                showCopyLink={false}
-                passwordSettings={settings}
-                id="password"
-                inputName="password"
-                placeholder={t("Common:Password")}
-                type="password"
+              <FieldContainer
+                className="form-field"
+                isVertical={true}
+                labelVisible={false}
                 hasError={isPasswordErrorShow && !passwordValid}
-                inputValue={password}
-                size="large"
+                errorMessage={`${t(
+                  "Common:PasswordLimitMessage"
+                )}: ${getPasswordErrorMessage(t, settings)}`}
+              >
+                <PasswordInput
+                  simpleView={false}
+                  hideNewPasswordButton
+                  showCopyLink={false}
+                  passwordSettings={settings}
+                  id="password"
+                  inputName="password"
+                  placeholder={t("Common:Password")}
+                  type="password"
+                  hasError={isPasswordErrorShow && !passwordValid}
+                  inputValue={password}
+                  size="large"
+                  scale={true}
+                  tabIndex={1}
+                  isDisabled={isLoading}
+                  autoComplete="current-password"
+                  onChange={onChangePassword}
+                  onBlur={onBlurPassword}
+                  onKeyDown={onKeyPress}
+                  onValidateInput={onValidatePassword}
+                  tooltipPasswordTitle={`${t("Common:PasswordLimitMessage")}:`}
+                  tooltipPasswordLength={`${t(
+                    "Common:PasswordMinimumLength"
+                  )}: ${settings ? settings.minLength : 8}`}
+                  tooltipPasswordDigits={`${t("Common:PasswordLimitDigits")}`}
+                  tooltipPasswordCapital={`${t(
+                    "Common:PasswordLimitUpperCase"
+                  )}`}
+                  tooltipPasswordSpecial={`${t(
+                    "Common:PasswordLimitSpecialSymbols"
+                  )}`}
+                  generatePasswordTitle={t("Wizard:GeneratePassword")}
+                />
+              </FieldContainer>
+
+              <Button
+                id="submit"
+                className="login-button"
+                primary
+                size="normal"
                 scale={true}
+                label={
+                  isLoading
+                    ? t("Common:LoadingProcessing")
+                    : t("LoginRegistryButton")
+                }
                 tabIndex={1}
                 isDisabled={isLoading}
-                autoComplete="current-password"
-                onChange={onChangePassword}
-                onBlur={onBlurPassword}
-                onKeyDown={onKeyPress}
-                onValidateInput={onValidatePassword}
-                tooltipPasswordTitle={`${t("Common:PasswordLimitMessage")}:`}
-                tooltipPasswordLength={`${t("Common:PasswordMinimumLength")}: ${
-                  settings ? settings.minLength : 8
-                }`}
-                tooltipPasswordDigits={`${t("Common:PasswordLimitDigits")}`}
-                tooltipPasswordCapital={`${t("Common:PasswordLimitUpperCase")}`}
-                tooltipPasswordSpecial={`${t(
-                  "Common:PasswordLimitSpecialSymbols"
-                )}`}
-                generatePasswordTitle={t("Wizard:GeneratePassword")}
+                isLoading={isLoading}
+                onClick={onSubmit}
               />
-            </FieldContainer>
+            </div>
 
             <Button
               id="submit"
-              className="login-button"
+              className="login-button is-greeting-mode-button"
               primary
               size="normal"
               scale={true}
@@ -719,38 +741,21 @@ const Confirm = (props) => {
               tabIndex={1}
               isDisabled={isLoading}
               isLoading={isLoading}
-              onClick={onSubmit}
+              onClick={onGreetingSubmit}
             />
-          </div>
+          </form>
 
-          <Button
-            id="submit"
-            className="login-button is-greeting-mode-button"
-            primary
-            size="normal"
-            scale={true}
-            label={
-              isLoading
-                ? t("Common:LoadingProcessing")
-                : t("LoginRegistryButton")
-            }
-            tabIndex={1}
-            isDisabled={isLoading}
-            isLoading={isLoading}
-            onClick={onGreetingSubmit}
+          <MoreLoginModal
+            t={t}
+            visible={moreAuthVisible}
+            onClose={moreAuthClose}
+            providers={providers}
+            onSocialLoginClick={onSocialButtonClick}
+            ssoLabel={ssoLabel}
+            ssoUrl={ssoUrl}
           />
-        </form>
-
-        <MoreLoginModal
-          t={t}
-          visible={moreAuthVisible}
-          onClose={moreAuthClose}
-          providers={providers}
-          onSocialLoginClick={onSocialButtonClick}
-          ssoLabel={ssoLabel}
-          ssoUrl={ssoUrl}
-        />
-      </RegisterContainer>
+        </RegisterContainer>
+      </FormWrapper>
     </ConfirmContainer>
   );
 };

web/ASC.Web.Client/src/components/pages/Confirm/sub-components/profileRemove.js

@@ -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,15 +63,17 @@ const ProfileRemoveForm = (props) => {
           </Text>
         </StyledHeader>
 
-        <Button
-          className="confirm-button"
-          primary
-          size="normal"
-          label={t("DeleteProfileBtn")}
-          tabIndex={1}
-          isDisabled={isLoading}
-          onClick={onDeleteProfile}
-        />
+        <FormWrapper>
+          <Button
+            className="confirm-button"
+            primary
+            size="normal"
+            label={t("DeleteProfileBtn")}
+            tabIndex={1}
+            isDisabled={isLoading}
+            onClick={onDeleteProfile}
+          />
+        </FormWrapper>
       </StyledBody>
     </StyledPage>
   );

web/ASC.Web.Client/src/components/pages/Confirm/sub-components/tfaActivation.js

@@ -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,56 +150,58 @@ const TfaActivationForm = withLoader((props) => {
           </Trans>
         </Text>
       </Box>
-      <Box
-        displayProp="flex"
-        flexDirection="column"
-        className="app-code-wrapper"
-      >
-        <div className="qrcode-wrapper">
-          <img src={qrCode} height="180px" width="180px" alt="QR-code"></img>
-        </div>
-        <Box className="app-code-input">
-          <FieldContainer
-            labelVisible={false}
-            hasError={error ? true : false}
-            errorMessage={error}
-          >
-            <TextInput
-              id="code"
-              name="code"
-              type="text"
-              size="large"
-              scale
-              isAutoFocussed
-              tabIndex={1}
-              placeholder={t("EnterCodePlaceholder")}
-              isDisabled={isLoading}
-              maxLength={6}
-              onChange={(e) => {
-                setCode(e.target.value);
-                setError("");
-              }}
-              value={code}
+      <FormWrapper>
+        <Box
+          displayProp="flex"
+          flexDirection="column"
+          className="app-code-wrapper"
+        >
+          <div className="qrcode-wrapper">
+            <img src={qrCode} height="180px" width="180px" alt="QR-code"></img>
+          </div>
+          <Box className="app-code-input">
+            <FieldContainer
+              labelVisible={false}
               hasError={error ? true : false}
-              onKeyDown={onKeyPress}
+              errorMessage={error}
+            >
+              <TextInput
+                id="code"
+                name="code"
+                type="text"
+                size="large"
+                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 className="app-code-continue-btn">
+            <Button
+              scale
+              primary
+              size="medium"
+              tabIndex={3}
+              label={
+                isLoading ? t("Common:LoadingProcessing") : t("SetAppButton")
+              }
+              isDisabled={!code.length || isLoading}
+              isLoading={isLoading}
+              onClick={onSubmit}
             />
-          </FieldContainer>
+          </Box>
         </Box>
-        <Box className="app-code-continue-btn">
-          <Button
-            scale
-            primary
-            size="medium"
-            tabIndex={3}
-            label={
-              isLoading ? t("Common:LoadingProcessing") : t("SetAppButton")
-            }
-            isDisabled={!code.length || isLoading}
-            isLoading={isLoading}
-            onClick={onSubmit}
-          />
-        </Box>
-      </Box>
+      </FormWrapper>
     </StyledForm>
   );
 });

web/ASC.Web.Client/src/components/pages/Confirm/sub-components/tfaAuth.js

@@ -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,61 +87,63 @@ const TfaAuthForm = withLoader((props) => {
 
   return (
     <StyledForm className="app-code-container">
-      <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="text"
-              size="huge"
-              scale
-              isAutoFocussed
-              tabIndex={1}
-              placeholder={t("EnterCodePlaceholder")}
-              isDisabled={isLoading}
-              maxLength={6}
-              onChange={(e) => {
-                setCode(e.target.value);
-                setError("");
-              }}
-              value={code}
+      <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}
-              onKeyDown={onKeyPress}
+              errorMessage={error}
+            >
+              <TextInput
+                id="code"
+                name="code"
+                type="text"
+                size="huge"
+                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 className="app-code-continue-btn">
+            <Button
+              scale
+              primary
+              size="medium"
+              tabIndex={3}
+              label={
+                isLoading
+                  ? t("Common:LoadingProcessing")
+                  : t("Common:ContinueButton")
+              }
+              isDisabled={!code.length || isLoading}
+              isLoading={isLoading}
+              onClick={onSubmit}
             />
-          </FieldContainer>
+          </Box>
         </Box>
-        <Box className="app-code-continue-btn">
-          <Button
-            scale
-            primary
-            size="medium"
-            tabIndex={3}
-            label={
-              isLoading
-                ? t("Common:LoadingProcessing")
-                : t("Common:ContinueButton")
-            }
-            isDisabled={!code.length || isLoading}
-            isLoading={isLoading}
-            onClick={onSubmit}
-          />
-        </Box>
-      </Box>
+      </FormWrapper>
     </StyledForm>
   );
 });