Add frontend part of invitations

frontend/src/contexts/userContext.ts

@@ -2,7 +2,8 @@ import { createContext, useContext } from 'react'
 
 interface User {
   auth: boolean
-  name: string
+  first_name: string
+  last_name: string
 }
 
 interface IUserContext {
@@ -14,7 +15,7 @@ interface IUserContext {
 function noop() {}
 
 export const UserContext = createContext<IUserContext>({
-  user: { auth: false, name: '' },
+  user: { auth: false, first_name: '', last_name: '' },
   fetchUserInfo: noop,
   clearUserInfo: noop,
 })

frontend/src/providers/userProvider.tsx

@@ -8,7 +8,11 @@ type UserProviderProps = {
 
 function UserProvider(props: UserProviderProps) {
   const { children } = props
-  const [user, setUser] = useState({ auth: false, name: '' })
+  const [user, setUser] = useState({
+    auth: false,
+    first_name: '',
+    last_name: '',
+  })
   const [fetching, setFetching] = useState(false)
 
   const getUserInfo = async () => {
@@ -17,7 +21,11 @@ function UserProvider(props: UserProviderProps) {
       const data = await response.json()
 
       if (response.ok) {
-        setUser({ auth: true, name: data.name })
+        setUser({
+          auth: true,
+          first_name: data.first_name,
+          last_name: data.last_name,
+        })
       }
     } catch (error) {
       // Do nothing
@@ -33,7 +41,7 @@ function UserProvider(props: UserProviderProps) {
   }
 
   const clearUserInfo = () => {
-    setUser({ auth: false, name: '' })
+    setUser({ auth: false, first_name: '', last_name: '' })
   }
 
   return (

frontend/src/routes/components/userInfo.tsx

@@ -10,7 +10,11 @@ function UserInfo() {
   }, [])
 
   if (user.auth) {
-    return <div>{user.name}</div>
+    return (
+      <div>
+        {user.first_name} {user.last_name}
+      </div>
+    )
   }
   return <></>
 }

frontend/src/routes/frontpage/index.tsx

@@ -14,7 +14,9 @@ export default function FrontPage() {
       <Page>
         <p>
           <strong>Routes</strong>
-          <p>{user.name}</p>
+          <p>
+            {user.first_name} {user.last_name}
+          </p>
           <ul>
             <li>
               <Link to="/">Front page</Link>

frontend/src/routes/index.tsx

@@ -10,7 +10,8 @@ import { useUserContext } from 'contexts'
 import Sponsor from 'routes/sponsor'
 import Register from 'routes/register'
 import FrontPage from 'routes/frontpage'
-
+import Invite from 'routes/invite'
+import InviteLink from 'routes/invitelink'
 import Footer from 'routes/components/footer'
 import Header from 'routes/components/header'
 import NotFound from 'routes/components/notFound'
@@ -44,15 +45,17 @@ export default function App() {
       <AppWrapper>
         <Header />
         <Switch>
-          <Route exact path='/'>
+          <Route exact path="/">
             <FrontPage />
           </Route>
-          <ProtectedRoute path='/sponsor'>
+          <ProtectedRoute path="/sponsor">
             <Sponsor />
           </ProtectedRoute>
-          <Route path='/register'>
+          <Route path="/register">
             <Register />
           </Route>
+          <Route path="/invite/:id" component={InviteLink} />
+          <Route path="/invite/" component={Invite} />
           <Route>
             <NotFound />
           </Route>

frontend/src/routes/invite/index.tsx

+import Page from 'components/page'
+import { useUserContext } from 'contexts'
+
+function Invite() {
+  const { user } = useUserContext()
+
+  return (
+    <Page>
+      <p>
+        {user.first_name} {user.last_name}
+        TODO: Put information about login options, and buttons to them on this
+        page
+      </p>
+    </Page>
+  )
+}
+
+export default Invite

frontend/src/routes/invitelink/index.tsx

+import { useEffect } from 'react'
+import { Redirect, RouteComponentProps } from 'react-router-dom'
+
+type TParams = { id: string }
+
+function InviteLink({ match }: RouteComponentProps<TParams>) {
+  // Fetch backend endpoint to preserve invite_id in backend session then redirect
+  // to generic invite page with info about feide login or manual with passport.
+
+  const inviteId = match.params.id
+
+  useEffect(() => {
+    fetch(`/api/ui/v1/invited/${inviteId}`)
+  }, [])
+  return <Redirect to="/invite" />
+}
+
+export default InviteLink