@memori.ai/memori-react 6.4.6 → 6.5.0

package/src/components/LoginDrawer/LoginDrawer.tsx

@@ -7,8 +7,9 @@ import { useTranslation } from 'react-i18next';
 import cx from 'classnames';
 import memoriApiClient from '@memori.ai/memori-api-client';
 import { getErrori18nKey } from '../../helpers/error';
-
-export const mailRegEx = /^\w+([.-]?[+]?\w+)*@\w+([.-]?\w+)*(\.\w{2,})+$/;
+import { mailRegEx, pwdRegEx } from '../../helpers/utils';
+import SignupForm from '../SignupForm/SignupForm';
+import AccountForm from '../AccountForm/AccountForm';
 
 export interface Props {
   open?: boolean;
@@ -19,7 +20,10 @@ export interface Props {
   onLogout: () => void;
   tenant: Tenant;
   apiUrl: string;
+  __TEST__signup?: boolean;
   __TEST__needMissingData?: boolean;
+  __TEST__waitingForOtp?: boolean;
+  __TEST__changePwd?: boolean;
 }
 
 const LoginDrawer = ({
@@ -31,7 +35,10 @@ const LoginDrawer = ({
   loginToken,
   tenant,
   apiUrl,
+  __TEST__signup = false,
   __TEST__needMissingData = false,
+  __TEST__waitingForOtp = false,
+  __TEST__changePwd = false,
 }: Props) => {
   const { t, i18n } = useTranslation();
   const lang = i18n.language === 'it' ? 'it' : 'en';
@@ -39,7 +46,23 @@ const LoginDrawer = ({
   const client = memoriApiClient(apiUrl);
   const { userLogin, updateUser } = client.backend;
 
+  const isUserLoggedIn = user?.userID && loginToken;
+
   const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const [showSignup, setShowSignup] = useState(__TEST__signup);
+  const [userMustChangePwd, setUserMustChangePwd] = useState<User | undefined>(
+    __TEST__changePwd
+      ? {
+          flowID: 'flowID',
+          tenant: tenant.id,
+          eMail: 'email',
+          userName: 'username',
+          password: 'password',
+        }
+      : undefined
+  );
   const [needsMissingData, setNeedsMissingData] = useState<{
     token: string;
     birthDate?: boolean;
@@ -53,14 +76,6 @@ const LoginDrawer = ({
         }
       : ({} as any)
   );
-  const [error, setError] = useState<string | null>(null);
-
-  const [redirectTo, setRedirectTo] = useState<string | null>(null);
-  useEffect(() => {
-    setRedirectTo(window.location.href);
-  }, []);
-
-  const isUserLoggedIn = user?.userID && loginToken;
 
   const login = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
@@ -84,27 +99,37 @@ const LoginDrawer = ({
     setError(null);
     userLogin(user)
       .then(data => {
-        if (data.resultCode !== 0) {
+        if (data.resultCode === -14) {
+          setUserMustChangePwd({
+            tenant: tenant.id,
+            eMail: isEmail ? userNameOrEmail : undefined,
+            userName: isEmail ? undefined : userNameOrEmail,
+            password: password,
+            flowID: (data.flowID || data.user?.flowID) as string,
+          });
+        } else if (data.resultCode !== 0) {
           console.error(data);
-          toast.error(t(getErrori18nKey(data.resultCode), { ns: 'common' }));
+          toast.error(t(getErrori18nKey(data.resultCode)));
           setError(data.resultMessage);
         } else if (data.user && data.token) {
-          onLogin(data.user as User, data.token);
-
           if (!data.user?.tnCAndPPAccepted || !data.user?.birthDate) {
             setNeedsMissingData({
               token: data.token,
               birthDate: !data.user?.birthDate,
               tnCAndPPAccepted: !data.user?.tnCAndPPAccepted,
             });
+          } else {
+            onLogin(data.user as User, data.token);
           }
         }
       })
       .catch(err => {
         console.error('[LOGIN]', err);
-        toast.error(err);
 
-        if (err.message) setError(err.message);
+        if (err.message) {
+          toast.error(err.message);
+          setError(err.message);
+        }
       })
       .finally(() => {
         setLoading(false);
@@ -149,7 +174,7 @@ const LoginDrawer = ({
     );
     if (resp.resultCode !== 0) {
       console.error(resp);
-      toast.error(t(getErrori18nKey(resp.resultCode), { ns: 'common' }));
+      toast.error(t(getErrori18nKey(resp.resultCode)));
       setError(resp.resultMessage);
     } else {
       toast.success(t('success'));
@@ -157,23 +182,98 @@ const LoginDrawer = ({
     }
   };
 
+  const [password, setPassword] = useState<string>();
+  const [confirmPassword, setConfirmPassword] = useState<string>();
+  const pwdAcceptable = !password || (password && pwdRegEx.test(password));
+  const pwdGreen = pwdAcceptable && password && password.length >= 24;
+  const pwdEmpty = !password || password.length === 0;
+  const pwdMeterValue =
+    !pwdAcceptable || pwdEmpty
+      ? 0
+      : password.length < 8
+      ? 15
+      : password.length >= 32
+      ? 100
+      : (password.length - 8) * (50 / 24) + 50;
+
+  const changePassword = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    const form = e.currentTarget as HTMLFormElement;
+
+    const tenantID = form.tenant.value ?? tenant.id;
+    const flowID = form.flowID.value ?? userMustChangePwd?.flowID;
+    const eMail = form.eMail.value ?? userMustChangePwd?.eMail;
+    const userName = form.userName.value ?? userMustChangePwd?.userName;
+    const password = form.password.value ?? userMustChangePwd?.password;
+    const newPassword = form.newPassword.value;
+
+    if (!newPassword?.length || !pwdAcceptable) {
+      setError(t('login.passwordFormatError'));
+      return;
+    }
+
+    setLoading(true);
+
+    const user: User = {
+      tenant: tenantID,
+      flowID,
+      eMail,
+      userName,
+      password,
+      newPassword,
+    };
+
+    try {
+      const { user: patchedUser, token, ...resp } = await userLogin(user);
+
+      if (resp.resultCode !== 0) {
+        console.error(resp);
+        toast.error(t(getErrori18nKey(resp.resultCode)));
+        setError(resp.resultMessage);
+      } else if (patchedUser && token) {
+        toast.success(t('success'));
+        onLogin(patchedUser || user, token);
+      }
+    } catch (e) {
+      let err = e as Error;
+      console.error('[LOGIN/CHANGE PWD]', err);
+
+      if (err.message) {
+        toast.error(err.message);
+        setError(err.message);
+      }
+    } finally {
+      setLoading(false);
+    }
+  };
+
   return (
     <Drawer
       open={open}
       onClose={onClose}
       className={cx('memori--login-drawer', {
         'memori--login-drawer--logged': isUserLoggedIn,
+        'memori--login-drawer--signup': showSignup,
       })}
       title={
-        <h2 className="memori--login-drawer--title">
+        <span className="memori--login-drawer--title">
           {isUserLoggedIn
             ? t('login.loggedDrawerTitle', { name: user.userName })
+            : showSignup
+            ? t('login.signupDrawerTitle')
             : t('login.loginDrawerTitle')}
-        </h2>
+        </span>
       }
     >
       {isUserLoggedIn ? (
         <div className="memori--login-drawer--logged">
+          {user.avatarURL && (
+            <figure className="memori--login-drawer--avatar">
+              <img src={user.avatarURL} alt={user.userName} />
+            </figure>
+          )}
+
           <Button
             primary
             onClick={() => {
@@ -182,6 +282,13 @@ const LoginDrawer = ({
           >
             {t('login.logout')}
           </Button>
+
+          <AccountForm
+            user={user}
+            loginToken={loginToken}
+            apiUrl={apiUrl}
+            onUserUpdate={user => onLogin(user, loginToken)}
+          />
         </div>
       ) : needsMissingData?.token?.length ? (
         <>
@@ -272,6 +379,111 @@ const LoginDrawer = ({
             </Button>
           </form>
         </>
+      ) : userMustChangePwd?.flowID ? (
+        <>
+          <p>{t('login.mustChangePassword')}</p>
+
+          <form
+            className="memori--login-drawer--form"
+            onSubmit={changePassword}
+          >
+            <input
+              type="hidden"
+              name="tenant"
+              value={userMustChangePwd.tenant ?? tenant?.id}
+            />
+            <input
+              type="hidden"
+              name="flowID"
+              value={userMustChangePwd.flowID}
+            />
+            <input type="hidden" name="eMail" value={userMustChangePwd.eMail} />
+            <input
+              type="hidden"
+              name="userName"
+              value={userMustChangePwd.userName}
+            />
+            <input
+              type="hidden"
+              name="password"
+              value={userMustChangePwd.password}
+            />
+
+            <label htmlFor="#newPassword">
+              {t('login.password')}
+              <input
+                id="newPassword"
+                name="newPassword"
+                type="password"
+                required
+                autoComplete="new-password"
+                placeholder={t('login.password') || 'Password'}
+                onChange={e => setPassword(e.target.value)}
+                aria-invalid={!pwdAcceptable}
+              />
+            </label>
+            {!pwdAcceptable && (
+              <p className="memori--login-drawer--inline-error">
+                {t('login.passwordFormatError')}
+              </p>
+            )}
+
+            <label htmlFor="#confirm-password">
+              {t('login.confirmPassword')}
+              <input
+                id="confirm-password"
+                name="confirmPassword"
+                type="password"
+                required
+                autoComplete="new-password"
+                placeholder={t('login.confirmPassword') || 'Password'}
+                onChange={e => setConfirmPassword(e.target.value)}
+                aria-invalid={
+                  !!password?.length &&
+                  !!confirmPassword?.length &&
+                  password !== confirmPassword
+                }
+              />
+            </label>
+            {!!password?.length &&
+              !!confirmPassword?.length &&
+              password !== confirmPassword && (
+                <p className="memori--login-drawer--inline-error">
+                  {t('login.passwordMatchingError')}
+                </p>
+              )}
+
+            <meter
+              className="memori--login-drawer--password-meter"
+              min={0}
+              low={33}
+              high={66}
+              optimum={80}
+              max={100}
+              value={pwdMeterValue}
+              id="password-strength-meter"
+            />
+            <small>
+              {t(
+                `login.pwd${
+                  pwdGreen ? 'Strong' : pwdAcceptable ? 'Acceptable' : 'Weak'
+                }`
+              )}
+            </small>
+
+            <Button htmlType="submit" primary loading={loading}>
+              {t('confirm')}
+            </Button>
+          </form>
+        </>
+      ) : showSignup ? (
+        <SignupForm
+          tenant={tenant}
+          apiUrl={apiUrl}
+          onLogin={onLogin}
+          goToLogin={() => setShowSignup(false)}
+          __TEST__waitingForOtp={__TEST__waitingForOtp}
+        />
       ) : (
         <>
           <form className="memori--login-drawer--form" onSubmit={login}>
@@ -305,13 +517,9 @@ const LoginDrawer = ({
             {!tenant?.disableRegistration ? (
               <p className="memori--login-drawer--signup">
                 {t('login.newUserSignUp')}{' '}
-                <a
-                  href={`https://${
-                    tenant.name || 'www.aisuru.com'
-                  }/${lang}/auth?signup=1&redirectTo=${redirectTo}`}
-                >
+                <Button outlined onClick={() => setShowSignup(true)}>
                   {t('login.signUp')}
-                </a>
+                </Button>
               </p>
             ) : tenant.adminEmail ? (
               <div className="memori--login-drawer--signup">

package/src/components/LoginDrawer/__snapshots__/LoginDrawer.test.tsx.snap

@@ -18,6 +18,30 @@ exports[`renders LoginDrawer logged with missing data unchanged 1`] = `
 </div>
 `;
 
+exports[`renders LoginDrawer on change password unchanged 1`] = `
+<div>
+  <div
+    style="position: fixed; top: 1px; left: 1px; width: 1px; height: 0px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px; display: none;"
+  />
+</div>
+`;
+
+exports[`renders LoginDrawer on signup unchanged 1`] = `
+<div>
+  <div
+    style="position: fixed; top: 1px; left: 1px; width: 1px; height: 0px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px; display: none;"
+  />
+</div>
+`;
+
+exports[`renders LoginDrawer on signup waiting for otp unchanged 1`] = `
+<div>
+  <div
+    style="position: fixed; top: 1px; left: 1px; width: 1px; height: 0px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px; display: none;"
+  />
+</div>
+`;
+
 exports[`renders LoginDrawer open unchanged 1`] = `
 <div>
   <div

package/src/components/SignupForm/SignupForm.test.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import SignupForm from './SignupForm';
+import { tenant } from '../../mocks/data';
+
+beforeEach(() => {
+  // @ts-ignore
+  window.IntersectionObserver = jest.fn(() => ({
+    observe: jest.fn(),
+    unobserve: jest.fn(),
+    disconnect: jest.fn(),
+    takeRecords: jest.fn(),
+  }));
+});
+
+it('renders SignupForm unchanged', () => {
+  const { container } = render(
+    <SignupForm
+      apiUrl="https://backend.memori.ai"
+      tenant={tenant}
+      onLogin={jest.fn()}
+      goToLogin={jest.fn()}
+    />
+  );
+  expect(container).toMatchSnapshot();
+});
+
+it('renders SignupForm on otp form unchanged', () => {
+  const { container } = render(
+    <SignupForm
+      apiUrl="https://backend.memori.ai"
+      tenant={tenant}
+      onLogin={jest.fn()}
+      goToLogin={jest.fn()}
+      __TEST__waitingForOtp
+    />
+  );
+  expect(container).toMatchSnapshot();
+});