frontend: minimal Login

from https://github.com/johannesloetzsch/swlkup/blob/master/frontend/components/Login.tsx

frontend/search/components/Login.tsx

@@ -0,0 +1,77 @@
+import { useEffect } from 'react'
+import { useLoginQuery } from '../codegen/generates'
+import create from 'zustand'
+import { useTranslation } from 'react-i18next';
+
+function jwtDecode(jwt: string) {
+  /* Just parses the payload — Be aware that signature is not checked */
+  return jwt && JSON.parse(atob(jwt.split('.')[1]))
+}
+
+export interface AuthState {
+  mail: string,
+  password: string,
+  setLogin: (mail: string, password: string) => void
+  jwt: string,
+  setJwt: (jwt: string) => void,
+  logout: () => void
+}
+
+export const useAuthStore = create<AuthState>(set => ({
+  mail: '',
+  password: '',
+  setLogin: (mail, password) => set( _orig => ({mail, password})),
+  jwt: '',
+  setJwt: jwt => set( _orig => ({jwt}) ),
+  logout: () => { localStorage.removeItem('jwt')
+	          set({mail: '', password: '', jwt: ''}) }
+}))
+
+export function jwtFromLocalStorage() {
+  return localStorage.getItem('jwt') || ''
+}
+
+export function Login() {
+  const {t} = useTranslation()
+  const auth = useAuthStore()
+
+  const { data } = useLoginQuery({auth}, {enabled: Boolean(!auth.jwt && auth.mail && auth.password)})
+
+  useEffect(() => {
+    if(auth.jwt) {
+      localStorage.setItem('jwt', auth.jwt)
+    }
+    else {
+      auth.setJwt(data?.login.jwt || jwtFromLocalStorage())
+    }
+
+    if(jwtDecode(auth.jwt).exp < Date.now()/1000) {
+      console.log('session expired')
+      auth.logout()
+    }
+  }, [auth.jwt, data])
+
+  if(!auth.jwt) {
+    return (
+      <form onSubmit={ (event) => {event.preventDefault()
+                                   auth.setLogin((document.getElementById('mail') as HTMLInputElement).value,
+                                                 (document.getElementById('password') as HTMLInputElement).value) }}>
+        <label>{ t('Email') }:
+          <input id='mail' name='mail'/>
+        </label>&nbsp;
+        <label>{ t('Password') }:
+          <input id='password' type='password' name='password'/>
+        </label>&nbsp;
+        <input type='submit' value={ t('Login') as string }/>
+      </form>
+    )
+  } else {
+    return (
+      <form onSubmit={ async (event) => {event.preventDefault()
+                                         auth.logout()}}
+	    style={{width: "100%", textAlign: "right"}}>
+        <input type='submit' value={ t('Logout') as string }/>
+      </form>
+    )
+  }
+}

frontend/search/components/ngo/HostOfferLookupWrapper.tsx

@@ -1,19 +1,22 @@
 import React from 'react'
-import { Auth, useGetOffersQuery } from "../../codegen/generates"
-import testAuth from '../util/testAuth.json'
+import { useGetOffersQuery } from "../../codegen/generates"
 import HostOfferLookupTable from "./HostOfferLookupTable"
 import { Box } from "@mui/material"
 import { useTranslation } from 'react-i18next'
+import { Login, useAuthStore } from '../Login'
 
 type HostLookupWrapperProps = Record<string, never>
 
 const HostOfferLookupWrapper = ({}: HostLookupWrapperProps) => {
   const { t } = useTranslation()
+  const auth = useAuthStore()
 
   const staleTimeMinutes = 60  // hotfix till table settings by user (columns width, filters, sort options, …) are persisted
-  const {data, isFetching, error} = useGetOffersQuery({auth: testAuth as Auth}, {staleTime: staleTimeMinutes * 60 * 1000})
+  const {data, isFetching, error} = useGetOffersQuery({auth}, {staleTime: staleTimeMinutes * 60 * 1000})
 
   return <>
+    { !data?.get_offers && <Login/> /** TODO: Show logout, by placing <Login/> in Header at Layout **/ }
+
     { isFetching && <p>{ t('loading…') }</p> }
     { error && <p>{ t('An error occurred while trying to get data from the backend.') }</p> }
     { data && !data.get_offers && <p>{ t('Seems like you have no permissions. Please try to login again.') }</p> }

frontend/search/components/util/testAuth.json

@@ -1,4 +0,0 @@
-{
-  "mail": "crewing@example-ngo.com",
-  "password": "Vr(+cFtUG=rsj2:/]*uR"
-}

frontend/search/package.json

@@ -32,7 +32,8 @@
     "react-collapse-pane": "^2.0.1",
     "react-dom": "17.0.2",
     "react-i18next": "^11.15.5",
-    "react-query": "^3.34.16"
+    "react-query": "^3.34.16",
+    "zustand": "^3.7.1"
   },
   "devDependencies": {
     "@graphql-codegen/cli": "^2.3.0",

frontend/search/yarn.lock

@@ -5617,3 +5617,8 @@ yocto-queue@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
   integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
+
+zustand@^3.7.1:
+  version "3.7.1"
+  resolved "https://registry.yarnpkg.com/zustand/-/zustand-3.7.1.tgz#7388f0a7175a6c2fd9a2880b383a4bf6cdf6b7c6"
+  integrity sha512-wHBCZlKj+bg03/hP+Tzv24YhnqqP8MCeN9ECPDXoF01062SIbnfl3j9O0znkDw1lNTY0a8WN3F///a0UhhaEqg==