Add 'keep me logged in' option [#7]

Author: davidje13

frontend/src/api/RetroAuthTracker.ts

@@ -0,0 +1,35 @@
+import { CacheMap } from '../helpers/CacheMap';
+import { AsyncValue } from '../helpers/AsyncValue';
+import type { RetroAuth } from '../shared/api-entities';
+import { store } from '../helpers/storage';
+
+const MINIMUM_VALIDITY = 1000 * 60 * 60 * 12;
+
+export class RetroAuthTracker extends CacheMap<string, AsyncValue<RetroAuth>> {
+  public constructor() {
+    super((retroId) => {
+      const value = new AsyncValue<RetroAuth>();
+      try {
+        const stored = store.getItem(storageKey(retroId));
+        if (stored) {
+          const auth: RetroAuth = JSON.parse(stored);
+          if (Date.now() + MINIMUM_VALIDITY < auth.expires) {
+            value.set(auth);
+          }
+        }
+      } catch {}
+      return value;
+    });
+  }
+
+  public set(retroId: string, auth: RetroAuth, persist?: boolean) {
+    if (persist) {
+      store.setItem(storageKey(retroId), JSON.stringify(auth));
+    } else if (persist === false) {
+      store.removeItem(storageKey(retroId));
+    }
+    this.get(retroId).set(auth);
+  }
+}
+
+const storageKey = (retroId: string) => `retro-token-${retroId}`;

frontend/src/api/api.ts

@@ -1,4 +1,4 @@
-import type { RetroAuth, UserData } from '../shared/api-entities';
+import type { UserData } from '../shared/api-entities';
 import { ConfigService } from './ConfigService';
 import { RetroListTracker } from './RetroListTracker';
 import { SlugTracker } from './SlugTracker';
@@ -10,7 +10,7 @@ import { RetroService } from './RetroService';
 import { PasswordService } from './PasswordService';
 import { GiphyService } from './GiphyService';
 import { AsyncValue } from '../helpers/AsyncValue';
-import { AsyncValueMap } from '../helpers/AsyncValueMap';
+import { RetroAuthTracker } from './RetroAuthTracker';
 import { DiagnosticsService } from './DiagnosticsService';
 
 const { protocol, host } = document.location;
@@ -31,5 +31,5 @@ export const userDataService = new UserDataService(API_BASE);
 export const passwordService = new PasswordService(API_BASE);
 export const giphyService = new GiphyService(API_BASE);
 
-export const retroAuthTracker = new AsyncValueMap<string, RetroAuth>();
+export const retroAuthTracker = new RetroAuthTracker();
 export const userDataTracker = new AsyncValue<UserData | null>();

frontend/src/components/RetroRouter.tsx

@@ -47,11 +47,15 @@ export const RetroRouter: FC<PropsT> = ({ slug }) => {
     return <div className="loader error">{slugError.message}</div>;
   }
 
-  if (retroId && !retroAuth) {
+  if (!retroId) {
+    return <div className="loader">Loading&hellip;</div>;
+  }
+
+  if (!retroAuth || (!retro && status === 'reauthenticate')) {
     return <PasswordPage slug={slug} retroId={retroId} />;
   }
 
-  if (!retroId || !retro || !retroAuth) {
+  if (!retro) {
     return <div className="loader">Loading&hellip;</div>;
   }
 

frontend/src/components/login/LoginCallback.tsx

@@ -2,8 +2,8 @@ import { useState, useEffect, memo } from 'react';
 import { useLocation } from 'wouter';
 import { handleLogin } from './handleLogin';
 import { useEvent } from '../../hooks/useEvent';
+import { sessionStore } from '../../helpers/storage';
 import { Header } from '../common/Header';
-import { storage } from './storage';
 import './LoginCallback.css';
 
 interface PropsT {
@@ -20,13 +20,13 @@ export const LoginCallback = memo(({ service }: PropsT) => {
     const ac = new AbortController();
     const { search, hash } = document.location;
     const redirectUri = document.location.href.split('?')[0]!;
-    const localState = storage.getItem('login-state');
+    const localState = sessionStore.getItem('login-state');
     handleLogin(service, localState, { search, hash, redirectUri }, ac.signal)
       .then((redirect) => {
         if (ac.signal.aborted) {
           return;
         }
-        storage.removeItem('login-state');
+        sessionStore.removeItem('login-state');
         if (
           new URL(redirect, document.location.href).host !==
           document.location.host
@@ -41,13 +41,13 @@ export const LoginCallback = memo(({ service }: PropsT) => {
           return;
         }
         if (!(err instanceof Error)) {
-          storage.removeItem('login-state');
+          sessionStore.removeItem('login-state');
           setError(String(err));
         } else if (err.message === 'unrecognised login details') {
           // GitLab shows a bare link to the /sso/login URL on the confirmation page
           stableSetLocation('/', { replace: true });
         } else {
-          storage.removeItem('login-state');
+          sessionStore.removeItem('login-state');
           setError(err.message);
         }
       });

frontend/src/components/login/LoginForm.tsx

@@ -1,11 +1,11 @@
 import { memo, useLayoutEffect } from 'react';
 import { useConfig } from '../../hooks/data/useConfig';
 import { digest, randomBytes, toB64 } from '../../helpers/crypto';
-import { storage } from './storage';
+import { sessionStore } from '../../helpers/storage';
 import './LoginForm.css';
 
 function storeState(state: unknown) {
-  if (!storage.setItem('login-state', JSON.stringify(state))) {
+  if (!sessionStore.setItem('login-state', JSON.stringify(state))) {
     window.alert(
       'You must enable session cookies or storage in your browser settings to log in',
     );

frontend/src/components/password/PasswordForm.tsx

@@ -9,6 +9,7 @@ interface PropsT {
 }
 
 export const PasswordForm = ({ slug, retroId }: PropsT): ReactElement => {
+  const [rememberMe, setRememberMe] = useState(false);
   const [success, setSuccess] = useState(false);
   const [password, setPassword] = useState('');
 
@@ -21,7 +22,7 @@ export const PasswordForm = ({ slug, retroId }: PropsT): ReactElement => {
       retroId,
       password,
     );
-    retroAuthTracker.set(retroId, retroAuth);
+    retroAuthTracker.set(retroId, retroAuth, rememberMe);
     setSuccess(true);
   });
 
@@ -45,6 +46,15 @@ export const PasswordForm = ({ slug, retroId }: PropsT): ReactElement => {
         autoComplete="current-password"
         required
       />
+      <label className="checkbox">
+        <input
+          type="checkbox"
+          checked={rememberMe}
+          onChange={(e) => setRememberMe(e.currentTarget.checked)}
+          autoComplete="off"
+        />
+        Keep me logged in to this retro for 6 months
+      </label>
       <button
         type="submit"
         className="wide-button"

frontend/src/components/security/SecurityPage.tsx

@@ -124,6 +124,12 @@ export const SecurityPage = memo(() => (
         exposing data. The session cookie is deleted as soon as the login is
         complete, or if the browser tab is closed.
       </p>
+      <p>
+        If "keep me logged in" is selected when entering the password for a
+        retro, an authentication token will be saved to the local storage of the
+        browser. This is only used for the purpose of keeping the user logged in
+        to the retro without needing to re-enter the password each time.
+      </p>
       <p>
         This service does not use any tracking, advertising, or third-party
         cookies or data storage.

frontend/src/helpers/AsyncValue.ts

@@ -7,8 +7,6 @@ export class AsyncValue<T, Err = never> {
   private state: ResolvedState<T, Err> = [null, null];
   private loaderAC: AbortController | null = null;
 
-  constructor() {}
-
   static readonly EMPTY = new AsyncValue<never, never>();
 
   static withProducer<T>(producer: (signal: AbortSignal) => Promise<T>) {

frontend/src/helpers/AsyncValueMap.ts

@@ -71,7 +71,7 @@ function deleteCookie(key: string) {
 const getLocalStorage = () => window.localStorage;
 const getSessionStorage = () => window.sessionStorage;
 
-export const storage = {
+export const sessionStore = {
   setItem(key: string, value: string): boolean {
     let any = false;
     // sessionStorage is best option for security and privacy
@@ -98,3 +98,17 @@ export const storage = {
     deleteCookie(key);
   },
 };
+
+export const store = {
+  setItem(key: string, value: string): boolean {
+    return setStorage(getLocalStorage, key, value);
+  },
+
+  getItem(key: string): string | null {
+    return getStorage(getLocalStorage, key);
+  },
+
+  removeItem(key: string) {
+    deleteStorage(getLocalStorage, key);
+  },
+};