feature - added protected documentation

Documentation/docusaurus.config.ts

@@ -57,7 +57,7 @@ const config: Config = {
       title: '',
       logo: {
         alt: 'FastPocket logo',
-        src: 'https://fastpocket.dev/images/combination-icon.png',
+        src: 'img/combination-icon.png',
         href: 'https://fastpocket.dev/'
       },
       items: [
@@ -79,6 +79,10 @@ const config: Config = {
       darkTheme: prismThemes.dracula,
     },
   } satisfies Preset.ThemeConfig,
+
+  customFields: {
+    'POCKETBASE_URL': process.env.POCKETBASE_URL,
+  },
 };
 
 export default config;

Documentation/package-lock.json

@@ -12,6 +12,7 @@
         "@docusaurus/preset-classic": "3.1.1",
         "@mdx-js/react": "^3.0.0",
         "clsx": "^2.0.0",
+        "pocketbase": "^0.21.1",
         "prism-react-renderer": "^2.3.0",
         "react": "^18.0.0",
         "react-dom": "^18.0.0"
@@ -10987,6 +10988,11 @@
         "node": ">=4"
       }
     },
+    "node_modules/pocketbase": {
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/pocketbase/-/pocketbase-0.21.1.tgz",
+      "integrity": "sha512-0PvCP4pKtxsV9kwldEGyibEvhwOcx9jSCrz3WN5CgPILJfM0z76f1op9WE8/8UgikDsMdRsc5iBLfKintrJS1g=="
+    },
     "node_modules/postcss": {
       "version": "8.4.35",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.35.tgz",
@@ -22257,6 +22263,11 @@
         }
       }
     },
+    "pocketbase": {
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/pocketbase/-/pocketbase-0.21.1.tgz",
+      "integrity": "sha512-0PvCP4pKtxsV9kwldEGyibEvhwOcx9jSCrz3WN5CgPILJfM0z76f1op9WE8/8UgikDsMdRsc5iBLfKintrJS1g=="
+    },
     "postcss": {
       "version": "8.4.35",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.35.tgz",

Documentation/package.json

@@ -19,6 +19,7 @@
     "@docusaurus/preset-classic": "3.1.1",
     "@mdx-js/react": "^3.0.0",
     "clsx": "^2.0.0",
+    "pocketbase": "^0.21.1",
     "prism-react-renderer": "^2.3.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"

Documentation/src/theme/ColorModeToggle/index.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import ColorModeToggle from '@theme-original/ColorModeToggle';
+import {logout} from '../pocketbase';
+
+export default function ColorModeToggleWrapper(props) {
+  return (
+    <>
+      <ColorModeToggle {...props} />
+      <a style={{background: '#fd5469', color: 'white', paddingRight: 10, paddingLeft: 10, paddingBottom: 2, borderRadius: 5, marginLeft: 15, cursor: "pointer"}} onClick={() => logout(() => window.location.reload())}>
+        Logout
+      </a>
+    </>
+  );
+}

Documentation/src/theme/Root.js

@@ -0,0 +1,99 @@
+import React, { useState } from "react";
+import { signIn, auth } from "./pocketbase";
+
+export default function Root({ children }) {
+  const [userAuth, setUserAuth] = useState("");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  const handleSubmit = async (event) => {
+    event.preventDefault();
+    setLoading(true)
+    await signIn(email,password)
+    setLoading(false)
+  };
+
+  auth.onChange(async function (user) {
+    if (user !== null) {
+      setUserAuth(user);
+    }
+  });
+
+  return (
+    <>
+      {userAuth != "" ? (
+        <>{children}</>
+      ) : (
+        <div
+          style={{
+            flexGrow: 1,
+            display: "flex",
+            justifyItems: "center",
+            alignItems: "center",
+            marginRight: "auto",
+            marginLeft: "auto",
+            flexDirection: 'column'
+          }}
+        >
+          <form
+            onSubmit={handleSubmit}
+            style={{
+              display: "flex",
+              flexDirection: "column",
+              width: "200px",
+              margin: "auto",
+            }}
+          >
+            <img src="img/combination-icon.png"  />
+            <h1 style={{marginLeft: 'auto', marginRight: 'auto'}}>Docs</h1>
+            <label htmlFor="email" style={{ marginBottom: "10px" }}>
+              Email:
+            </label>
+            <input
+              type="email"
+              id="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              style={{
+                marginBottom: "10px",
+                padding: "5px",
+                borderRadius: "5px",
+                border: "1px solid #ccc",
+              }}
+            />
+            <label htmlFor="password" style={{ marginBottom: "10px" }}>
+              Password:
+            </label>
+            <input
+              type="password"
+              id="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              style={{
+                marginBottom: "10px",
+                padding: "5px",
+                borderRadius: "5px",
+                border: "1px solid #ccc",
+              }}
+            />
+            <button
+              type="submit"
+              style={{
+                padding: "5px",
+                borderRadius: "5px",
+                border: "none",
+                backgroundColor: "#fd5367",
+                color: "white",
+                marginTop: '1rem'
+              }}
+              disabled={loading}
+            >
+              {loading ? 'Loading...':'Login'}
+            </button>
+          </form>
+        </div>
+      )}
+    </>
+  );
+}

Documentation/src/theme/pocketbase.js

@@ -0,0 +1,22 @@
+import PocketBase from "pocketbase";
+
+const app = (() => {
+  const POCKETBASE_URL = "https://fastpocket.fly.dev" + "/";
+  return new PocketBase(POCKETBASE_URL);
+})();
+
+export const auth = app.authStore;
+
+export const logout = (afterAction = () => {}) => {
+  app.authStore.clear();
+  afterAction(null);
+};
+
+export const signIn = async (email, password) => {
+  try {
+    await app.collection("user").authWithPassword(email, password);
+  } catch (err) {
+    console.error(err);
+    alert(err.message);
+  }
+};