@memori.ai/memori-react 8.7.4 → 8.7.5

package/src/components/AccountForm/AccountForm.tsx

@@ -1,325 +0,0 @@
-import { User, Tenant } from '@memori.ai/memori-api-client/dist/types';
-import React, { useEffect, useState } from 'react';
-import Button from '../ui/Button';
-import { useTranslation } from 'react-i18next';
-import memoriApiClient from '@memori.ai/memori-api-client';
-import toast from 'react-hot-toast';
-import { mailRegEx, pwdRegEx, usernameRegEx } from '../../helpers/utils';
-import { getErrori18nKey } from '../../helpers/error';
-import Tooltip from '../ui/Tooltip';
-
-export interface Props {
-  user: User;
-  loginToken: string;
-  apiClient: ReturnType<typeof memoriApiClient>;
-  onUserUpdate: (user: User) => void;
-}
-
-const imgMimeTypes = ['image/jpeg', 'image/png', 'image/jpg', 'image/gif'];
-
-const AccountForm = ({ user, loginToken, apiClient, onUserUpdate }: Props) => {
-  const { t, i18n } = useTranslation();
-  const lang = i18n.language === 'it' ? 'it' : 'en';
-
-  const { updateUser, uploadAsset } = apiClient.backend;
-
-  const [email, setEmail] = useState<string>();
-  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 [loading, setLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  const sendUserUpdate = async (userID: string, user: Partial<User>) => {
-    try {
-      const { user: updatedUser, ...resp } = await updateUser(
-        loginToken,
-        userID,
-        user
-      );
-
-      if (resp.resultCode !== 0) {
-        console.error(resp);
-        toast.error(t(getErrori18nKey(resp.resultCode)));
-      } else if (updatedUser) {
-        toast.success(t('success'));
-        onUserUpdate(updatedUser);
-      }
-    } catch (e) {
-      let err = e as Error;
-      console.error('[signup]', err);
-      if (err?.message) toast.error(err.message);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const submitUserUpdate = async (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-    if (!user.userID) return;
-    const userID = user.userID;
-
-    const form = e.currentTarget as HTMLFormElement;
-
-    const eMail = form.eMail.value ?? email;
-    const newPassword = form.newPassword.value ?? password;
-    const currentPassword = form.password.value;
-    const confirmPassword = form.confirmPassword.value;
-    const pAndCUAccepted = (form.pAndCUAccepted as HTMLInputElement | null)
-      ?.checked;
-    const avatar = (form.avatar as HTMLInputElement | null)?.files?.[0];
-
-    setLoading(true);
-    setError(null);
-
-    if (newPassword?.length && newPassword !== confirmPassword) {
-      setError(t('login.passwordMatchingError'));
-      setLoading(false);
-      return;
-    }
-
-    let patchedUser: User = {
-      ...(eMail?.length && eMail !== user.eMail ? { eMail } : {}),
-      ...(newPassword ? { password: currentPassword, newPassword } : {}),
-      ...(pAndCUAccepted !== undefined && pAndCUAccepted !== user.pAndCUAccepted
-        ? { pAndCUAccepted, pAndCUAcceptanceDate: new Date().toISOString() }
-        : {}),
-    };
-
-    if (Object.values(patchedUser).length === 0 && !avatar) {
-      console.debug('No changes to submit');
-      setLoading(false);
-      return;
-    }
-
-    if (avatar) {
-      const reader = new FileReader();
-      reader.onload = async e => {
-        try {
-          const { asset: avatarAsset, ...resp } = await uploadAsset(
-            avatar.name ?? 'avatar',
-            e.target?.result as string,
-            loginToken
-          );
-
-          if (resp.resultCode !== 0) {
-            console.error(resp);
-            toast.error(t(getErrori18nKey(resp.resultCode)));
-          } else if (avatarAsset) {
-            patchedUser.avatarURL = avatarAsset.assetURL;
-
-            await sendUserUpdate(userID, patchedUser);
-          }
-        } catch (e) {
-          let err = e as Error;
-          console.error('[avatar upload]', err);
-
-          if (err?.message) toast.error(err.message);
-        }
-      };
-      reader.readAsDataURL(avatar);
-    } else {
-      await sendUserUpdate(userID, patchedUser);
-    }
-  };
-
-  return (
-    <>
-      <h3 className="memori--login-drawer--edit-account-title">
-        {t('login.editAccount')}
-      </h3>
-
-      <form
-        className="memori--login-drawer--form memori--login-drawer--account-form"
-        onSubmit={submitUserUpdate}
-      >
-        <details className="memori--details">
-          <summary>{t('login.emailChange')}</summary>
-
-          <label htmlFor="#eMail">
-            {t('login.email')}
-            <input
-              type="email"
-              name="eMail"
-              id="eMail"
-              autoComplete="email"
-              placeholder={user.eMail}
-              onChange={e => setEmail(e.target.value)}
-              aria-invalid={!!email?.length && !mailRegEx.test(email)}
-            />
-          </label>
-          {!!email?.length && !mailRegEx.test(email) && (
-            <p className="memori--login-drawer--inline-error">
-              {t('login.emailFormatError')}
-            </p>
-          )}
-        </details>
-
-        <details className="memori--details">
-          <summary>{t('login.passwordChange')}</summary>
-
-          <label htmlFor="#password">
-            {t('login.currentPassword')}
-            <input
-              id="password"
-              name="password"
-              type="password"
-              autoComplete="password"
-              placeholder={t('login.currentPassword') || 'Password'}
-            />
-          </label>
-
-          <label htmlFor="#newPassword">
-            {t('login.newPassword')}
-            <input
-              id="newPassword"
-              name="newPassword"
-              type="password"
-              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"
-              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>
-        </details>
-
-        <details className="memori--details">
-          <summary>{t('login.avatarChange')}</summary>
-
-          <label htmlFor="#avatar">
-            Avatar
-            <input
-              type="file"
-              name="avatar"
-              id="avatar"
-              accept={imgMimeTypes.join(', ')}
-              placeholder={user.avatarURL}
-            />
-          </label>
-        </details>
-
-        <label className="memori-checkbox memori-checkbox--disabled">
-          <span className="memori-checkbox--input-wrapper">
-            <input
-              type="checkbox"
-              name="tnCAndPPAccepted"
-              disabled
-              defaultChecked={user.tnCAndPPAccepted}
-              checked={user.tnCAndPPAccepted}
-              className="memori-checkbox--input"
-            />
-            <span className="memori-checkbox--inner" />
-          </span>
-          <span className="memori-checkbox--text">
-            {t('login.privacyLabel')}{' '}
-            <a
-              href={`https://memori.ai/${lang}/privacy_and_cookie`}
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              {t('login.privacyAndCookiePolicy')}
-            </a>{' '}
-            {t('login.and')}{' '}
-            <a
-              href={`https://memori.ai/${lang}/tos`}
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              {t('login.termsOfService')}
-            </a>
-          </span>
-        </label>
-
-        <label className="memori-checkbox">
-          <span className="memori-checkbox--input-wrapper">
-            <input
-              type="checkbox"
-              name="pAndCUAccepted"
-              className="memori-checkbox--input"
-              defaultChecked={user.pAndCUAccepted}
-            />
-            <span className="memori-checkbox--inner" />
-          </span>
-          <Tooltip align="left" content={t('login.deepThoughtExplaination')}>
-            <span className="memori-checkbox--text">
-              {t('login.pAndCUAccepted')}{' '}
-              <small>
-                <em>({t('login.optional')})</em>
-              </small>
-            </span>
-          </Tooltip>
-        </label>
-
-        <Button htmlType="submit" primary loading={loading}>
-          {t('login.save')}
-        </Button>
-      </form>
-      {error && (
-        <p role="alert" className="memori--login-drawer--error">
-          {error}
-        </p>
-      )}
-    </>
-  );
-};
-
-export default AccountForm;