@memori.ai/memori-react 5.1.0 → 6.0.0-rc.0

package/esm/locales/it.json

@@ -153,6 +153,31 @@
         "congratulationsNewLevelDescription": "Il tuo Memori è diventato più evoluto con {{points}} punti, guarda le",
         "statistics": "statistiche"
     },
+    "login": {
+        "login": "Accedi",
+        "logout": "Esci",
+        "user": "Utente",
+        "loggedDrawerTitle": "Ciao, {{name}}!",
+        "loginDrawerTitle": "Accedi",
+        "newUserSignUp": "Sei un nuovo utente?",
+        "signUp": "Registrati!",
+        "userNameOrEmail": "Nome utente o email",
+        "underage": "Devi avere almeno {{age}} anni per registrarti.",
+        "optional": "opzionale",
+        "birthDate": "Data di nascita",
+        "birthDateHelper": "Ti chiediamo la data di nascita esclusivamente per abilitare o disabilitare le funzionalità che hanno restrizioni in base all'età",
+        "missingData": "Informazioni mancanti",
+        "missingDataHelper": "Sappiamo che questo è un po' fastidioso, ma abbiamo bisogno di alcune informazioni in più per completare la tua registrazione.",
+        "goToAccountToChangeYourPreferences": "Puoi cambiare la tua scelta in qualsiasi momento dalla tua pagina Account.",
+        "deepThoughtExplaination": "Pensiero Profondo è una funzionalità avanzata delle AI che ti consentirà di poter sfruttare a pieno le tue conversazioni mantenendo memoria delle stesse. Le AI con Pensiero Profondo possono darti informazioni adattandosi a te e alle cose che condividerete insieme. Consenti all'autore del twin di contattarti per offerte commerciali riguardanti prodotti su cui hai espresso interesse.",
+        "tnCAndPPAcceptedHelper": "Dall'ultimo accesso, i T&C e l'Informativa sulla privacy sono stati modificati. Si prega di accettarle, altrimenti non sarà possibile apportare modifiche ai propri gemelli. Puoi sempre cancellare il tuo account nella pagina del tuo profilo utente.",
+        "privacyLabel": "Ho letto e accettato l'",
+        "privacyAndCookiePolicy": "informativa sui cookie e sulla privacy",
+        "and": "e",
+        "termsOfService": "i termini del servizio",
+        "pAndCUAccepted": "Accetto le condizioni di utilizzo relative a Pensiero Profondo",
+        "save": "Salva"
+    },
     "success": "Operazione andata a buon fine",
     "Error": "Errore",
     "internal server error": "Ops, scusa... qualcosa è andato storto nel server",

package/esm/styles.css

@@ -39,6 +39,7 @@
 @import url('./components/DateSelector/DateSelector.css');
 @import url('./components/AgeVerificationModal/AgeVerificationModal.css');
 @import url('./components/KnownFacts/KnownFacts.css');
+@import url('./components/LoginDrawer/LoginDrawer.css');
 @import url('./components/MemoriWidget/MemoriWidget.css');
 
 @import url('https://fonts.bunny.net/css?family=exo-2:200,400,700');

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "5.1.0",
+  "version": "6.0.0-rc.0",
   "name": "@memori.ai/memori-react",
   "author": "Memori Srl",
   "main": "dist/index.js",

package/src/components/Header/Header.css

@@ -60,6 +60,7 @@
     margin-left: 0.5rem;
 }
 
