From 690561fbe8fe403bb76662f9ff8eaae02b3fff78 Mon Sep 17 00:00:00 2001
From: Darya Umrikhina <darya.umrihina@onlyoffice.com>
Date: Tue, 23 Jul 2024 01:27:10 +0400
Subject: [PATCH] Login:Components:CreateUserForm: add EmailInputForm and
 RegistrationForm

---
 .../sub-components/EmailInputForm.tsx         | 117 +++++++++
 .../sub-components/RegistrationForm.tsx       | 222 ++++++++++++++++++
 2 files changed, 339 insertions(+)
 create mode 100644 packages/login/src/components/CreateUserForm/sub-components/EmailInputForm.tsx
 create mode 100644 packages/login/src/components/CreateUserForm/sub-components/RegistrationForm.tsx

diff --git a/packages/login/src/components/CreateUserForm/sub-components/EmailInputForm.tsx b/packages/login/src/components/CreateUserForm/sub-components/EmailInputForm.tsx
new file mode 100644
index 0000000000..67f72405a2
--- /dev/null
+++ b/packages/login/src/components/CreateUserForm/sub-components/EmailInputForm.tsx
@@ -0,0 +1,117 @@
+// (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 { ChangeEvent, KeyboardEvent, Ref } from "react";
+import { useTranslation } from "react-i18next";
+
+import { Button, ButtonSize } from "@docspace/shared/components/button";
+import { EmailInput, TValidate } from "@docspace/shared/components/email-input";
+import { FieldContainer } from "@docspace/shared/components/field-container";
+import { InputSize, InputType } from "@docspace/shared/components/text-input";
+
+type EmailInputFormProps = {
+  ref: Ref<HTMLInputElement>;
+  isLoading: boolean;
+  email: string;
+  isEmailErrorShow: boolean;
+  emailValid: boolean;
+  emailFromLink: string;
+  emailErrorText?: string;
+  onContinue(): Promise<void>;
+  onChange(e: ChangeEvent<HTMLInputElement>): void;
+  onValidate(result: TValidate): undefined;
+  onBlur(): void;
+  onKeyPress(e: KeyboardEvent<HTMLInputElement>): void;
+};
+
+const EmailInputForm = ({
+  ref,
+  isLoading,
+  email,
+  isEmailErrorShow,
+  emailValid,
+  emailErrorText,
+  emailFromLink,
+
+  onContinue,
+  onChange,
+  onValidate,
+  onBlur,
+  onKeyPress,
+}: EmailInputFormProps) => {
+  const { t } = useTranslation(["Confirm", "Common"]);
+
+  return (
+    <div className="email-container">
+      <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={InputType.email}
+          size={InputSize.large}
+          hasError={isEmailErrorShow && !emailValid}
+          value={email}
+          placeholder={t("Common:Email")}
+          scale={true}
+          isAutoFocussed={true}
+          tabIndex={1}
+          isDisabled={isLoading || !!emailFromLink}
+          autoComplete="username"
+          onChange={onChange}
+          onBlur={onBlur}
+          onValidateInput={onValidate}
+          forwardedRef={ref}
+          onKeyDown={onKeyPress}
+        />
+      </FieldContainer>
+      <Button
+        className="login-button"
+        primary
+        size={ButtonSize.medium}
+        scale={true}
+        label={t("Common:ContinueButton")}
+        tabIndex={1}
+        isDisabled={isLoading}
+        isLoading={isLoading}
+        onClick={onContinue}
+      />
+    </div>
+  );
+};
+
+export default EmailInputForm;
diff --git a/packages/login/src/components/CreateUserForm/sub-components/RegistrationForm.tsx b/packages/login/src/components/CreateUserForm/sub-components/RegistrationForm.tsx
new file mode 100644
index 0000000000..cd169ff9c8
--- /dev/null
+++ b/packages/login/src/components/CreateUserForm/sub-components/RegistrationForm.tsx
@@ -0,0 +1,222 @@
+// (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 { ChangeEvent, KeyboardEvent, useContext } from "react";
+import { useTranslation } from "react-i18next";
+
+import { TPasswordSettings } from "@docspace/shared/api/settings/types";
+import { Button, ButtonSize } from "@docspace/shared/components/button";
+import { FieldContainer } from "@docspace/shared/components/field-container";
+import { PasswordInput } from "@docspace/shared/components/password-input";
+import {
+  InputSize,
+  InputType,
+  TextInput,
+} from "@docspace/shared/components/text-input";
+import { getPasswordErrorMessage } from "@docspace/shared/utils/getPasswordErrorMessage";
+
+import { ConfirmRouteContext } from "@/app/(root)/confirm/confirmRoute";
+
+import { GreetingUserContainer } from "./GreetingUserContainer";
+
+type RegistrationFormProps = {
+  isLoading: boolean;
+  email: string;
+  emailFromLink: string;
+  errorText: string;
+
+  fnameValid: boolean;
+  fname: string;
+  onChangeFname(e: ChangeEvent<HTMLInputElement>): void;
+
+  sname: string;
+  snameValid: boolean;
+  onChangeSname(e: ChangeEvent<HTMLInputElement>): void;
+
+  isPasswordErrorShow: boolean;
+  passwordValid: boolean;
+  password: string;
+  passwordSettings?: TPasswordSettings;
+  onChangePassword(e: ChangeEvent<HTMLInputElement>): void;
+  onBlurPassword(): void;
+  onKeyPress(e: KeyboardEvent<HTMLInputElement>): void;
+  onValidatePassword(progressScore: boolean): void;
+
+  onClickBack(): void;
+  onSubmit(): void;
+};
+
+const RegistrationForm = ({
+  isLoading,
+  email,
+  emailFromLink,
+  errorText,
+
+  fnameValid,
+  fname,
+  onChangeFname,
+
+  sname,
+  snameValid,
+  onChangeSname,
+
+  isPasswordErrorShow,
+  passwordValid,
+  passwordSettings,
+  password,
+  onChangePassword,
+  onBlurPassword,
+  onKeyPress,
+  onValidatePassword,
+
+  onClickBack,
+  onSubmit,
+}: RegistrationFormProps) => {
+  const { t } = useTranslation(["Confirm", "Common"]);
+
+  const { linkData } = useContext(ConfirmRouteContext);
+
+  return (
+    <div>
+      <GreetingUserContainer
+        email={email}
+        onClickBack={onClickBack}
+        type={linkData.type ?? ""}
+        emailFromLink={emailFromLink}
+      />
+      <FieldContainer
+        className="form-field"
+        isVertical={true}
+        labelVisible={false}
+        hasError={!fnameValid}
+        errorMessage={
+          errorText
+            ? errorText
+            : fname.trim().length === 0
+              ? t("Common:RequiredField")
+              : t("Common:IncorrectFirstName")
+        }
+      >
+        <TextInput
+          id="first-name"
+          name="first-name"
+          type={InputType.text}
+          size={InputSize.large}
+          hasError={!fnameValid}
+          value={fname}
+          placeholder={t("Common:FirstName")}
+          scale={true}
+          tabIndex={1}
+          isDisabled={isLoading}
+          onChange={onChangeFname}
+          onKeyDown={onKeyPress}
+          isAutoFocussed
+        />
+      </FieldContainer>
+      <FieldContainer
+        className="form-field"
+        isVertical={true}
+        labelVisible={false}
+        hasError={!snameValid}
+        errorMessage={
+          errorText
+            ? errorText
+            : sname.trim().length === 0
+              ? t("Common:RequiredField")
+              : t("Common:IncorrectLastName")
+        }
+      >
+        <TextInput
+          id="last-name"
+          name="last-name"
+          type={InputType.text}
+          size={InputSize.large}
+          hasError={!snameValid}
+          value={sname}
+          placeholder={t("Common:LastName")}
+          scale={true}
+          tabIndex={1}
+          isDisabled={isLoading}
+          onChange={onChangeSname}
+          onKeyDown={onKeyPress}
+        />
+      </FieldContainer>
+      <FieldContainer
+        className="form-field password-field"
+        isVertical={true}
+        labelVisible={false}
+        hasError={isPasswordErrorShow && !passwordValid}
+        errorMessage={`${t(
+          "Common:PasswordLimitMessage",
+        )}: ${getPasswordErrorMessage(t, passwordSettings)}`}
+      >
+        <PasswordInput
+          simpleView={false}
+          passwordSettings={passwordSettings}
+          id="password"
+          inputName="password"
+          placeholder={t("Common:Password")}
+          inputType={InputType.password}
+          size={InputSize.large}
+          hasError={isPasswordErrorShow && !passwordValid}
+          inputValue={password}
+          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",
+          )}: ${passwordSettings ? passwordSettings.minLength : 8}`}
+          tooltipPasswordDigits={`${t("Common:PasswordLimitDigits")}`}
+          tooltipPasswordCapital={`${t("Common:PasswordLimitUpperCase")}`}
+          tooltipPasswordSpecial={`${t("Common:PasswordLimitSpecialSymbols")}`}
+          generatePasswordTitle={t("Wizard:GeneratePassword")}
+        />
+      </FieldContainer>
+
+      <Button
+        className="login-button"
+        primary
+        size={ButtonSize.medium}
+        scale={true}
+        label={isLoading ? t("Common:LoadingProcessing") : t("SignUp")}
+        tabIndex={1}
+        isDisabled={isLoading}
+        isLoading={isLoading}
+        onClick={onSubmit}
+      />
+    </div>
+  );
+};
+
+export default RegistrationForm;