fixik

C4T-BuT-S4D · Dec 20, 2024 · d4c37db · d4c37db
1 parent baa55cb
commit d4c37db
Show file tree

Hide file tree

Showing 28 changed files with 2,042 additions and 14 deletions.
diff --git a/internal/docs/front/.gitignore b/internal/docs/front/.gitignore
@@ -0,0 +1,23 @@
+node_modules
+
+# Output
+.output
+.vercel
+.netlify
+.wrangler
+/.svelte-kit
+/build
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Env
+.env
+.env.*
+!.env.example
+!.env.test
+
+# Vite
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*
diff --git a/internal/docs/front/.npmrc b/internal/docs/front/.npmrc
@@ -0,0 +1 @@
+engine-strict=true
diff --git a/internal/docs/front/.prettierignore b/internal/docs/front/.prettierignore
@@ -0,0 +1,4 @@
+# Package Managers
+package-lock.json
+pnpm-lock.yaml
+yarn.lock
diff --git a/internal/docs/front/.prettierrc b/internal/docs/front/.prettierrc
@@ -0,0 +1,15 @@
+{
+	"useTabs": true,
+	"singleQuote": true,
+	"trailingComma": "none",
+	"printWidth": 100,
+	"plugins": ["prettier-plugin-svelte"],
+	"overrides": [
+		{
+			"files": "*.svelte",
+			"options": {
+				"parser": "svelte"
+			}
+		}
+	]
+}
diff --git a/internal/docs/front/README.md b/internal/docs/front/README.md
@@ -0,0 +1,38 @@
+# sv
+
+Everything you need to build a Svelte project, powered by [`sv`](https://github.com/sveltejs/cli).
+
+## Creating a project
+
+If you're seeing this, you've probably already done this step. Congrats!
+
+```bash
+# create a new project in the current directory
+npx sv create
+
+# create a new project in my-app
+npx sv create my-app
+```
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```bash
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+## Building
+
+To create a production version of your app:
+
+```bash
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
diff --git a/internal/docs/front/package.json b/internal/docs/front/package.json
@@ -0,0 +1,31 @@
+{
+	"name": "front",
+	"private": true,
+	"version": "0.0.1",
+	"type": "module",
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build",
+		"preview": "vite preview",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"format": "prettier --write .",
+		"lint": "prettier --check ."
+	},
+	"devDependencies": {
+		"@sveltejs/adapter-auto": "^3.0.0",
+		"@sveltejs/kit": "^2.9.0",
+		"@sveltejs/vite-plugin-svelte": "^5.0.0",
+		"prettier": "^3.3.2",
+		"prettier-plugin-svelte": "^3.2.6",
+		"svelte": "^5.0.0",
+		"svelte-check": "^4.0.0",
+		"typescript": "^5.0.0",
+		"vite": "^6.0.0"
+	},
+	"dependencies": {
+		"@sveltejs/adapter-static": "^3.0.6",
+		"@toast-ui/editor": "^3.2.2",
+		"bulma": "^1.0.2"
+	}
+}
diff --git a/internal/docs/front/src/app.d.ts b/internal/docs/front/src/app.d.ts
@@ -0,0 +1,13 @@
+// See https://svelte.dev/docs/kit/types#app.d.ts
+// for information about these interfaces
+declare global {
+	namespace App {
+		// interface Error {}
+		// interface Locals {}
+		// interface PageData {}
+		// interface PageState {}
+		// interface Platform {}
+	}
+}
+
+export {};
diff --git a/internal/docs/front/src/app.html b/internal/docs/front/src/app.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		%sveltekit.head%
+		<link rel="stylesheet" href="https://uicdn.toast.com/editor/latest/toastui-editor.min.css" />
+	</head>
+	<body data-sveltekit-preload-data="hover">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>
diff --git a/internal/docs/front/src/routes/+layout.js b/internal/docs/front/src/routes/+layout.js
@@ -0,0 +1 @@
+export const ssr = false;
diff --git a/internal/docs/front/src/routes/+layout.svelte b/internal/docs/front/src/routes/+layout.svelte
@@ -0,0 +1,48 @@
+<script>
+	import { page } from '$app/stores';
+	import 'bulma/css/bulma.min.css';
+	import { goto } from '$app/navigation';
+
+	let isAuthenticated = false;
+
+	$: {
+		isAuthenticated = typeof localStorage !== 'undefined' && !!localStorage.getItem('token');
+	}
+
+	function logout() {
+		localStorage.removeItem('token');
+		goto('/login');
+	}
+</script>
+
+<nav class="navbar" role="navigation" aria-label="main navigation">
+	<div class="navbar-brand">
+		<a class="navbar-item has-text-weight-bold" href="/"> Docs </a>
+	</div>
+	<div class="navbar-end">
+		<div class="navbar-item">
+			<div class="buttons">
+				{#if !isAuthenticated}
+					<a class="button is-light" href="/organization/create">Create Organization</a>
+					<a class="button is-light" href="/create-user">Create User</a>
+					<a class="button is-primary" href="/login">Login</a>
+				{:else}
+					<a class="button is-light" href="/dashboard">Dashboard</a>
+					<button class="button is-danger" on:click={logout}>Logout</button>
+				{/if}
+			</div>
+		</div>
+	</div>
+</nav>
+
+<main>
+	<slot />
+</main>
+
+<style>
+	main {
+		padding: 1rem;
+		/* background-color: white; */
+		min-height: calc(100vh - 3.25rem);
+	}
+</style>
diff --git a/internal/docs/front/src/routes/+page.svelte b/internal/docs/front/src/routes/+page.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+    import { onMount } from 'svelte';
+    import { goto } from '$app/navigation';
+
+    onMount(() => {
+        const isAuthenticated = typeof localStorage !== 'undefined' && !!localStorage.getItem('token');
+        if (isAuthenticated) {
+            goto('/dashboard');
+        }
+    });
+</script>
+
+<div class="container has-text-centered">
+    <h1 class="title is-1">Welcome to Docs</h1>
+    <p class="subtitle">
+        Please <a href="/login">login</a> to continue or <a href="/create-user">create an account</a>
+    </p>
+</div>
diff --git a/internal/docs/front/src/routes/create-user/+page.svelte b/internal/docs/front/src/routes/create-user/+page.svelte
@@ -0,0 +1,165 @@
+<script lang="ts">
+	import { enhance } from '$app/forms';
+	import { goto } from '$app/navigation';
+	import 'bulma/css/bulma.min.css';
+	import { PUBLIC_API_URL } from '$env/static/public';
+
+	let loading = false;
+	let error = '';
+	let showCreatedUser = false;
+	let createdUser = null;
+
+	async function handleSubmit(event: SubmitEvent) {
+		loading = true;
+		error = '';
+
+		try {
+			const form = event.target as HTMLFormElement;
+			const formData = new FormData(form);
+
+			const response = await fetch(`${PUBLIC_API_URL}/users`, {
+				method: 'POST',
+				body: JSON.stringify({
+					username: formData.get('username'),
+					password: formData.get('password'),
+					token: formData.get('token')
+				}),
+				headers: {
+					'Content-Type': 'application/json'
+				}
+			});
+
+			if (!response.ok) {
+				const data = await response.json();
+				throw new Error(JSON.stringify(data.detail) || 'Failed to create user');
+			}
+
+			createdUser = await response.json();
+			showCreatedUser = true;
+			localStorage.setItem('created_user_email', createdUser.email);
+		} catch (e) {
+			error = e.message;
+		} finally {
+			loading = false;
+		}
+	}
+</script>
+
+<div class="section">
+	<div class="container">
+		<div class="columns is-centered">
+			<div class="column is-half">
+				<div class="box">
+					<h1 class="title has-text-centered">Create User</h1>
+
+					{#if error}
+						<div class="notification is-danger">
+							{error}
+						</div>
+					{/if}
+
+					<form on:submit|preventDefault={handleSubmit}>
+						<div class="field">
+							<label class="label" for="username">Username</label>
+							<div class="control">
+								<input
+									class="input"
+									type="text"
+									name="username"
+									id="username"
+									placeholder="user"
+									required
+								/>
+							</div>
+						</div>
+
+						<div class="field">
+							<label class="label" for="name">Password</label>
+							<div class="control">
+								<input
+									class="input"
+									type="password"
+									name="password"
+									id="password"
+									placeholder="John Doe"
+									required
+								/>
+							</div>
+						</div>
+
+						<div class="field">
+							<label class="label" for="token">Organization Token</label>
+							<div class="control">
+								<input
+									class="input"
+									type="text"
+									name="token"
+									id="token"
+									placeholder="looong string"
+									value={localStorage.getItem('org_token') || ''}
+									required
+								/>
+							</div>
+						</div>
+
+						<div class="field mt-5">
+							<div class="control">
+								<button
+									class="button is-primary is-fullwidth {loading ? 'is-loading' : ''}"
+									type="submit"
+									disabled={loading}
+								>
+									Create User
+								</button>
+							</div>
+						</div>
+					</form>
+				</div>
+
+				{#if showCreatedUser}
+					<div class="card">
+						<div class="has-text-centered mt-4">
+							<p>User ID: {createdUser.id}</p>
+							<p>Email: {createdUser.email}</p>
+							<p>Password: {createdUser.password}</p>
+						</div>
+					</div>
+					<div class="has-text-centered mt-4">
+						<a href="/login" class="has-text-grey"> Login </a>
+					</div>
+				{/if}
+			</div>
+		</div>
+	</div>
+</div>
+
+<style>
+	.box {
+		margin-top: 2rem;
+	}
+
+	.title {
+		margin-bottom: 2rem;
+	}
+
+	.field {
+		margin-bottom: 1.5rem;
+	}
+
+	.button.is-primary {
+		background-color: #00d1b2;
+		transition: background-color 0.2s ease;
+	}
+
+	.button.is-primary:hover {
+		background-color: #00c4a7;
+	}
+
+	.mt-4 {
+		margin-top: 1.5rem;
+	}
+
+	.mt-5 {
+		margin-top: 2rem;
+	}
+</style>