Initial Commit

.gitignore

@@ -0,0 +1,26 @@
+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-*
+
+# Paraglide
+src/lib/paraglide

.npmrc

@@ -0,0 +1 @@
+engine-strict=true

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.

eslint.config.js

@@ -0,0 +1,36 @@
+import js from '@eslint/js';
+import { includeIgnoreFile } from '@eslint/compat';
+import svelte from 'eslint-plugin-svelte';
+import globals from 'globals';
+import { fileURLToPath } from 'node:url';
+import ts from 'typescript-eslint';
+import svelteConfig from './svelte.config.js';
+const gitignorePath = fileURLToPath(new URL("./.gitignore", import.meta.url));
+
+export default ts.config(
+  includeIgnoreFile(gitignorePath),
+  js.configs.recommended,
+  ...ts.configs.recommended,
+  ...svelte.configs.recommended,
+  {
+    languageOptions: {
+	  globals: {
+	    ...globals.browser,
+	    ...globals.node
+	  }
+	}
+  },
+  {
+    files: ["**/*.svelte", "**/*.svelte.ts", "**/*.svelte.js"],
+    ignores: ["eslint.config.js", "svelte.config.js"],
+
+    languageOptions: {
+	  parserOptions: {
+	    projectService: true,
+	    extraFileExtensions: ['.svelte'],
+	    parser: ts.parser,
+	    svelteConfig
+	  }
+	}
+  }
+);

messages/en.json

@@ -0,0 +1,4 @@
+{
+	"$schema": "https://inlang.com/schema/inlang-message-format",
+	"hello_world": "Hello, {name} from en!"
+}

messages/fr.json

@@ -0,0 +1,4 @@
+{
+	"$schema": "https://inlang.com/schema/inlang-message-format",
+	"hello_world": "Hello, {name} from fr!"
+}

messages/it.json

@@ -0,0 +1,4 @@
+{
+	"$schema": "https://inlang.com/schema/inlang-message-format",
+	"hello_world": "Hello, {name} from it!"
+}

package.json

@@ -0,0 +1,46 @@
+{
+	"name": "re-user-test",
+	"private": true,
+	"version": "0.0.1",
+	"type": "module",
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build",
+		"preview": "vite preview",
+		"prepare": "svelte-kit sync || echo ''",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"lint": "eslint ."
+	},
+	"devDependencies": {
+		"@eslint/compat": "^1.2.5",
+		"@eslint/js": "^9.18.0",
+		"@iconify/svelte": "^4.2.0",
+		"@sveltejs/adapter-auto": "^4.0.0",
+		"@sveltejs/kit": "^2.16.0",
+		"@sveltejs/vite-plugin-svelte": "^5.0.0",
+		"@tailwindcss/vite": "^4.0.0",
+		"@types/set-cookie-parser": "^2.4.10",
+		"arktype": "^2.1.9",
+		"daisyui": "^5.0.6",
+		"eslint": "^9.18.0",
+		"eslint-plugin-svelte": "^3.0.0",
+		"formsnap": "^2.0.0",
+		"globals": "^16.0.0",
+		"svelte": "^5.0.0",
+		"svelte-check": "^4.0.0",
+		"sveltekit-superforms": "^2.24.0",
+		"tailwindcss": "^4.0.0",
+		"typescript": "^5.0.0",
+		"typescript-eslint": "^8.20.0",
+		"vite": "^6.0.0"
+	},
+	"dependencies": {
+		"@inlang/paraglide-sveltekit": "^0.15.5"
+	},
+	"pnpm": {
+		"onlyBuiltDependencies": [
+			"esbuild"
+		]
+	}
+}

project.inlang/.gitignore

@@ -0,0 +1 @@
+cache

project.inlang/settings.json

