Require login

web/public/config.js

@@ -6,9 +6,10 @@
 // During web development, you may change values here for rapid testing.
 
 var config = {
-  base_url: window.location.origin, // Change to test against a different server
+  base_url: "http://localhost:8080", // window.location.origin, // Change to test against a different server
   app_root: "/",
   enable_login: true,
+  require_login: true,
   enable_signup: true,
   enable_payments: false,
   enable_reservations: true,

web/src/app/utils.js

@@ -79,7 +79,7 @@ export const maybeWithBearerAuth = (headers, token) => {
 
 export const withBasicAuth = (headers, username, password) => ({
   ...headers,
-  Authorization: basicAuth(username, password)
+  Authorization: basicAuth(username, password),
 });
 
 export const maybeWithAuth = (headers, user) => {
@@ -142,7 +142,7 @@ export const getKebabCaseLangStr = (language) => language.replace(/_/g, "-");
 export const formatShortDateTime = (timestamp, language) =>
   new Intl.DateTimeFormat(getKebabCaseLangStr(language), {
     dateStyle: "short",
-    timeStyle: "short"
+    timeStyle: "short",
   }).format(new Date(timestamp * 1000));
 
 export const formatShortDate = (timestamp, language) =>
@@ -181,32 +181,32 @@ export const openUrl = (url) => {
 export const sounds = {
   ding: {
     file: ding,
-    label: "Ding"
+    label: "Ding",
   },
   juntos: {
     file: juntos,
-    label: "Juntos"
+    label: "Juntos",
   },
   pristine: {
     file: pristine,
-    label: "Pristine"
+    label: "Pristine",
   },
   dadum: {
     file: dadum,
-    label: "Dadum"
+    label: "Dadum",
   },
   pop: {
     file: pop,
-    label: "Pop"
+    label: "Pop",
   },
   "pop-swoosh": {
     file: popSwoosh,
-    label: "Pop swoosh"
+    label: "Pop swoosh",
   },
   beep: {
     file: beep,
-    label: "Beep"
+    label: "Beep",
-  }
+  },
 };
 
 export const playSound = async (id) => {
@@ -219,7 +219,7 @@ export const playSound = async (id) => {
 export async function* fetchLinesIterator(fileURL, headers) {
   const utf8Decoder = new TextDecoder("utf-8");
   const response = await fetch(fileURL, {
-    headers
+    headers,
   });
   const reader = response.body.getReader();
   let { value: chunk, done: readerDone } = await reader.read();
@@ -228,7 +228,7 @@ export async function* fetchLinesIterator(fileURL, headers) {
   const re = /\n|\r|\r\n/gm;
   let startIndex = 0;
 
-  for (; ;) {
+  for (;;) {
     const result = re.exec(chunk);
     if (!result) {
       if (readerDone) {

web/src/components/App.jsx

@@ -23,6 +23,7 @@ import Account from "./Account";
 import initI18n from "../app/i18n"; // Translations!
 import prefs, { THEME } from "../app/Prefs";
 import RTLCacheProvider from "./RTLCacheProvider";
+import session from "../app/Session";
 
 initI18n();
 
@@ -45,7 +46,6 @@ const darkModeEnabled = (prefersDarkMode, themePreference) => {
 const App = () => {
   const { i18n } = useTranslation();
   const languageDir = i18n.dir();
-
   const [account, setAccount] = useState(null);
   const accountMemo = useMemo(() => ({ account, setAccount }), [account, setAccount]);
   const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
@@ -60,6 +60,12 @@ const App = () => {
     document.dir = languageDir;
   }, [i18n.language, languageDir]);
 
+  useEffect(() => {
+    if (!session.exists() && config.require_login && window.location.pathname !== routes.login) {
+      window.location.href = routes.login;
+    }
+  }, []);
+
   return (
     <Suspense fallback={<Loader />}>
       <RTLCacheProvider>

web/src/components/Notifications.jsx

@@ -28,7 +28,13 @@ import { useRemark } from "react-remark";
 import styled from "@emotion/styled";
 import {
   copyToClipboard,
-  formatBytes, formatShortDateTime, maybeActionErrors, openUrl, shortUrl, topicShortUrl, unmatchedTags
+  formatBytes,
+  formatShortDateTime,
+  maybeActionErrors,
+  openUrl,
+  shortUrl,
+  topicShortUrl,
+  unmatchedTags,
 } from "../app/utils";
 import { formatMessage, formatTitle, isImage } from "../app/notificationUtils";
 import { LightboxBackdrop, Paragraph, VerticallyCenteredContainer } from "./styles";