Make register page match sketches

Page now also handles failing api requests when searching.

Resolves: GREG-134

frontend/public/locales/en/common.json

@@ -43,6 +43,7 @@
     "bodyText": "Here you can add a new role to the same guest"
   },
   "register": {
+    "noResults": "No guest matching your search found.",
     "registerHeading": "Register new guest",
     "registerText": "Please search for e-mail or phone number before registering a new guest to prevent duplicates.",
     "registerButtonText": "Register new guest"

frontend/public/locales/nb/common.json

@@ -43,6 +43,7 @@
     "bodyText": "Her kan du legge til en ny rolle på samme gjest"
   },
   "register": {
+    "noResults": "Finner ingen gjestekontoer som matcher søket ditt.",
     "registerHeading": "Registrer ny gjest",
     "registerText": "Søk etter e-post eller mobilnummer før du registrerer ny gjest for å unngå dobbeltoppføringer.",
     "registerButtonText": "Registrer ny gjest"

frontend/public/locales/nn/common.json

@@ -44,6 +44,7 @@
     "bodyText": "Her kan du legge til en ny rolle på samme gjest"
   },
   "register": {
+    "noResults": "Finner ingen gjestekontoer som matcher søket ditt.",
     "registerHeading": "Registrer ny gjest",
     "registerText": "Søk etter e-post eller mobilnummer før du registrerer ny gjest for å unngå dobbeltoppføringer.",
     "registerButtonText": "Registrer ny gjest"

frontend/src/routes/sponsor/register/frontPage.tsx

@@ -6,6 +6,8 @@ import SearchIcon from '@mui/icons-material/Search'
 import { useTranslation } from 'react-i18next'
 import { debounce } from 'lodash'
 import React, { useState } from 'react'
+import { Box, styled } from '@mui/system'
+import { fetchJsonOpts } from 'utils'
 
 type Guest = {
   first: string
@@ -14,21 +16,33 @@ type Guest = {
   value: string
 }
 
+const StyledSpan = styled('span')({
+  color: 'red',
+})
+
 function FrontPage() {
   const [t] = useTranslation('common')
   const [guests, setGuests] = useState<Guest[]>([])
+  const [searchHasInput, setSearchHasInput] = useState(false)
 
-  const getGuests = async (event: React.ChangeEvent<HTMLInputElement>) => {
+  const getGuests = (event: React.ChangeEvent<HTMLInputElement>) => {
     if (event.target.value) {
-      console.log('searching')
-      const response = await fetch(
-        `/api/ui/v1/person/search/${event.target.value}?format=json`
-      )
-      const repjson = await response.json()
-      console.log(repjson)
-      if (response.ok) {
-        setGuests(repjson)
-      }
+      setSearchHasInput(true)
+      fetch(`/api/ui/v1/person/search/${event.target.value}`, fetchJsonOpts())
+        .then((response) => {
+          if (response.ok) {
+            return response.json()
+          }
+          setSearchHasInput(false)
+          return []
+        })
+        .then((responseJson) => {
+          setGuests(responseJson)
+        })
+        .catch(() => {})
+    } else {
+      setSearchHasInput(false)
+      setGuests([])
     }
   }
   return (
@@ -36,36 +50,53 @@ function FrontPage() {
       <SponsorGuestButtons registerNewGuestActive />
       <h2>{t('register.registerHeading')}</h2>
       <p>{t('register.registerText')}</p>
-      <TextField
-        InputProps={{
-          endAdornment: (
-            <InputAdornment position="end">
-              <SearchIcon />
-            </InputAdornment>
-          ),
+      <Box
+        sx={{
+          borderStyle: () => (guests.length > 0 ? 'solid' : 'none'),
+          borderRadius: '5px',
+          borderColor: 'secondary.main',
+          padding: '7px 12px',
         }}
-        fullWidth
-        placeholder="Mobile phone, e-mail"
-        onChange={debounce(getGuests, 600)}
-      />
-      {guests ? (
-        guests.map((guest) => {
-          const guestTo = `/sponsor/guest/${guest.pid}`
-          return (
-            <MenuItem
-              key={`${guest.pid}-${guest.value}`}
-              component={Link}
-              to={guestTo}
-            >
-              {guest.first} {guest.last}
-              <br />
-              {guest.value}
-            </MenuItem>
-          )
-        })
-      ) : (
-        <></>
-      )}
+      >
+        <TextField
+          variant="standard"
+          error={searchHasInput && guests.length === 0}
+          InputProps={{
+            endAdornment: (
+              <InputAdornment position="end">
+                <SearchIcon />
+              </InputAdornment>
+            ),
+          }}
+          fullWidth
+          placeholder="Mobile phone, e-mail"
+          onChange={debounce(getGuests, 600)}
+        />
+        {guests.length === 0 && searchHasInput ? (
+          <StyledSpan>{t('register.noResults')}</StyledSpan>
+        ) : (
+          guests.map((guest) => {
+            const guestTo = `/sponsor/guest/${guest.pid}`
+            return (
+              <MenuItem
+                sx={{
+                  '&:hover': {
+                    fontWeight: 'bold',
+                  },
+                }}
+                key={`${guest.pid}-${guest.value}`}
+                component={Link}
+                to={guestTo}
+              >
+                {guest.first} {guest.last}
+                <br />
+                {guest.value}
+              </MenuItem>
+            )
+          })
+        )}
+      </Box>
+      <br />
       <Button
         variant="contained"
         color="secondary"