-.memori-header .memori-share-button {
+.memori-header .memori-share-button,
+.memori-header .memori-header--button-login {
     margin-left: 0.25rem;
 }

package/src/components/Header/Header.stories.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
 import { Meta, Story } from '@storybook/react';
-import { memori, history } from '../../mocks/data';
+import { memori, tenant, history } from '../../mocks/data';
 import I18nWrapper from '../../I18nWrapper';
 import Header, { Props } from './Header';
 import SettingsDrawer from '../SettingsDrawer/SettingsDrawer';
+import LoginDrawer from '../LoginDrawer/LoginDrawer';
 
 import './Header.css';
 
@@ -32,6 +33,7 @@ const Template: Story<Props> = args => {
   const [continuousSpeech, setContinuousSpeech] = React.useState(true);
   const [continuousSpeechTimeout, setContinuousSpeechTimeout] =
     React.useState(2);
+  const [showLoginDrawer, setShowLoginDrawer] = React.useState(false);
 
   return (
     <I18nWrapper>
@@ -43,6 +45,7 @@ const Template: Story<Props> = args => {
         setShowSettingsDrawer={() => setShowSettingsDrawer(true)}
         setShowKnownFactsDrawer={() => setShowKnownFactsDrawer(true)}
         setShowExpertsDrawer={() => setShowExpertsDrawer(true)}
+        setShowLoginDrawer={() => setShowLoginDrawer(true)}
       />
       <SettingsDrawer
         open={!!showSettingsDrawer}
@@ -56,6 +59,17 @@ const Template: Story<Props> = args => {
         hideEmissions={false}
         setHideEmissions={() => {}}
       />
+      <LoginDrawer
+        tenant={tenant}
+        open={!!showLoginDrawer}
+        onClose={() => setShowLoginDrawer(false)}
+        onLogin={(user, token) => {
+          console.log(user, token);
+          setShowLoginDrawer(false);
+        }}
+        onLogout={() => setShowLoginDrawer(false)}
+        apiUrl="https://backend.memori.ai"
+      />
     </I18nWrapper>
   );
 };
@@ -233,3 +247,15 @@ ForBoardOfExpertsAndOngoingChat.args = {
   sessionID: '1234',
   loginToken: 'abcd',
 };
+
+export const WithLogin = Template.bind({});
+WithLogin.args = {
+  memori,
+  history,
+  setShowPositionDrawer: () => {},
+  setShowSettingsDrawer: () => {},
+  clearHistory: () => {},
+  speakerMuted: false,
+  hasUserActivatedSpeak: false,
+  showLogin: true,
+};

package/src/components/Header/Header.test.tsx

@@ -18,6 +18,7 @@ it('renders Header unchanged', () => {
       showShare={false}
       showSettings={false}
       clearHistory={jest.fn()}
+      setShowLoginDrawer={jest.fn()}
     />
   );
   expect(container).toMatchSnapshot();
@@ -46,6 +47,7 @@ it('renders Header with position unchanged', () => {
       showShare={false}
       showSettings={false}
       clearHistory={jest.fn()}
+      setShowLoginDrawer={jest.fn()}
     />
   );
   expect(container).toMatchSnapshot();
@@ -66,6 +68,7 @@ it('renders Header with speaker muted unchanged', () => {
       showShare={false}
       showSettings={false}
       clearHistory={jest.fn()}
+      setShowLoginDrawer={jest.fn()}
     />
   );
   expect(container).toMatchSnapshot();
@@ -86,6 +89,7 @@ it('renders Header with share button unchanged', () => {
       showShare={true}
       showSettings={false}
       clearHistory={jest.fn()}
+      setShowLoginDrawer={jest.fn()}
     />
   );
   expect(container).toMatchSnapshot();
@@ -106,6 +110,7 @@ it('renders Header with settings button unchanged', () => {
       showShare={false}
       showSettings={true}
       clearHistory={jest.fn()}
+      setShowLoginDrawer={jest.fn()}
     />
   );
   expect(container).toMatchSnapshot();
@@ -127,6 +132,7 @@ it('renders Header with clear button unchanged', () => {
       showSettings={false}
       showClear
       clearHistory={jest.fn()}
+      setShowLoginDrawer={jest.fn()}
     />
   );
   expect(container).toMatchSnapshot();
@@ -147,6 +153,7 @@ it('renders Header with user activated speak unchanged', () => {
       showShare={false}
       showSettings={false}
       clearHistory={jest.fn()}
+      setShowLoginDrawer={jest.fn()}
     />
   );
   expect(container).toMatchSnapshot();
@@ -170,7 +177,8 @@ it('renders Header with deep thought unlogged unchanged', () => {
       showShare={false}
       showSettings={false}
       clearHistory={jest.fn()}
-      loginToken="abcd"
+      showLogin
+      setShowLoginDrawer={jest.fn()}
     />
   );
   expect(container).toMatchSnapshot();
@@ -199,6 +207,7 @@ it('renders Header with deep thought logged but without permission flag unchange
         ...user,
         pAndCUAccepted: false,
       }}
+      setShowLoginDrawer={jest.fn()}
     />
   );
   expect(container).toMatchSnapshot();
@@ -227,6 +236,7 @@ it('renders Header with deep thought logged with permission flag unchanged', ()
         ...user,
         pAndCUAccepted: true,
       }}
+      setShowLoginDrawer={jest.fn()}
     />
   );
   expect(container).toMatchSnapshot();
@@ -252,6 +262,7 @@ it('renders Header with deep thought and session open unchanged', () => {
       clearHistory={jest.fn()}
       sessionID="1234"
       loginToken="abcd"
+      setShowLoginDrawer={jest.fn()}
     />
   );
   expect(container).toMatchSnapshot();
@@ -276,6 +287,7 @@ it('renders Header for board of experts unchanged', () => {
       showSettings={false}
       clearHistory={jest.fn()}
       loginToken="abcd"
+      setShowLoginDrawer={jest.fn()}
     />
   );
   expect(container).toMatchSnapshot();
@@ -301,6 +313,7 @@ it('renders Header for board of experts with session open unchanged', () => {
       clearHistory={jest.fn()}
       sessionID="1234"
       loginToken="abcd"
+      setShowLoginDrawer={jest.fn()}
     />
   );
   expect(container).toMatchSnapshot();

package/src/components/Header/Header.tsx

@@ -21,6 +21,7 @@ import Refresh from '../icons/Refresh';
 import Clear from '../icons/Clear';
 import DeepThought from '../icons/DeepThought';
 import Group from '../icons/Group';
+import UserIcon from '../icons/User';
 
 export interface Props {
   className?: string;
@@ -40,6 +41,8 @@ export interface Props {
   showSpeaker?: boolean;
   showReload?: boolean;
   showClear?: boolean;
+  showLogin?: boolean;
+  setShowLoginDrawer: (show: boolean) => void;
   clearHistory: () => void;
   loginToken?: string;
   user?: User;
@@ -64,6 +67,8 @@ const Header: React.FC<Props> = ({
   showSpeaker = true,
   showReload = false,
   showClear = false,
+  showLogin = true,
+  setShowLoginDrawer,
   clearHistory,
   loginToken,
   user,
@@ -194,6 +199,18 @@ const Header: React.FC<Props> = ({
           align="left"
         />
       )}
+      {showLogin && (
+        <Button
+          primary
+          shape="circle"
+          className="memori-header--button memori-header--button-login"
+          icon={<UserIcon />}
+          onClick={() => setShowLoginDrawer(true)}
+          title={
+            loginToken ? t('login.user') || 'User' : t('login.login') || 'Login'
+          }
+        />
+      )}
     </div>
   );
 };

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

@@ -82,6 +82,26 @@ exports[`renders Header for board of experts unchanged 1`] = `
         </div>
       </button>
     </div>
+    <button
+      class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-header--button memori-header--button-login"
+      title="login.user"
+    >
+      <span
+        class="memori-button--icon"
+      >
+        <svg
+          aria-hidden="true"
+          focusable="false"
+          role="img"
+          viewBox="0 0 1024 1024"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M858.5 763.6a374 374 0 0 0-80.6-119.5 375.63 375.63 0 0 0-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 0 0-80.6 119.5A371.7 371.7 0 0 0 136 901.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 0 0 8-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
+          />
+        </svg>
+      </span>
+    </button>
   </div>
 </div>
 `;
@@ -167,6 +187,26 @@ exports[`renders Header for board of experts with session open unchanged 1`] = `
         </div>
       </button>
     </div>
+    <button
+      class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-header--button memori-header--button-login"
+      title="login.user"
+    >
+      <span
+        class="memori-button--icon"
+      >
+        <svg
+          aria-hidden="true"
+          focusable="false"
+          role="img"
+          viewBox="0 0 1024 1024"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M858.5 763.6a374 374 0 0 0-80.6-119.5 375.63 375.63 0 0 0-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 0 0-80.6 119.5A371.7 371.7 0 0 0 136 901.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 0 0 8-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
+          />
+        </svg>
+      </span>
+    </button>
   </div>
 </div>
 `;
@@ -225,6 +265,26 @@ exports[`renders Header unchanged 1`] = `
         </div>
       </button>
     </div>
+    <button
+      class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-header--button memori-header--button-login"
+      title="login.login"
+    >
+      <span
+        class="memori-button--icon"
+      >
+        <svg
+          aria-hidden="true"
+          focusable="false"
+          role="img"
+          viewBox="0 0 1024 1024"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M858.5 763.6a374 374 0 0 0-80.6-119.5 375.63 375.63 0 0 0-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 0 0-80.6 119.5A371.7 371.7 0 0 0 136 901.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 0 0 8-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
+          />
+        </svg>
+      </span>
+    </button>
   </div>
 </div>
 `;
@@ -303,6 +363,26 @@ exports[`renders Header with clear button unchanged 1`] = `
         </div>
       </button>
     </div>
+    <button
+      class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-header--button memori-header--button-login"
+      title="login.login"
+    >
+      <span
+        class="memori-button--icon"
+      >
+        <svg
+          aria-hidden="true"
+          focusable="false"
+          role="img"
+          viewBox="0 0 1024 1024"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M858.5 763.6a374 374 0 0 0-80.6-119.5 375.63 375.63 0 0 0-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 0 0-80.6 119.5A371.7 371.7 0 0 0 136 901.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 0 0 8-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
+          />
+        </svg>
+      </span>
+    </button>
   </div>
 </div>
 `;
@@ -361,6 +441,26 @@ exports[`renders Header with deep thought and session open unchanged 1`] = `
         </div>
       </button>
     </div>
+    <button
+      class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-header--button memori-header--button-login"
+      title="login.user"
+    >
+      <span
+        class="memori-button--icon"
+      >
+        <svg
+          aria-hidden="true"
+          focusable="false"
+          role="img"
+          viewBox="0 0 1024 1024"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M858.5 763.6a374 374 0 0 0-80.6-119.5 375.63 375.63 0 0 0-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 0 0-80.6 119.5A371.7 371.7 0 0 0 136 901.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 0 0 8-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
+          />
+        </svg>
+      </span>
+    </button>
   </div>
 </div>
 `;
@@ -419,6 +519,26 @@ exports[`renders Header with deep thought logged but without permission flag unc
         </div>
       </button>
     </div>
+    <button
+      class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-header--button memori-header--button-login"
+      title="login.user"
+    >
+      <span
+        class="memori-button--icon"
+      >
+        <svg
+          aria-hidden="true"
+          focusable="false"
+          role="img"
+          viewBox="0 0 1024 1024"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M858.5 763.6a374 374 0 0 0-80.6-119.5 375.63 375.63 0 0 0-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 0 0-80.6 119.5A371.7 371.7 0 0 0 136 901.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 0 0 8-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
+          />
+        </svg>
+      </span>
+    </button>
   </div>
 </div>
 `;
@@ -521,6 +641,26 @@ exports[`renders Header with deep thought logged with permission flag unchanged
         </div>
       </button>
     </div>
+    <button
+      class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-header--button memori-header--button-login"
+      title="login.user"
+    >
+      <span
+        class="memori-button--icon"
+      >
+        <svg
+          aria-hidden="true"
+          focusable="false"
+          role="img"
+          viewBox="0 0 1024 1024"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M858.5 763.6a374 374 0 0 0-80.6-119.5 375.63 375.63 0 0 0-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 0 0-80.6 119.5A371.7 371.7 0 0 0 136 901.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 0 0 8-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
+          />
+        </svg>
+      </span>
+    </button>
   </div>
 </div>
 `;
@@ -579,6 +719,26 @@ exports[`renders Header with deep thought unlogged unchanged 1`] = `
         </div>
       </button>
     </div>
+    <button
+      class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-header--button memori-header--button-login"
+      title="login.login"
+    >
+      <span
+        class="memori-button--icon"
+      >
+        <svg
+          aria-hidden="true"
+          focusable="false"
+          role="img"
+          viewBox="0 0 1024 1024"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M858.5 763.6a374 374 0 0 0-80.6-119.5 375.63 375.63 0 0 0-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 0 0-80.6 119.5A371.7 371.7 0 0 0 136 901.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 0 0 8-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
+          />
+        </svg>
+      </span>
+    </button>
   </div>
 </div>
 `;
@@ -666,6 +826,26 @@ exports[`renders Header with position unchanged 1`] = `
         </div>
       </button>
     </div>
+    <button
+      class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-header--button memori-header--button-login"
+      title="login.login"
+    >
+      <span
+        class="memori-button--icon"
+      >
+        <svg
+          aria-hidden="true"
+          focusable="false"
+          role="img"
+          viewBox="0 0 1024 1024"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M858.5 763.6a374 374 0 0 0-80.6-119.5 375.63 375.63 0 0 0-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 0 0-80.6 119.5A371.7 371.7 0 0 0 136 901.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 0 0 8-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
+          />
+        </svg>
+      </span>
+    </button>
   </div>
 </div>
 `;
@@ -744,6 +924,26 @@ exports[`renders Header with settings button unchanged 1`] = `
         </svg>
       </span>
     </button>
+    <button
+      class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-header--button memori-header--button-login"
+      title="login.login"
+    >
+      <span
+        class="memori-button--icon"
+      >
+        <svg
+          aria-hidden="true"
+          focusable="false"
+          role="img"
+          viewBox="0 0 1024 1024"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M858.5 763.6a374 374 0 0 0-80.6-119.5 375.63 375.63 0 0 0-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 0 0-80.6 119.5A371.7 371.7 0 0 0 136 901.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 0 0 8-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
+          />
+        </svg>
+      </span>
+    </button>
   </div>
 </div>
 `;
@@ -832,6 +1032,26 @@ exports[`renders Header with share button unchanged 1`] = `
         </div>
       </button>
     </div>
+    <button
+      class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-header--button memori-header--button-login"
+      title="login.login"
+    >
+      <span
+        class="memori-button--icon"
+      >
+        <svg
+          aria-hidden="true"
+          focusable="false"
+          role="img"
+          viewBox="0 0 1024 1024"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M858.5 763.6a374 374 0 0 0-80.6-119.5 375.63 375.63 0 0 0-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 0 0-80.6 119.5A371.7 371.7 0 0 0 136 901.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 0 0 8-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
+          />
+        </svg>
+      </span>
+    </button>
   </div>
 </div>
 `;
@@ -892,6 +1112,26 @@ exports[`renders Header with speaker muted unchanged 1`] = `
         </div>
       </button>
     </div>
+    <button
+      class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-header--button memori-header--button-login"
+      title="login.login"
+    >
+      <span
+        class="memori-button--icon"
+      >
+        <svg
+          aria-hidden="true"
+          focusable="false"
+          role="img"
+          viewBox="0 0 1024 1024"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M858.5 763.6a374 374 0 0 0-80.6-119.5 375.63 375.63 0 0 0-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 0 0-80.6 119.5A371.7 371.7 0 0 0 136 901.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 0 0 8-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
+          />
+        </svg>
+      </span>
+    </button>
   </div>
 </div>
 `;
@@ -950,6 +1190,26 @@ exports[`renders Header with user activated speak unchanged 1`] = `
         </div>
       </button>
     </div>
+    <button
+      class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-header--button memori-header--button-login"
+      title="login.login"
+    >
+      <span
+        class="memori-button--icon"
+      >
+        <svg
+          aria-hidden="true"
+          focusable="false"
+          role="img"
+          viewBox="0 0 1024 1024"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M858.5 763.6a374 374 0 0 0-80.6-119.5 375.63 375.63 0 0 0-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 0 0-80.6 119.5A371.7 371.7 0 0 0 136 901.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 0 0 8-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
+          />
+        </svg>
+      </span>
+    </button>
   </div>
 </div>
 `;