feat: Disable registrations, disable search when logged out

sussy-code · May 27, 2024 · 856f218 · 856f218
1 parent 52e2aef
commit 856f218
Show file tree

Hide file tree

Showing 25 changed files with 495 additions and 287 deletions.
diff --git a/Dockerfile b/Dockerfile
@@ -24,6 +24,8 @@ ARG DISALLOWED_IDS
 ARG CDN_REPLACEMENTS
 ARG TURNSTILE_KEY
 ARG ALLOW_AUTOPLAY="false"
+ARG DISABLE_LINK_BUTTONS="false"
+ARG DISABLE_FETCH_WITHOUT_LOGIN="false"
 
 ENV VITE_PWA_ENABLED=${PWA_ENABLED}
 ENV VITE_GA_ID=${GA_ID}
@@ -41,6 +43,8 @@ ENV VITE_DISALLOWED_IDS=${DISALLOWED_IDS}
 ENV VITE_CDN_REPLACEMENTS=${CDN_REPLACEMENTS}
 ENV VITE_TURNSTILE_KEY=${TURNSTILE_KEY}
 ENV VITE_ALLOW_AUTOPLAY=${ALLOW_AUTOPLAY}
+ENV VITE_DISABLE_LINK_BUTTONS=${DISABLE_LINK_BUTTONS}
+ENV VITE_DISABLE_FETCH_WITHOUT_LOGIN=${DISABLE_FETCH_WITHOUT_LOGIN}
 
 COPY . ./
 RUN pnpm run build

diff --git a/src/assets/css/index.css b/src/assets/css/index.css
@@ -31,7 +31,8 @@ body[data-no-select] {
   user-select: none;
 }
 
