Merge branch 'master' into feat/create-loginpage

.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+  "python.analysis.typeCheckingMode": "basic",
+  "python.analysis.autoImportCompletions": true
+}

LINUX.sh

@@ -6,6 +6,10 @@ cd ..
 cd wrapper
 yarn
 
+cd ../../packages
+cd functions-gcp
+yarn
+
 cd ../..
 cd functions
 source venv/bin/activate

WINDOWS.bat

@@ -7,6 +7,10 @@ cd ..
 cd wrapper
 CALL yarn
 
+cd ..\..\packages
+cd functions-gcp
+CALL yarn
+
 cd ..\..
 cd functions
 CALL venv\Scripts\activate

apps/backend/.prettierrc

@@ -3,6 +3,7 @@
 	"singleQuote": true,
 	"trailingComma": "none",
 	"printWidth": 100,
+	"bracketSameLine": true,
 	"plugins": ["prettier-plugin-svelte"],
 	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
 }

apps/backend/package.json

@@ -1,7 +1,7 @@
 {
 	"type": "module",
 	"private": true,
-	"name": "backend",
+	"name": "@armadillo/backend",
 	"version": "0.0.0",
 	"scripts": {
 		"dev": "vite dev",
@@ -13,6 +13,7 @@
 		"format": "prettier --write ."
 	},
 	"devDependencies": {
+		"@armadillo/shared": "*",
 		"@sveltejs/adapter-auto": "^2.0.0",
 		"@sveltejs/kit": "^1.27.4",
 		"@tailwindcss/forms": "^0.5.3",
@@ -37,5 +38,6 @@
 	},
 	"dependencies": {
 		"svelte-forms-lib": "^2.0.1"
+		"firebase": "^10.7.0"
 	}
 }

apps/backend/src/app.postcss → apps/backend/src/app.css

@@ -1,4 +1,3 @@
-/* Write your global styles here, in PostCSS syntax */
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

apps/backend/src/lib/firebase/auth.ts

@@ -0,0 +1,47 @@
+import { FirebaseError } from 'firebase/app';
+import {
+	signOut as _signOut,
+	signInWithEmailAndPassword,
+	createUserWithEmailAndPassword
+} from 'firebase/auth';
+
+import { auth } from '$lib/firebase';
+import { authStatusStore } from '$lib/stores';
+
+export function signOut() {
+	return _signOut(auth);
+}
+
+export async function signUpEmailPassword(email: string, password: string) {
+	try {
+		authStatusStore.set(null);
+		await createUserWithEmailAndPassword(auth, email, password);
+		return authStatusStore.set(null);
+	} catch (error) {
+		if (!(error instanceof FirebaseError)) {
+			throw new Error('Caught non-Firebase error!');
+		}
+
+		return authStatusStore.set({
+			code: error.code,
+			message: error.message
+		});
+	}
+}
+
+export async function signInEmailPassword(email: string, password: string) {
+	try {
+		authStatusStore.set(null);
+		await signInWithEmailAndPassword(auth, email, password);
+		return authStatusStore.set(null);
+	} catch (error) {
+		if (!(error instanceof FirebaseError)) {
+			throw new Error('Caught non-Firebase error!');
+		}
+
+		return authStatusStore.set({
+			code: error.code,
+			message: error.message
+		});
+	}
+}

apps/backend/src/lib/firebase/firestore.ts

@@ -0,0 +1,28 @@
+import type { DocumentReference } from 'firebase/firestore';
+
+import { readable } from 'svelte/store';
+import { doc, collection, onSnapshot } from 'firebase/firestore';
+
+import { firestore } from '$lib/firebase';
+
+export const colUsersRef = collection(firestore, 'users');
+export const colFilesRef = collection(firestore, 'files');
+
+export function docStore<T>(pathOrRef: string | DocumentReference) {
+	let unsubscribe: () => void;
+	let ref: DocumentReference;
+
+	if (typeof pathOrRef !== 'string') ref = pathOrRef;
+	else ref = doc(firestore, pathOrRef);
+
+	const { subscribe } = readable<T | null>(undefined, (set) => {
+		unsubscribe = onSnapshot(ref, (snap) => set((snap.data() as T) ?? null));
+		return () => unsubscribe();
+	});
+
+	return {
+		subscribe,
+		_ref: ref,
+		_id: ref.id
+	};
+}

apps/backend/src/lib/firebase/functions.ts

