Make it possible to disable login

app/components/layout/UserItem.tsx

@@ -5,8 +5,10 @@ import { userPage } from "~/utils/urls";
 import { Avatar } from "../Avatar";
 import { LogInIcon } from "../icons/LogIn";
 import { LogInButtonContainer } from "./LogInButtonContainer";
+import { useRootLoaderData } from "~/hooks/useRootLoaderData";
 
 export function UserItem() {
+  const data = useRootLoaderData();
   const { t } = useTranslation();
   const user = useUser();
 
@@ -25,6 +27,10 @@ export function UserItem() {
     );
   }
 
+  if (data.loginDisabled) {
+    return false;
+  }
+
   return (
     <LogInButtonContainer>
       <button type="submit" className="layout__log-in-button">

app/hooks/useRootLoaderData.ts

@@ -0,0 +1,10 @@
+import { useMatches } from "@remix-run/react";
+import invariant from "tiny-invariant";
+import type { RootLoaderData } from "~/root";
+
+export function useRootLoaderData() {
+  const [root] = useMatches();
+  invariant(root);
+
+  return root.data as RootLoaderData;
+}

app/modules/auth/routes.server.ts

@@ -9,6 +9,7 @@ import {
 } from "./authenticator.server";
 import { authSessionStorage } from "./session.server";
 import { getUserId } from "./user.server";
+import { validate } from "~/utils/remix";
 
 const throwOnAuthErrors = process.env["THROW_ON_AUTH_ERROR"] === "true";
 
@@ -37,6 +38,11 @@ export const logOutAction: ActionFunction = async ({ request }) => {
 };
 
 export const logInAction: ActionFunction = async ({ request }) => {
+  validate(
+    process.env["LOGIN_DISABLED"] !== "true",
+    "Login is temporarily disabled"
+  );
+
   return authenticator.authenticate(DISCORD_AUTH_KEY, request);
 };
 

app/root.tsx

@@ -95,6 +95,7 @@ export interface RootLoaderData {
   >;
   publisherId?: string;
   websiteId?: string;
+  loginDisabled: boolean;
 }
 
 export const loader: LoaderFunction = async ({ request }) => {
@@ -112,6 +113,7 @@ export const loader: LoaderFunction = async ({ request }) => {
       baseUrl: process.env["BASE_URL"],
       publisherId: process.env["PLAYWIRE_PUBLISHER_ID"],
       websiteId: process.env["PLAYWIRE_WEBSITE_ID"],
+      loginDisabled: process.env["LOGIN_DISABLED"] === "true",
       user: user
         ? {
             discordName: user.discordName,

app/routes/index.tsx

@@ -27,12 +27,14 @@ import * as React from "react";
 import { ThemeChanger } from "~/components/layout/ThemeChanger";
 import { SelectedThemeIcon } from "~/components/layout/SelectedThemeIcon";
 import { useTheme } from "~/modules/theme";
+import { useRootLoaderData } from "~/hooks/useRootLoaderData";
 
 export const links: LinksFunction = () => {
   return [{ rel: "stylesheet", href: styles }];
 };
 
 export default function FrontPage() {
+  const data = useRootLoaderData();
   const { userTheme } = useTheme();
   const [filters, setFilters] = React.useState<[string, string]>(
     navItems[0]?.filters as [string, string]
@@ -46,6 +48,11 @@ export default function FrontPage() {
 
   return (
     <Main className="stack lg">
+      {data.loginDisabled && (
+        <div className="text-center text-warning text-xs">
+          Log-in is temporarily disabled due to problems with the Discord API
+        </div>
+      )}
       <div className="front__nav-items-container">
         <div className="front__nav-item round">
           <LanguageChanger plain>
@@ -64,30 +71,7 @@ export default function FrontPage() {
           </ThemeChanger>
           {t(`common:theme.${userTheme ?? "auto"}`)}
         </div>
-
-        {user ? (
-          <Link to={userPage(user)} className="front__nav-item round">
-            <Avatar
-              user={user}
-              alt={t("common:header.loggedInAs", {
-                userName: `${user.discordName}`,
-              })}
-              className="front__avatar"
-              size="sm"
-            />
-            {t("common:pages.myPage")}
-          </Link>
-        ) : (
-          <div className="front__nav-item round">
-            <LogInButtonContainer>
-              <button className="front__log-in-button">
-                <LogInIcon size={28} />
-              </button>
-            </LogInButtonContainer>
-            {t("common:header.login")}
-          </div>
-        )}
-
+        <LogInButton />
         {navItems.map((item) => (
           <Link
             to={item.url}
@@ -128,6 +112,41 @@ export default function FrontPage() {
   );
 }
 
+function LogInButton() {
+  const data = useRootLoaderData();
+  const { t } = useTranslation(["common"]);
+  const user = useUser();
+
+  if (user) {
+    return (
+      <Link to={userPage(user)} className="front__nav-item round">
+        <Avatar
+          user={user}
+          alt={t("common:header.loggedInAs", {
+            userName: `${user.discordName}`,
+          })}
+          className="front__avatar"
+          size="sm"
+        />
+        {t("common:pages.myPage")}
+      </Link>
+    );
+  }
+
+  if (data.loginDisabled) return null;
+
+  return (
+    <div className="front__nav-item round">
+      <LogInButtonContainer>
+        <button className="front__log-in-button">
+          <LogInIcon size={28} />
+        </button>
+      </LogInButtonContainer>
+      {t("common:header.login")}
+    </div>
+  );
+}
+
 function Drawings({
   filters,
 }: {