feat(frontend): hide everything email related if it's disabled on the backend

Foxnouns.Backend/Controllers/Authentication/AuthController.cs

@@ -39,10 +39,10 @@ public class AuthController(
                 + $"&prompt=none&state={state}"
                 + $"&redirect_uri={HttpUtility.UrlEncode($"{config.BaseUrl}/auth/callback/discord")}";
 
-        return Ok(new UrlsResponse(discord, null, null));
+        return Ok(new UrlsResponse(config.EmailAuth.Enabled, discord, null, null));
     }
 
-    private record UrlsResponse(string? Discord, string? Google, string? Tumblr);
+    private record UrlsResponse(bool EmailEnabled, string? Discord, string? Google, string? Tumblr);
 
     public record AuthResponse(
         UserRendererService.UserResponse User,

Foxnouns.Backend/Controllers/Authentication/EmailAuthController.cs

@@ -100,6 +100,8 @@ public class EmailAuthController(
         [FromBody] CompleteRegistrationRequest req
     )
     {
+        CheckRequirements();
+
         var email = await keyCacheService.GetKeyAsync($"email:{req.Ticket}");
         if (email == null)
             throw new ApiError.BadRequest("Unknown ticket", "ticket", req.Ticket);
@@ -185,6 +187,8 @@ public class EmailAuthController(
     [Authorize("*")]
     public async Task<IActionResult> AddEmailAddressAsync([FromBody] AddEmailAddressRequest req)
     {
+        CheckRequirements();
+
         var emails = await db
             .AuthMethods.Where(m => m.UserId == CurrentUser!.Id && m.AuthType == AuthType.Email)
             .ToListAsync();

Foxnouns.Frontend/app/lib/api/auth.ts

@@ -16,6 +16,7 @@ export type CallbackResponse = {
 };
 
 export type AuthUrls = {
+	email_enabled: boolean;
 	discord?: string;
 	google?: string;
 	tumblr?: string;

Foxnouns.Frontend/app/routes/auth.log-in/route.tsx

@@ -11,7 +11,7 @@ import {
 	useActionData,
 	useLoaderData,
 } from "@remix-run/react";
-import { Form, Button, ButtonGroup, ListGroup, Row, Col } from "react-bootstrap";
+import { Form, Button, ButtonGroup, ListGroup } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
 import i18n from "~/i18next.server";
 import serverRequest, { getToken, writeCookie } from "~/lib/request.server";
@@ -78,33 +78,36 @@ export default function LoginPage() {
 
 	return (
 		<>
-			<Row>
-				<Col md className="mb-4">
-					<h2>{t("log-in.form-title")}</h2>
-					{actionData?.error && <LoginError error={actionData.error} />}
-					<RemixForm action="/auth/log-in" method="POST">
-						<Form as="div">
-							<Form.Group className="mb-3" controlId="email">
-								<Form.Label>{t("log-in.email")}</Form.Label>
-								<Form.Control name="email" type="email" required />
-							</Form.Group>
-							<Form.Group className="mb-3" controlId="password">
-								<Form.Label>{t("log-in.password")}</Form.Label>
-								<Form.Control name="password" type="password" required />
-							</Form.Group>
+			<div className="row">
+				{!urls.email_enabled && <div className="col-lg-3"></div>}
+				{urls.email_enabled && (
+					<div className="col col-md mb-4">
+						<h2>{t("log-in.form-title")}</h2>
+						{actionData?.error && <LoginError error={actionData.error} />}
+						<RemixForm action="/auth/log-in" method="POST">
+							<Form as="div">
+								<Form.Group className="mb-3" controlId="email">
+									<Form.Label>{t("log-in.email")}</Form.Label>
+									<Form.Control name="email" type="email" required />
+								</Form.Group>
+								<Form.Group className="mb-3" controlId="password">
+									<Form.Label>{t("log-in.password")}</Form.Label>
+									<Form.Control name="password" type="password" required />
+								</Form.Group>
 
-							<ButtonGroup>
-								<Button variant="primary" type="submit">
-									{t("log-in.log-in-button")}
-								</Button>
-								<Button as="a" href="/auth/register" variant="secondary">
-									{t("log-in.register-with-email")}
-								</Button>
-							</ButtonGroup>
-						</Form>
-					</RemixForm>
-				</Col>
-				<Col md>
+								<ButtonGroup>
+									<Button variant="primary" type="submit">
+										{t("log-in.log-in-button")}
+									</Button>
+									<Button as="a" href="/auth/register" variant="secondary">
+										{t("log-in.register-with-email")}
+									</Button>
+								</ButtonGroup>
+							</Form>
+						</RemixForm>
+					</div>
+				)}
+				<div className="col col-md">
 					<h2>{t("log-in.3rd-party.title")}</h2>
 					<p>{t("log-in.3rd-party.desc")}</p>
 					<ListGroup>
@@ -124,8 +127,9 @@ export default function LoginPage() {
 							</ListGroup.Item>
 						)}
 					</ListGroup>
-				</Col>
-			</Row>
+				</div>
+				{!urls.email_enabled && <div className="col-lg-3"></div>}
+			</div>
 		</>
 	);
 }

Foxnouns.Frontend/app/routes/settings.auth/route.tsx

@@ -1,10 +1,12 @@
 import i18n from "~/i18next.server";
 import { LoaderFunctionArgs, MetaFunction } from "@remix-run/node";
-import { Link, useRouteLoaderData } from "@remix-run/react";
+import { Link, useLoaderData, useRouteLoaderData } from "@remix-run/react";
 import { Button, ListGroup } from "react-bootstrap";
 import { loader as settingsLoader } from "~/routes/settings/route";
 import { useTranslation } from "react-i18next";
 import { AuthMethod, MeUser } from "~/lib/api/user";
+import serverRequest from "~/lib/request.server";
+import { AuthUrls } from "~/lib/api/auth";
 
 export const meta: MetaFunction<typeof loader> = ({ data }) => {
 	return [{ title: `${data?.meta.title || "Authentication"} • pronouns.cc` }];
@@ -12,17 +14,16 @@ export const meta: MetaFunction<typeof loader> = ({ data }) => {
 
 export const loader = async ({ request }: LoaderFunctionArgs) => {
 	const t = await i18n.getFixedT(request);
-	return { meta: { title: t("settings.auth.title") } };
+	const urls = await serverRequest<AuthUrls>("POST", "/auth/urls", { isInternal: true });
+
+	return { urls, meta: { title: t("settings.auth.title") } };
 };
 
 export default function AuthSettings() {
+	const { urls } = useLoaderData<typeof loader>();
 	const { user } = useRouteLoaderData<typeof settingsLoader>("routes/settings")!;
 
-	return (
-		<div className="px-md-5">
-			<EmailSettings user={user} />
-		</div>
-	);
+	return <div className="px-md-5">{urls.email_enabled && <EmailSettings user={user} />}</div>;
 }
 
 function EmailSettings({ user }: { user: MeUser }) {