@@ -0,0 +1,21 @@
+// import { dev } from '$app/environment';
+import { functions } from '$lib/firebase';
+
+import { httpsCallable } from 'firebase/functions';
+
+const endpoints = {
+	// TODO: Populate all Cloud Functions endpoints
+};
+
+export const getHttpsCallable = (endpoint: keyof typeof endpoints) =>
+	httpsCallable(functions, endpoint, {
+		timeout: 60000
+	});
+
+export const getHttpsEndpoint = (endpoint: keyof typeof endpoints, region = 'asia-southeast1') => {
+	if (typeof endpoint === 'undefined' || !endpoint) throw new Error('Missing `endpoint parameter`');
+
+	// TODO: Re-enable when emulators are setup
+	// if (dev) return `http://127.0.0.1:5000/it2566-armadillo/${region}/${endpoint}`;
+	return `https://${region}-it2566-armadillo.cloudfunctions.net/${endpoint}`;
+};

apps/backend/src/lib/firebase/index.ts

@@ -0,0 +1,38 @@
+import { dev } from '$app/environment';
+import { getAuth, connectAuthEmulator } from 'firebase/auth';
+import { getStorage, connectStorageEmulator } from 'firebase/storage';
+import { getFirestore, connectFirestoreEmulator } from 'firebase/firestore';
+import { getFunctions, connectFunctionsEmulator } from 'firebase/functions';
+
+import { getApp, getApps, initializeApp } from 'firebase/app';
+
+const firebaseConfig = {
+	apiKey: 'AIzaSyC6gzoI-LndCYQ_QDiFlAkvIoTRq05my8c',
+	authDomain: 'it2566-armadillo.firebaseapp.com',
+	projectId: 'it2566-armadillo',
+	storageBucket: 'it2566-armadillo.appspot.com',
+	messagingSenderId: '515917548885',
+	appId: '1:515917548885:web:6d518785d21891c81a33dc'
+};
+
+const app = getApps().length ? getApp() : initializeApp(firebaseConfig);
+
+export const auth = getAuth(app);
+export const storage = getStorage(app);
+export const firestore = getFirestore(app);
+export const functions = getFunctions(app, 'asia-southeast1');
+
+if (dev) {
+	console.warn(`
+    !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+    ! DEVELOPMENT MODE DETECTED.          !
+    ! IF YOU'RE BUILDING FOR PRODUCTION,  !
+    ! THIS SHOULD BE A WARNING!           !
+    !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+  `);
+
+	connectAuthEmulator(auth, 'http://127.0.0.1:9099');
+	connectStorageEmulator(storage, '127.0.0.1', 9199);
+	connectFirestoreEmulator(firestore, '127.0.0.1', 8080);
+	connectFunctionsEmulator(functions, '127.0.0.1', 5001);
+}

apps/backend/src/lib/stores.ts

@@ -0,0 +1,2 @@
+export * from './stores/authStore';
+export * from './stores/authStatusStore';

apps/backend/src/lib/stores/authStatusStore.ts

@@ -0,0 +1,5 @@
+import type { AuthStatus } from '$lib/models';
+
+import { writable } from 'svelte/store';
+
+export const authStatusStore = writable<AuthStatus | null>(null);

apps/backend/src/lib/stores/authStore.ts

@@ -0,0 +1,28 @@
+import type { UserDocument } from '@armadillo/shared';
+import type { User } from 'firebase/auth';
+
+import { derived, readable } from 'svelte/store';
+
+import { doc } from 'firebase/firestore';
+import { onAuthStateChanged } from 'firebase/auth';
+
+import { auth } from '$lib/firebase';
+import { docStore, colUsersRef } from '$lib/firebase/firestore';
+
+const authState = readable<User | null>(undefined, (set) => {
+	// Prevent server-side from running
+	if (typeof window === 'undefined') return;
+
+	const unsubscribe = onAuthStateChanged(auth, set);
+	return unsubscribe;
+});
+
+export const authStore = derived<typeof authState, UserDocument | null>(authState, ($user, set) => {
+	// Prevent server-side from running
+	if (typeof window === 'undefined') return;
+
+	if (!$user) return set($user);
+
+	const ref = doc(colUsersRef, $user.uid);
+	return docStore<UserDocument>(ref).subscribe(set);
+});

apps/backend/src/routes/+layout.svelte

