add register functionality

kitsune-soc · May 2, 2024 · 3acad35 · 3acad35
1 parent fdb333a
commit 3acad35
Show file tree

Hide file tree

Showing 4 changed files with 201 additions and 99 deletions.
diff --git a/kitsune-fe/houdini.config.js b/kitsune-fe/houdini.config.js
@@ -7,6 +7,11 @@ const config = {
 	},
 	plugins: {
 		'houdini-svelte': {}
+	},
+	scalars: {
+		DateTime: {
+			type: 'Date'
+		}
 	}
 };
 

diff --git a/kitsune-fe/schema.graphql b/kitsune-fe/schema.graphql
@@ -1,30 +1,30 @@
 schema {
-  query: RootQuery
-  mutation: RootMutation
+	query: RootQuery
+	mutation: RootMutation
 }
 
 type Account {
-  avatar: MediaAttachment
-  createdAt: DateTime!
-  displayName: String
-  header: MediaAttachment
-  id: UUID!
-  locked: Boolean!
-  note: String
-  posts(after: String, before: String, first: Int, last: Int): PostConnection!
-  updatedAt: DateTime!
-  url: String!
-  username: String!
+	avatar: MediaAttachment
+	createdAt: DateTime!
+	displayName: String
+	header: MediaAttachment
+	id: UUID!
+	locked: Boolean!
+	note: String
+	posts(after: String, before: String, first: Int, last: Int): PostConnection!
+	updatedAt: DateTime!
+	url: String!
+	username: String!
 }
 
 enum CaptchaBackend {
-  H_CAPTCHA
-  M_CAPTCHA
+	H_CAPTCHA
+	M_CAPTCHA
 }
 
 type CaptchaInfo {
-  backend: CaptchaBackend!
-  key: String!
+	backend: CaptchaBackend!
+	key: String!
 }
 
 """
@@ -38,99 +38,133 @@ format, but it is always normalized to the UTC (Z) offset, e.g.
 scalar DateTime
 
 type Instance {
-  captcha: CaptchaInfo
-  characterLimit: Int!
-  description: String!
-  domain: String!
-  localPostCount: Int!
-  name: String!
-  registrationsOpen: Boolean!
-  userCount: Int!
-  version: String!
+	captcha: CaptchaInfo
+	characterLimit: Int!
+	description: String!
+	domain: String!
+	localPostCount: Int!
+	name: String!
+	registrationsOpen: Boolean!
+	userCount: Int!
+	version: String!
 }
 
 type MediaAttachment {
-  blurhash: String
-  contentType: String!
-  createdAt: DateTime!
-  description: String
-  id: UUID!
-  uploader: Account!
-  url: String!
+	blurhash: String
+	contentType: String!
+	createdAt: DateTime!
+	description: String
+	id: UUID!
+	uploader: Account!
+	url: String!
 }
 
 type OAuth2Application {
-  createdAt: DateTime!
-  id: UUID!
-  name: String!
-  redirectUri: String!
-  secret: String!
-  updatedAt: DateTime!
+	createdAt: DateTime!
+	id: UUID!
+	name: String!
+	redirectUri: String!
+	secret: String!
+	updatedAt: DateTime!
 }
 
-"""Information about pagination in a connection"""
+"""
+Information about pagination in a connection
+"""
 type PageInfo {
-  """When paginating forwards, the cursor to continue."""
-  endCursor: String
-
-  """When paginating forwards, are there more items?"""
-  hasNextPage: Boolean!
-
-  """When paginating backwards, are there more items?"""
-  hasPreviousPage: Boolean!
-
-  """When paginating backwards, the cursor to continue."""
-  startCursor: String
+	"""
+	When paginating forwards, the cursor to continue.
+	"""
+	endCursor: String
+
+	"""
+	When paginating forwards, are there more items?
+	"""
+	hasNextPage: Boolean!
+
+	"""
+	When paginating backwards, are there more items?
+	"""
+	hasPreviousPage: Boolean!
+
+	"""
+	When paginating backwards, the cursor to continue.
+	"""
+	startCursor: String
 }
 
 type Post {
-  account: Account!
-  attachments: [MediaAttachment!]!
-  content: String!
-  createdAt: DateTime!
-  id: UUID!
-  isSensitive: Boolean!
-  subject: String
-  updatedAt: DateTime!
-  url: String!
-  visibility: Visibility!
+	account: Account!
+	attachments: [MediaAttachment!]!
+	content: String!
+	createdAt: DateTime!
+	id: UUID!
+	isSensitive: Boolean!
+	subject: String
+	updatedAt: DateTime!
+	url: String!
+	visibility: Visibility!
 }
 
 type PostConnection {
-  """A list of edges."""
-  edges: [PostEdge!]!
-
-  """A list of nodes."""
-  nodes: [Post!]!
-
-  """Information to aid in pagination."""
-  pageInfo: PageInfo!
+	"""
+	A list of edges.
+	"""
+	edges: [PostEdge!]!
+
+	"""
+	A list of nodes.
+	"""
+	nodes: [Post!]!
+
+	"""
+	Information to aid in pagination.
+	"""
+	pageInfo: PageInfo!
 }
 
-"""An edge in a connection."""
+"""
+An edge in a connection.
+"""
 type PostEdge {
-  """A cursor for use in pagination"""
-  cursor: String!
-
-  """The item at the end of the edge"""
-  node: Post!
+	"""
+	A cursor for use in pagination
+	"""
+	cursor: String!
+
+	"""
+	The item at the end of the edge
+	"""
+	node: Post!
 }
 
 type RootMutation {
-  createPost(content: String!, isSensitive: Boolean!, visibility: Visibility!): Post!
-  deletePost(id: UUID!): UUID!
-  registerOauthApplication(name: String!, redirectUri: String!): OAuth2Application!
-  registerUser(captchaToken: String, email: String!, password: String!, username: String!): User!
-  updateUser(avatar: Upload, displayName: String, header: Upload, locked: Boolean, note: String): Account!
+	createPost(content: String!, isSensitive: Boolean!, visibility: Visibility!): Post!
+	deletePost(id: UUID!): UUID!
+	registerOauthApplication(name: String!, redirectUri: String!): OAuth2Application!
+	registerUser(captchaToken: String, email: String!, password: String!, username: String!): User!
+	updateUser(
+		avatar: Upload
+		displayName: String
+		header: Upload
+		locked: Boolean
+		note: String
+	): Account!
 }
 
 type RootQuery {
-  getAccountById(id: UUID!): Account
-  getPostById(id: UUID!): Post!
-  homeTimeline(after: String, before: String, first: Int, last: Int): PostConnection!
-  instance: Instance!
-  myAccount: Account!
-  publicTimeline(after: String, before: String, first: Int, last: Int, onlyLocal: Boolean! = true): PostConnection!
+	getAccountById(id: UUID!): Account
+	getPostById(id: UUID!): Post!
+	homeTimeline(after: String, before: String, first: Int, last: Int): PostConnection!
+	instance: Instance!
+	myAccount: Account!
+	publicTimeline(
+		after: String
+		before: String
+		first: Int
+		last: Int
+		onlyLocal: Boolean! = true
+	): PostConnection!
 }
 
 """