-html[data-no-scroll], html[data-no-scroll] body {
+html[data-no-scroll],
+html[data-no-scroll] body {
   overflow: hidden;
 }
 
@@ -79,6 +80,10 @@ html[data-no-scroll], html[data-no-scroll] body {
   min-height: 100dvh;
 }
 
+::-webkit-scrollbar {
+  display: none;
+}
+
 /*generated with Input range slider CSS style generator (version 20211225)
 https://toughengineer.github.io/demo/slider-styler*/
 :root {
@@ -228,6 +233,7 @@ input[type=range].styled-slider.slider-progress::-ms-fill-lower {
   /* Invert horizontal X offset on transform (Tailwind RTL plugin does the rest) */
   transform: translate(calc(var(--tw-translate-x) * -1), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important;
 }
+
 [dir="ltr"] .transform {
   /* default - otherwise it overwrites*/
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important;

diff --git a/src/assets/locales/en.json b/src/assets/locales/en.json
@@ -78,6 +78,10 @@
       "recaptchaFailed": "ReCaptcha validation failed",
       "register": "Create account",
       "title": "Confirm your passphrase"
+    },
+    "disabled": {
+      "title": "Account creation disabled",
+      "text": "Account creation has been disabled by the administrator. Please try again later."
     }
   },
   "errors": {
@@ -129,8 +133,10 @@
       "failed": "Failed to find media, try again!",
       "loading": "Loading...",
       "noResults": "We couldn't find anything :(",
+      "login": "Login",
       "placeholder": {
         "default": "What do you want to watch?",
+        "notAllowed": "You need to be logged in to search!",
         "extra": [
           "What are you in the mood for?",
           "Should we delete your browser history?",
@@ -212,6 +218,13 @@
     "message": "We looked everywhere: under the bins, in the closet, behind the proxy but ultimately couldn't find the page you are looking for. (ಥ﹏ಥ)",
     "title": "Couldn't find that page"
   },
+  "noPermissions": {
+    "badge": "Logged out",
+    "message": "You do not have permission to view this page. If you believe this is an error, please contact the administrator or try logging in.",
+    "title": "You are not logged in",
+    "goHome": "Go home",
+    "loginButton": "Login"
+  },
   "downtimeNotice": {
     "badge": "Issues",
     "goHome": "Go home",

diff --git a/src/backend/accounts/meta.ts b/src/backend/accounts/meta.ts
@@ -6,6 +6,7 @@ export interface MetaResponse {
   description?: string;
   hasCaptcha: boolean;
   captchaClientKey?: string;
+  registrationDisabled: boolean;
 }
 
 export async function getBackendMeta(url: string): Promise<MetaResponse> {

diff --git a/src/components/LinksDropdown.tsx b/src/components/LinksDropdown.tsx
@@ -90,7 +90,7 @@ export function LinksDropdown(props: { children: React.ReactNode }) {
     () => (seed ? base64ToBuffer(seed) : null),
     [seed],
   );
-  const { logout } = useAuth();
+  const { logout, loggedIn } = useAuth();
 
   useEffect(() => {
     function onWindowClick(evt: MouseEvent) {
@@ -142,9 +142,11 @@ export function LinksDropdown(props: { children: React.ReactNode }) {
           <DropdownLink href="/about" icon={Icons.CIRCLE_QUESTION}>
             {t("navigation.menu.about")}
           </DropdownLink>
-          <DropdownLink href="/discover" icon={Icons.RISING_STAR}>
-            {t("navigation.menu.discover")}
-          </DropdownLink>
+          {!loggedIn && conf().DISABLE_FETCH_WITHOUT_LOGIN ? null : (
+            <DropdownLink href="/discover" icon={Icons.RISING_STAR}>
+              {t("navigation.menu.discover")}
+            </DropdownLink>
+          )}
           {deviceName ? (
             <DropdownLink
               className="!text-type-danger opacity-75 hover:opacity-100"
@@ -154,19 +156,26 @@ export function LinksDropdown(props: { children: React.ReactNode }) {
               {t("navigation.menu.logout")}
             </DropdownLink>
           ) : null}
-          <Divider />
-          <div className="my-4 flex justify-center items-center gap-4">
-            <CircleDropdownLink
-              href={conf().DISCORD_LINK}
-              icon={Icons.DISCORD}
-            />
-            <CircleDropdownLink href={conf().GITHUB_LINK} icon={Icons.GITHUB} />
-            <CircleDropdownLink
-              href={conf().TWITTER_LINK}
-              icon={Icons.TWITTER}
-            />
-            <CircleDropdownLink href="/support" icon={Icons.MAIL} />
-          </div>
+          {conf().DISABLE_LINK_BUTTONS ? null : (
+            <>
+              <Divider />
+              <div className="my-4 flex justify-center items-center gap-4">
+                <CircleDropdownLink
+                  href={conf().DISCORD_LINK}
+                  icon={Icons.DISCORD}
+                />
+                <CircleDropdownLink
+                  href={conf().GITHUB_LINK}
+                  icon={Icons.GITHUB}
+                />
+                <CircleDropdownLink
+                  href={conf().TWITTER_LINK}
+                  icon={Icons.TWITTER}
+                />
+                <CircleDropdownLink href="/support" icon={Icons.MAIL} />
+              </div>
+            </>
+          )}
         </div>
       </Transition>
     </div>

diff --git a/src/components/form/SearchBar.tsx b/src/components/form/SearchBar.tsx
@@ -11,6 +11,7 @@ export interface SearchBarProps {
   onChange: (value: string, force: boolean) => void;
   onUnFocus: (newSearch?: string) => void;
   value: string;
+  disabled?: boolean;
 }
 
 export const SearchBarInput = forwardRef<HTMLInputElement, SearchBarProps>(
@@ -56,6 +57,7 @@ export const SearchBarInput = forwardRef<HTMLInputElement, SearchBarProps>(
             value={props.value}
             className="w-full flex-1 bg-transparent px-4 py-4 pl-12 text-search-text placeholder-search-placeholder focus:outline-none sm:py-4 sm:pr-2"
             placeholder={props.placeholder}
+            disabled={props.disabled}
           />
 
           {props.value.length > 0 && (

diff --git a/src/components/layout/Footer.tsx b/src/components/layout/Footer.tsx
@@ -75,15 +75,19 @@ export function Footer() {
           <p className="mt-3">{t("footer.legal.disclaimerText")}</p>
         </div>
         <div className="flex flex-wrap gap-[0.5rem] -ml-3">
-          <FooterLink icon={Icons.GITHUB} href={conf().GITHUB_LINK}>
-            {t("footer.links.github")}
-          </FooterLink>
-          <FooterLink icon={Icons.DISCORD} href={conf().DISCORD_LINK}>
-            {t("footer.links.discord")}
-          </FooterLink>
-          <FooterLink icon={Icons.TWITTER} href={conf().TWITTER_LINK}>
-            {t("footer.links.twitter")}
-          </FooterLink>
+          {conf().DISABLE_LINK_BUTTONS ? null : (
+            <>
+              <FooterLink icon={Icons.GITHUB} href={conf().GITHUB_LINK}>
+                {t("footer.links.github")}
+              </FooterLink>
+              <FooterLink icon={Icons.DISCORD} href={conf().DISCORD_LINK}>
+                {t("footer.links.discord")}
+              </FooterLink>
+              <FooterLink icon={Icons.TWITTER} href={conf().TWITTER_LINK}>
+                {t("footer.links.twitter")}
+              </FooterLink>
+            </>
+          )}
           <div className="inline md:hidden">
             <Dmca />
           </div>

diff --git a/src/components/layout/LargeCard.tsx b/src/components/layout/LargeCard.tsx
@@ -22,10 +22,16 @@ export function LargeCardText(props: {
   title: string;
   children?: React.ReactNode;
   icon?: React.ReactNode;
+  className?: string;
 }) {
   return (
-    <div className="flex flex-col items-center text-center mb-8">
-      <div className="flex flex-col items-center text-center max-w-[318px]">
+    <div
+      className={classNames(
+        "flex flex-col items-center text-center",
+        props.className || "mb-8",
+      )}
+    >
+      <div className="flex flex-col items-center text-center max-w-[458px]">
         {props.icon ? (
           <div className="text-2xl mb-4 text-largeCard-icon">{props.icon}</div>
         ) : null}
@@ -41,9 +47,10 @@ export function LargeCardText(props: {
 export function LargeCardButtons(props: {
   children: React.ReactNode;
   splitAlign?: boolean;
+  className?: string;
 }) {
   return (
-    <div className="mt-12">
+    <div className={props.className || "mt-12"}>
       <div
         className={classNames("mx-auto", {
           "flex flex-row-reverse justify-between items-center":

diff --git a/src/components/layout/Navigation.tsx b/src/components/layout/Navigation.tsx
@@ -87,29 +87,35 @@ export function Navigation(props: NavigationProps) {
               >
                 <BrandPill clickable header />
               </Link>
-              <a
-                href={conf().DISCORD_LINK}
-                target="_blank"
-                rel="noreferrer"
-                className="text-xl text-white tabbable rounded-full"
-              >
-                <IconPatch icon={Icons.DISCORD} clickable downsized />
-              </a>
-              <a
-                href={conf().GITHUB_LINK}
-                target="_blank"
-                rel="noreferrer"
-                className="text-xl text-white tabbable rounded-full"
-              >
-                <IconPatch icon={Icons.GITHUB} clickable downsized />
-              </a>
-              <a
-                onClick={() => navigate("/discover")}
-                rel="noreferrer"
-                className="text-xl text-white tabbable rounded-full"
-              >
-                <IconPatch icon={Icons.RISING_STAR} clickable downsized />
-              </a>
+              {conf().DISABLE_LINK_BUTTONS ? null : (
+                <>
+                  <a
+                    href={conf().DISCORD_LINK}
+                    target="_blank"
+                    rel="noreferrer"
+                    className="text-xl text-white tabbable rounded-full"
+                  >
+                    <IconPatch icon={Icons.DISCORD} clickable downsized />
+                  </a>
+                  <a
+                    href={conf().GITHUB_LINK}
+                    target="_blank"
+                    rel="noreferrer"
+                    className="text-xl text-white tabbable rounded-full"
+                  >
+                    <IconPatch icon={Icons.GITHUB} clickable downsized />
+                  </a>
+                </>
+              )}
+              {!loggedIn && conf().DISABLE_FETCH_WITHOUT_LOGIN ? null : (
+                <a
+                  onClick={() => navigate("/discover")}
+                  rel="noreferrer"
+                  className="text-xl text-white tabbable rounded-full"
+                >
+                  <IconPatch icon={Icons.RISING_STAR} clickable downsized />
+                </a>
+              )}
             </div>
             <div className="relative pointer-events-auto">
               <LinksDropdown>

diff --git a/src/pages/About.tsx b/src/pages/About.tsx
@@ -5,7 +5,9 @@ import { useNavigate } from "react-router-dom";
 import { ThinContainer } from "@/components/layout/ThinContainer";
 import { Ol } from "@/components/utils/Ol";
 import { Heading1, Heading2, Paragraph } from "@/components/utils/Text";
+import { useAuth } from "@/hooks/auth/useAuth";
 import { PageTitle } from "@/pages/parts/util/PageTitle";
+import { conf } from "@/setup/config";
 
 import { SubPageLayout } from "./layouts/SubPageLayout";
 
@@ -42,6 +44,7 @@ export function Button(props: {
 export function AboutPage() {
   const { t } = useTranslation();
   const navigate = useNavigate();
+  const { loggedIn } = useAuth();
 
   return (
     <SubPageLayout>
@@ -73,18 +76,22 @@ export function AboutPage() {
           style={{ display: "flex", justifyContent: "space-between" }}
           className="pt-2 w-full"
         >
-          <Button
-            className="py-px mt-8 box-content bg-buttons-secondary hover:bg-buttons-secondaryHover bg-opacity-90 text-buttons-secondaryText justify-center items-center"
-            onClick={() => navigate("/discover")}
-          >
-            Discover
-          </Button>
-          <Button
-            className="py-px mt-8 box-content bg-buttons-secondary hover:bg-buttons-secondaryHover bg-opacity-90 text-buttons-secondaryText justify-center items-center"
-            onClick={() => navigate("/support")}
-          >
-            Support
-          </Button>
+          {loggedIn && conf().DISABLE_FETCH_WITHOUT_LOGIN ? null : (
+            <Button
+              className="py-px mt-8 box-content bg-buttons-secondary hover:bg-buttons-secondaryHover bg-opacity-90 text-buttons-secondaryText justify-center items-center"
+              onClick={() => navigate("/discover")}
+            >
+              Discover
+            </Button>
+          )}
+          {conf().DISABLE_LINK_BUTTONS ? null : (
+            <Button
+              className="py-px mt-8 box-content bg-buttons-secondary hover:bg-buttons-secondaryHover bg-opacity-90 text-buttons-secondaryText justify-center items-center"
+              onClick={() => navigate("/support")}
+            >
+              Support
+            </Button>
+          )}
         </div>
       </ThinContainer>
     </SubPageLayout>

diff --git a/src/pages/DeveloperPage.tsx b/src/pages/DeveloperPage.tsx
@@ -2,8 +2,16 @@ import { Navigation } from "@/components/layout/Navigation";
 import { ThinContainer } from "@/components/layout/ThinContainer";
 import { ArrowLink } from "@/components/text/ArrowLink";
 import { Title } from "@/components/text/Title";
+import { useAuth } from "@/hooks/auth/useAuth";
+import { conf } from "@/setup/config";
+
+import { NoPermissions } from "./parts/errors/NoPermissions";
 
 export default function DeveloperPage() {
+  const { loggedIn } = useAuth();
+
+  if (!loggedIn && conf().DISABLE_FETCH_WITHOUT_LOGIN) return <NoPermissions />;
+
   return (
     <div className="py-48">
       <Navigation />