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

This commit is contained in:
sam 2024-10-02 21:05:52 +02:00
parent 40da4865bc
commit 567e794154
Signed by: sam
GPG key ID: B4EF20DDE721CAA1
5 changed files with 48 additions and 38 deletions

View file

@ -39,10 +39,10 @@ public class AuthController(
+ $"&prompt=none&state={state}" + $"&prompt=none&state={state}"
+ $"&redirect_uri={HttpUtility.UrlEncode($"{config.BaseUrl}/auth/callback/discord")}"; + $"&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( public record AuthResponse(
UserRendererService.UserResponse User, UserRendererService.UserResponse User,

View file

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

View file

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

View file

@ -11,7 +11,7 @@ import {
useActionData, useActionData,
useLoaderData, useLoaderData,
} from "@remix-run/react"; } 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 { useTranslation } from "react-i18next";
import i18n from "~/i18next.server"; import i18n from "~/i18next.server";
import serverRequest, { getToken, writeCookie } from "~/lib/request.server"; import serverRequest, { getToken, writeCookie } from "~/lib/request.server";
@ -78,8 +78,10 @@ export default function LoginPage() {
return ( return (
<> <>
<Row> <div className="row">
<Col md className="mb-4"> {!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> <h2>{t("log-in.form-title")}</h2>
{actionData?.error && <LoginError error={actionData.error} />} {actionData?.error && <LoginError error={actionData.error} />}
<RemixForm action="/auth/log-in" method="POST"> <RemixForm action="/auth/log-in" method="POST">
@ -103,8 +105,9 @@ export default function LoginPage() {
</ButtonGroup> </ButtonGroup>
</Form> </Form>
</RemixForm> </RemixForm>
</Col> </div>
<Col md> )}
<div className="col col-md">
<h2>{t("log-in.3rd-party.title")}</h2> <h2>{t("log-in.3rd-party.title")}</h2>
<p>{t("log-in.3rd-party.desc")}</p> <p>{t("log-in.3rd-party.desc")}</p>
<ListGroup> <ListGroup>
@ -124,8 +127,9 @@ export default function LoginPage() {
</ListGroup.Item> </ListGroup.Item>
)} )}
</ListGroup> </ListGroup>
</Col> </div>
</Row> {!urls.email_enabled && <div className="col-lg-3"></div>}
</div>
</> </>
); );
} }

View file

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