Web: LoginMobile: added RegistrationForm

web/ASC.Web.LoginMobile/src/components/pages/Registration/Registration.jsx

@@ -1,12 +1,13 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import styled from "styled-components";
 import { withTranslation } from "react-i18next";
 
 import { Box } from "ASC.Web.Components";
 import i18n from "../../../i18n";
 
-import Header from "../../Header";
-import { RegistrationTitle } from "./sub-components";
+import { fakeApi } from "LoginMobileApi";
+
+import { RegistrationTitle, RegistrationForm } from "./sub-components";
 
 const StyledRegistration = styled(Box)`
   display: grid;
@@ -15,14 +16,22 @@ const StyledRegistration = styled(Box)`
   align-items: center;
   margin: 33px 32px 0 32px;
   height: min-content;
+  width: 100%;
 `;
 
 const RegistrationComponent = ({ t }) => {
+  const [isLoading, setIsLoading] = useState(false);
+
+  const onJoinHandler = (portalName, email, FirstName, LastName, pass) => {
+    setIsLoading(true);
+    fakeApi.join( portalName, email, FirstName, LastName, pass);
+  };
+
   return (
     <>
       <StyledRegistration>
         <RegistrationTitle t={t} />
-        Registration
+        <RegistrationForm isLoading={isLoading} t={t} onJoin={onJoinHandler} />
       </StyledRegistration>
     </>
   );

web/ASC.Web.LoginMobile/src/components/pages/Registration/sub-components/index.js

@@ -1 +1,2 @@
 export { default as RegistrationTitle } from "./registration-title";
+export { default as RegistrationForm } from "./registration-form";

web/ASC.Web.LoginMobile/src/components/pages/Registration/sub-components/registration-form.js

@@ -0,0 +1,143 @@
+import React, { useState } from "react";
+import styled from "styled-components";
+
+import { Button } from "ASC.Web.Components";
+
+import { EmailField, PasswordField, TextField } from "../../../fields";
+
+const StyledRegistrationForm = styled("form")`
+  width: 100%;
+  display: grid;
+  grid-template-columns: 1fr;
+  margin-top: 6px;
+
+  .registration-button {
+    margin-top: 28px;
+  }
+`;
+
+const RegistrationForm = ({ t, isLoading, onJoin }) => {
+  const [portalName, setPortalName] = useState({
+    val: "",
+    isValid: false,
+  });
+
+  const [email, setEmail] = useState({ val: "", isValid: false });
+
+  const [firstName, setFirstName] = useState({
+    val: "",
+    isValid: false,
+  });
+
+  const [lastName, setLastName] = useState({
+    val: "",
+    isValid: false,
+  });
+
+  const [password, setPassword] = useState({
+    val: "",
+    isValid: false,
+  });
+
+  const [hasError, setHasError] = useState(false);
+
+  const onChangePortalNameHandler = (val, isValid) => {
+    setPortalName({ val, isValid });
+  };
+
+  const onChangeEmailHandler = (val, isValid) => {
+    setEmail({ val, isValid });
+  };
+
+  const onChangeFirstNameHandler = (val, isValid) => {
+    setFirstName({ val, isValid });
+  };
+
+  const onChangeLastNameHandler = (val, isValid) => {
+    setLastName({ val, isValid });
+  };
+
+  const onChangePasswordHandler = (val, isValid) => {
+    setPassword({ val, isValid });
+  };
+
+  const onSubmitHandler = () => {
+    const isValid = checkingValid();
+    if (!isValid) return;
+    onJoin(
+      portalName.val,
+      email.val,
+      firstName.val,
+      lastName.val,
+      password.val
+    );
+  };
+
+  const checkingValid = () => {
+    let isValid = false;
+    if (
+      portalName.isValid &&
+      email.isValid &&
+      firstName.isValid &&
+      lastName.isValid &&
+      password.isValid
+    ) {
+      isValid = true;
+    }
+    setHasError(!isValid);
+    return isValid;
+  };
+
+  return (
+    <StyledRegistrationForm onSubmit={onSubmitHandler}>
+      <TextField
+        id="portal-name"
+        className="fields"
+        t={t}
+        placeholder={t('PlaceholderPortalName')}
+        isAutoFocussed
+        value={portalName.val}
+        hasError={!portalName.isValid && hasError}
+        onChangeValue={onChangePortalNameHandler}
+      />
+      <EmailField
+        className="fields"
+        t={t}
+        value={email.val}
+        hasError={!email.isValid && hasError}
+        onChangeEmail={onChangeEmailHandler}
+      />
+      <TextField
+        id="first-name"
+        className="fields"
+        t={t}
+        placeholder={t('PlaceholderFirstName')}
+        value={firstName.val}
+        hasError={!firstName.isValid && hasError}
+        onChangeValue={onChangeFirstNameHandler}
+      />
+      <TextField
+        id="last-name"
+        className="fields"
+        t={t}
+        placeholder={t('PlaceholderLastName')}
+        value={lastName.val}
+        hasError={!lastName.isValid && hasError}
+        onChangeValue={onChangeLastNameHandler}
+      />
+      <PasswordField t={t} onChangePassword={onChangePasswordHandler} />
+      <Button
+        className="registration-button"
+        primary
+        scale={true}
+        size="large"
+        label={isLoading ? t("LoadingProcessing") : t("JoinBtn")}
+        isDisabled={isLoading}
+        isLoading={isLoading}
+        onClick={onSubmitHandler}
+      />
+    </StyledRegistrationForm>
+  );
+};
+
+export default RegistrationForm;

web/ASC.Web.LoginMobile/src/locales/en/translation.json

@@ -18,10 +18,16 @@
   "TooltipPasswordLength": "-30 characters",
   "TooltipPasswordDigits": "digits",
   "TooltipPasswordCapital": "capital letters",
-  "TooltipPasswordSpecial": "special characters (!@#$%^&*)", 
+  "TooltipPasswordSpecial": "special characters (!@#$%^&*)",
   "LoginRegistrationBtn": "Register",
   "RegistrationTitle": "Cloud office applications",
   "RegistrationDesc": "Create portal",
   "IncorrectEmail": "Incorrect email",
-  "LengthPassLess": "Add {{lengthSetting}} characters"
+  "LengthPassLess": "Add {{lengthSetting}} characters",
+  "JoinBtn": "Join", 
+  "PlaceholderPortalName": "portalname",
+  "PlaceholderFirstName": "First name",
+  "PlaceholderLastName": "Last name",
+  "LocalDomain": "Incorrect local domain",
+  "IncorrectDomain": "Incorrect domain"
 }

web/ASC.Web.LoginMobile/src/locales/ru/translation.json

@@ -23,5 +23,11 @@
   "RegistrationTitle": "Облачные офисные приложения",
   "RegistrationDesc": "Создать портал",
   "IncorrectEmail": "Неверный email",
-  "LengthPassLess": "Добавьте {{lengthSetting}} символов"
+  "LengthPassLess": "Добавьте {{lengthSetting}} символов",
+  "JoinBtn": "Присоединиться",
+  "PlaceholderPortalName": "portalname",
+  "PlaceholderFirstName": "Имя",
+  "PlaceholderLastName": "Фамилия",
+  "LocalDomain": "Некорректный локальный домен",
+  "IncorrectDomain": "Некорректный домен"
 }