@@ -0,0 +1,21 @@
+{
+	"$schema": "https://inlang.com/schema/project-settings",
+	"modules": [
+		"https://cdn.jsdelivr.net/npm/@inlang/message-lint-rule-empty-pattern@1/dist/index.js",
+		"https://cdn.jsdelivr.net/npm/@inlang/message-lint-rule-identical-pattern@1/dist/index.js",
+		"https://cdn.jsdelivr.net/npm/@inlang/message-lint-rule-missing-translation@1/dist/index.js",
+		"https://cdn.jsdelivr.net/npm/@inlang/message-lint-rule-without-source@1/dist/index.js",
+		"https://cdn.jsdelivr.net/npm/@inlang/message-lint-rule-valid-js-identifier@1/dist/index.js",
+		"https://cdn.jsdelivr.net/npm/@inlang/plugin-message-format@2/dist/index.js",
+		"https://cdn.jsdelivr.net/npm/@inlang/plugin-m-function-matcher@0/dist/index.js"
+	],
+	"plugin.inlang.messageFormat": {
+		"pathPattern": "./messages/{languageTag}.json"
+	},
+	"sourceLanguageTag": "en",
+	"languageTags": [
+		"en",
+		"fr",
+		"it"
+	]
+}

src/app.css

@@ -0,0 +1,3 @@
+@import 'tailwindcss';
+
+@plugin "daisyui";

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 {};

src/app.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="%paraglide.lang%" dir="%paraglide.textDirection%">
+	<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%
+	</head>
+	<body data-sveltekit-preload-data="hover">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>

src/hooks.server.ts

@@ -0,0 +1,14 @@
+import type { Handle } from '@sveltejs/kit';
+import { i18n } from '$lib/i18n';
+
+// Paraglide
+const handleParaglide: Handle = i18n.handle();
+export const handle: Handle = handleParaglide;
+
+// Propagate Set-Cookies during Server Side Fetch
+// const url = URL.parse(request.url);
+// if (url?.pathname.startsWith('/api/')) {
+//   // Propagate Cookies
+//   const cookies = event.request.headers.get('cookie');
+//   if (cookies !== null) request.headers.set('cookie', cookies);
+// }

src/hooks.ts

@@ -0,0 +1,2 @@
+import { i18n } from '$lib/i18n';
+export const reroute = i18n.reroute();

src/lib/PwdFormInput.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  import Icon from "@iconify/svelte";
+
+  let { value = $bindable(), label, class: className = '', ...props } = $props();
+
+  let show = $state(false);
+  let inputType = $derived(show ? 'text' : 'password');
+</script>
+
+<div class="flex w-full gap-1">
+  <label class="label floating-label w-full">
+    <span>{label}</span>
+    <input type={inputType} class={["input w-full", className]} placeholder={label} {...props} bind:value={value}/>
+  </label>
+  <button class="btn btn-circle" onclick={() => show = !show}>
+    {#if show}
+      <Icon icon="mdi:eye-off-outline"/>
+    {:else }
+      <Icon icon="mdi:eye-outline"/>
+    {/if}
+  </button>
+</div>

src/lib/i18n.ts

@@ -0,0 +1,3 @@
+import * as runtime from '$lib/paraglide/runtime';
+import { createI18n } from '@inlang/paraglide-sveltekit';
+export const i18n = createI18n(runtime);

src/lib/index.ts

@@ -0,0 +1 @@
+// place files you want to import through the `$lib` alias in this folder.

src/routes/+layout.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import { i18n } from "$lib/i18n";
+	import { ParaglideJS } from "@inlang/paraglide-sveltekit";
+	import '../app.css';
+	let { children } = $props();
+</script>
+
+<ParaglideJS {i18n}>
+	{@render children()}
+</ParaglideJS>

src/routes/+page.svelte

@@ -0,0 +1,2 @@
+<h1>Welcome to SvelteKit</h1>
+<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>

src/routes/demo/+page.svelte

@@ -0,0 +1 @@
+<a href="/demo/paraglide">paraglide</a>

src/routes/demo/paraglide/+page.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import type { AvailableLanguageTag } from '$lib/paraglide/runtime';
+	import { i18n } from '$lib/i18n';
+	import { page } from '$app/state';
+	import { goto } from '$app/navigation';
+	import * as m from '$lib/paraglide/messages.js';
+	
+	function switchToLanguage(newLanguage: AvailableLanguageTag) {
+		const canonicalPath = i18n.route(page.url.pathname);
+		const localisedPath = i18n.resolveRoute(canonicalPath, newLanguage);
+		goto(localisedPath);
+	}
+</script>
+
+
+
+<h1>{m.hello_world({ name: 'SvelteKit User' })}</h1>
+<div>
+	<button onclick={() => switchToLanguage('en')}>en</button>
+	<button onclick={() => switchToLanguage('fr')}>fr</button>
+	<button onclick={() => switchToLanguage('it')}>it</button>
+</div>

src/routes/login/+page.server.ts

@@ -0,0 +1,38 @@
+import type { Actions } from './$types';
+import { fail, redirect } from "@sveltejs/kit";
+
+export const actions = {
+  default: async (event) => {
+    // Log the user in with cookie proxying
+    const data = await event.request.formData();
+    const payload = {
+      username: data.get('username'),
+      password: data.get('password')
+    };
+    //"/api/public/1/auth/login/"
+    const response = await event.fetch("/api/public/1/auth/login/", {
+      method: 'POST',
+      body: JSON.stringify(payload),
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json'
+      }
+    });
+    console.log(response.status);
+
+    if (response.status !== 200) return fail(response.status, { error: true, message: await response.json() });
+
+    // const cookies = response.headers.get('set-cookie');
+    // console.log(cookies);
+    // if (cookies !== null) {
+    //   for (const str of set_cookie_parser.splitCookiesString(cookies)) {
+    //     const { name, value, ...options } = set_cookie_parser.parseString(str);
+    //
+    //     // @ts-expect-error Even with the different types, this is basically assured to always work (?)
+    //     event.cookies.set(name, value, { ...options, domain: undefined });
+    //   }
+    // }
+
+    return redirect(303, '/user/myself');
+  }
+} satisfies Actions;

