Merge branch 'main' into rate-limiting-tab

.babelrc

@@ -10,11 +10,11 @@
         }
       }
     ],
-    ["@babel/typescript", {"isTSX": true, "allExtensions": true}]
+    ["@babel/typescript", { "isTSX": true, "allExtensions": true }]
   ],
   "plugins": [
     "@babel/plugin-transform-runtime",
-    ["babel-plugin-inferno", { "imports": true }], 
+    ["babel-plugin-inferno", { "imports": true }],
-    ["@babel/plugin-proposal-class-properties", { "loose": true }],
+    ["@babel/plugin-proposal-class-properties", { "loose": true }]
   ]
 }

.eslintignore

@@ -1,3 +1,7 @@
 generate_translations.js
 webpack.config.js
 src/api_tests
+**/*.png
+**/*.css
+**/*.scss
+**/*.svg

.eslintrc.json

@@ -3,9 +3,7 @@
   "env": {
     "browser": true
   },
-  "plugins": [
+  "plugins": ["@typescript-eslint"],
-    "@typescript-eslint"
-  ],
   "extends": [
     "eslint:recommended",
     "plugin:@typescript-eslint/recommended",

.github/ISSUE_TEMPLATE/BUG_REPORT.md

@@ -1,10 +1,9 @@
 ---
 name: "\U0001F41E Bug Report"
 about: Create a report to help us improve Lemmy
-title: ''
+title: ""
 labels: bug
-assignees: ''
+assignees: ""
-
 ---
 
 Found a bug? Please fill out the sections below. 👍
@@ -15,7 +14,6 @@ For backend issues, use [lemmy](https://github.com/LemmyNet/lemmy)
 
 A summary of the bug.
 
-
 ### Steps to Reproduce
 
 1. (for example) I clicked login, and an endless spinner show up.
@@ -24,6 +22,6 @@ A summary of the bug.
 
 ### Technical details
 
-* Please post your log: `sudo docker-compose logs > lemmy_log.out`.
+- Please post your log: `sudo docker-compose logs > lemmy_log.out`.
-* What OS are you trying to install lemmy on? 
+- What OS are you trying to install lemmy on?
-* Any browser console errors?
+- Any browser console errors?

.github/ISSUE_TEMPLATE/FEATURE_REQUEST.md

@@ -1,10 +1,9 @@
 ---
 name: "\U0001F680 Feature request"
 about: Suggest an idea for improving Lemmy
-title: ''
+title: ""
 labels: enhancement
-assignees: ''
+assignees: ""
-
 ---
 
 For backend issues, use [lemmy](https://github.com/LemmyNet/lemmy)

.github/ISSUE_TEMPLATE/QUESTION.md

@@ -1,10 +1,9 @@
 ---
 name: "? Question"
 about: General questions about Lemmy
-title: ''
+title: ""
 labels: question
-assignees: ''
+assignees: ""
-
 ---
 
 What's the question you have about lemmy?

.github/ISSUE_TEMPLATE/hexbear.md

@@ -1,10 +1,9 @@
 ---
 name: Hexbear
 about: For hexbear issues
-title: ''
+title: ""
 labels: hexbear
-assignees: ''
+assignees: ""
-
 ---
 
 For hexbear-related issues

.prettierignore

@@ -1 +1,2 @@
-src/shared/translations
+src/shared/translations
+lemmy-translations

.woodpecker.yml

@@ -69,7 +69,7 @@ pipeline:
 
   publish_release_docker_manifest:
     image: plugins/manifest
-    settings: 
+    settings:
       username:
         from_secret: docker_username
       password:
@@ -85,7 +85,7 @@ pipeline:
 
   publish_latest_release_docker_manifest:
     image: plugins/manifest
-    settings: 
+    settings:
       username:
         from_secret: docker_username
       password:

README.md

@@ -1,21 +1,21 @@
-# lemmy-ui
+# lemmy-ui
-
+
-The official web app for [Lemmy](https://github.com/LemmyNet/lemmy), written in inferno.
+The official web app for [Lemmy](https://github.com/LemmyNet/lemmy), written in inferno.
-
+
-Based off of MrFoxPro's [inferno-isomorphic-template](https://github.com/MrFoxPro/inferno-isomorphic-template).
+Based off of MrFoxPro's [inferno-isomorphic-template](https://github.com/MrFoxPro/inferno-isomorphic-template).
-
+
-## Configuration
+## Configuration
-
+
-The following environment variables can be used to configure lemmy-ui:
+The following environment variables can be used to configure lemmy-ui:
-
+
-`ENV_VAR` | type | default | description
+| `ENV_VAR`                      | type     | default          | description                                                                         |
---- | --- | --- | ---
+| ------------------------------ | -------- | ---------------- | ----------------------------------------------------------------------------------- |
-`LEMMY_UI_HOST` | `string` | `0.0.0.0:1234` | The IP / port that the lemmy-ui isomorphic node server is hosted at.
+| `LEMMY_UI_HOST`                | `string` | `0.0.0.0:1234`   | The IP / port that the lemmy-ui isomorphic node server is hosted at.                |
-`LEMMY_UI_LEMMY_INTERNAL_HOST` | `string` | `0.0.0.0:8536` | The internal IP / port that lemmy is hosted at. Often `lemmy:8536` if using docker.
+| `LEMMY_UI_LEMMY_INTERNAL_HOST` | `string` | `0.0.0.0:8536`   | The internal IP / port that lemmy is hosted at. Often `lemmy:8536` if using docker. |
-`LEMMY_UI_LEMMY_EXTERNAL_HOST` | `string` | `0.0.0.0:8536` | The external IP / port that lemmy is hosted at. Often `DOMAIN.TLD`.
+| `LEMMY_UI_LEMMY_EXTERNAL_HOST` | `string` | `0.0.0.0:8536`   | The external IP / port that lemmy is hosted at. Often `DOMAIN.TLD`.                 |
-`LEMMY_UI_LEMMY_WS_HOST` | `string` | `0.0.0.0:8536` | An alternate location for lemmy's websocket address. Not usually necessary.
+| `LEMMY_UI_LEMMY_WS_HOST`       | `string` | `0.0.0.0:8536`   | An alternate location for lemmy's websocket address. Not usually necessary.         |
-`LEMMY_UI_HTTPS` | `bool` | `false` | Whether to use https.
+| `LEMMY_UI_HTTPS`               | `bool`   | `false`          | Whether to use https.                                                               |
-`LEMMY_UI_EXTRA_THEMES_FOLDER` | `string` | `./extra_themes` | A location for additional lemmy css themes.
+| `LEMMY_UI_EXTRA_THEMES_FOLDER` | `string` | `./extra_themes` | A location for additional lemmy css themes.                                         |
-`LEMMY_UI_DEBUG` | `bool` | `false` | Loads the [Eruda](https://github.com/liriliri/eruda) debugging utility.
+| `LEMMY_UI_DEBUG`               | `bool`   | `false`          | Loads the [Eruda](https://github.com/liriliri/eruda) debugging utility.             |
-`LEMMY_UI_DISABLE_CSP` | `bool` | `false` | Disables CSP security headers
+| `LEMMY_UI_DISABLE_CSP`         | `bool`   | `false`          | Disables CSP security headers                                                       |
-`LEMMY_UI_CUSTOM_HTML_HEADER` | `string` | | Injects a custom script into `<head>`.
+| `LEMMY_UI_CUSTOM_HTML_HEADER`  | `string` |                  | Injects a custom script into `<head>`.                                              |

package.json

@@ -12,7 +12,7 @@
     "build:prod": "webpack --mode=production",
     "clean": "yarn run rimraf dist",
     "dev": "yarn start",
-    "lint": "node generate_translations.js && tsc --noEmit && eslint --report-unused-disable-directives --ext .js,.ts,.tsx src && prettier --check \"src/**/*.{ts,tsx,js,css,scss}\"",
+    "lint": "node generate_translations.js && tsc --noEmit && eslint --report-unused-disable-directives --ext .js,.ts,.tsx \"src/**\" && prettier --check \"src/**/*.{ts,tsx,js,css,scss}\"",
     "prepare": "husky install",
     "start": "yarn build:dev --watch"
   },
@@ -61,6 +61,7 @@
     "isomorphic-cookie": "^1.2.4",
     "jwt-decode": "^3.1.2",
     "lemmy-js-client": "0.17.2-rc.17",
+    "lodash": "^4.17.21",
     "markdown-it": "^13.0.1",
     "markdown-it-container": "^3.0.0",
     "markdown-it-emoji": "^2.0.2",
@@ -77,6 +78,7 @@
     "sass": "^1.62.1",
     "sass-loader": "^13.2.2",
     "serialize-javascript": "^6.0.1",
+    "service-worker-webpack": "^1.0.0",
     "sharp": "^0.32.1",
     "tippy.js": "^6.3.7",
     "toastify-js": "^1.12.0",
@@ -89,6 +91,7 @@
   "devDependencies": {
     "@babel/core": "^7.21.8",
     "@types/autosize": "^4.0.0",
+    "@types/bootstrap": "^5.2.6",
     "@types/express": "^4.17.17",
     "@types/html-to-text": "^9.0.0",
     "@types/markdown-it": "^12.2.3",
@@ -111,7 +114,6 @@
     "prettier-plugin-organize-imports": "^3.2.2",
     "prettier-plugin-packagejson": "^2.4.3",
     "rimraf": "^5.0.0",
-    "service-worker-webpack": "^1.0.0",
     "sortpack": "^2.3.4",
     "style-loader": "^3.3.2",
     "terser": "^5.17.3",

src/assets/css/main.css

@@ -1,7 +1,3 @@
-.navbar-toggler {
-  border: 0px;
-}
-
 .navbar-expand-lg .navbar-nav .nav-link {
   padding-right: 0.75rem !important;
   padding-left: 0.75rem !important;
@@ -201,14 +197,6 @@
   }
 }
 
-.dropdown-content {
-  position: absolute;
-  background-color: var(--light);
-  min-width: 160px;
-  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
-  z-index: 2000;
-}
-
 blockquote {
   border-left: 2px solid var(--secondary);
   margin: 0.5em 5px;

src/client/index.tsx

@@ -3,6 +3,7 @@ import { BrowserRouter } from "inferno-router";
 import { App } from "../shared/components/app/app";
 import { initializeSite } from "../shared/utils";
 
+import "bootstrap/js/dist/collapse";
 import "bootstrap/js/dist/dropdown";
 
 const site = window.isoData.site_res;

src/server/index.tsx

@@ -16,10 +16,16 @@ import { getHttpBase, getHttpBaseInternal } from "../shared/env";
 import {
   ILemmyConfig,
   InitialFetchRequest,
-  IsoData,
+  IsoDataOptionalSite,
 } from "../shared/interfaces";
 import { routes } from "../shared/routes";
-import { favIconPngUrl, favIconUrl, initializeSite } from "../shared/utils";
+import {
+  ErrorPageData,
+  favIconPngUrl,
+  favIconUrl,
+  initializeSite,
+  isAuthPath,
+} from "../shared/utils";
 
 const server = express();
 const [hostname, port] = process.env["LEMMY_UI_HOST"]
@@ -70,6 +76,7 @@ server.get("/css/themes/:name", async (req, res) => {
   res.contentType("text/css");
   const theme = req.params.name;
   if (!theme.endsWith(".css")) {
+    res.statusCode = 400;
     res.send("Theme must be a css file");
   }
 
@@ -109,44 +116,58 @@ server.get("/css/themelist", async (_req, res) => {
 server.get("/*", async (req, res) => {
   try {
     const activeRoute = routes.find(route => matchPath(req.path, route));
-    const context = {} as any;
     let auth: string | undefined = IsomorphicCookie.load("jwt", req);
 
     const getSiteForm: GetSite = { auth };
 
-    const promises: Promise<any>[] = [];
-
     const headers = setForwardedHeaders(req.headers);
     const client = new LemmyHttp(getHttpBaseInternal(), headers);
 
+    const { path, url, query } = req;
+
     // Get site data first
     // This bypasses errors, so that the client can hit the error on its own,
     // in order to remove the jwt on the browser. Necessary for wrong jwts
-    let try_site: any = await client.getSite(getSiteForm);
+    let site: GetSiteResponse | undefined = undefined;
-    if (try_site.error == "not_logged_in") {
+    let routeData: any[] = [];
-      console.error(
+    let errorPageData: ErrorPageData | undefined;
-        "Incorrect JWT token, skipping auth so frontend can remove jwt cookie"
+    try {
-      );
+      let try_site: any = await client.getSite(getSiteForm);
-      getSiteForm.auth = undefined;
+      if (try_site.error == "not_logged_in") {
-      auth = undefined;
+        console.error(
-      try_site = await client.getSite(getSiteForm);
+          "Incorrect JWT token, skipping auth so frontend can remove jwt cookie"
+        );
+        getSiteForm.auth = undefined;
+        auth = undefined;
+        try_site = await client.getSite(getSiteForm);
+      }
+
+      if (!auth && isAuthPath(path)) {
+        res.redirect("/login");
+        return;
+      }
+
+      site = try_site;
+      initializeSite(site);
+
+      if (site) {
+        const initialFetchReq: InitialFetchRequest = {
+          client,
+          auth,
+          path,
+          query,
+          site,
+        };
+
+        if (activeRoute?.fetchInitialData) {
+          routeData = await Promise.all([
+            ...activeRoute.fetchInitialData(initialFetchReq),
+          ]);
+        }
+      }
+    } catch (error) {
+      errorPageData = getErrorPageData(error, site);
     }
-    const site: GetSiteResponse = try_site;
-    initializeSite(site);
-
-    const initialFetchReq: InitialFetchRequest = {
-      client,
-      auth,
-      path: req.path,
-      query: req.query,
-      site,
-    };
-
-    if (activeRoute?.fetchInitialData) {
-      promises.push(...activeRoute.fetchInitialData(initialFetchReq));
-    }
-
-    const routeData = await Promise.all(promises);
 
     // Redirect to the 404 if there's an API error
     if (routeData[0] && routeData[0].error) {
@@ -155,112 +176,33 @@ server.get("/*", async (req, res) => {
       if (error === "instance_is_private") {
         return res.redirect(`/signup`);
       } else {
-        return res.send(`404: ${removeAuthParam(error)}`);
+        errorPageData = getErrorPageData(error, site);
       }
     }
 
-    const isoData: IsoData = {
+    const isoData: IsoDataOptionalSite = {
-      path: req.path,
+      path,
       site_res: site,
       routeData,
+      errorPageData,
     };
 
     const wrapper = (
-      <StaticRouter location={req.url} context={isoData}>
+      <StaticRouter location={url} context={isoData}>
         <App />
       </StaticRouter>
     );
-    if (context.url) {
-      return res.redirect(context.url);
-    }
 
-    const eruda = (
-      <>
-        <script src="//cdn.jsdelivr.net/npm/eruda"></script>
-        <script>eruda.init();</script>
-      </>
-    );
-
-    const erudaStr = process.env["LEMMY_UI_DEBUG"] ? renderToString(eruda) : "";
     const root = renderToString(wrapper);
-    const helmet = Helmet.renderStatic();
 
-    const config: ILemmyConfig = { wsHost: process.env.LEMMY_UI_LEMMY_WS_HOST };
+    res.send(await createSsrHtml(root, isoData));
-
-    const appleTouchIcon = site.site_view.site.icon
-      ? `data:image/png;base64,${sharp(
-          await fetchIconPng(site.site_view.site.icon)
-        )
-          .resize(180, 180)
-          .extend({
-            bottom: 20,
-            top: 20,
-            left: 20,
-            right: 20,
-            background: "#222222",
-          })
-          .png()
-          .toBuffer()
-          .then(buf => buf.toString("base64"))}`
-      : favIconPngUrl;
-
-    res.send(`
-           <!DOCTYPE html>
-           <html ${helmet.htmlAttributes.toString()} lang="en">
-           <head>
-           <script>window.isoData = ${JSON.stringify(isoData)}</script>
-           <script>window.lemmyConfig = ${serialize(config)}</script>
-
-           <!-- A remote debugging utility for mobile -->
-           ${erudaStr}
-
-           <!-- Custom injected script -->
-           ${customHtmlHeader}
-
-           ${helmet.title.toString()}
-           ${helmet.meta.toString()}
-
-           <!-- Required meta tags -->
-           <meta name="Description" content="Lemmy">
-           <meta charset="utf-8">
-           <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-           <link
-              id="favicon"
-              rel="shortcut icon"
-              type="image/x-icon"
-              href=${site.site_view.site.icon ?? favIconUrl}
-            />
-
-           <!-- Web app manifest -->
-           <link rel="manifest" href="data:application/manifest+json;base64,${await generateManifestBase64(
-             site.site_view.site
-           )}">
-           <link rel="apple-touch-icon" href=${appleTouchIcon} />
-           <link rel="apple-touch-startup-image" href=${appleTouchIcon} />
-
-           <!-- Styles -->
-           <link rel="stylesheet" type="text/css" href="/static/styles/styles.css" />
-
-           <!-- Current theme and more -->
-           ${helmet.link.toString()}
-           
-           </head>
-
-           <body ${helmet.bodyAttributes.toString()}>
-             <noscript>
-               <div class="alert alert-danger rounded-0" role="alert">
-                 <b>Javascript is disabled. Actions will not work.</b>
-               </div>
-             </noscript>
-
-             <div id='root'>${root}</div>
-             <script defer src='/static/js/client.js'></script>
-           </body>
-         </html>
-`);
   } catch (err) {
+    // If an error is caught here, the error page couldn't even be rendered
     console.error(err);
-    return res.send(`404: ${removeAuthParam(err)}`);
+    res.statusCode = 500;
+    return res.send(
+      process.env.NODE_ENV === "development" ? err.message : "Server error"
+    );
   }
 });
 
@@ -292,16 +234,6 @@ process.on("SIGINT", () => {
   process.exit(0);
 });
 
-function removeAuthParam(err: any): string {
-  return removeParam(err.toString(), "auth");
-}
-
-function removeParam(url: string, parameter: string): string {
-  return url
-    .replace(new RegExp("[?&]" + parameter + "=[^&#]*(#.*)?$"), "$1")
-    .replace(new RegExp("([?&])" + parameter + "=[^&]*&"), "$1");
-}
-
 const iconSizes = [72, 96, 128, 144, 152, 192, 384, 512];
 const defaultLogoPathDirectory = path.join(
   process.cwd(),
@@ -356,8 +288,119 @@ export async function generateManifestBase64(site: Site) {
 
 async function fetchIconPng(iconUrl: string) {
   return await fetch(
-    iconUrl.replace(/https?:\/\/localhost:\d+/g, getHttpBaseInternal())
+    iconUrl.replace(/https?:\/\/[^\/]+/g, getHttpBaseInternal())
   )
     .then(res => res.blob())
     .then(blob => blob.arrayBuffer());
 }
+
+function getErrorPageData(error: Error, site?: GetSiteResponse) {
+  const errorPageData: ErrorPageData = {};
+
+  if (site) {
+    errorPageData.error = error.message;
+  }
+
+  const adminMatrixIds = site?.admins
+    .map(({ person: { matrix_user_id } }) => matrix_user_id)
+    .filter(id => id) as string[] | undefined;
+  if (adminMatrixIds && adminMatrixIds.length > 0) {
+    errorPageData.adminMatrixIds = adminMatrixIds;
+  }
+
+  return errorPageData;
+}
+
+async function createSsrHtml(root: string, isoData: IsoDataOptionalSite) {
+  const site = isoData.site_res;
+  const appleTouchIcon = site?.site_view.site.icon
+    ? `data:image/png;base64,${sharp(
+        await fetchIconPng(site.site_view.site.icon)
+      )
+        .resize(180, 180)
+        .extend({
+          bottom: 20,
+          top: 20,
+          left: 20,
+          right: 20,
+          background: "#222222",
+        })
+        .png()
+        .toBuffer()
+        .then(buf => buf.toString("base64"))}`
+    : favIconPngUrl;
+
+  const eruda = (
+    <>
+      <script src="//cdn.jsdelivr.net/npm/eruda"></script>
+      <script>eruda.init();</script>
+    </>
+  );
+
+  const erudaStr = process.env["LEMMY_UI_DEBUG"] ? renderToString(eruda) : "";
+
+  const helmet = Helmet.renderStatic();
+
+  const config: ILemmyConfig = { wsHost: process.env.LEMMY_UI_LEMMY_WS_HOST };
+
+  return `
+  <!DOCTYPE html>
+  <html ${helmet.htmlAttributes.toString()} lang="en">
+  <head>
+  <script>window.isoData = ${JSON.stringify(isoData)}</script>
+  <script>window.lemmyConfig = ${serialize(config)}</script>
+
+  <!-- A remote debugging utility for mobile -->
+  ${erudaStr}
+
+  <!-- Custom injected script -->
+  ${customHtmlHeader}
+
+  ${helmet.title.toString()}
+  ${helmet.meta.toString()}
+
+  <!-- Required meta tags -->
+  <meta name="Description" content="Lemmy">
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <link
+     id="favicon"
+     rel="shortcut icon"
+     type="image/x-icon"
+     href=${site?.site_view.site.icon ?? favIconUrl}
+   />
+
+  <!-- Web app manifest -->
+  ${
+    site &&
+    `<link
+        rel="manifest"
+        href={${`data:application/manifest+json;base64,${await generateManifestBase64(
+          site.site_view.site
+        )}`}}
+      />`
+  }
+  <link rel="apple-touch-icon" href=${appleTouchIcon} />
+  <link rel="apple-touch-startup-image" href=${appleTouchIcon} />
+
+  <!-- Styles -->
+  <link rel="stylesheet" type="text/css" href="/static/styles/styles.css" />
+
+  <!-- Current theme and more -->
+  ${helmet.link.toString()}
+  
+  </head>
+
+  <body ${helmet.bodyAttributes.toString()}>
+    <noscript>
+      <div class="alert alert-danger rounded-0" role="alert">
+        <b>Javascript is disabled. Actions will not work.</b>
+      </div>
+    </noscript>
+
+    <div id='root'>${root}</div>
+    <script defer src='/static/js/client.js'></script>
+  </body>
+</html>
+`;
+}

src/shared/components/app/app.tsx

@@ -1,36 +1,57 @@
 import { Component } from "inferno";
 import { Provider } from "inferno-i18next-dess";
 import { Route, Switch } from "inferno-router";
+import { IsoDataOptionalSite } from "shared/interfaces";
 import { i18n } from "../../i18next";
 import { routes } from "../../routes";
-import { setIsoData } from "../../utils";
+import { isAuthPath, setIsoData } from "../../utils";
+import AuthGuard from "../common/auth-guard";
+import ErrorGuard from "../common/error-guard";
+import { ErrorPage } from "./error-page";
 import { Footer } from "./footer";
 import { Navbar } from "./navbar";
-import { NoMatch } from "./no-match";
 import "./styles.scss";
 import { Theme } from "./theme";
 
 export class App extends Component<any, any> {
-  private isoData = setIsoData(this.context);
+  private isoData: IsoDataOptionalSite = setIsoData(this.context);
   constructor(props: any, context: any) {
     super(props, context);
   }
   render() {
-    let siteRes = this.isoData.site_res;
+    const siteRes = this.isoData.site_res;
-    let siteView = siteRes.site_view;
+    const siteView = siteRes?.site_view;
 
     return (
       <>
         <Provider i18next={i18n}>
           <div id="app">
-            <Theme defaultTheme={siteView.local_site.default_theme} />
+            {siteView && (
+              <Theme defaultTheme={siteView.local_site.default_theme} />
+            )}
             <Navbar siteRes={siteRes} />
             <div className="mt-4 p-0 fl-1">
               <Switch>
-                {routes.map(({ path, component }) => (
+                {routes.map(({ path, component: RouteComponent }) => (
-                  <Route key={path} path={path} exact component={component} />
+                  <Route
+                    key={path}
+                    path={path}
+                    exact
+                    component={routeProps => (
+                      <ErrorGuard>
+                        {RouteComponent &&
+                          (isAuthPath(path ?? "") ? (
+                            <AuthGuard>
+                              <RouteComponent {...routeProps} />
+                            </AuthGuard>
+                          ) : (
+                            <RouteComponent {...routeProps} />
+                          ))}
+                      </ErrorGuard>
+                    )}
+                  />
                 ))}
-                <Route component={NoMatch} />
+                <Route component={ErrorPage} />
               </Switch>
             </div>
             <Footer site={siteRes} />

src/shared/components/app/error-page.tsx

@@ -0,0 +1,69 @@
+import { Component } from "inferno";
+import { T } from "inferno-i18next-dess";
+import { Link } from "inferno-router";
+import { i18n } from "../../i18next";
+import { IsoDataOptionalSite } from "../../interfaces";
+import { setIsoData } from "../../utils";
+
+export class ErrorPage extends Component<any, any> {
+  private isoData: IsoDataOptionalSite = setIsoData(this.context);
+
+  constructor(props: any, context: any) {
+    super(props, context);
+  }
+
+  render() {
+    const { errorPageData } = this.isoData;
+
+    return (
+      <div className="container-lg text-center">
+        <h1>
+          {errorPageData
+            ? i18n.t("error_page_title")
+            : i18n.t("not_found_page_title")}
+        </h1>
+        {errorPageData ? (
+          <T i18nKey="error_page_paragraph" className="p-4" parent="p">
+            #<a href="https://lemmy.ml/c/lemmy_support">#</a>#
+            <a href="https://matrix.to/#/#lemmy-space:matrix.org">#</a>#
+          </T>
+        ) : (
+          <p>{i18n.t("not_found_page_message")}</p>
+        )}
+        {!errorPageData && (
+          <Link to="/" replace>
+            {i18n.t("not_found_return_home_button")}
+          </Link>
+        )}
+        {errorPageData?.adminMatrixIds &&
+          errorPageData.adminMatrixIds.length > 0 && (
+            <>
+              <div>
+                {i18n.t("error_page_admin_matrix", {
+                  instance:
+                    this.isoData.site_res?.site_view.site.name ??
+                    "this instance",
+                })}
+              </div>
+              <ul className="mx-auto mt-2" style={{ width: "fit-content" }}>
+                {errorPageData.adminMatrixIds.map(matrixId => (
+                  <li key={matrixId} className="text-info">
+                    {matrixId}
+                  </li>
+                ))}
+              </ul>
+            </>
+          )}
+        {errorPageData?.error && (
+          <T
+            i18nKey="error_code_message"
+            parent="p"
+            interpolation={{ error: errorPageData.error }}
+          >
+            #<strong className="text-danger">#</strong>#
+          </T>
+        )}
+      </div>
+    );
+  }
+}

src/shared/components/app/footer.tsx

@@ -6,7 +6,7 @@ import { docsUrl, joinLemmyUrl, repoUrl } from "../../utils";
 import { VERSION } from "../../version";
 
 interface FooterProps {
-  site: GetSiteResponse;
+  site?: GetSiteResponse;
 }
 
 export class Footer extends Component<FooterProps, any> {
@@ -19,27 +19,27 @@ export class Footer extends Component<FooterProps, any> {
       <nav className="container-lg navbar navbar-expand-md navbar-light navbar-bg p-3">
         <div className="navbar-collapse">
           <ul className="navbar-nav ml-auto">
-            {this.props.site.version !== VERSION && (
+            {this.props.site?.version !== VERSION && (
               <li className="nav-item">
                 <span className="nav-link">UI: {VERSION}</span>
               </li>
             )}
             <li className="nav-item">
-              <span className="nav-link">BE: {this.props.site.version}</span>
+              <span className="nav-link">BE: {this.props.site?.version}</span>
             </li>
             <li className="nav-item">
               <NavLink className="nav-link" to="/modlog">
                 {i18n.t("modlog")}
               </NavLink>
             </li>
-            {this.props.site.site_view.local_site.legal_information && (
+            {this.props.site?.site_view.local_site.legal_information && (
               <li className="nav-item">
                 <NavLink className="nav-link" to="/legal">
                   {i18n.t("legal_information")}
                 </NavLink>
               </li>
             )}
-            {this.props.site.site_view.local_site.federation_enabled && (
+            {this.props.site?.site_view.local_site.federation_enabled && (
               <li className="nav-item">
                 <NavLink className="nav-link" to="/instances">
                   {i18n.t("instances")}

src/shared/components/app/navbar.tsx

@@ -35,7 +35,7 @@ import { Icon } from "../common/icon";
 import { PictrsImage } from "../common/pictrs-image";
 
 interface NavbarProps {
-  siteRes: GetSiteResponse;
+  siteRes?: GetSiteResponse;
 }
 
 interface NavbarState {
@@ -119,7 +119,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
 
   // TODO class active corresponding to current page
   navbar() {
-    let siteView = this.props.siteRes.site_view;
+    let siteView = this.props.siteRes?.site_view;
     let person = UserService.Instance.myUserInfo?.local_user_view.person;
     return (
       <nav className="navbar navbar-expand-md navbar-light shadow-sm p-0 px-3">
@@ -127,13 +127,13 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
           <NavLink
             to="/"
             onMouseUp={linkEvent(this, this.handleHideExpandNavbar)}
-            title={siteView.site.description ?? siteView.site.name}
+            title={siteView?.site.description ?? siteView?.site.name ?? "Lemmy"}
             className="d-flex align-items-center navbar-brand mr-md-3"
           >
-            {siteView.site.icon && showAvatars() && (
+            {siteView?.site.icon && showAvatars() && (
               <PictrsImage src={siteView.site.icon} icon />
             )}
-            {siteView.site.name}
+            {siteView?.site.name ?? "Lemmy"}
           </NavLink>
           {UserService.Instance.myUserInfo && (
             <>
@@ -245,7 +245,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
                   {i18n.t("create_post")}
                 </NavLink>
               </li>
-              {canCreateCommunity(this.props.siteRes) && (
+              {this.props.siteRes && canCreateCommunity(this.props.siteRes) && (
                 <li className="nav-item">
                   <NavLink
                     to="/create_community"

src/shared/components/app/no-match.tsx

@@ -1,26 +0,0 @@
-import { NoOptionI18nKeys } from "i18next";
-import { Component } from "inferno";
-import { i18n } from "../../i18next";
-
-export class NoMatch extends Component<any, any> {
-  private errCode = new URLSearchParams(this.props.location.search).get(
-    "err"
-  ) as NoOptionI18nKeys;
-
-  constructor(props: any, context: any) {
-    super(props, context);
-  }
-
-  render() {
-    return (
-      <div className="container-lg">
-        <h1>404</h1>
-        {this.errCode && (
-          <h3>
-            {i18n.t("code")}: {i18n.t(this.errCode)}
-          </h3>
-        )}
-      </div>
-    );
-  }
-}

src/shared/components/comment/comment-node.tsx

@@ -42,6 +42,7 @@ import {
   colorList,
   commentTreeMaxDepth,
   futureDaysToUnixTime,
+  getCommentParentId,
   isAdmin,
   isBanned,
   isMod,
@@ -1051,11 +1052,14 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
       ? i18n.t("show_context")
       : i18n.t("link");
 
+    // The context button should show the parent comment by default
+    const parentCommentId = getCommentParentId(cv.comment) ?? cv.comment.id;
+
     return (
       <>
         <Link
           className={classnames}
-          to={`/comment/${cv.comment.id}`}
+          to={`/comment/${parentCommentId}`}
           title={title}
         >
           <Icon icon="link" classes="icon-inline" />

src/shared/components/common/auth-guard.tsx

@@ -0,0 +1,13 @@
+import { InfernoNode } from "inferno";
+import { Redirect } from "inferno-router";
+import { UserService } from "../../services";
+
+function AuthGuard(props: { children?: InfernoNode }) {
+  if (!UserService.Instance.myUserInfo) {
+    return <Redirect to="/login" />;
+  } else {
+    return props.children;
+  }
+}
+
+export default AuthGuard;

src/shared/components/common/error-guard.tsx

@@ -0,0 +1,24 @@
+import { Component } from "inferno";
+import { setIsoData } from "../../utils";
+import { ErrorPage } from "../app/error-page";
+
+class ErrorGuard extends Component<any, any> {
+  private isoData = setIsoData(this.context);
+
+  constructor(props: any, context: any) {
+    super(props, context);
+  }
+
+  render() {
+    const errorPageData = this.isoData.errorPageData;
+    const siteRes = this.isoData.site_res;
+
+    if (errorPageData || !siteRes) {
+      return <ErrorPage />;
+    } else {
+      return this.props.children;
+    }
+  }
+}
+
+export default ErrorGuard;

src/shared/components/community/create-community.tsx

@@ -1,9 +1,7 @@
 import { Component } from "inferno";
-import { Redirect } from "inferno-router";
 import { CommunityView, GetSiteResponse } from "lemmy-js-client";
 import { Subscription } from "rxjs";
 import { i18n } from "../../i18next";
-import { UserService } from "../../services/UserService";
 import {
   enableNsfw,
   isBrowser,
@@ -50,7 +48,6 @@ export class CreateCommunity extends Component<any, CreateCommunityState> {
   render() {
     return (
       <div className="container-lg">
-        {!UserService.Instance.myUserInfo && <Redirect to="/login" />}
         <HtmlTags
           title={this.documentTitle}
           path={this.context.router.route.match.url}

src/shared/components/person/inbox.tsx

@@ -111,11 +111,6 @@ export class Inbox extends Component<any, InboxState> {
     this.handleSortChange = this.handleSortChange.bind(this);
     this.handlePageChange = this.handlePageChange.bind(this);
 
-    if (!UserService.Instance.myUserInfo && isBrowser()) {
-      toast(i18n.t("not_logged_in"), "danger");
-      this.context.router.history.push(`/login`);
-    }
-
     this.parseMessage = this.parseMessage.bind(this);
     this.subscription = wsSubscribe(this.parseMessage);
 

src/shared/components/person/registration-applications.tsx

@@ -59,11 +59,6 @@ export class RegistrationApplications extends Component<
 
     this.handlePageChange = this.handlePageChange.bind(this);
 
-    if (!UserService.Instance.myUserInfo && isBrowser()) {
-      toast(i18n.t("not_logged_in"), "danger");
-      this.context.router.history.push(`/login`);
-    }
-
     this.parseMessage = this.parseMessage.bind(this);
     this.subscription = wsSubscribe(this.parseMessage);
 

src/shared/components/person/reports.tsx

@@ -96,11 +96,6 @@ export class Reports extends Component<any, ReportsState> {
 
     this.handlePageChange = this.handlePageChange.bind(this);
 
-    if (!UserService.Instance.myUserInfo && isBrowser()) {
-      toast(i18n.t("not_logged_in"), "danger");
-      this.context.router.history.push(`/login`);
-    }
-
     this.parseMessage = this.parseMessage.bind(this);
     this.subscription = wsSubscribe(this.parseMessage);
 

src/shared/components/person/settings.tsx

@@ -1216,9 +1216,6 @@ export class Settings extends Component<any, SettingsState> {
       toast(i18n.t(msg.error), "danger");
       return;
     } else if (op == UserOperation.SaveUserSettings) {
-      let data = wsJsonToRes<LoginResponse>(msg);
-      UserService.Instance.login(data);
-      location.reload();
       this.setState({ saveUserSettingsLoading: false });
       toast(i18n.t("saved"));
       window.scrollTo(0, 0);

src/shared/components/post/create-post.tsx

@@ -1,5 +1,4 @@
 import { Component } from "inferno";
-import { Redirect } from "inferno-router";
 import { RouteComponentProps } from "inferno-router/dist/Route";
 import {
   GetCommunity,
@@ -13,7 +12,7 @@ import {
 import { Subscription } from "rxjs";
 import { InitialFetchRequest, PostFormParams } from "shared/interfaces";
 import { i18n } from "../../i18next";
-import { UserService, WebSocketService } from "../../services";
+import { WebSocketService } from "../../services";
 import {
   Choice,
   QueryParams,
@@ -145,7 +144,6 @@ export class CreatePost extends Component<
 
     return (
       <div className="container-lg">
-        {!UserService.Instance.myUserInfo && <Redirect to="/login" />}
         <HtmlTags
           title={this.documentTitle}
           path={this.context.router.route.match.url}

src/shared/components/private_message/create-private-message.tsx

@@ -10,7 +10,7 @@ import {
 import { Subscription } from "rxjs";
 import { i18n } from "../../i18next";
 import { InitialFetchRequest } from "../../interfaces";
-import { UserService, WebSocketService } from "../../services";
+import { WebSocketService } from "../../services";
 import {
   getRecipientIdFromProps,
   isBrowser,
@@ -51,11 +51,6 @@ export class CreatePrivateMessage extends Component<
     this.parseMessage = this.parseMessage.bind(this);
     this.subscription = wsSubscribe(this.parseMessage);
 
-    if (!UserService.Instance.myUserInfo && isBrowser()) {
-      toast(i18n.t("not_logged_in"), "danger");
-      this.context.router.history.push(`/login`);
-    }
-
     // Only fetch the data if coming from another route
     if (this.isoData.path == this.context.router.route.match.url) {
       this.state = {

src/shared/interfaces.ts

@@ -1,5 +1,6 @@
 import { CommentView, GetSiteResponse, LemmyHttp } from "lemmy-js-client";
 import type { ParsedQs } from "qs";
+import { ErrorPageData } from "./utils";
 
 /**
  * This contains serialized data, it needs to be deserialized before use.
@@ -8,8 +9,12 @@ export interface IsoData {
   path: string;
   routeData: any[];
   site_res: GetSiteResponse;
+  errorPageData?: ErrorPageData;
 }
 
+export type IsoDataOptionalSite = Partial<IsoData> &
+  Pick<IsoData, Exclude<keyof IsoData, "site_res">>;
+
 export interface ILemmyConfig {
   wsHost?: string;
 }

src/shared/utils.ts

@@ -105,6 +105,11 @@ export type ThemeColor =
   | "gray"
   | "gray-dark";
 
+export interface ErrorPageData {
+  error?: string;
+  adminMatrixIds?: string[];
+}
+
 let customEmojis: EmojiMartCategory[] = [];
 export let customEmojisLookup: Map<string, CustomEmojiView> = new Map<
   string,
@@ -1260,16 +1265,7 @@ export function isBrowser() {
 export function setIsoData(context: any): IsoData {
   // If its the browser, you need to deserialize the data from the window
   if (isBrowser()) {
-    let json = window.isoData;
+    return window.isoData;
-    let routeData = json.routeData;
-    let site_res = json.site_res;
-
-    let isoData: IsoData = {
-      path: json.path,
-      site_res,
-      routeData,
-    };
-    return isoData;
   } else return context.router.staticContext;
 }
 
@@ -1391,10 +1387,12 @@ export function personSelectName({
   return local ? pName : `${hostname(actor_id)}/${pName}`;
 }
 
-export function initializeSite(site: GetSiteResponse) {
+export function initializeSite(site?: GetSiteResponse) {
-  UserService.Instance.myUserInfo = site.my_user;
+  UserService.Instance.myUserInfo = site?.my_user;
   i18n.changeLanguage(getLanguages()[0]);
-  setupEmojiDataModel(site.custom_emojis);
+  if (site) {
+    setupEmojiDataModel(site.custom_emojis);
+  }
   setupMarkdown();
 }
 

tsconfig.json

@@ -1,29 +1,28 @@
-{
+{
-	"compilerOptions": {
+  "compilerOptions": {
-		"pretty": true,
+    "pretty": true,
-		"target": "esnext",
+    "target": "esnext",
-		"module": "esnext",
+    "module": "esnext",
-		"allowSyntheticDefaultImports": true,
+    "allowSyntheticDefaultImports": true,
-		"preserveConstEnums": true,
+    "preserveConstEnums": true,
-		"sourceMap": true,
+    "sourceMap": true,
-		"moduleResolution": "node",
+    "moduleResolution": "node",
-		"lib": ["es2017", "dom"],
+    "lib": ["es2017", "dom"],
-		"types": [
+    "types": ["inferno"],
-			"inferno"
+    "jsx": "preserve",
-		],
+    "noUnusedLocals": true,
-		"jsx": "preserve",
+    "baseUrl": "./src",
-		"noUnusedLocals": true,
+    "noEmit": true,
-		"baseUrl": "./src",
+    "skipLibCheck": true,
-		"noEmit": true,
+    "noUnusedParameters": true,
-		"skipLibCheck": true,
+    "noImplicitReturns": true,
-		"noUnusedParameters": true,
+    "experimentalDecorators": true,
-		"noImplicitReturns": true,
+    "strictNullChecks": true,
-    "experimentalDecorators": true,
+    "noFallthroughCasesInSwitch": true
-    "strictNullChecks": true,
+  },
-    "noFallthroughCasesInSwitch": true
+  "include": [
-	},
+    "src/**/*.ts",
-	"include": [
+    "src/**/*.tsx",
-		"src/**/*",
+    "node_modules/inferno/dist/index.d.ts"
-		"node_modules/inferno/dist/index.d.ts"
+  ]
-	]
+}
-}

yarn.lock

@@ -1155,7 +1155,7 @@
     picocolors "^1.0.0"
     tslib "^2.5.0"
 
-"@popperjs/core@^2.9.0":
+"@popperjs/core@^2.9.0", "@popperjs/core@^2.9.2":
   version "2.11.7"
   resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.7.tgz#ccab5c8f7dc557a52ca3288c10075c9ccd37fff7"
   integrity sha512-Cr4OjIkipTtcXKjAsm8agyleBuDHvxzeBoa1v543lbv1YaIwQjESsVcmjiWiPEbC1FIeHOG/Op9kdCmAmiS3Kw==
@@ -1235,6 +1235,13 @@
   dependencies:
     "@types/node" "*"
 
+"@types/bootstrap@^5.2.6":
+  version "5.2.6"
+  resolved "https://registry.yarnpkg.com/@types/bootstrap/-/bootstrap-5.2.6.tgz#e861b3aa1f4a1434da0bf50fbaa372b6f7e64d2f"
+  integrity sha512-BlAc3YATdasbHoxMoBWODrSF6qwQO/E9X8wVxCCSa6rWjnaZfpkr2N6pUMCY6jj2+wf0muUtLySbvU9etX6YqA==
+  dependencies:
+    "@popperjs/core" "^2.9.2"
+
 "@types/connect-history-api-fallback@^1.3.5":
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/@types/connect-history-api-fallback/-/connect-history-api-fallback-1.5.0.tgz#9fd20b3974bdc2bcd4ac6567e2e0f6885cb2cf41"
@@ -5546,7 +5553,7 @@ lodash@^3.10.1:
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-3.10.1.tgz#5bf45e8e49ba4189e17d482789dfd15bd140b7b6"
   integrity sha512-9mDDwqVIma6OZX79ZlDACZl8sBm0TEnkf99zV3iMA4GzkIT/9hiqP5mY0HoT1iNLCrKc/R1HByV+yJfRWVJryQ==
 
-lodash@^4.17.20:
+lodash@^4.17.20, lodash@^4.17.21:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==