@memori.ai/memori-react 8.4.1 → 8.4.2

package/src/components/LoginDrawer/LoginDrawer.tsx

@@ -20,7 +20,6 @@ export interface Props {
   onLogout: () => void;
   tenant: Tenant;
   apiClient: ReturnType<typeof memoriApiClient>;
-  baseURL?: string;
   __TEST__signup?: boolean;
   __TEST__needMissingData?: boolean;
   __TEST__waitingForOtp?: boolean;
@@ -36,7 +35,6 @@ const LoginDrawer = ({
   loginToken,
   tenant,
   apiClient,
-  baseURL,
   __TEST__signup = false,
   __TEST__needMissingData = false,
   __TEST__waitingForOtp = false,
@@ -52,13 +50,6 @@ const LoginDrawer = ({
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
-  // OTP-related state
-  const [otpCode, setOtpCode] = useState<string>('');
-  const [otpUserName, setOtpUserName] = useState<string>('');
-  const [otpError, setOtpError] = useState<string | null>(null);
-  const [showOtpForm, setShowOtpForm] = useState(false);
-  const [otpTimer, setOtpTimer] = useState<number | null>(null);
-
   const [showSignup, setShowSignup] = useState(__TEST__signup);
   const [userMustChangePwd, setUserMustChangePwd] = useState<User | undefined>(
     __TEST__changePwd
@@ -85,96 +76,6 @@ const LoginDrawer = ({
       : ({} as any)
   );
 
-  // OTP timer effect
-  useEffect(() => {
-    let interval: NodeJS.Timeout;
-    if (otpTimer && otpTimer > 0) {
-      interval = setInterval(() => {
-        setOtpTimer(prev => (prev && prev > 0 ? prev - 1 : 0));
-      }, 1000);
-    }
-    return () => {
-      if (interval) clearInterval(interval);
-    };
-  }, [otpTimer]);
-
-  // OTP validation function
-  const validateOtp = async (otp: string) => {
-    if (!otp || otp.length !== 4) {
-      setOtpError(t('login.otpInvalidFormat'));
-      return;
-    }
-
-    if (!otpUserName || otpUserName.trim().length === 0) {
-      setOtpError(t('login.userNameRequired'));
-      return;
-    }
-
-    setLoading(true);
-    setOtpError(null);
-
-    try {
-      const response = await fetch(`${baseURL}/api/validate-otp`, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({
-          otp: otp,
-          userName: otpUserName.trim(),
-        }),
-      });
-
-      const data = await response.json();
-
-      if (response.status == 200 && data.user && data.loginToken) {
-        toast.success(t('login.otpSuccess'));
-        setShowOtpForm(false);
-        setOtpCode('');
-        setOtpUserName('');
-
-        if (!data.user?.tnCAndPPAccepted || !data.user?.birthDate) {
-          setNeedsMissingData({
-            token: data.loginToken,
-            birthDate: !data.user.birthDate,
-            tnCAndPPAccepted: !data.user.tnCAndPPAccepted,
-          });
-        } else {
-          onLogin(data.user as User, data.loginToken);
-        }
-      } else {
-        setOtpError(data.resultMessage || t('login.otpInvalid'));
-      }
-    } catch (err) {
-      console.error('[OTP VALIDATION]', err);
-      setOtpError(t('login.otpError'));
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  // Handle OTP input change
-  const handleOtpChange = (value: string) => {
-    const numericValue = value.replace(/\D/g, '').slice(0, 4);
-    setOtpCode(numericValue);
-    setOtpError(null);
-
-    if (numericValue.length === 4 && otpUserName.trim().length > 0) {
-      validateOtp(numericValue);
-    }
-  };
-
-  // Handle username input change
-  const handleUserNameChange = (value: string) => {
-    setOtpUserName(value);
-    setOtpError(null);
-  };
-
-  // Start OTP timer
-  const startOtpTimer = () => {
-    setOtpTimer(60);
-  };
-
   const login = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     const form = e.currentTarget as HTMLFormElement;
@@ -578,135 +479,59 @@ const LoginDrawer = ({
         <SignupForm
           tenant={tenant}
           apiClient={apiClient}
-          onLogin={(_user: User, token: string) => {
-            // Force all signup users to go through missing data flow
-            // This ensures consistent user experience and data collection
-            setNeedsMissingData({
-              token: token,
-              birthDate: true, // Always require birth date for new users
-              tnCAndPPAccepted: true, // Always require terms acceptance for new users
-            });
-          }}
+          onLogin={onLogin}
           goToLogin={() => setShowSignup(false)}
           __TEST__waitingForOtp={__TEST__waitingForOtp}
         />
-      ) : showOtpForm ? (
+      ) : (
         <>
-          <div className="memori--login-drawer--otp-container">
-            <h3>{t('login.otpTitle')}</h3>
-            <p className="memori--login-drawer--otp-description">
-              {t('login.otpDescription')}
-            </p>
+          <form className="memori--login-drawer--form" onSubmit={login}>
+            <label htmlFor="#userNameOrEmail">
+              {t('login.userNameOrEmail')}
+              <input
+                id="userNameOrEmail"
+                name="userNameOrEmail"
+                required
+                autoComplete="email"
+                placeholder="Username/email"
+              />
+            </label>
 
-            <div className={cx('memori--login-drawer--otp-form', { loading })}>
-              <label htmlFor="otp-username">
-                <span>{t('login.userName')}</span>
-                <input
-                  id="otp-username"
-                  type="text"
-                  className="memori--login-drawer--otp-username-input"
-                  value={otpUserName}
-                  onChange={e => handleUserNameChange(e.target.value)}
-                  placeholder={t('login.userName') || 'Username'}
-                  required
-                  autoComplete="username"
-                  disabled={loading}
-                />
-              </label>
-
-              <label htmlFor="otp-code">
-                <span>{t('login.otpCode')}</span>
-                <input
-                  id="otp-code"
-                  type="text"
-                  className={cx('memori--login-drawer--otp-input', {
-                    success: otpCode.length === 4 && !otpError,
-                  })}
-                  value={otpCode}
-                  onChange={e => handleOtpChange(e.target.value)}
-                  placeholder="0000"
-                  maxLength={4}
-                  autoComplete="one-time-code"
-                  required
-                  disabled={loading}
-                />
-              </label>
-            </div>
-
-            {otpTimer && otpTimer > 0 && (
-              <p className="memori--login-drawer--otp-timer">
-                {t('login.otpTimer', { seconds: otpTimer })}
-              </p>
-            )}
+            <label htmlFor="#password">
+              Password
+              <input
+                id="password"
+                name="password"
+                type="password"
+                required
+                autoComplete="password"
+                placeholder="Password"
+              />
+            </label>
 
-            <div className="memori--login-drawer--otp-actions">
-              <Button
-                outlined
-                onClick={() => {
-                  setShowOtpForm(false);
-                  setOtpCode('');
-                  setOtpUserName('');
-                  setOtpError(null);
-                }}
-              >
-                {t('login.backToLogin')}
-              </Button>
-
-              <Button
-                primary
-                onClick={() => {
-                  window.open(
-                    'http://localhost:3000/it/account?t=account',
-                    '_blank'
-                  );
-                  startOtpTimer();
-                }}
-              >
-                {t('login.generateOtp')}
-              </Button>
-            </div>
-
-            {otpError && (
-              <p role="alert" className="memori--login-drawer--otp-error">
-                {otpError}
-              </p>
-            )}
-          </div>
-        </>
-      ) : (
-        <>
-          <div className="memori--login-drawer--welcome">
-            <h3>{t('login.welcomeTitle')}</h3>
-            <p className="memori--login-drawer--welcome-description">
-              {t('login.welcomeDescription')}
-            </p>
+            <Button htmlType="submit" primary loading={loading}>
+              {t('login.login')}
+            </Button>
 
-            <div className="memori--login-drawer--otp-info">
-              <div className="memori--login-drawer--otp-info-item">
-                <span className="memori--login-drawer--otp-info-number">1</span>
-                <span>{t('login.otpStep1')}</span>
-              </div>
-              <div className="memori--login-drawer--otp-info-item">
-                <span className="memori--login-drawer--otp-info-number">2</span>
-                <span>{t('login.otpStep2')}</span>
-              </div>
-              <div className="memori--login-drawer--otp-info-item">
-                <span className="memori--login-drawer--otp-info-number">3</span>
-                <span>{t('login.otpStep3')}</span>
+            {!tenant?.disableRegistration ? (
+              <p className="memori--login-drawer--signup">
+                {t('login.newUserSignUp')}{' '}
+                <Button outlined onClick={() => setShowSignup(true)}>
+                  {t('login.signUp')}
+                </Button>
+              </p>
+            ) : tenant.adminEmail ? (
+              <div className="memori--login-drawer--signup">
+                <p>{t('login.registrationDisabled')}</p>
+                <p>
+                  {t('login.contactAdmin')}:{' '}
+                  <a href={`mailto:${tenant.adminEmail}`}>
+                    {tenant.adminEmail}
+                  </a>
+                </p>
               </div>
-            </div>
-
-            <Button
-              primary
-              onClick={() => {
-                setShowOtpForm(true);
-                startOtpTimer();
-              }}
-              className="memori--login-drawer--start-otp-button"
-            >
-              {t('login.startOtpLogin')}
-            </Button>
-          </div>
+            ) : null}
+          </form>
 
           {error && (
             <p role="alert" className="memori--login-drawer--error">
@@ -719,4 +544,4 @@ const LoginDrawer = ({
   );
 };
 
-export default LoginDrawer;
+export default LoginDrawer;

package/src/components/MemoriWidget/MemoriWidget.tsx

@@ -3379,7 +3379,6 @@ const MemoriWidget = ({
           tenant={tenant}
           apiClient={client}
           open={!!showLoginDrawer}
-          baseURL={baseUrl}
           user={user}
           loginToken={loginToken}
           onClose={() => setShowLoginDrawer(false)}

package/src/components/layouts/chat.css

@@ -12,9 +12,6 @@
     flex-direction: column;
 }
 
-.memori-chat-layout--main, .memori-chat-layout--controls{
-    min-height: calc(100% - 25px);
-}
 
 .memori-chat-layout--header {
     text-align: right;
@@ -62,6 +59,8 @@
     z-index: 5;
     overflow: hidden;
     min-width: 0;
+    height: calc(100% - 50px);
+    max-height: calc(100% - 50px);
     flex: 1;
     transition: all 0.05s ease-in-out;
 }
@@ -134,6 +133,10 @@
     bottom: auto;
 }
 
+.memori-chat-layout--controls .memori-chat--wrapper {
+    height: calc(100% - 1rem);
+}
+
 @media (max-width: 870px) {
     .memori-chat-layout .memori--powered-by {
         top: 3.5rem;
@@ -149,9 +152,7 @@
 }
 
 
-.memori-chat-layout--controls .memori-chat--wrapper {
-    height: calc(75vh - 1rem);
-}
+
 
 .memori-chat-layout .memori-chat--content {
     padding: 0;