src/routes/login/+page.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+  import Icon from "@iconify/svelte";
+  import type { ActionData } from './$types';
+  import { enhance } from '$app/forms';
+
+  let { form }: { form: ActionData } = $props();
+  let formLoading = $state(false);
+  let show = $state(false);
+  let pwdType = $derived(show ? 'text' : 'password');
+</script>
+
+
+<div class="flex justify-center items-center h-screen">
+  <form method="POST" use:enhance={() => {
+    formLoading = true;
+    return async ({ update }) => {
+        formLoading = false;
+        update();
+    };
+  }}>
+    <fieldset class="fieldset w-xs bg-base-200 border border-base-300 p-4 rounded-box">
+      <legend class="fieldset-legend">Login</legend>
+
+      <div>
+        <label class="fieldset-label" for="userinput">Username</label>
+        <input id="userinput" type="text" class="input validator" placeholder="Username" name="username" required
+               minlength="3"/>
+        <p class="hidden validator-hint">Username is at least 3 char</p>
+      </div>
+
+      <div>
+        <label class="fieldset-label" for="pwdinput">Password</label>
+        <div class="flex w-full gap-1 validator">
+          <input id="pwdinput" type={pwdType} class="input validator" placeholder="Password" name="password" required
+                 minlength="3"/>
+          <button type="button" class="btn btn-circle" onclick={() => show = !show}>
+            {#if show}
+              <Icon icon="mdi:eye-off-outline"/>
+            {:else }
+              <Icon icon="mdi:eye-outline"/>
+            {/if}
+          </button>
+        </div>
+        <p class="hidden validator-hint">Password is at least 3 char</p>
+      </div>
+
+      <button class="btn btn-neutral mt-4">
+        {#if formLoading}
+          <span class="loading loading-ring loading-md"></span>
+        {:else}
+          Login
+        {/if}
+      </button>
+      {#if form?.error}
+        <p class="text-error text-center">{form.message}</p>
+      {/if}
+    </fieldset>
+  </form>
+</div>

src/routes/user/create/+page.server.ts

@@ -0,0 +1,33 @@
+import { superValidate } from 'sveltekit-superforms';
+import { arktype } from 'sveltekit-superforms/adapters';
+import { message } from 'sveltekit-superforms';
+import { fail } from '@sveltejs/kit';
+import { schema, defaults } from './schema';
+
+export const load = async () => {
+  // Arktype requires explicit default values for now
+  const form = await superValidate(arktype(schema, { defaults }));
+
+  // Always return { form } in load functions
+  return { form };
+};
+
+export const actions = {
+  default: async ({ request }) => {
+    const form = await superValidate(request, arktype(schema, { defaults }));
+    console.log(form);
+
+    if (!form.valid) {
+      // Return { form } and things will just work.
+      return fail(400, { form });
+    }
+
+    // TODO: Do something with the validated form.data
+
+    // Return the form with a status message
+    return message(form, {
+      status: 'success',
+      text: 'Form posted successfully!',
+    });
+  }
+};

src/routes/user/create/+page.svelte

@@ -0,0 +1,107 @@
+<script lang="ts">
+  import { superForm } from 'sveltekit-superforms';
+  import { arktypeClient } from 'sveltekit-superforms/adapters';
+  import PwdFormInput from "$lib/PwdFormInput.svelte";
+  import { schema } from './schema';
+
+  let { data } = $props();
+  const { form, errors, constraints, message, enhance } = superForm(data.form, {
+    validators: arktypeClient(schema),
+    resetForm: false,
+  });
+</script>
+
+<div class="mx-auto w-sm">
+  <!-- TODO: Do the new Form using https://www.formsnap.dev/docs/quick-start -->
+  <form class="fieldset mt-4 bg-base-200 border border-base-300 p-4 rounded-box gap-4" method="POST" use:enhance>
+    <h1 class="card-title">Create User</h1>
+    <div>
+      <label class="label floating-label w-full">
+        <span>Username</span>
+        <input type="text" class={["input w-full", $errors['username'] && 'input-error']}
+               placeholder="Username" name="username"
+               aria-invalid={$errors['username'] ? 'true' : undefined}
+               bind:value={$form.username}
+               {...$constraints.username}
+        />
+      </label>
+      <p class="text-error">{$errors['username'] ?? ''}</p>
+    </div>
+    <div>
+      <label class="label floating-label w-full">
+        <span>Email</span>
+        <input type="email" class={["input w-full", $errors['email'] && 'input-error']} placeholder="Email"
+               name="email"
+               aria-invalid={$errors['email'] ? 'true' : undefined}
+               bind:value={$form.email}
+               {...$constraints.email}
+        />
+      </label>
+      <p class="text-error">{$errors['email'] ?? ''}</p>
+    </div>
+    <div>
+      <PwdFormInput label="Password" autocomplete="new-password" name="password"
+                    class={$errors['password'] && 'input-error'}
+                    aria-invalid={$errors['password'] ? 'true' : undefined}
+                    bind:value={$form.password}
+                    {...$constraints.password}
+      />
+      <p class="text-error">{$errors['password'] ?? ''}</p>
+    </div>
+    <div>
+      <PwdFormInput label="Re-insert password" autocomplete="new-password" name="confirmPassword"
+                    class={$errors['confirmPassword'] && 'input-error'}
+                    aria-invalid={$errors['confirmPassword'] ? 'true' : undefined}
+                    bind:value={$form.confirmPassword}
+                    {...$constraints.confirmPassword}
+      />
+      <p class="text-error">{$errors['confirmPassword'] ?? ''}</p>
+    </div>
+    <label class="label">
+      <span>RossiniEnergy Staff</span>
+      <input type="checkbox" class="checkbox"/>
+    </label>
+    <button class="btn btn-primary">SUBMIT</button>
+    {#if $message}
+      <div
+              class:success={$message['status'] === 'success'}
+              class:error={$message['status'] === 'error'}
+      >
+        {$message['text']}
+      </div>
+    {/if}
+    <!--    <fieldset class="fieldset w-sm bg-base-200 border border-base-300 p-4 rounded-box gap-4">-->
+    <!--      <legend class="fieldset-legend">Park Admin Feature</legend>-->
+    <!--      <label class="label">-->
+    <!--        <span>Enable</span>-->
+    <!--        <input type="checkbox" class="checkbox"/>-->
+    <!--      </label>-->
+    <!--      <div class="fieldset gap-4">-->
+    <!--        <label class="label floating-label">-->
+    <!--          <span>Username</span>-->
+    <!--          <input type="text" class="input w-full" placeholder="Username"/>-->
+    <!--        </label>-->
+    <!--        <label class="label floating-label">-->
+    <!--          <span>Username</span>-->
+    <!--          <input type="text" class="input w-full" placeholder="Username"/>-->
+    <!--        </label>-->
+    <!--        <label class="label floating-label">-->
+    <!--          <span>Username</span>-->
+    <!--          <input type="text" class="input w-full" placeholder="Username"/>-->
+    <!--        </label>-->
+    <!--        <label class="label floating-label">-->
+    <!--          <span>Username</span>-->
+    <!--          <input type="text" class="input w-full" placeholder="Username"/>-->
+    <!--        </label>-->
+    <!--        <label class="label floating-label">-->
+    <!--          <span>Username</span>-->
+    <!--          <input type="text" class="input w-full" placeholder="Username"/>-->
+    <!--        </label>-->
+    <!--        <label class="label">-->
+    <!--          <span>Username</span>-->
+    <!--          <input type="checkbox" class="checkbox" placeholder="Username"/>-->
+    <!--        </label>-->
+    <!--      </div>-->
+    <!--    </fieldset>-->
+  </form>
+</div>

src/routes/user/create/schema.ts

@@ -0,0 +1,23 @@
+import { type } from "arktype";
+
+export const schema = type({
+  username: 'string',
+  email: 'string.email',
+  password: 'string > 6',
+  confirmPassword: 'string > 6'
+}).narrow((data, ctx) => {
+  if (data.password !== data.confirmPassword) return ctx.reject({
+    expected: "identical to password",
+    // don't display the password in the error message!
+    actual: "",
+    path: ["confirmPassword"]
+  });
+  return true;
+});
+
+export const defaults = {
+  username: '',
+  email: '',
+  password: '',
+  confirmPassword: ''
+};

src/routes/user/myself/+page.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  import type { PageProps } from './$types';
+
+  let { data }: PageProps = $props();
+</script>
+
+<div>
+  <p>{JSON.stringify(data.users)}</p>
+</div>

src/routes/user/myself/+page.ts

@@ -0,0 +1,14 @@
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = async ({ fetch }) => {
+  const users = await fetch('/api/public/1/auth/myself/', {
+    method: 'GET',
+    headers: {
+      'Accept': 'application/json',
+    }
+  });
+
+  return {
+    users: await users.json()
+  };
+};

svelte.config.js

@@ -0,0 +1,18 @@
+import adapter from '@sveltejs/adapter-auto';
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+	// Consult https://svelte.dev/docs/kit/integrations
+	// for more information about preprocessors
+	preprocess: vitePreprocess(),
+
+	kit: {
+		// adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list.
+		// If your environment is not supported, or you settled on a specific environment, switch out the adapter.
+		// See https://svelte.dev/docs/kit/adapters for more information about adapters.
+		adapter: adapter()
+	}
+};
+
+export default config;

tsconfig.json

@@ -0,0 +1,19 @@
+{
+	"extends": "./.svelte-kit/tsconfig.json",
+	"compilerOptions": {
+		"allowJs": true,
+		"checkJs": true,
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"strict": true,
+		"moduleResolution": "bundler"
+	}
+	// Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias
+	// except $lib which is handled by https://svelte.dev/docs/kit/configuration#files
+	//
+	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
+	// from the referenced tsconfig.json - TypeScript does not merge them in
+}

vite.config.ts

@@ -0,0 +1,23 @@
+import { paraglide } from "@inlang/paraglide-sveltekit/vite";
+import tailwindcss from "@tailwindcss/vite";
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  plugins: [tailwindcss(), sveltekit(), paraglide({
+    project: "./project.inlang",
+    outdir: "./src/lib/paraglide"
+  })],
+  server: {
+    // On Prod this is done by NGINX using `proxy_cookie_domain` and `proxy_cookie_path`
+    proxy: {
+      '/api': {
+        target: 'https://api.barracuda.rossinienergy.com',
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/api/, ''),
+        cookieDomainRewrite: "",
+        cookiePathRewrite: "/",
+      },
+    }
+  }
+});