form story

kitsune-fe/schema.graphql

@@ -1,6 +1,6 @@
 schema {
-  query: RootQuery
-  mutation: RootMutation
+	query: RootQuery
+	mutation: RootMutation
 }
 
 """
@@ -10,27 +10,27 @@ Indicates that an Input Object is a OneOf Input Object (and thus requires
 directive @oneOf on INPUT_OBJECT
 
 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!
 }
 
 """
@@ -44,99 +44,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!
 }
 
 """
@@ -154,17 +188,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
 }

kitsune-fe/src/lib/components/RegisterForm.svelte

@@ -11,7 +11,13 @@
 	} = $props();
 </script>
 
-<form class="grid grid-cols-1 gap-6" onsubmit={onregister}>
+<form
+	class="grid grid-cols-1 gap-6"
+	onsubmit={(e) => {
+		e.preventDefault();
+		onregister(e);
+	}}
+>
 	<label class="block" for="username">
 		Username
 		<Input type="text" name="username" placeholder="hangaku" disabled={processing} />

kitsune-fe/src/routes/+page.svelte

@@ -13,7 +13,7 @@
 	const stats = $derived({
 		postCount: $statsStore.data?.instance.localPostCount ?? 0,
 		registeredUsers: $statsStore.data?.instance.userCount ?? 0,
-		registrationsOpen: $statsStore.data?.instance.registrationsOpen ?? true,
+		registrationsOpen: $statsStore.data?.instance.registrationsOpen ?? true
 	});
 
 	const register = new RegisterUserStore();
@@ -23,7 +23,6 @@
 	let registerErrorDialogOpen = $state(false);
 
 	async function doRegister(event: SubmitEvent & { currentTarget: EventTarget & HTMLFormElement }) {
-		event.preventDefault();
 		registerButtonDisabled = true;
 
 		const formData = new FormData(event.currentTarget);
@@ -73,11 +72,13 @@
 <Dialog isOpen={registerErrorDialogOpen}>
 	<h2>Registration failed!</h2>
 
-	<ol>
-		{#each registerErrors as error}
-			<li>{error}</li>
-		{/each}
-	</ol>
+	{#if registerErrors.length > 0}
+		<ol>
+			{#each registerErrors as error}
+				<li>{error}</li>
+			{/each}
+		</ol>
+	{/if}
 
 	<button
 		class="border-grey rounded border-2 px-2 py-1"

kitsune-fe/src/stories/RegisterForm.stories.svelte

@@ -0,0 +1,16 @@
+<script lang="ts" module>
+	import RegisterFormComponent from '$lib/components/RegisterForm.svelte';
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import { fn } from '@storybook/test';
+
+	const { Story } = defineMeta({
+		title: 'RegisterForm',
+		component: RegisterFormComponent,
+		tags: ['autodocs'],
+		args: {
+			onregister: fn()
+		}
+	});
+</script>
+
+<Story name="Default" />