set up with simple auth proxy

walteh · Jun 25, 2024 · 468671c · 468671c
1 parent 07b7a99
commit 468671c
Show file tree

Hide file tree

Showing 32 changed files with 297 additions and 293 deletions.
diff --git a/.github/workflows/pages.yaml b/.github/workflows/pages.yaml
@@ -35,12 +35,14 @@ jobs:
               uses: oven-sh/setup-bun@v2
             - name: setup pages
               uses: actions/configure-pages@v5
+            - name: set-env
+              run: |
+                  echo "VITE_UNTHREADME_THREADS_API_APP_ID=${{ secrets.UNTHREADME_THREADS_API_APP_ID }}"  > .env
             - name: build
               run: |
                   bun install
                   bun run build
-                  # sed -i 's/\/assets\//\/threadsole\/assets\//g' dist/index.html
-                  echo "threadsole.net" > dist/CNAME
+                  echo "unthread.me" > dist/CNAME
             - name: upload artifact
               uses: actions/upload-pages-artifact@v3
               with:

diff --git a/.vscode/threadsole.code-workspace → .vscode/unthread.me.code-workspace b/.vscode/threadsole.code-workspace → .vscode/unthread.me.code-workspace
diff --git a/bun.lockb b/bun.lockb
diff --git a/index.html b/index.html
@@ -8,6 +8,6 @@
 	</head>
 	<body>
 		<div id="root"></div>
-		<script type="module" src="/src/app/main.tsx"></script>
+		<script type="module" src="/src/main.tsx"></script>
 	</body>
 </html>