@@ -1 +1,18 @@
-<script>import "../app.postcss";</script><slot></slot>
+<script>
+	import '../app.css';
+	import { authStore } from '$lib/stores';
+
+	// Preload auth state
+	$authStore;
+</script>
+
+{#if $authStore === undefined}
+	<!-- Auth preload screen -->
+	<div
+		class="z-50 fixed top-0 w-screen h-screen
+          flex flex-col justify-center items-center">
+		<span class="loading loading-infinity loading-lg" />
+	</div>
+{:else}
+	<slot />
+{/if}

apps/backend/src/routes/+page.svelte

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

apps/backend/src/routes/auth-demo/+layout.svelte

@@ -0,0 +1,3 @@
+<div class="mx-auto container">
+	<slot />
+</div>

apps/backend/src/routes/auth-demo/+page.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+	import { authStore, authStatusStore } from '$lib/stores';
+	import { signOut, signInEmailPassword, signUpEmailPassword } from '$lib/firebase/auth';
+
+	let email: string;
+	let password: string;
+</script>
+
+<h1 class="text-4xl font-bold">Authentication Testing</h1>
+
+<div class="mt-4 grid grid-cols-2 gap-4">
+	<div class="flex flex-col gap-4">
+		<h2 class="text-2xl">Form Data</h2>
+		<pre>Email Field   : {email}</pre>
+		<pre>Password Field: {password}</pre>
+
+		<h2 class="text-2xl">Auth Status</h2>
+		<p class="text-red-600">
+			If data below is <kbd class="kbd kbd-sm">null</kbd>, means there are no auth errors.
+		</p>
+		<pre>{JSON.stringify($authStatusStore, null, 2)}</pre>
+
+		<h2 class="text-2xl">Auth User Data</h2>
+		<pre>{JSON.stringify($authStore, null, 2)}</pre>
+	</div>
+
+	<div class="flex flex-col gap-4">
+		<h2 class="text-2xl">Login / Sign Up</h2>
+
+		<label class="form-control w-full">
+			<div class="label">
+				<span class="label-text">Email Address</span>
+				<span class="text-red-600 label-text-alt">*</span>
+			</div>
+			<input
+				type="text"
+				placeholder="john@example.com"
+				bind:value={email}
+				class="input input-bordered w-full" />
+		</label>
+
+		<label class="form-control w-full">
+			<div class="label">
+				<span class="label-text">Password</span>
+				<span class="text-red-600 label-text-alt">*</span>
+			</div>
+			<input
+				type="password"
+				placeholder="******"
+				bind:value={password}
+				class="input input-bordered w-full" />
+		</label>
+
+		<button class="btn btn-neutral w-full" on:click={() => signInEmailPassword(email, password)}>
+			Login
+		</button>
+
+		<button class="btn btn-neutral w-full" on:click={() => signUpEmailPassword(email, password)}>
+			Sign Up
+		</button>
+
+		<button class="btn btn-error w-full" on:click={() => signOut()}>Sign Out</button>
+	</div>
+</div>

apps/backend/src/routes/theme-test/+page.svelte

@@ -0,0 +1,19 @@
+<h2 class="text-3xl">Buttons</h2>
+
+<button class="btn">Button</button>
+<button class="btn btn-neutral">Neutral</button>
+<button class="btn btn-primary">Primary</button>
+<button class="btn btn-secondary">Secondary</button>
+<button class="btn btn-accent">Accent</button>
+<button class="btn btn-ghost">Ghost</button>
+<button class="btn btn-link">Link</button>
+
+<h2 class="text-3xl">Dropdown</h2>
+
+<div class="dropdown">
+	<div tabindex="0" role="button" class="btn m-1">Click</div>
+	<ul tabindex="-1" class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52">
+		<li><a href="/">Item 1</a></li>
+		<li><a href="/">Item 2</a></li>
+	</ul>
+</div>

apps/backend/tailwind.config.cjs

@@ -10,7 +10,10 @@ const config = {
 		extend: {}
 	},
 
-	plugins: [forms, typography, daisyui]
+	plugins: [forms, typography, daisyui],
+	daisyui: {
+		themes: ['dracula']
+	}
 };
 
 module.exports = config;

apps/wrapper/package.json

@@ -1,6 +1,6 @@
 {
   "private": true,
-  "name": "wrapper",
+  "name": "@armadillo/wrapper",
   "version": "0.0.0",
   "license": "MIT",
   "main": "./out/main/index.js",