@@ -148,17 +182,17 @@ scalar UUID
 scalar Upload
 
 type User {
-  account: Account!
-  createdAt: DateTime!
-  email: String!
-  id: UUID!
-  updatedAt: DateTime!
-  username: String!
+	account: Account!
+	createdAt: DateTime!
+	email: String!
+	id: UUID!
+	updatedAt: DateTime!
+	username: String!
 }
 
 enum Visibility {
-  FOLLOWER_ONLY
-  MENTION_ONLY
-  PUBLIC
-  UNLISTED
+	FOLLOWER_ONLY
+	MENTION_ONLY
+	PUBLIC
+	UNLISTED
 }
diff --git a/kitsune-fe/src/client.ts b/kitsune-fe/src/client.ts
@@ -1,7 +1,7 @@
 import { HoudiniClient } from '$houdini';
 
 export default new HoudiniClient({
-	url: 'http://localhost:5000/graphql'
+	url: `${import.meta.env.VITE_BACKEND_URL ?? ''}/graphql`
 
 	// uncomment this to configure the network call (for things like authentication)
 	// for more information, please visit here: https://www.houdinigraphql.com/guides/authentication

diff --git a/kitsune-fe/src/routes/+page.svelte b/kitsune-fe/src/routes/+page.svelte
@@ -1,10 +1,63 @@
 <script lang="ts">
+	import { graphql } from '$houdini';
 	import Button from '$lib/components/Button.svelte';
 	import { onMount } from 'svelte';
 
+	let registerButtonDisabled = $state(false);
+
 	onMount(() => {
 		// TODO: Authenticated check and redirect to home timeline
 	});
+
+	async function handleRegister(
+		event: SubmitEvent & { currentTarget: EventTarget & HTMLFormElement }
+	) {
+		event.preventDefault();
+
+		const data = new FormData(event.currentTarget);
+
+		const username = data.get('username');
+		const email = data.get('email');
+		const password = data.get('password');
+		const passwordConfirmation = data.get('confirm-password');
+
+		if (!username) {
+			alert('Missing username');
+			return;
+		} else if (!email) {
+			alert('Missing email');
+			return;
+		} else if (!password) {
+			alert('Missing password');
+			return;
+		} else if (!passwordConfirmation || passwordConfirmation !== password) {
+			alert('Password mismatch');
+			return;
+		}
+
+		const register = graphql(`
+			mutation Register($username: String!, $email: String!, $password: String!) {
+				registerUser(username: $username, email: $email, password: $password) {
+					username
+					createdAt
+				}
+			}
+		`);
+
+		try {
+			const response = await register.mutate({
+				username: username as string,
+				email: email as string,
+				password: password as string
+			});
+
+			if (response.errors) {
+				alert('Failed to register:\n' + response.errors.map((error) => error.message).concat('\n'));
+			} else {
+				alert('Registered!');
+			}
+		} catch (ex: unknown) {}
+	}
 </script>
 
 <div class="landing-page">
@@ -25,7 +78,13 @@
 			</div>
 
 			<div class="top-section-right">
-				<form class="register-form">
+				<form
+					class="register-form"
+					onsubmit={(e) => {
+						registerButtonDisabled = true;
+						handleRegister(e).finally(() => (registerButtonDisabled = false));
+					}}
+				>
 					<label>
 						Username
 						<br /><input type="text" name="username" />
@@ -47,7 +106,11 @@
 					</label>
 
 					<p>
-						<Button class="register-button" onclick={() => console.log('register')}>
+						<Button
+							class="register-button"
+							onclick={() => console.log('register')}
+							disabled={registerButtonDisabled}
+						>
 							Register
 						</Button>
 					</p>