added signups, editred login routes, added complete oauth for discord, just need to add to db and change schemas for authority-like accounts

CCleanerShot · CCleanerShot · commit 6e16b75aabeb · 2025-07-18T18:28:49.000-07:00
diff --git a/apps/website/src/app-special.css b/apps/website/src/app-special.css
@@ -17,6 +17,10 @@
 	transform: translateY(-50%);
 }
 
+.button.button-thin {
+	border: 3px solid black;
+}
+
 .button-border {
 	border: 1px solid black;
 	text-align: center;
diff --git a/apps/website/src/app.css b/apps/website/src/app.css
@@ -7,10 +7,12 @@
 :root {
 	--button-padding-x: 0.6rem;
 	--button-padding-y: 0.2rem;
-	--color-primary: #aaaaaa;
-	--color-secondary: #ccffcc;
-	--color-green: oklch(0.723 0.219 149.579);
-	--color-red: oklch(0.637 0.237 25.331);
+	--color-discord-background: #36373e;
+	--color-discord-foreground: #5865f2;
+	--color-green: #00c950;
+	--color-primary: #502929;
+	--color-red: #fb2c36;
+	--color-secondary: #2eac2e;
 	--transition-time-short: 0.1s;
 	--transition-time-medium: 0.25s;
 	--transition-time-long: 0.5s;
@@ -64,13 +66,13 @@ main {
 }
 
 .input {
-	border: 1px solid black;
+	border: 1px solid gray;
 	padding-left: 0.2rem;
 	padding-right: 0.2rem;
 }
 
 .input:focus-within {
-	border: 3px solid black;
+	border: 1px solid black;
 }
 
 .table tr:hover .remove-button {
diff --git a/apps/website/src/lib/classes/Form.svelte.ts b/apps/website/src/lib/classes/Form.svelte.ts
@@ -6,6 +6,10 @@ export class Form {
 
 	constructor(elements: FormElement[]) {
 		this.elements = elements;
+
+		for (const element of this.elements) {
+			element.form = this;
+		}
 	}
 
 	public Clean() {
diff --git a/apps/website/src/lib/classes/FormElement.svelte.ts b/apps/website/src/lib/classes/FormElement.svelte.ts
@@ -1,22 +1,28 @@
+import type { Form } from './Form.svelte';
+
 export class FormElement {
 	public element: HTMLInputElement;
 	public id: string;
-	validation: () => boolean;
-	invalidMessage: string;
+	public form?: Form;
+	private validation: (form: Form) => { success: true } | { success: false; msg: string };
 
-	constructor(id: string, validation: () => boolean, invalidMessage: string) {
+	public constructor(id: string, validation: (form: Form) => { success: true } | { success: false; msg: string }) {
 		this.id = id;
 		this.element = undefined as any as HTMLInputElement; // gets defined during onMount;
 		this.validation = validation;
-		this.invalidMessage = invalidMessage;
 	}
 
 	/** Contains a side-effect which sets the input's custom validity message and reports it, if false. */
 	public Validate(): boolean {
-		if (this.validation()) {
+		if (!this.form) {
+			return false;
+		}
+
+		const result = this.validation(this.form);
+		if (result.success) {
 			return true;
 		} else {
-			this.element.setCustomValidity(this.invalidMessage);
+			this.element.setCustomValidity(result.msg);
 			this.element.reportValidity();
 			return false;
 		}
diff --git a/apps/website/src/lib/components/RoutePage.svelte b/apps/website/src/lib/components/RoutePage.svelte
@@ -8,10 +8,12 @@
 		route: (typeof ROUTES)['PAGES'][number];
 		title: string;
 		className?: string;
+		classNameText?: string;
 		imageUrl?: string;
+		thin?: boolean;
 	};
 
-	const { route, title, className, imageUrl }: Props = $props();
+	const { route, title, className, classNameText, imageUrl, thin = false }: Props = $props();
 
 	let style = $state('');
 
@@ -20,9 +22,9 @@
 	});
 </script>
 
-<Link class={['button flex items-center justify-between gap-2', className]} href={route} {style}>
+<Link class={['flex items-center justify-between gap-2', thin ? "button button-thin" : "button", className]} href={route} {style}>
 	{#if imageUrl}
 		<img alt="related to the route" class="h-auto w-8" src={imageUrl} />
 	{/if}
-	<span class="m-auto">{title}</span>
+	<span class={['m-auto', classNameText]}>{title}</span>
 </Link>
diff --git a/apps/website/src/lib/components/oauth/DiscordProvider.svelte b/apps/website/src/lib/components/oauth/DiscordProvider.svelte
@@ -0,0 +1,54 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { base } from '$app/paths';
+	import {
+		PUBLIC_DISCORD_OAUTH_CLIENT_ID,
+		PUBLIC_DISCORD_OAUTH_REDIRECT_URI,
+		PUBLIC_DISCORD_OAUTH_REDIRECT_URI_TEST,
+		PUBLIC_ENVIRONMENT
+	} from '$env/static/public';
+	import discordImage from '$lib/images/discord.png';
+	import { clientFetch } from '$lib/other/clientFetch';
+	import type { OAuthAuthorizeQuery, OAuthAuthorizeQueryDiscord } from '$lib/types';
+	import { utility } from '$lib/utility/utility';
+	import { redirect } from '@sveltejs/kit';
+
+	type Props = {
+		text: string;
+		className?: string;
+	};
+
+	let { text, className }: Props = $props();
+
+	const onclick = async () => {
+		const query: OAuthAuthorizeQueryDiscord = {
+			client_id: PUBLIC_DISCORD_OAUTH_CLIENT_ID,
+			redirect_uri: utility.getRedirectUri("discord"),
+			response_type: 'code',
+			scope: 'identify'
+		};
+        
+        const baseUrl = new URL('https://discord.com/oauth2/authorize');
+
+		for (const [key, value] of utility.betterEntries(query)) {
+			baseUrl.searchParams.set(key, value);
+		}
+
+		window.location.href = baseUrl.toString();
+	};
+</script>
+
+<button class={['button button-thin flex items-center gap-2', className]} {onclick}>
+	<span class="font-xx-small">{text}</span>
+	<img src={discordImage} alt="Icon for Discord" width={18} />
+</button>
+
+<style>
+	.button:hover {
+		background-color: var(--color-discord-foreground);
+	}
+
+	.button:hover img {
+		filter: grayscale(100%);
+	}
+</style>
diff --git a/apps/website/src/lib/mongodb/collections/AuthProviderDiscord.ts b/apps/website/src/lib/mongodb/collections/AuthProviderDiscord.ts
@@ -0,0 +1,6 @@
+export type AuthProviderDiscord = {
+	DiscordAvatar: string;
+	DiscordId: bigint;
+	DiscordUserId: string;
+	DiscordUsername: string;
+};
diff --git a/apps/website/src/lib/mongodb/collections/AuthProviderEmail.ts b/apps/website/src/lib/mongodb/collections/AuthProviderEmail.ts
@@ -0,0 +1,5 @@
+export type AuthProviderEmail = {
+	Email: string;
+	Password: string;
+	Username: string;
+};
diff --git a/apps/website/src/lib/mongodb/collections/MongoUser.ts b/apps/website/src/lib/mongodb/collections/MongoUser.ts
@@ -1,5 +1,4 @@
 export type MongoUser = {
-	DiscordId: bigint;
-	Password: string;
-	Username: string;
+	AuthorizationId: string;
+	AuthorizationMethod: string;
 };
diff --git a/apps/website/src/lib/other/routes.ts b/apps/website/src/lib/other/routes.ts
@@ -1,15 +1,6 @@
 export const ROUTES = {
-	API: [
-		'/skyblock/?/create-buy-item',
-		'/skyblock/?/create-sell-item',
-		'/api/auctions',
-		'/api/auctions/buy',
-		'/api/bazaar',
-		'/api/bazaar/buy',
-		'/api/bazaar/sell',
-		'/api/login'
-	] as const,
-	PAGES: ['/discord', '/skyblock', '/skyblock/auctions', '/skyblock/bazaar'] as const
+	API: ['/api/auctions', '/api/auctions/buy', '/api/bazaar', '/api/bazaar/buy', '/api/bazaar/sell', '/api/login'] as const,
+	PAGES: ['/discord', '/skyblock', '/skyblock/auctions', '/skyblock/bazaar', '/account/login', '/account/signup'] as const
 } as const;
 
 export type Routes = typeof ROUTES;
diff --git a/apps/website/src/lib/server/utilityServer.ts b/apps/website/src/lib/server/utilityServer.ts
@@ -25,8 +25,11 @@ export const utilityServer = {
 
 		console.log(`${prefix}:`, ...data);
 	},
-	redirectToLogin: (route: { id: any }) => {
-		const redirectUrl = `/login?redirect=${route.id}`;
-		return redirect(307, redirectUrl);
+	redirectToLogin: (route?: { id: any }) => {
+		if (route) {
+			return redirect(307, `/account/login?redirect=${route.id}`);
+		} else {
+			return redirect(307, `/account/login`);
+		}
 	}
 };
diff --git a/apps/website/src/lib/types.ts b/apps/website/src/lib/types.ts
@@ -57,6 +57,64 @@ export type BazaarSocketMessage = {
 	RequestedItem: BazaarItem;
 };
 
+export type DiscordUserResponse = {
+	id: string;
+	username: string;
+	avatar: string;
+	discriminator: string;
+	public_flags: number;
+	flags: number;
+	banner: any;
+	accent_color: any;
+	global_name: string;
+	avatar_decoration_data: any;
+	collectibles: any;
+	display_name_styles: any;
+	banner_color: any;
+	clan: any;
+	primary_guild: any;
+	mfa_enabled: boolean;
+	locale: string;
+	premium_type: number;
+};
+
+// https://datatracker.ietf.org/doc/html/rfc6749
+export type OAuthAuthorizeQuery = {
+	client_id: string;
+	redirect_uri: string;
+	response_type: 'code';
+	scope: string;
+};
+
+export type OAuthAuthorizeQueryDiscord = OAuthAuthorizeQuery & {
+	scope: 'identify';
+};
+
+export type OAuthTokenHeaders = {
+	'Accept-Encoding': 'application/x-www-form-urlencoded';
+	'Content-Type': 'application/x-www-form-urlencoded';
+};
+
+export type OAuthTokenHeadersDiscord = OAuthTokenHeaders;
+
+export type OAuthTokenParams = {
+	client_id: string;
+	client_secret: string;
+	code: string;
+	grant_type: 'authorization_code';
+	redirect_uri: string;
+};
+
+export type OAuthTokenParamsDiscord = OAuthTokenParams;
+
+export type OAuthTokenResponse = {
+	token_type: 'Bearer';
+	access_token: string;
+	expires_in: number;
+	refresh_token: string;
+	scope: string;
+};
+
 export enum SocketMessageType {
 	AUCTIONS,
 	BAZAAR
diff --git a/apps/website/src/lib/utility/utility.ts b/apps/website/src/lib/utility/utility.ts
@@ -1,6 +1,10 @@
-import { PUBLIC_DOMAIN, PUBLIC_ENVIRONMENT } from '$env/static/public';
+import { PUBLIC_DISCORD_OAUTH_REDIRECT_URI, PUBLIC_DISCORD_OAUTH_REDIRECT_URI_TEST, PUBLIC_ENVIRONMENT } from '$env/static/public';
 
 export const utility = {
+	betterEntries: <T extends Record<string, any>>(obj: T) => {
+		type Entries<T> = { [K in keyof T]: [K, T[K]] }[keyof T][];
+		return Object.entries(obj) as Entries<T>;
+	},
 	capitalize: (input: string): string => {
 		return input[0].toUpperCase() + input.slice(1);
 	},
@@ -24,6 +28,18 @@ export const utility = {
 				}
 		}
 	},
+	getRedirectUri(provider: 'discord') {
+		switch (provider) {
+			case 'discord':
+				if (PUBLIC_ENVIRONMENT === 'production') {
+					return PUBLIC_DISCORD_OAUTH_REDIRECT_URI;
+				} else {
+					return PUBLIC_DISCORD_OAUTH_REDIRECT_URI_TEST;
+				}
+			default:
+				throw new Error('Unimplemented provider.');
+		}
+	},
 	randomNumber: (min: number, max: number): number => {
 		return min + Math.round(Math.random() * (max - min));
 	},
diff --git a/apps/website/src/routes/account/+layout.svelte b/apps/website/src/routes/account/+layout.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+	import RoutePage from '$lib/components/RoutePage.svelte';
+
+	let { children } = $props();
+</script>
+
+<div class="flex justify-center gap-2 mt-2">
+    <RoutePage route="/account/login" title="Login" classNameText="font-small" thin={true}/>
+    <RoutePage route="/account/signup" title="Sign Up" classNameText="font-small" thin={true}/>
+</div>
+
+{@render children()}
diff --git a/apps/website/src/routes/account/login/+page.server.ts b/apps/website/src/routes/account/login/+page.server.ts
@@ -3,6 +3,6 @@ import type { PageServerLoad } from './$types';
 export const load: PageServerLoad = (event) => {
 	return {
 		title: 'Login',
-		description: `If you don't know your details, you don't belong here.`
+		description: `Login to use KatBot's site features like stock market tracking for Hypixel items.`
 	};
 };
diff --git a/apps/website/src/routes/account/login/+page.svelte b/apps/website/src/routes/account/login/+page.svelte
diff --git a/apps/website/src/routes/account/signup/+page.server.ts b/apps/website/src/routes/account/signup/+page.server.ts
diff --git a/apps/website/src/routes/account/signup/+page.svelte b/apps/website/src/routes/account/signup/+page.svelte
diff --git a/apps/website/src/routes/api/login/+server.ts b/apps/website/src/routes/api/login/+server.ts
diff --git a/apps/website/src/routes/auth/callbacks/discord/+server.ts b/apps/website/src/routes/auth/callbacks/discord/+server.ts

Original file line number	Diff line number	Diff line change
`@@ -6,6 +6,10 @@ export class Form {`
`6`	`6`
`7`	`7`	`constructor(elements: FormElement[]) {`
`8`	`8`	`this.elements = elements;`
	`9`	`+`
	`10`	`+ for (const element of this.elements) {`
	`11`	`+ element.form = this;`
	`12`	`+ }`
`9`	`13`	`}`
`10`	`14`
`11`	`15`	`public Clean() {`