From 850fd3c0b501bc0db30135c2a05ae9a88f835112 Mon Sep 17 00:00:00 2001
From: Andreas Ellewsen <ae@uio.no>
Date: Wed, 6 Oct 2021 16:57:10 +0200
Subject: [PATCH] Add frontend part of invitations
---
frontend/src/contexts/userContext.ts | 5 +++--
frontend/src/providers/userProvider.tsx | 14 +++++++++++---
frontend/src/routes/components/userInfo.tsx | 6 +++++-
frontend/src/routes/frontpage/index.tsx | 4 +++-
frontend/src/routes/index.tsx | 11 +++++++----
frontend/src/routes/invite/index.tsx | 18 ++++++++++++++++++
frontend/src/routes/invitelink/index.tsx | 18 ++++++++++++++++++
7 files changed, 65 insertions(+), 11 deletions(-)
create mode 100644 frontend/src/routes/invite/index.tsx
create mode 100644 frontend/src/routes/invitelink/index.tsx
diff --git a/frontend/src/contexts/userContext.ts b/frontend/src/contexts/userContext.ts
index a6b333b9..8ff5841d 100644
--- a/frontend/src/contexts/userContext.ts
+++ b/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,
})
diff --git a/frontend/src/providers/userProvider.tsx b/frontend/src/providers/userProvider.tsx
index 4f1ee7e9..f9c3cca4 100644
--- a/frontend/src/providers/userProvider.tsx
+++ b/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 (
diff --git a/frontend/src/routes/components/userInfo.tsx b/frontend/src/routes/components/userInfo.tsx
index 567c4604..0c153a3d 100644
--- a/frontend/src/routes/components/userInfo.tsx
+++ b/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 <></>
}
diff --git a/frontend/src/routes/frontpage/index.tsx b/frontend/src/routes/frontpage/index.tsx
index 4435a89a..7985d124 100644
--- a/frontend/src/routes/frontpage/index.tsx
+++ b/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>
diff --git a/frontend/src/routes/index.tsx b/frontend/src/routes/index.tsx
index 4504a47c..43dc8f15 100644
--- a/frontend/src/routes/index.tsx
+++ b/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>
diff --git a/frontend/src/routes/invite/index.tsx b/frontend/src/routes/invite/index.tsx
new file mode 100644
index 00000000..6d441231
--- /dev/null
+++ b/frontend/src/routes/invite/index.tsx
@@ -0,0 +1,18 @@
+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
diff --git a/frontend/src/routes/invitelink/index.tsx b/frontend/src/routes/invitelink/index.tsx
new file mode 100644
index 00000000..2a34ff22
--- /dev/null
+++ b/frontend/src/routes/invitelink/index.tsx
@@ -0,0 +1,18 @@
+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
--
GitLab