Web: Login: added RecoverAccessModalDialog

packages/login/src/client/components/Login.tsx

@@ -19,6 +19,7 @@ import Link from "@docspace/components/link";
 import Toast from "@docspace/components/toast";
 import LoginForm from "./sub-components/LoginForm";
 import MoreLoginModal from "./sub-components/more-login";
+import RecoverAccessModalDialog from "./sub-components/recover-access-modal-dialog";
 
 const { proxyURL } = AppServerConfig;
 const greetingTitle = "Web Office Applications"; // from PortalSettingsStore
@@ -37,6 +38,7 @@ const Login: React.FC<ILoginProps> = ({
 }) => {
   const [isLoading, setIsLoading] = useState(false);
   const [moreAuthVisible, setMoreAuthVisible] = useState(false);
+  const [recoverDialogVisible, setRecoverDialogVisible] = useState(false);
 
   const { enabledJoin } = portalSettings;
   const { ssoLabel, ssoUrl } = capabilities;
@@ -146,6 +148,10 @@ const Login: React.FC<ILoginProps> = ({
     setMoreAuthVisible(false);
   };
 
+  const onRecoverDialogVisible = () => {
+    setRecoverDialogVisible(!recoverDialogVisible);
+  };
+
   return (
     <LoginFormWrapper enabledJoin={enabledJoin} isDesktop={isDesktopEditor}>
       <LoginContainer>
@@ -189,6 +195,7 @@ const Login: React.FC<ILoginProps> = ({
           isLoading={isLoading}
           hashSettings={portalSettings.passwordHash}
           setIsLoading={setIsLoading}
+          onRecoverDialogVisible={onRecoverDialogVisible}
           match={match}
         />
         <Toast />
@@ -200,6 +207,11 @@ const Login: React.FC<ILoginProps> = ({
           ssoLabel={ssoLabel}
           ssoUrl={ssoUrl}
         />
+
+        <RecoverAccessModalDialog
+          visible={recoverDialogVisible}
+          onClose={() => setRecoverDialogVisible(false)}
+        />
       </LoginContainer>
     </LoginFormWrapper>
   );

packages/login/src/client/components/sub-components/LoginForm.tsx

@@ -21,6 +21,7 @@ interface ILoginFormProps {
   hashSettings: PasswordHashType;
   isDesktop: boolean;
   match: MatchType;
+  onRecoverDialogVisible: () => void;
 }
 
 const settings = {
@@ -36,6 +37,7 @@ const LoginForm: React.FC<ILoginFormProps> = ({
   isDesktop,
   match,
   setIsLoading,
+  onRecoverDialogVisible,
 }) => {
   const [isEmailErrorShow, setIsEmailErrorShow] = useState(false);
   const [errorText, setErrorText] = useState("");
@@ -287,7 +289,31 @@ const LoginForm: React.FC<ILoginFormProps> = ({
         isLoading={isLoading}
         onClick={onSubmit}
       />
+      {/*Uncomment when add api*/}
+      <div className="login-or-access">
+        {/*<Link
+                  fontWeight="600"
+                  fontSize="13px"
+                  color="#316DAA"
+                  type="action"
+                  isHovered={true}
+                  onClick={onLoginWithCodeClick}
+                >
+                  {t("SignInWithCode")}
+                </Link>*/}
 
+        <Text color="#A3A9AE">{t("Or")}</Text>
+        <Link
+          fontWeight="600"
+          fontSize="13px"
+          color="#316DAA"
+          type="action"
+          isHovered={true}
+          onClick={onRecoverDialogVisible}
+        >
+          {t("RecoverAccess")}
+        </Link>
+      </div>
       {confirmedEmail && (
         <Text isBold={true} fontSize="16px">
           {t("MessageEmailConfirmed")} {t("MessageAuthorize")}

packages/login/src/client/components/sub-components/recover-access-modal-dialog.tsx

@@ -1,7 +1,5 @@
 import React, { useState } from "react";
-import PropTypes from "prop-types";
 import styled from "styled-components";
-
 import Button from "@docspace/components/button";
 import TextInput from "@docspace/components/text-input";
 import Text from "@docspace/components/text";
@@ -11,6 +9,12 @@ import FieldContainer from "@docspace/components/field-container";
 import { smallTablet } from "@docspace/components/utils/device";
 import { sendRecoverRequest } from "@docspace/common/api/settings";
 import toastr from "@docspace/components/toast/toastr";
+import { useTranslation } from "react-i18next";
+
+interface IRecoverAccessModalDialogProps {
+  visible: boolean;
+  onClose: () => void;
+}
 
 const ModalDialogContainer = styled(ModalDialog)`
   .modal-dialog-aside-footer {
@@ -34,7 +38,10 @@ const ModalDialogContainer = styled(ModalDialog)`
   }
 `;
 
-const RecoverAccessModalDialog = ({ t, visible, onClose }) => {
+const RecoverAccessModalDialog: React.FC<IRecoverAccessModalDialogProps> = ({
+  visible,
+  onClose,
+}) => {
   const [loading, setLoading] = useState(false);
 
   const [email, setEmail] = useState("");
@@ -43,6 +50,8 @@ const RecoverAccessModalDialog = ({ t, visible, onClose }) => {
   const [description, setDescription] = useState("");
   const [descErr, setDescErr] = useState(false);
 
+  const { t } = useTranslation(["Login", "Common"]);
+
   const onRecoverModalClose = () => {
     setEmail("");
     setEmailErr(false);
@@ -51,12 +60,12 @@ const RecoverAccessModalDialog = ({ t, visible, onClose }) => {
     onClose && onClose();
   };
 
-  const onChangeEmail = (e) => {
+  const onChangeEmail = (e: React.ChangeEvent<HTMLInputElement>) => {
     setEmail(e.currentTarget.value);
     setEmailErr(false);
   };
 
-  const onChangeDescription = (e) => {
+  const onChangeDescription = (e: React.ChangeEvent<HTMLInputElement>) => {
     setDescription(e.currentTarget.value);
     setDescErr(false);
   };
@@ -70,7 +79,7 @@ const RecoverAccessModalDialog = ({ t, visible, onClose }) => {
     } else {
       setLoading(true);
       sendRecoverRequest(email, description)
-        .then((res) => {
+        .then((res: string) => {
           setLoading(false);
           toastr.success(res);
         })
@@ -170,10 +179,4 @@ const RecoverAccessModalDialog = ({ t, visible, onClose }) => {
   );
 };
 
-RecoverAccessModalDialog.propTypes = {
-  t: PropTypes.func.isRequired,
-  visible: PropTypes.bool.isRequired,
-  onClose: PropTypes.func.isRequired,
-};
-
 export default RecoverAccessModalDialog;