chore(backend): silence some more resharper errors

Foxnouns.Backend/Config.cs

@@ -1,4 +1,3 @@
-using System.Diagnostics.CodeAnalysis;
 using Serilog.Events;
 
 namespace Foxnouns.Backend;

Foxnouns.Backend/Controllers/Authentication/AuthController.cs

@@ -45,7 +45,7 @@ public class AuthController(Config config, KeyCacheService keyCache, ILogger log
     );
 
     public record CallbackResponse(
-        bool HasAccount, // If true, user has an account, but it's deleted
+        bool HasAccount,
         [property: JsonProperty(NullValueHandling = NullValueHandling.Ignore)]
         string? Ticket,
         [property: JsonProperty(NullValueHandling = NullValueHandling.Ignore)]

Foxnouns.Backend/Controllers/Authentication/DiscordAuthController.cs

@@ -3,6 +3,7 @@ using Foxnouns.Backend.Database.Models;
 using Foxnouns.Backend.Extensions;
 using Foxnouns.Backend.Services;
 using Foxnouns.Backend.Utils;
+using JetBrains.Annotations;
 using Microsoft.AspNetCore.Mvc;
 using Microsoft.EntityFrameworkCore;
 using NodaTime;
@@ -11,7 +12,7 @@ namespace Foxnouns.Backend.Controllers.Authentication;
 
 [Route("/api/v2/auth/discord")]
 public class DiscordAuthController(
-    Config config,
+    [UsedImplicitly] Config config,
     ILogger logger,
     IClock clock,
     DatabaseContext db,
@@ -26,7 +27,8 @@ public class DiscordAuthController(
     // TODO: duplicating attribute doesn't work, find another way to mark both as possible response
     // leaving it here for documentation purposes
     [ProducesResponseType<AuthController.CallbackResponse>(StatusCodes.Status200OK)]
-    public async Task<IActionResult> CallbackAsync([FromBody] AuthController.CallbackRequest req, CancellationToken ct = default)
+    public async Task<IActionResult> CallbackAsync([FromBody] AuthController.CallbackRequest req,
+        CancellationToken ct = default)
     {
         CheckRequirements();
         await keyCacheService.ValidateAuthStateAsync(req.State, ct);
@@ -53,24 +55,25 @@ public class DiscordAuthController(
 
     [HttpPost("register")]
     [ProducesResponseType<AuthController.AuthResponse>(StatusCodes.Status200OK)]
-    public async Task<IActionResult> RegisterAsync([FromBody] AuthController.OauthRegisterRequest req, CancellationToken ct = default)
+    public async Task<IActionResult> RegisterAsync([FromBody] AuthController.OauthRegisterRequest req)
     {
-        var remoteUser = await keyCacheService.GetKeyAsync<RemoteAuthService.RemoteUser>($"discord:{req.Ticket}",ct:ct);
+        var remoteUser = await keyCacheService.GetKeyAsync<RemoteAuthService.RemoteUser>($"discord:{req.Ticket}");
         if (remoteUser == null) throw new ApiError.BadRequest("Invalid ticket", "ticket", req.Ticket);
-        if (await db.AuthMethods.AnyAsync(a => a.AuthType == AuthType.Discord && a.RemoteId == remoteUser.Id, ct))
+        if (await db.AuthMethods.AnyAsync(a => a.AuthType == AuthType.Discord && a.RemoteId == remoteUser.Id))
         {
             _logger.Error("Discord user {Id} has valid ticket but is already linked to an existing account",
                 remoteUser.Id);
-            throw new FoxnounsError("Discord ticket was issued for user with existing link");
+            throw new ApiError.BadRequest("Invalid ticket", "ticket", req.Ticket);
         }
 
         var user = await authService.CreateUserWithRemoteAuthAsync(req.Username, AuthType.Discord, remoteUser.Id,
-            remoteUser.Username, ct: ct);
+            remoteUser.Username);
 
-        return Ok(await GenerateUserTokenAsync(user, ct));
+        return Ok(await GenerateUserTokenAsync(user));
     }
 
-    private async Task<AuthController.CallbackResponse> GenerateUserTokenAsync(User user, CancellationToken ct = default)
+    private async Task<AuthController.CallbackResponse> GenerateUserTokenAsync(User user,
+        CancellationToken ct = default)
     {
         var frontendApp = await db.GetFrontendApplicationAsync(ct);
         _logger.Debug("Logging user {Id} in with Discord", user.Id);

Foxnouns.Backend/Controllers/Authentication/EmailAuthController.cs

@@ -3,6 +3,7 @@ using Foxnouns.Backend.Database.Models;
 using Foxnouns.Backend.Extensions;
 using Foxnouns.Backend.Services;
 using Foxnouns.Backend.Utils;
+using JetBrains.Annotations;
 using Microsoft.AspNetCore.Mvc;
 using Microsoft.EntityFrameworkCore;
 using NodaTime;
@@ -11,8 +12,8 @@ namespace Foxnouns.Backend.Controllers.Authentication;
 
 [Route("/api/v2/auth/email")]
 public class EmailAuthController(
+    [UsedImplicitly] Config config,
     DatabaseContext db,
-    Config config,
     AuthService authService,
     MailService mailService,
     KeyCacheService keyCacheService,

Foxnouns.Backend/Controllers/InternalController.cs

@@ -17,7 +17,7 @@ public partial class InternalController(DatabaseContext db) : ControllerBase
 
     private static string GetCleanedTemplate(string template)
     {
-        if (template.StartsWith("api/v2")) template = template.Substring("api/v2".Length);
+        if (template.StartsWith("api/v2")) template = template["api/v2".Length..];
         template = PathVarRegex()
             .Replace(template, "{id}") // Replace all path variables (almost always IDs) with `{id}`
             .Replace("@me", "{id}"); // Also replace hardcoded `@me` with `{id}`
@@ -50,7 +50,7 @@ public partial class InternalController(DatabaseContext db) : ControllerBase
         Snowflake? UserId,
         string Template);
 
-    private static Endpoint? GetEndpoint(HttpContext httpContext, string url, string requestMethod)
+    private static RouteEndpoint? GetEndpoint(HttpContext httpContext, string url, string requestMethod)
     {
         var endpointDataSource = httpContext.RequestServices.GetService<EndpointDataSource>();
         if (endpointDataSource == null) return null;
@@ -60,7 +60,7 @@ public partial class InternalController(DatabaseContext db) : ControllerBase
         {
             if (endpoint.RoutePattern.RawText == null) continue;
 
-            var templateMatcher = new TemplateMatcher(TemplateParser.Parse(endpoint.RoutePattern.RawText), new());
+            var templateMatcher = new TemplateMatcher(TemplateParser.Parse(endpoint.RoutePattern.RawText), new RouteValueDictionary());
             if (!templateMatcher.TryMatch(url, new())) continue;
             var httpMethodAttribute = endpoint.Metadata.GetMetadata<HttpMethodAttribute>();
             if (httpMethodAttribute != null &&

Foxnouns.Backend/Controllers/MembersController.cs

@@ -88,19 +88,17 @@ public class MembersController(
 
     [HttpDelete("/api/v2/users/@me/members/{memberRef}")]
     [Authorize("member.update")]
-    public async Task<IActionResult> DeleteMemberAsync(string memberRef, CancellationToken ct = default)
+    public async Task<IActionResult> DeleteMemberAsync(string memberRef)
     {
-        var member = await db.ResolveMemberAsync(CurrentUser!.Id, memberRef, ct);
+        var member = await db.ResolveMemberAsync(CurrentUser!.Id, memberRef);
         var deleteCount = await db.Members.Where(m => m.UserId == CurrentUser!.Id && m.Id == member.Id)
-            .ExecuteDeleteAsync(ct);
+            .ExecuteDeleteAsync();
         if (deleteCount == 0)
         {
             _logger.Warning("Successfully resolved member {Id} but could not delete them", member.Id);
             return NoContent();
         }
 
-        await db.SaveChangesAsync(ct);
-
         if (member.Avatar != null) await objectStorageService.DeleteMemberAvatarAsync(member.Id, member.Avatar);
         return NoContent();
     }

Foxnouns.Backend/Database/DatabaseQueryExtensions.cs

@@ -1,7 +1,6 @@
 using System.Security.Cryptography;
 using Foxnouns.Backend.Database.Models;
 using Foxnouns.Backend.Utils;
-using Microsoft.AspNetCore.Mvc.Formatters;
 using Microsoft.EntityFrameworkCore;
 using NodaTime;
 
@@ -95,7 +94,7 @@ public static class DatabaseQueryExtensions
         {
             Id = new Snowflake(0),
             ClientId = RandomNumberGenerator.GetHexString(32, true),
-            ClientSecret = AuthUtils.RandomToken(48),
+            ClientSecret = AuthUtils.RandomToken(),
             Name = "pronouns.cc",
             Scopes = ["*"],
             RedirectUris = [],

Foxnouns.Backend/Database/Models/Application.cs

@@ -9,7 +9,7 @@ public class Application : BaseModel
     public required string ClientSecret { get; init; }
     public required string Name { get; init; }
     public required string[] Scopes { get; init; }
-    public required string[] RedirectUris { get; set; }
+    public required string[] RedirectUris { get; init; }
 
     public static Application Create(ISnowflakeGenerator snowflakeGenerator, string name, string[] scopes,
         string[] redirectUrls)

Foxnouns.Backend/ExpectedError.cs

@@ -1,6 +1,4 @@
-using System.Collections.ObjectModel;
 using System.Net;
-using Foxnouns.Backend.Middleware;
 using Microsoft.AspNetCore.Mvc.ModelBinding;
 using Newtonsoft.Json;
 using Newtonsoft.Json.Linq;
@@ -51,7 +49,7 @@ public class ApiError(string message, HttpStatusCode? statusCode = null, ErrorCo
             {
                 { "status", (int)HttpStatusCode.BadRequest },
                 { "message", Message },
-                { "code", ErrorCode.BadRequest.ToString() }
+                { "code", "BAD_REQUEST" }
             };
             if (errors == null) return o;
 
@@ -84,7 +82,7 @@ public class ApiError(string message, HttpStatusCode? statusCode = null, ErrorCo
             {
                 { "status", (int)HttpStatusCode.BadRequest },
                 { "message", Message },
-                { "code", ErrorCode.BadRequest.ToString() }
+                { "code", "BAD_REQUEST" }
             };
             if (modelState == null) return o;
 

Foxnouns.Backend/Foxnouns.Backend.csproj

@@ -10,6 +10,7 @@
         <PackageReference Include="Coravel.Mailer" Version="5.0.1" />
         <PackageReference Include="EFCore.NamingConventions" Version="8.0.3" />
         <PackageReference Include="EntityFrameworkCore.Exceptions.PostgreSQL" Version="8.1.2" />
+        <PackageReference Include="JetBrains.Annotations" Version="2024.2.0" />
         <PackageReference Include="Microsoft.AspNetCore.Mvc.NewtonsoftJson" Version="8.0.7" />
         <PackageReference Include="Microsoft.AspNetCore.OpenApi" Version="8.0.7" />
         <PackageReference Include="Microsoft.EntityFrameworkCore" Version="8.0.7" />

Foxnouns.Backend/Middleware/ErrorHandlerMiddleware.cs

@@ -1,7 +1,6 @@
 using System.Net;
 using Foxnouns.Backend.Utils;
 using Newtonsoft.Json;
-using Newtonsoft.Json.Converters;
 
 namespace Foxnouns.Backend.Middleware;
 

Foxnouns.Backend/Services/AuthService.cs

@@ -74,6 +74,7 @@ public class AuthService(IClock clock, DatabaseContext db, ISnowflakeGenerator s
     /// </summary>
     /// <param name="email">The user's email address</param>
     /// <param name="password">The user's password, in plain text</param>
+    /// <param name="ct">Cancellation token</param>
     /// <returns>A tuple of the authenticated user and whether multi-factor authentication is required</returns>
     /// <exception cref="ApiError.NotFound">Thrown if the email address is not associated with any user
     /// or if the password is incorrect</exception>

Foxnouns.Backend/Services/KeyCacheService.cs

@@ -1,6 +1,5 @@
 using Foxnouns.Backend.Database;
 using Foxnouns.Backend.Database.Models;
-using Foxnouns.Backend.Utils;
 using Microsoft.EntityFrameworkCore;
 using Newtonsoft.Json;
 using NodaTime;

Foxnouns.Backend/Services/RemoteAuthService.cs

@@ -1,5 +1,5 @@
 using System.Diagnostics.CodeAnalysis;
-using System.Web;
+using JetBrains.Annotations;
 
 namespace Foxnouns.Backend.Services;
 
@@ -27,7 +27,8 @@ public class RemoteAuthService(Config config, ILogger logger)
         if (!resp.IsSuccessStatusCode)
         {
             var respBody = await resp.Content.ReadAsStringAsync(ct);
-            _logger.Error("Received error status {StatusCode} when exchanging OAuth token: {ErrorBody}", (int)resp.StatusCode, respBody);
+            _logger.Error("Received error status {StatusCode} when exchanging OAuth token: {ErrorBody}",
+                (int)resp.StatusCode, respBody);
             throw new FoxnounsError("Invalid Discord OAuth response");
         }
 
@@ -46,10 +47,14 @@ public class RemoteAuthService(Config config, ILogger logger)
         return new RemoteUser(user.id, user.username);
     }
 
-    [SuppressMessage("ReSharper", "InconsistentNaming")]
+    [SuppressMessage("ReSharper", "InconsistentNaming",
+        Justification = "Easier to use snake_case here, rather than passing in JSON converter options")]
+    [UsedImplicitly]
     private record DiscordTokenResponse(string access_token, string token_type);
 
-    [SuppressMessage("ReSharper", "InconsistentNaming")]
+    [SuppressMessage("ReSharper", "InconsistentNaming",
+        Justification = "Easier to use snake_case here, rather than passing in JSON converter options")]
+    [UsedImplicitly]
     private record DiscordUserResponse(string id, string username);
 
     public record RemoteUser(string Id, string Username);

Foxnouns.Frontend/app/components/ErrorAlert.tsx

@@ -1,7 +1,13 @@
 import { TFunction } from "i18next";
 import Alert from "react-bootstrap/Alert";
-import { useTranslation } from "react-i18next";
-import { ApiError, ErrorCode } from "~/lib/api/error";
+import { Trans, useTranslation } from "react-i18next";
+import {
+	ApiError,
+	ErrorCode,
+	ValidationError,
+	validationErrorType,
+	ValidationErrorType,
+} from "~/lib/api/error";
 
 export default function ErrorAlert({ error }: { error: ApiError }) {
 	const { t } = useTranslation();
@@ -10,10 +16,112 @@ export default function ErrorAlert({ error }: { error: ApiError }) {
 		<Alert variant="danger">
 			<Alert.Heading as="h4">{t("error.heading")}</Alert.Heading>
 			{errorCodeDesc(t, error.code)}
+			{error.errors && (
+				<ul>
+					{error.errors.map((e, i) => (
+						<ValidationErrors key={i} errorKey={e.key} errors={e.errors} />
+					))}
+				</ul>
+			)}
 		</Alert>
 	);
 }
 
+function ValidationErrors({ errorKey, errors }: { errorKey: string; errors: ValidationError[] }) {
+	return (
+		<li>
+			<strong>
+				<code>{errorKey}</code>
+			</strong>
+			:
+			<ul>
+				{errors.map((e, i) => (
+					<li key={i}>
+						<ValidationErrorEntry error={e} />
+					</li>
+				))}
+			</ul>
+		</li>
+	);
+}
+
+function ValidationErrorEntry({ error }: { error: ValidationError }) {
+	const { t } = useTranslation();
+
+	const {
+		min_length: minLength,
+		max_length: maxLength,
+		actual_length: actualLength,
+		message: reason,
+		actual_value: actualValue,
+		allowed_values: allowedValues,
+	} = error;
+
+	switch (validationErrorType(error)) {
+		case ValidationErrorType.LengthError:
+			if (error.actual_length! > error.max_length!) {
+				return (
+					<Trans
+						t={t}
+						i18nKey={"error.validation.too-long"}
+						values={{ maxLength: error.max_length!, actualLength: error.actual_length! }}
+					>
+						Value is too long, maximum length is {{ maxLength }}, current length is{" "}
+						{{ actualLength }}.
+					</Trans>
+				);
+			}
+
+			if (error.actual_length! < error.min_length!) {
+				return (
+					<Trans
+						t={t}
+						i18nKey={"error.validation.too-short"}
+						values={{ minLength: error.min_length!, actualLength: error.actual_length! }}
+					>
+						Value is too short, minimum length is {{ minLength }}, current length is{" "}
+						{{ actualLength }}.
+					</Trans>
+				);
+			}
+
+			break;
+
+		case ValidationErrorType.DisallowedValueError:
+			return (
+				<Trans
+					t={t}
+					i18nKey={"error.validation.disallowed-value"}
+					values={{
+						actualValue: error.actual_value!.toString(),
+						allowedValues: error.allowed_values!.map((v) => v.toString()).join(", "),
+					}}
+				>
+					{/* @ts-expect-error i18next handles interpolation */}
+					The value <code>{{ actualValue }}</code> is not allowed here. Allowed values are:{" "}
+					{/* @ts-expect-error i18next handles interpolation */}
+					<code>{{ allowedValues }}</code>
+				</Trans>
+			);
+
+		default:
+			if (error.actual_value) {
+				return (
+					<Trans
+						t={t}
+						i18nKey={"error.validation.generic"}
+						values={{ actualValue: error.actual_value!.toString(), reason: error.message }}
+					>
+						{/* @ts-expect-error i18next handles interpolation */}
+						The value <code>{{ actualValue }}</code> is not allowed here. Reason: {{ reason }}
+					</Trans>
+				);
+			}
+
+			return <>{t("error.validation.generic-no-value", { reason: error.message })}</>;
+	}
+}
+
 export const errorCodeDesc = (t: TFunction, code: ErrorCode) => {
 	switch (code) {
 		case ErrorCode.AuthenticationError:

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

@@ -3,7 +3,7 @@ export type ApiError = {
 	status: number;
 	message: string;
 	code: ErrorCode;
-	errors?: ValidationError[];
+	errors?: Array<{ key: string; errors: ValidationError[] }>;
 };
 
 export enum ErrorCode {
@@ -26,3 +26,31 @@ export type ValidationError = {
 	allowed_values?: any[];
 	actual_value?: any;
 };
+
+/**
+ * Returns the first error for the value `key` in `error`.
+ * @param error The error object to traverse.
+ * @param key The JSON key to find.
+ */
+export const firstErrorFor = (error: ApiError, key: string): ValidationError | undefined => {
+	if (!error.errors) return undefined;
+	const field = error.errors.find((e) => e.key == key);
+	if (!field?.errors) return undefined;
+	return field.errors.length != 0 ? field.errors[0] : undefined;
+};
+
+export enum ValidationErrorType {
+	LengthError = 0,
+	DisallowedValueError = 1,
+	GenericValidationError = 2,
+}
+
+export const validationErrorType = (error: ValidationError) => {
+	if (error.min_length && error.max_length && error.actual_length) {
+		return ValidationErrorType.LengthError;
+	}
+	if (error.allowed_values && error.actual_value) {
+		return ValidationErrorType.DisallowedValueError;
+	}
+	return ValidationErrorType.GenericValidationError;
+};

Foxnouns.Frontend/app/routes/auth.callback.discord/route.tsx

@@ -1,11 +1,23 @@
-import { json, LoaderFunctionArgs } from "@remix-run/node";
-import { type ApiError, ErrorCode } from "~/lib/api/error";
+import { ActionFunctionArgs, json, redirect, LoaderFunctionArgs } from "@remix-run/node";
+import { type ApiError, ErrorCode, firstErrorFor } from "~/lib/api/error";
 import serverRequest, { writeCookie } from "~/lib/request.server";
-import { CallbackResponse } from "~/lib/api/auth";
-import { Form as RemixForm, Link, useLoaderData } from "@remix-run/react";
+import { AuthResponse, CallbackResponse } from "~/lib/api/auth";
+import {
+	Form as RemixForm,
+	Link,
+	useActionData,
+	useLoaderData,
+	ShouldRevalidateFunction,
+} from "@remix-run/react";
 import { Trans, useTranslation } from "react-i18next";
 import Form from "react-bootstrap/Form";
 import Button from "react-bootstrap/Button";
+import ErrorAlert from "~/components/ErrorAlert";
+import Alert from "react-bootstrap/Alert";
+
+export const shouldRevalidate: ShouldRevalidateFunction = ({ actionResult }) => {
+	return !actionResult;
+};
 
 export const loader = async ({ request }: LoaderFunctionArgs) => {
 	const url = new URL(request.url);
@@ -17,7 +29,7 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
 		throw { status: 400, code: ErrorCode.BadRequest, message: "Missing code or state" } as ApiError;
 
 	const resp = await serverRequest<CallbackResponse>("POST", "/auth/discord/callback", {
-		body: { code, state }
+		body: { code, state },
 	});
 
 	if (resp.has_account) {
@@ -25,9 +37,9 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
 			{ hasAccount: true, user: resp.user!, ticket: null, remoteUser: null },
 			{
 				headers: {
-					"Set-Cookie": writeCookie("pronounscc-token", resp.token!)
-				}
-			}
+					"Set-Cookie": writeCookie("pronounscc-token", resp.token!),
+				},
+			},
 		);
 	}
 
@@ -35,15 +47,47 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
 		hasAccount: false,
 		user: null,
 		ticket: resp.ticket!,
-		remoteUser: resp.remote_username!
+		remoteUser: resp.remote_username!,
 	});
 };
 
-// TODO: action function
+export const action = async ({ request }: ActionFunctionArgs) => {
+	const data = await request.formData();
+	const username = data.get("username") as string | null;
+	const ticket = data.get("ticket") as string | null;
+
+	if (!username || !ticket)
+		return json({
+			error: {
+				status: 403,
+				code: ErrorCode.BadRequest,
+				message: "Invalid username or ticket",
+			} as ApiError,
+			user: null,
+		});
+
+	try {
+		const resp = await serverRequest<AuthResponse>("POST", "/auth/discord/register", {
+			body: { username, ticket },
+		});
+
+		return redirect("/auth/welcome", {
+			headers: {
+				"Set-Cookie": writeCookie("pronounscc-token", resp.token),
+			},
+			status: 303,
+		});
+	} catch (e) {
+		JSON.stringify(e);
+
+		return json({ error: e as ApiError });
+	}
+};
 
 export default function DiscordCallbackPage() {
 	const { t } = useTranslation();
 	const data = useLoaderData<typeof loader>();
+	const actionData = useActionData<typeof action>();
 
 	if (data.hasAccount) {
 		const username = data.user!.username;
@@ -52,7 +96,11 @@ export default function DiscordCallbackPage() {
 			<>
 				<h1>{t("log-in.callback.success")}</h1>
 				<p>
-					<Trans t={t} i18nKey={"log-in.callback.success-link"} values={{ username: data.user!.username }}>
+					<Trans
+						t={t}
+						i18nKey={"log-in.callback.success-link"}
+						values={{ username: data.user!.username }}
+					>
 						{/* @ts-expect-error react-i18next handles interpolation here */}
 						Welcome back, <Link to={`/@${data.user!.username}`}>@{{ username }}</Link>!
 					</Trans>
@@ -66,6 +114,7 @@ export default function DiscordCallbackPage() {
 	return (
 		<RemixForm method="POST">
 			<Form as="div">
+				{actionData?.error && <RegisterError error={actionData.error} />}
 				<Form.Group className="mb-3" controlId="remote-username">
 					<Form.Label>{t("log-in.callback.remote-username.discord")}</Form.Label>
 					<Form.Control type="text" readOnly={true} value={data.remoteUser!} />
@@ -82,3 +131,34 @@ export default function DiscordCallbackPage() {
 		</RemixForm>
 	);
 }
+
+function RegisterError({ error }: { error: ApiError }) {
+	const { t } = useTranslation();
+
+	// TODO: maybe turn these messages into their own error codes?
+	const ticketMessage = firstErrorFor(error, "ticket")?.message;
+	const usernameMessage = firstErrorFor(error, "username")?.message;
+
+	if (ticketMessage === "Invalid ticket") {
+		return (
+			<Alert variant="danger">
+				<Alert.Heading as="h4">{t("error.heading")}</Alert.Heading>
+				<Trans t={t} i18nKey={"log-in.callback.invalid-ticket"}>
+					Invalid ticket (it might have been too long since you logged in with Discord), please{" "}
+					<Link to="/auth/log-in">try again</Link>.
+				</Trans>
+			</Alert>
+		);
+	}
+
+	if (usernameMessage === "Username is already taken") {
+		return (
+			<Alert variant="danger">
+				<Alert.Heading as="h4">{t("log-in.callback.invalid-username")}</Alert.Heading>
+				{t("log-in.callback.username-taken")}
+			</Alert>
+		);
+	}
+
+	return <ErrorAlert error={error} />;
+}

Foxnouns.Frontend/public/locales/en.json

@@ -1,6 +1,13 @@
 {
   "error": {
     "heading": "An error occurred",
+    "validation": {
+      "too-long": "Value is too long, maximum length is {{maxLength}}, current length is {{actualLength}}.",
+      "too-short": "Value is too short, minimum length is {{minLength}}, current length is {{actualLength}}.",
+      "disallowed-value": "The value <1>{{actualValue}}</1> is not allowed here. Allowed values are: <4>{{allowedValues}}</4>",
+      "generic": "The value <1>{{actualValue}}</1> is not allowed here. Reason: {{reason}}",
+      "generic-no-value": "The value you entered is not allowed here. Reason: {{reason}}"
+    },
     "errors": {
       "authentication-error": "There was an error validating your credentials.",
       "authentication-required": "You need to log in.",
@@ -32,7 +39,10 @@
         "discord": "Your discord username"
       },
       "username": "Username",
-			"sign-up-button": "Sign up"
+      "sign-up-button": "Sign up",
+      "invalid-ticket": "Invalid ticket (it might have been too long since you logged in with Discord), please <2>try again</2>.",
+      "invalid-username": "Invalid username",
+      "username-taken": "That username is already taken, please try something else."
     },
     "title": "Log in",
     "form-title": "Log in with email",