@memori.ai/memori-react 6.8.1 → 6.8.4

package/src/components/KnownFacts/KnownFacts.stories.tsx

@@ -3,6 +3,7 @@ import { Meta, Story } from '@storybook/react';
 import { memori, sessionID, knownFact } from '../../mocks/data';
 import I18nWrapper from '../../I18nWrapper';
 import KnownFacts, { Props } from './KnownFacts';
+import memoriApiClient from '@memori.ai/memori-api-client';
 
 import './KnownFacts.css';
 
@@ -26,11 +27,12 @@ export default meta;
 const Template: Story<Props> = args => (
   <I18nWrapper>
     <KnownFacts
-      apiURL="https://backend.memori.ai"
-      sessionID={sessionID}
+      // @ts-ignore-next-line
       memori={memori}
-      closeDrawer={() => {}}
       {...args}
+      sessionID={sessionID}
+      closeDrawer={() => {}}
+      apiClient={memoriApiClient()}
     />
   </I18nWrapper>
 );
@@ -61,7 +63,6 @@ export const WithRealDataLocalhost = Template.bind({});
 WithRealDataLocalhost.args = {
   visible: true,
   sessionID: '5841f5f9-3315-4a5a-9b62-33b13d5a27fd',
-  apiURL: 'http://localhost:7778',
   memori: {
     memoriName: 'test memori',
     ownerUserName: 'nicola',

package/src/components/KnownFacts/KnownFacts.test.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import KnownFacts from './KnownFacts';
 import { knownFact, memori, sessionID } from '../../mocks/data';
+import memoriApiClient from '@memori.ai/memori-api-client';
 
 beforeEach(() => {
   // @ts-ignore
@@ -13,10 +14,12 @@ beforeEach(() => {
   }));
 });
 
+const client = memoriApiClient();
+
 it('renders KnownFacts hidden unchanged', () => {
   const { container } = render(
     <KnownFacts
-      apiURL="https://backend.memori.ai"
+      apiClient={client}
       memori={memori}
       sessionID={sessionID}
       visible={false}
@@ -29,7 +32,7 @@ it('renders KnownFacts hidden unchanged', () => {
 it('renders KnownFacts visible unchanged', () => {
   const { container } = render(
     <KnownFacts
-      apiURL="https://backend.memori.ai"
+      apiClient={client}
       memori={memori}
       sessionID={sessionID}
       visible={true}
@@ -42,7 +45,7 @@ it('renders KnownFacts visible unchanged', () => {
 it('renders KnownFacts with data unchanged', () => {
   const { container } = render(
     <KnownFacts
-      apiURL="https://backend.memori.ai"
+      apiClient={client}
       memori={memori}
       sessionID={sessionID}
       visible={true}

package/src/components/KnownFacts/KnownFacts.tsx

@@ -15,7 +15,7 @@ import ChevronLeft from '../icons/ChevronLeft';
 import ChevronRight from '../icons/ChevronRight';
 
 export interface Props {
-  apiURL: string;
+  apiClient: ReturnType<typeof memoriApiClient>;
   sessionID: string;
   memori: Memori;
   initialKnownFacts?: KnownFact[];
@@ -24,7 +24,7 @@ export interface Props {
 }
 
 const KnownFacts = ({
-  apiURL,
+  apiClient,
   sessionID,
   memori,
   visible = true,
@@ -33,8 +33,7 @@ const KnownFacts = ({
 }: Props) => {
   const { t } = useTranslation();
 
-  const client = memoriApiClient(apiURL);
-  const { getKnownFactsPaginated, deleteKnownFact } = client.knownFacts;
+  const { getKnownFactsPaginated, deleteKnownFact } = apiClient.knownFacts;
 
   const [knownFacts, setKnownFacts] = useState<KnownFact[]>(initialKnownFacts);
   const [numberOfResults, setNumberOfResults] = useState(25);
@@ -61,7 +60,7 @@ const KnownFacts = ({
         howMany ?? numberOfResults
       );
 
-      setKnownFacts(knownFacts ?? []);
+      setKnownFacts(knownFacts ?? initialKnownFacts);
       setKnownFactsCount(count ?? 0);
 
       if (response.resultCode !== 0) {

package/src/components/LoginDrawer/LoginDrawer.css

@@ -40,6 +40,22 @@ p.memori--login-drawer--inline-error {
     text-align: center;
 }
 
+.memori--login-drawer--otp-form {
+    display: flex;
+    flex-direction: column;
+    padding: 0 1rem;
+    margin: 0 0 2rem;
+    gap: 1.5rem;
+}
+
+.memori--login-drawer--otp-form label {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    text-align: left;
+}
+
+
 .memori--login-drawer--form label:not(.memori-checkbox) {
     display: flex;
     flex-direction: column;
@@ -141,4 +157,290 @@ h3.memori--login-drawer--edit-account-title {
     font-size: 1.33rem;
     font-weight: 400;
     line-height: 1.2;
+}
+
+/* OTP Login Styles */
+.memori--login-drawer--welcome {
+    padding: 1rem 0.5rem;
+    text-align: center;
+}
+
+.memori--login-drawer--welcome h3 {
+    margin: 0 0 1rem;
+    color: var(--memori-text-color, #333);
+    font-size: 1.5rem;
+    font-weight: 600;
+}
+
+.memori--login-drawer--welcome-description {
+    margin: 0 0 2rem;
+    color: var(--memori-text-secondary, #666);
+    font-size: 1rem;
+    line-height: 1.5;
+}
+
+.memori--login-drawer--otp-info {
+    display: flex;
+    flex-direction: column;
+    margin: 0 0 2rem;
+    gap: 1rem;
+    text-align: left;
+}
+
+.memori--login-drawer--otp-info-item {
+    display: flex;
+    align-items: center;
+    padding: 1rem;
+    border: 1px solid var(--memori-border-color, #e9ecef);
+    border-radius: 8px;
+    background: var(--memori-background-light, #f8f9fa);
+    gap: 1rem;
+}
+
+.memori--login-drawer--otp-info-number {
+    display: flex;
+    width: 32px;
+    height: 32px;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    background: var(--memori-primary);
+    color: white;
+    font-size: 0.875rem;
+    font-weight: 600;
+}
+
+.memori--login-drawer--start-otp-button {
+    width: 100%;
+    margin-bottom: 1rem;
+}
+
+.memori--login-drawer--otp-container {
+    padding: 1rem 0.5rem;
+    text-align: center;
+}
+
+.memori--login-drawer--otp-container h3 {
+    margin: 0 0 1rem;
+    color: var(--memori-text-color, #333);
+    font-size: 1.5rem;
+    font-weight: 600;
+}
+
+.memori--login-drawer--otp-description {
+    margin: 0 0 2rem;
+    color: var(--memori-text-secondary, #666);
+    font-size: 1rem;
+    line-height: 1.5;
+}
+.memori--login-drawer--otp-form label span {
+    color: var(--memori-text-color, #333);
+    font-size: 0.875rem;
+    font-weight: 600;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+}
+
+.memori--login-drawer--otp-username-input {
+    width: 95%;
+    height: 50px;
+    padding: 0 1rem;
+    border: 2px solid var(--memori-border-color, #e9ecef);
+    border-radius: 8px;
+    background: var(--memori-background, #fff);
+    font-size: 1rem;
+    font-weight: 500;
+    outline: none;
+    text-align: left;
+    transition: all 0.2s ease;
+}
+
+.memori--login-drawer--otp-username-input:focus {
+    border-color: var(--memori-primary);
+    box-shadow: 0 0 0 3px rgba(var(--memori-primary-rgb, 0, 123, 255), 0.1);
+    transform: translateY(-1px);
+}
+
+.memori--login-drawer--otp-username-input::placeholder {
+    color: var(--memori-text-muted, #999);
+    font-weight: 400;
+}
+
+.memori--login-drawer--otp-input {
+    width: 200px;
+    height: 60px;
+    border: 2px solid var(--memori-border-color, #e9ecef);
+    border-radius: 12px;
+    margin: 0 auto;
+    background: var(--memori-background, #fff);
+    font-size: 2rem;
+    font-weight: 600;
+    letter-spacing: 0.5rem;
+    outline: none;
+    text-align: center;
+    transition: all 0.2s ease;
+}
+
+.memori--login-drawer--otp-input:focus {
+    border-color: var(--memori-primary);
+    box-shadow: 0 0 0 3px rgba(var(--memori-primary-rgb, 0, 123, 255), 0.1);
+    transform: scale(1.02);
+}
+
+.memori--login-drawer--otp-input::placeholder {
+    color: var(--memori-text-muted, #999);
+    letter-spacing: 0.5rem;
+}
+
+.memori--login-drawer--otp-input:invalid {
+    border-color: var(--memori-error-color);
+    animation: shake 0.5s ease-in-out;
+}
+
+@keyframes shake {
+    0%, 100% { transform: translateX(0); }
+    25% { transform: translateX(-5px); }
+    75% { transform: translateX(5px); }
+}
+
+.memori--login-drawer--otp-username-input:invalid {
+    border-color: var(--memori-error-color);
+    animation: shake 0.5s ease-in-out;
+}
+
+.memori--login-drawer--otp-timer {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.75rem 1rem;
+    border: 1px solid var(--memori-warning-color, #ffc107);
+    border-radius: 8px;
+    margin: 0 0 1.5rem;
+    background: rgba(var(--memori-warning-color-rgb, 255, 193, 7), 0.1);
+    color: var(--memori-warning-color, #ffc107);
+    font-size: 0.875rem;
+    font-weight: 600;
+    gap: 0.5rem;
+}
+
+.memori--login-drawer--otp-timer::before {
+    content: "⏱️";
+    font-size: 1rem;
+}
+
+.memori--login-drawer--otp-actions {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 1rem;
+}
+
+.memori--login-drawer--otp-actions .memori-button {
+    min-width: 120px;
+}
+
+.memori--login-drawer--otp-error {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.75rem 1rem;
+    border: 1px solid var(--memori-error-color);
+    border-radius: 8px;
+    margin: 1rem 0 0;
+    animation: slideIn 0.3s ease-out;
+    background: rgba(var(--memori-error-color-rgb, 220, 53, 69), 0.1);
+    color: var(--memori-error-color);
+    font-size: 0.875rem;
+    font-weight: 500;
+    gap: 0.5rem;
+    text-align: center;
+}
+
+.memori--login-drawer--otp-error::before {
+    content: "⚠️";
+    font-size: 1rem;
+}
+
+@keyframes slideIn {
+    from {
+        opacity: 0;
+        transform: translateY(-10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+/* Loading state for OTP form */
+.memori--login-drawer--otp-form.loading {
+    opacity: 0.7;
+    pointer-events: none;
+}
+
+.memori--login-drawer--otp-form.loading .memori--login-drawer--otp-username-input,
+.memori--login-drawer--otp-form.loading .memori--login-drawer--otp-input {
+    background: var(--memori-background-light, #f8f9fa);
+    cursor: not-allowed;
+}
+
+/* Success state animation */
+@keyframes successPulse {
+    0% { transform: scale(1); }
+    50% { transform: scale(1.05); }
+    100% { transform: scale(1); }
+}
+
+.memori--login-drawer--otp-input.success {
+    border-color: var(--memori-success-color, #28a745);
+    animation: successPulse 0.6s ease-in-out;
+    background: rgba(var(--memori-success-color-rgb, 40, 167, 69), 0.1);
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+    .memori--login-drawer--otp-form {
+        padding: 0 0.5rem;
+        gap: 1rem;
+    }
+    
+    .memori--login-drawer--otp-info {
+        gap: 0.75rem;
+    }
+    
+    .memori--login-drawer--otp-info-item {
+        padding: 0.75rem;
+    }
+}
+
+@media (max-width: 480px) {
+    .memori--login-drawer--otp-input {
+        width: 160px;
+        height: 50px;
+        font-size: 1.5rem;
+        letter-spacing: 0.3rem;
+    }
+    
+    .memori--login-drawer--otp-username-input {
+        height: 45px;
+        font-size: 0.9rem;
+    }
+    
+    .memori--login-drawer--otp-actions {
+        flex-direction: column;
+        align-items: center;
+        gap: 0.75rem;
+    }
+    
+    .memori--login-drawer--otp-actions .memori-button {
+        width: 100%;
+        max-width: 200px;
+    }
+    
+    .memori--login-drawer--otp-timer,
+    .memori--login-drawer--otp-error {
+        padding: 0.5rem 0.75rem;
+        font-size: 0.8rem;
+    }
 }

package/src/components/LoginDrawer/LoginDrawer.stories.tsx

@@ -3,6 +3,7 @@ import { Meta, Story } from '@storybook/react';
 import I18nWrapper from '../../I18nWrapper';
 import LoginDrawer, { Props } from './LoginDrawer';
 import { tenant, user } from '../../mocks/data';
+import memoriApiClient from '@memori.ai/memori-api-client';
 import './LoginDrawer.css';
 
 const meta: Meta = {
@@ -31,7 +32,7 @@ const Template: Story<Props> = args => {
         onLogin={console.log}
         onLogout={() => {}}
         tenant={tenant}
-        apiUrl="https://backend.memori.ai"
+        apiClient={memoriApiClient()}
       />
     </I18nWrapper>
   );
@@ -75,3 +76,28 @@ LoggedIn.args = {
   user,
   loginToken: 'token',
 };
+
+export const OtpForm = Template.bind({});
+OtpForm.args = {
+  open: true,
+  // Note: OTP form is shown by default in the new implementation
+  // when user is not logged in and not in signup mode
+};
+
+export const OtpFormWithTimer = Template.bind({});
+OtpFormWithTimer.args = {
+  open: true,
+  // Timer will be shown when OTP form is active
+};
+
+export const OtpFormWithError = Template.bind({});
+OtpFormWithError.args = {
+  open: true,
+  // Error state would be shown during OTP validation
+};
+
+export const OtpFormLoading = Template.bind({});
+OtpFormLoading.args = {
+  open: true,
+  // Loading state would be shown during OTP validation
+};

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

@@ -2,6 +2,7 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import LoginDrawer from './LoginDrawer';
 import { tenant, user } from '../../mocks/data';
+import memoriApiClient from '@memori.ai/memori-api-client';
 
 beforeEach(() => {
   // @ts-ignore
@@ -17,7 +18,7 @@ it('renders LoginDrawer closed unchanged', () => {
   const { container } = render(
     <LoginDrawer
       onClose={jest.fn()}
-      apiUrl="https://backend.memori.ai"
+      apiClient={memoriApiClient()}
       tenant={tenant}
       onLogin={jest.fn()}
       onLogout={jest.fn()}
@@ -30,7 +31,7 @@ it('renders LoginDrawer open unchanged', () => {
   const { container } = render(
     <LoginDrawer
       onClose={jest.fn()}
-      apiUrl="https://backend.memori.ai"
+      apiClient={memoriApiClient()}
       tenant={tenant}
       onLogin={jest.fn()}
       onLogout={jest.fn()}
@@ -44,7 +45,7 @@ it('renders LoginDrawer unlogged unchanged', () => {
   const { container } = render(
     <LoginDrawer
       onClose={jest.fn()}
-      apiUrl="https://backend.memori.ai"
+      apiClient={memoriApiClient()}
       tenant={tenant}
       onLogin={jest.fn()}
       onLogout={jest.fn()}
@@ -58,7 +59,7 @@ it('renders LoginDrawer logged with missing data unchanged', () => {
   const { container } = render(
     <LoginDrawer
       onClose={jest.fn()}
-      apiUrl="https://backend.memori.ai"
+      apiClient={memoriApiClient()}
       tenant={tenant}
       onLogin={jest.fn()}
       onLogout={jest.fn()}
@@ -73,7 +74,7 @@ it('renders LoginDrawer logged in unchanged', () => {
   const { container } = render(
     <LoginDrawer
       onClose={jest.fn()}
-      apiUrl="https://backend.memori.ai"
+      apiClient={memoriApiClient()}
       tenant={tenant}
       onLogin={jest.fn()}
       onLogout={jest.fn()}
@@ -89,7 +90,7 @@ it('renders LoginDrawer on signup unchanged', () => {
   const { container } = render(
     <LoginDrawer
       onClose={jest.fn()}
-      apiUrl="https://backend.memori.ai"
+      apiClient={memoriApiClient()}
       tenant={tenant}
       onLogin={jest.fn()}
       onLogout={jest.fn()}
@@ -104,7 +105,7 @@ it('renders LoginDrawer on signup waiting for otp unchanged', () => {
   const { container } = render(
     <LoginDrawer
       onClose={jest.fn()}
-      apiUrl="https://backend.memori.ai"
+      apiClient={memoriApiClient()}
       tenant={tenant}
       onLogin={jest.fn()}
       onLogout={jest.fn()}
@@ -120,7 +121,7 @@ it('renders LoginDrawer on change password unchanged', () => {
   const { container } = render(
     <LoginDrawer
       onClose={jest.fn()}
-      apiUrl="https://backend.memori.ai"
+      apiClient={memoriApiClient()}
       tenant={tenant}
       onLogin={jest.fn()}
       onLogout={jest.fn()}
@@ -130,3 +131,59 @@ it('renders LoginDrawer on change password unchanged', () => {
   );
   expect(container).toMatchSnapshot();
 });
+
+it('renders LoginDrawer with OTP form unchanged', () => {
+  const { container } = render(
+    <LoginDrawer
+      onClose={jest.fn()}
+      apiClient={memoriApiClient()}
+      tenant={tenant}
+      onLogin={jest.fn()}
+      onLogout={jest.fn()}
+      open
+    />
+  );
+  expect(container).toMatchSnapshot();
+});
+
+it('renders LoginDrawer with OTP form and timer unchanged', () => {
+  const { container } = render(
+    <LoginDrawer
+      onClose={jest.fn()}
+      apiClient={memoriApiClient()}
+      tenant={tenant}
+      onLogin={jest.fn()}
+      onLogout={jest.fn()}
+      open
+    />
+  );
+  expect(container).toMatchSnapshot();
+});
+
+it('renders LoginDrawer with OTP form and error unchanged', () => {
+  const { container } = render(
+    <LoginDrawer
+      onClose={jest.fn()}
+      apiClient={memoriApiClient()}
+      tenant={tenant}
+      onLogin={jest.fn()}
+      onLogout={jest.fn()}
+      open
+    />
+  );
+  expect(container).toMatchSnapshot();
+});
+
+it('renders LoginDrawer with OTP form loading unchanged', () => {
+  const { container } = render(
+    <LoginDrawer
+      onClose={jest.fn()}
+      apiClient={memoriApiClient()}
+      tenant={tenant}
+      onLogin={jest.fn()}
+      onLogout={jest.fn()}
+      open
+    />
+  );
+  expect(container).toMatchSnapshot();
+});

package/src/components/LoginDrawer/LoginDrawer.tsx

@@ -19,7 +19,7 @@ export interface Props {
   onLogin: (user: User, token: string) => void;
   onLogout: () => void;
   tenant: Tenant;
-  apiUrl: string;
+  apiClient: ReturnType<typeof memoriApiClient>;
   __TEST__signup?: boolean;
   __TEST__needMissingData?: boolean;
   __TEST__waitingForOtp?: boolean;
@@ -34,7 +34,7 @@ const LoginDrawer = ({
   user,
   loginToken,
   tenant,
-  apiUrl,
+  apiClient,
   __TEST__signup = false,
   __TEST__needMissingData = false,
   __TEST__waitingForOtp = false,
@@ -43,8 +43,7 @@ const LoginDrawer = ({
   const { t, i18n } = useTranslation();
   const lang = i18n.language === 'it' ? 'it' : 'en';
 
-  const client = memoriApiClient(apiUrl);
-  const { userLogin, updateUser } = client.backend;
+  const { userLogin, updateUser } = apiClient.backend;
 
   const isUserLoggedIn = user?.userID && loginToken;
 
@@ -56,7 +55,7 @@ const LoginDrawer = ({
     __TEST__changePwd
       ? {
           flowID: 'flowID',
-          tenant: tenant.id,
+          tenant: tenant.name,
           eMail: 'email',
           userName: 'username',
           password: 'password',
@@ -86,12 +85,12 @@ const LoginDrawer = ({
     const isEmail = mailRegEx.test(userNameOrEmail);
     const user: User = isEmail
       ? {
-          tenant: tenant?.id,
+          tenant: tenant?.name,
           eMail: userNameOrEmail,
           password: password,
         }
       : {
-          tenant: tenant?.id,
+          tenant: tenant?.name,
           userName: userNameOrEmail,
           password: password,
         };
@@ -101,7 +100,7 @@ const LoginDrawer = ({
       .then(data => {
         if (data.resultCode === -14) {
           setUserMustChangePwd({
-            tenant: tenant.id,
+            tenant: tenant.name,
             eMail: isEmail ? userNameOrEmail : undefined,
             userName: isEmail ? undefined : userNameOrEmail,
             password: password,
@@ -201,7 +200,7 @@ const LoginDrawer = ({
 
     const form = e.currentTarget as HTMLFormElement;
 
-    const tenantID = form.tenant.value ?? tenant.id;
+    const tenantID = form.tenant.value ?? tenant.name;
     const flowID = form.flowID.value ?? userMustChangePwd?.flowID;
     const eMail = form.eMail.value ?? userMustChangePwd?.eMail;
     const userName = form.userName.value ?? userMustChangePwd?.userName;
@@ -286,7 +285,7 @@ const LoginDrawer = ({
           <AccountForm
             user={user}
             loginToken={loginToken}
-            apiUrl={apiUrl}
+            apiClient={apiClient}
             onUserUpdate={user => onLogin(user, loginToken)}
           />
         </div>
@@ -390,7 +389,7 @@ const LoginDrawer = ({
             <input
               type="hidden"
               name="tenant"
-              value={userMustChangePwd.tenant ?? tenant?.id}
+              value={userMustChangePwd.tenant ?? tenant?.name}
             />
             <input
               type="hidden"
@@ -479,7 +478,7 @@ const LoginDrawer = ({
       ) : showSignup ? (
         <SignupForm
           tenant={tenant}
-          apiUrl={apiUrl}
+          apiClient={apiClient}
           onLogin={onLogin}
           goToLogin={() => setShowSignup(false)}
           __TEST__waitingForOtp={__TEST__waitingForOtp}
@@ -545,4 +544,4 @@ const LoginDrawer = ({
   );
 };
 
-export default LoginDrawer;
+export default LoginDrawer;