Merge pull request #19 from Myzel394/add-allow-registration

Add allow registration

public/locales/en-US/admin-global-settings.json

@@ -66,6 +66,10 @@
     "maxAliasesPerUser": {
       "label": "Maximum aliases per user",
       "description": "The maximum number of aliases a user can create. 0 means unlimited. Existing aliases will not be affected."
+    },
+    "allowRegistrations": {
+      "label": "Allow registrations",
+      "description": "If enabled, users will be able to register on your instance. This only affects new account registrations."
     }
   }
 }

public/locales/en-US/signup.json

@@ -14,5 +14,10 @@
         "continueActionLabel": "Yes, edit email"
       }
     }
+  },
+  "registrationsDisabled": {
+    "title": "Registrations are disabled",
+    "description": "We are sorry, but registrations on this instance are disabled.",
+    "login": "Login"
   }
 }

src/apis/get-server-settings.ts

@@ -1,16 +1,23 @@
 import {ServerSettings} from "~/server-types"
 import {client} from "~/constants/axios-client"
 
-export default async function getServerSettings(): Promise<ServerSettings> {
-	const savedData = sessionStorage.getItem("server-settings")
-
-	if (savedData) {
-		return JSON.parse(savedData)
-	}
-
+const loadData = async () => {
 	const {data} = await client.get(`${import.meta.env.VITE_SERVER_BASE_URL}/v1/server/settings`)
 
 	sessionStorage.setItem("server-settings", JSON.stringify(data))
 
 	return data
 }
+
+export default function getServerSettings(): Promise<ServerSettings> {
+	const savedData = sessionStorage.getItem("server-settings")
+
+	if (savedData) {
+		// Refresh data in background
+		loadData()
+
+		return JSON.parse(savedData)
+	}
+
+	return loadData()
+}

src/constants/admin-settings.ts

@@ -14,4 +14,5 @@ export const DEFAULT_ADMIN_SETTINGS: AdminSettings = {
 	allowStatistics: true,
 	allowAliasDeletion: false,
 	maxAliasesPerUser: 0,
+	allowRegistrations: true,
 }

src/route-widgets/GlobalSettingsRoute/SettingsForm.tsx

@@ -79,6 +79,7 @@ export default function SettingsForm({settings, queryKey}: SettingsFormProps) {
 		allowStatistics: yup.boolean().label(t("fields.allowStatistics.label")),
 		allowAliasDeletion: yup.boolean().label(t("fields.allowAliasDeletion.label")),
 		maxAliasesPerUser: yup.number().label(t("fields.maxAliasesPerUser.label")).min(0),
+		allowRegistrations: yup.boolean().label(t("fields.allowRegistrations.label")),
 	} as Record<keyof AdminSettings, any>)
 
 	const {mutateAsync} = useMutation<
@@ -520,6 +521,31 @@ export default function SettingsForm({settings, queryKey}: SettingsFormProps) {
 								</FormHelperText>
 							</FormGroup>
 						</Grid>
+						<Grid item xs={12}>
+							<FormGroup key="allow_registrations">
+								<FormControlLabel
+									control={
+										<Checkbox
+											checked={formik.values.allowRegistrations}
+											onChange={formik.handleChange}
+											name="allowRegistrations"
+										/>
+									}
+									disabled={formik.isSubmitting}
+									label={t("fields.allowRegistrations.label")}
+								/>
+								<FormHelperText
+									error={
+										formik.touched.allowRegistrations &&
+										Boolean(formik.errors.allowRegistrations)
+									}
+								>
+									{(formik.touched.allowRegistrations &&
+										formik.errors.allowRegistrations) ||
+										t("fields.allowRegistrations.description")}
+								</FormHelperText>
+							</FormGroup>
+						</Grid>
 					</Grid>
 				</Grid>
 				<Grid item>

src/route-widgets/SignupRoute/RegistrationsDisabled.tsx

@@ -0,0 +1,40 @@
+import {ReactElement} from "react"
+import {Link} from "react-router-dom"
+import {useTranslation} from "react-i18next"
+
+import {Box, Button, Grid, Paper, Typography} from "@mui/material"
+
+export default function RegistrationsDisabled(): ReactElement {
+	const {t} = useTranslation("signup")
+
+	return (
+		<Paper>
+			<Box maxWidth="sm">
+				<Grid
+					container
+					spacing={4}
+					padding={4}
+					alignItems="center"
+					justifyContent="center"
+					flexDirection="column"
+				>
+					<Grid item>
+						<Typography variant="h4" align="center">
+							{t("registrationsDisabled.title")}
+						</Typography>
+					</Grid>
+					<Grid item>
+						<Typography variant="body1" align="center">
+							{t("registrationsDisabled.description")}
+						</Typography>
+					</Grid>
+					<Grid item>
+						<Button component={Link} to="/auth/login" variant="contained">
+							{t("registrationsDisabled.login")}
+						</Button>
+					</Grid>
+				</Grid>
+			</Box>
+		</Paper>
+	)
+}

src/routes/SignupRoute.tsx

@@ -5,6 +5,7 @@ import {useLoaderData} from "react-router-dom"
 import {MultiStepForm} from "~/components"
 import {ServerSettings} from "~/server-types"
 import EmailForm from "~/route-widgets/SignupRoute/EmailForm"
+import RegistrationsDisabled from "~/route-widgets/SignupRoute/RegistrationsDisabled"
 import YouGotMail from "~/route-widgets/SignupRoute/YouGotMail"
 
 export default function SignupRoute(): ReactElement {
@@ -13,6 +14,10 @@ export default function SignupRoute(): ReactElement {
 
 	const index = email ? 1 : 0
 
+	if (!serverSettings.allowRegistrations) {
+		return <RegistrationsDisabled />
+	}
+
 	return (
 		<MultiStepForm
 			steps={[

src/server-types.ts

@@ -85,6 +85,7 @@ export interface ServerSettings {
 	publicKey: string
 	allowAliasDeletion: boolean
 	apiKeyMaxDays: number
+	allowRegistrations: boolean
 }
 
 export interface Alias {
@@ -241,6 +242,7 @@ export interface AdminSettings {
 	allowStatistics: boolean
 	allowAliasDeletion: boolean
 	maxAliasesPerUser: number
+	allowRegistrations: boolean
 }
 
 export interface ServerCronReport {