diff --git a/package.json b/package.json
@@ -1,9 +1,9 @@
 {
-	"name": "threadsole",
+	"name": "unthread.me",
 	"private": false,
 	"version": "0.0.0",
 	"type": "module",
-	"homepage": "https://threadsole.net/",
+	"homepage": "https://unthread.me/",
 	"scripts": {
 		"dev": "vite",
 		"build": "tsc -b && vite build",
@@ -26,6 +26,7 @@
 		"@types/tape": "^5.6.4",
 		"@typescript-eslint/eslint-plugin": "^7.13.1",
 		"@typescript-eslint/parser": "^7.13.1",
+		"@vitejs/plugin-basic-ssl": "^1.1.0",
 		"@vitejs/plugin-react-swc": "^3.5.0",
 		"autoprefixer": "^10.4.19",
 		"ava": "^6.1.3",

diff --git a/src/App.tsx b/src/App.tsx
@@ -0,0 +1,39 @@
+import { FC } from "react";
+import { Route, HashRouter, Routes } from "react-router-dom";
+import { Outlet } from "react-router-dom";
+
+import LayoutHeader from "./components/LayoutHeader";
+import LayoutFooter from "./components/LayoutFooter";
+import NotFound from "@src/pages/NotFound";
+import Home from "@src/pages/Home";
+import OAuthCallback from "@src/pages/OAuthCallback";
+
+const App: FC = () => {
+	return (
+		<>
+			<HashRouter>
+				<Routes>
+					<Route path="/" element={<Layout />}>
+						<Route index element={<Home />} />
+						<Route path="*" element={<NotFound />} />
+						<Route path="oauth/callback" element={<OAuthCallback />} />
+					</Route>
+				</Routes>
+			</HashRouter>
+		</>
+	);
+};
+
+const Layout: FC = () => {
+	return (
+		<div className="h-screen overflow-x-hidden">
+			<LayoutHeader />
+			<main>
+				<Outlet />
+			</main>
+			<LayoutFooter />
+		</div>
+	);
+};
+
+export default App;
diff --git a/src/app/App.tsx b/src/app/App.tsx
diff --git a/src/app/Layout/index.ts b/src/app/Layout/index.ts
diff --git a/src/app/Layout/ui/Layout.tsx b/src/app/Layout/ui/Layout.tsx
diff --git a/src/components/LayoutFooter.tsx b/src/components/LayoutFooter.tsx
@@ -0,0 +1,46 @@
+import { FC } from "react";
+
+const LayoutFooter: FC = () => {
+	return (
+		<>
+			<footer className="footer bg-base-300 p-10 text-base-content">
+				<div>
+					<span className="footer-title">Services</span>
+					<a className="link-hover link">Branding</a>
+					<a className="link-hover link">Design</a>
+					<a className="link-hover link">Marketing</a>
+					<a className="link-hover link">Advertisement</a>
+				</div>
+				<div>
+					<span className="footer-title">Company</span>
+					<a className="link-hover link">About us</a>
+					<a className="link-hover link">Contact</a>
+					<a className="link-hover link">Jobs</a>
+					<a className="link-hover link">Press kit</a>
+				</div>
+				<div>
+					<span className="footer-title">Social</span>
+					<div className="grid grid-flow-col gap-4">
+						<a>
+							<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" className="fill-current">
+								<path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"></path>
+							</svg>
+						</a>
+						<a>
+							<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" className="fill-current">
+								<path d="M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z"></path>
+							</svg>
+						</a>
+						<a>
+							<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" className="fill-current">
+								<path d="M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z"></path>
+							</svg>
+						</a>
+					</div>
+				</div>
+			</footer>
+		</>
+	);
+};
+
+export default LayoutFooter;
diff --git a/src/components/LayoutHeader.tsx b/src/components/LayoutHeader.tsx
@@ -0,0 +1,61 @@
+import { FC } from "react";
+import Logo from "@src/components/Logo.tsx";
+import Menu from "./Menu";
+
+const LayoutHeader: FC = () => {
+	return (
+		<>
+			<header>
+				<nav className="navbar bg-base-100">
+					<Menu
+						links={[
+							{ name: "Homepage", href: "/" },
+							{ name: "Portfolio", href: "/portfolio" },
+							{ name: "About", href: "/about" },
+						]}
+					/>
+					<Logo logoName={"daisyUI"} />
+					<div className="navbar-end">
+						<button className="btn-ghost btn-circle btn">
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								className="h-5 w-5"
+								fill="none"
+								viewBox="0 0 24 24"
+								stroke="currentColor"
+							>
+								<path
+									strokeLinecap="round"
+									strokeLinejoin="round"
+									strokeWidth="2"
+									d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+								/>
+							</svg>
+						</button>
+						<button className="btn-ghost btn-circle btn">
+							<div className="indicator">
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									className="h-5 w-5"
+									fill="none"
+									viewBox="0 0 24 24"
+									stroke="currentColor"
+								>
+									<path
+										strokeLinecap="round"
+										strokeLinejoin="round"
+										strokeWidth="2"
+										d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"
+									/>
+								</svg>
+								<span className="badge badge-primary badge-xs indicator-item"></span>
+							</div>
+						</button>
+					</div>
+				</nav>
+			</header>
+		</>
+	);
+};
+
+export default LayoutHeader;
diff --git a/src/widgets/LayoutHeader/ui/Logo/Logo.tsx → src/components/Logo.tsx b/src/widgets/LayoutHeader/ui/Logo/Logo.tsx → src/components/Logo.tsx
@@ -1,5 +1,8 @@
 import { FC } from "react";
-import { Logo as HeaderLogo } from "@/widgets/LayoutHeader/model/types";
+
+export interface HeaderLogo {
+	logoName: string;
+}
 
 const Logo: FC<HeaderLogo> = ({ logoName }: HeaderLogo) => {
 	return (

diff --git a/src/widgets/LayoutHeader/ui/Menu/Menu.tsx → src/components/Menu.tsx b/src/widgets/LayoutHeader/ui/Menu/Menu.tsx → src/components/Menu.tsx
@@ -1,8 +1,11 @@
 import { FC } from "react";
-import { Menu as MenuType } from "../../model/types";
 import { Link } from "react-router-dom";
 
-const Menu: FC<MenuType> = ({ links }: MenuType) => {
+export interface HeaderMenu {
+	links: { name: string; href: string }[];
+}
+
+const Menu: FC<HeaderMenu> = ({ links }: HeaderMenu) => {
 	return (
 		<>
 			<div className="navbar-start">

diff --git a/src/app/hooks.ts → src/hooks.ts b/src/app/hooks.ts → src/hooks.ts
diff --git a/src/app/index.css → src/index.css b/src/app/index.css → src/index.css
diff --git a/src/app/main.tsx → src/main.tsx b/src/app/main.tsx → src/main.tsx
diff --git a/src/pages/Home/ui/Page/Page.tsx → src/pages/Home.tsx b/src/pages/Home/ui/Page/Page.tsx → src/pages/Home.tsx
@@ -1,9 +1,31 @@
 import { FC } from "react";
 
-import useStore from "../../../../threadsapi/store";
+import useStore from "../threadsapi/store";
+
+import { getAuthorizationStartURL } from "../threadsapi/api";
 
 const Home: FC = () => {
-	const [token] = useStore((state) => [state.token]);
+	const [token] = useStore((state) => [state.access_token] as const);
+
+	if (token === null) {
+		return (
+			<>
+				<section>
+					<button
+						onClick={() => {
+							// open popup
+							const authUrl = getAuthorizationStartURL();
+							window.open(authUrl.toString(), "Threads OAuth", "width");
+						}}
+						className="btn-primary btn"
+					>
+						Login
+					</button>
+				</section>
+			</>
+		);
+	}
+
 	return (
 		<>
 			<section>
@@ -16,7 +38,7 @@ const Home: FC = () => {
 								Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quia minima laboriosam maxime sed dignissimos
 								harum provident itaque fugiat. A repellat aliquid inventore dolor tempora, omnis perferendis aspernatur quo
 								nisi excepturi. Ex, ullam odio iusto esse necessitatibus doloremque repudiandae!
-								{token}
+								{token.user_id}
 							</p>
 							<button className="btn-primary btn">Get Started</button>
 						</div>

diff --git a/src/pages/Home/index.ts b/src/pages/Home/index.ts
diff --git a/src/pages/NoMatch/index.ts b/src/pages/NoMatch/index.ts
diff --git a/src/pages/NoMatch/ui/Page/Page.tsx → src/pages/NotFound.tsx b/src/pages/NoMatch/ui/Page/Page.tsx → src/pages/NotFound.tsx
@@ -1,7 +1,24 @@
 import { FC } from "react";
 import { Link } from "react-router-dom";
+import { useUpdateCode } from "../threadsapi/store";
+
+const NotFound: FC = () => {
+	const urlParams = new URLSearchParams(location.search);
+	const code = urlParams.get("code");
+
+	if (!code) {
+		throw new Error("Token not found in the URL query parameters");
+	}
+
+	void useUpdateCode(code)
+		.then(() => {
+			console.log("Token updated");
+			window.location.href = "/";
+		})
+		.catch((err: unknown) => {
+			console.error(err);
+		});
 
-const NoMatch: FC = () => {
 	return (
 		<section>
 			<div className="flex min-h-screen w-screen flex-col items-center justify-center gap-y-5">
@@ -17,4 +34,4 @@ const NoMatch: FC = () => {
 	);
 };
 
-export default NoMatch;
+export default NotFound;