Post registration page.

frontend/client/models/UserData.ts

@@ -6,6 +6,10 @@ import type { UserRole } from './UserRole';
 export type UserData = {
     email: string;
     id: string;
+    /**
+     * Has the user already verified with a registration key?
+     */
+    registered: boolean;
     role: UserRole;
     username: string;
     verified: boolean;

frontend/components/Authenticated.tsx

@@ -5,12 +5,16 @@ import { VerificationMessage } from "./VerificationMessage"
 import { useAppInfo } from "helpers/info"
 import { UserData } from "@/client"
 import api from "helpers/api"
-import { useStore } from "helpers/store"
+import { Store, useStore } from "helpers/store"
+import { RegisterPrompt } from "./RegisterPrompt"
+import { observer } from "mobx-react-lite"
+import { observe } from "mobx"
 
 export const Authenticated: React.FC<{
     allowUnverified?: boolean,
+    allowUnregistered?: boolean,
     children: React.ReactNode
-}> = ({ allowUnverified, children }) => {
+}> = ({ allowUnverified, allowUnregistered, children }) => {
     const appInfo = useAppInfo()
     const store = useStore()
     const [userData, setUserData] = React.useState<UserData | null>(store?.userData || null)
@@ -25,12 +29,22 @@ export const Authenticated: React.FC<{
             .catch(() => {
                 Router.replace("/user/login")
             })
+
+        // Watch changes so we can reload this componment and re-evaluate if we should lock the route
+        if (store) {
+            return observe(store, "userData", (data: any) => {
+                setUserData(data.newValue as UserData)
+            })
+        }
     }, [store])
     
     return <>
         {!userData || userData.verified === undefined ? 
             // User data wasn't loaded, render empty page.
             <Page></Page> 
+        : appInfo?.inviteOnly && !userData.registered && !allowUnregistered ?
+            // User exists but needs to be verified with a registration code.
+            <RegisterPrompt/>
         : appInfo?.smtp && !allowUnverified && !userData.verified ? 
             // SMTP verification was enabled and the user was not verified
             <VerificationMessage email={userData.email}/> 

frontend/components/RegisterPrompt.tsx

@@ -0,0 +1,83 @@
+import * as React from "react"
+
+import {
+  Box,
+  Button,
+  Flex,
+  FormControl,
+  FormLabel,
+  Heading,
+  Input,
+  Stack,
+  Text,
+  useColorModeValue,
+  useToast
+} from "@chakra-ui/react"
+import { Page } from "layouts/Page"
+import api from "helpers/api"
+import { useForm } from "react-hook-form"
+import { useStore } from "helpers/store"
+
+export const RegisterPrompt: React.FC = () => {
+	const toast = useToast()
+	const store = useStore()
+	const { register, handleSubmit } = useForm()
+
+	const sendCode = (form: any) => {
+		api.user.registerKey(form?.registrationCode)
+			.then(userInfo => {
+				store?.setUserInfo(userInfo)
+
+				toast({
+					title: "Successfully Registered",
+					description: `Welcome ${userInfo.username}`,
+					status: "success",
+					duration: 5000,
+					isClosable: true
+				})
+			})
+			.catch(error => {
+				toast({
+					title: "Registration Error",
+					description: error.body.message,
+					status: "error",
+					duration: 5000,
+					isClosable: true
+				})
+			})
+	}
+
+	return <Page>
+		<Flex
+            minH="100vh"
+            align="center"
+            justify="center">
+			<Stack spacing={8} mx="auto" maxW="lg" py={12} px={6}>
+				<Stack align="center" textAlign="center">
+					<Heading fontSize="4xl">Complete Registration</Heading>
+					<Text fontSize="lg" color="gray.600">
+						Service is running in <i>invite only</i> mode.
+						Please enter your registration key.
+					</Text>
+				</Stack>
+				<Box
+					rounded="lg"
+					bg={useColorModeValue("white", "gray.700")}
+					boxShadow="lg"
+					p={8}>
+					<form onSubmit={handleSubmit(sendCode)}>
+						<Stack spacing={2}>
+							<FormControl>
+								<FormLabel>Registration Code</FormLabel>
+								<Input {...register("registrationCode", { required: true })} />
+							</FormControl>
+							<Button type="submit">
+								Register
+							</Button>
+						</Stack>
+					</form>
+				</Box>
+			</Stack>
+		</Flex>
+	</Page>
+}

frontend/pages/user/tokens.tsx

@@ -101,10 +101,10 @@ const Tokens: NextPage = () => {
           isClosable: true
         })
       })
-      .catch(err => {
+      .catch(error => {
         toast({
           title: "Error",
-          description: err.body.message,
+          description: error.body.message,
           status: "error",
           duration: 5000,
           isClosable: true

frontend/pages/user/uploads/index.tsx

@@ -36,8 +36,6 @@ const UploadFiles: React.FC = () => {
             .catch(() => setUsage("0 Bytes"))
     }, [searchReload])
 
-    
-
     const shadowUploader = React.useRef(null)
     const uploadButtonCallback = React.useCallback(() => {
         (shadowUploader.current as any)?.click()

src/models/user.rs

@@ -9,6 +9,9 @@ pub struct UserData {
     pub username: String,
     pub email: String,
     pub verified: bool,
+    /// Has the user already verified with a registration key?
+    /// This will be true always if service is in `invite_only` mode.
+    pub registered: bool,
     pub role: UserRole,
 }
 
@@ -19,6 +22,7 @@ impl From<users::Model> for UserData {
             username: user.username,
             email: user.email,
             verified: user.verified,
+            registered: user.registered,
             role: UserRole::from(user.role),
         }
     }