Format web code with prettier

Added `.md` and `.json` to .prettierignore

web/.prettierignore

@@ -6,6 +6,9 @@ node_modules
 .env
 .env.*
 !.env.example
+src/api/open-api
+*.md
+*.json
 
 # Ignore files for PNPM, NPM and YARN
 pnpm-lock.yaml

web/src/app.css

@@ -6,86 +6,86 @@
 @tailwind utilities;
 
 :root {
-    font-family: 'Work Sans', sans-serif;
-    /* --immich-icon-button-hover-color: #d3d3d3; */
+	font-family: 'Work Sans', sans-serif;
+	/* --immich-icon-button-hover-color: #d3d3d3; */
 }
 
 html {
-    height: 100%;
-    width: 100%;
+	height: 100%;
+	width: 100%;
 }
 
 html::-webkit-scrollbar {
-    width: 8px;
+	width: 8px;
 }
 
 /* Track */
 html::-webkit-scrollbar-track {
-    background: #f1f1f1;
-    border-radius: 16px;
+	background: #f1f1f1;
+	border-radius: 16px;
 }
 
 /* Handle */
 html::-webkit-scrollbar-thumb {
-    background: rgba(85, 86, 87, 0.408);
-    border-radius: 16px;
+	background: rgba(85, 86, 87, 0.408);
+	border-radius: 16px;
 }
 
 /* Handle on hover */
 html::-webkit-scrollbar-thumb:hover {
-    background: #4250afad;
-    border-radius: 16px;
+	background: #4250afad;
+	border-radius: 16px;
 }
 
 body {
-    /* min-height: 100vh; */
-    margin: 0;
-    background-color: #f6f8fe;
-    color: #5f6368;
+	/* min-height: 100vh; */
+	margin: 0;
+	background-color: #f6f8fe;
+	color: #5f6368;
 }
 
 input:focus-visible {
-    outline-offset: 0px !important;
-    outline: none !important;
+	outline-offset: 0px !important;
+	outline: none !important;
 }
 
 @layer utilities {
-    .immich-form-input {
-        @apply bg-slate-100 p-2 rounded-md focus:border-immich-primary text-sm ;
-    }
-
-    .immich-form-label {
-        @apply font-medium text-sm text-gray-500;
-    }
-
-    .immich-btn-primary {
-        @apply bg-immich-primary text-gray-100 border rounded-xl py-2 px-4 transition-all duration-150 hover:bg-immich-primary hover:shadow-lg text-sm font-medium;
-    }
-
-    .immich-text-button {
-        @apply flex place-items-center place-content-center gap-2 hover:bg-immich-primary/5 p-2 rounded-lg font-medium;
-    }
-
-    /* width */
-    .immich-scrollbar::-webkit-scrollbar {
-        width: 8px;
-    }
-
-    /* Track */
-    .immich-scrollbar::-webkit-scrollbar-track {
-        background: #f1f1f1;
-        border-radius: 16px;
-    }
-
-    /* Handle */
-    .immich-scrollbar::-webkit-scrollbar-thumb {
-        background: rgba(85, 86, 87, 0.408);
-        border-radius: 16px;
-    }
-
-    /* Handle on hover */
-    .immich-scrollbar::-webkit-scrollbar-thumb:hover {
-        background: #4250afad;
-        border-radius: 16px;
-    }
+	.immich-form-input {
+		@apply bg-slate-100 p-2 rounded-md focus:border-immich-primary text-sm;
+	}
+
+	.immich-form-label {
+		@apply font-medium text-sm text-gray-500;
+	}
+
+	.immich-btn-primary {
+		@apply bg-immich-primary text-gray-100 border rounded-xl py-2 px-4 transition-all duration-150 hover:bg-immich-primary hover:shadow-lg text-sm font-medium;
+	}
+
+	.immich-text-button {
+		@apply flex place-items-center place-content-center gap-2 hover:bg-immich-primary/5 p-2 rounded-lg font-medium;
+	}
+
+	/* width */
+	.immich-scrollbar::-webkit-scrollbar {
+		width: 8px;
+	}
+
+	/* Track */
+	.immich-scrollbar::-webkit-scrollbar-track {
+		background: #f1f1f1;
+		border-radius: 16px;
+	}
+
+	/* Handle */
+	.immich-scrollbar::-webkit-scrollbar-thumb {
+		background: rgba(85, 86, 87, 0.408);
+		border-radius: 16px;
+	}
+
+	/* Handle on hover */
+	.immich-scrollbar::-webkit-scrollbar-thumb:hover {
+		background: #4250afad;
+		border-radius: 16px;
+	}
 }

web/src/lib/components/asset-viewer/asset-viewer.svelte

@@ -18,7 +18,7 @@
 	$: {
 		appearsInAlbums = [];
 
-		api.albumApi.getAllAlbums(undefined, asset.id).then(result => {
+		api.albumApi.getAllAlbums(undefined, asset.id).then((result) => {
 			appearsInAlbums = result.data;
 		});
 	}

web/src/lib/components/forms/create-user-form.svelte

@@ -1,122 +1,121 @@
 <script lang="ts">
-  import { api } from '@api';
-  import { createEventDispatcher } from 'svelte';
-
-  let error: string;
-  let success: string;
-
-  let password = '';
-  let confirmPassowrd = '';
-
-  let canCreateUser = false;
-
-  $: {
-    if (password !== confirmPassowrd && confirmPassowrd.length > 0) {
-      error = 'Password does not match';
-      canCreateUser = false;
-    } else {
-      error = '';
-      canCreateUser = true;
-    }
-  }
-  const dispatch = createEventDispatcher();
-
-  async function registerUser(event: SubmitEvent) {
-    if (canCreateUser) {
-      error = '';
-
-      const formElement = event.target as HTMLFormElement;
-
-      const form = new FormData(formElement);
-
-      const email = form.get('email');
-      const password = form.get('password');
-      const firstName = form.get('firstName');
-      const lastName = form.get('lastName');
-
-      const {status} = await api.userApi.createUser({
-        email: String(email),
-        password: String(password),
-        firstName: String(firstName),
-        lastName: String(lastName)
-      });
-
-      if (status === 201) {
-        success = 'New user created';
-
-        dispatch('user-created');
-        return;
-      } else {
-        error = 'Error create user account';
-      }
-    }
-  }
+	import { api } from '@api';
+	import { createEventDispatcher } from 'svelte';
+
+	let error: string;
+	let success: string;
+
+	let password = '';
+	let confirmPassowrd = '';
+
+	let canCreateUser = false;
+
+	$: {
+		if (password !== confirmPassowrd && confirmPassowrd.length > 0) {
+			error = 'Password does not match';
+			canCreateUser = false;
+		} else {
+			error = '';
+			canCreateUser = true;
+		}
+	}
+	const dispatch = createEventDispatcher();
+
+	async function registerUser(event: SubmitEvent) {
+		if (canCreateUser) {
+			error = '';
+
+			const formElement = event.target as HTMLFormElement;
+
+			const form = new FormData(formElement);
+
+			const email = form.get('email');
+			const password = form.get('password');
+			const firstName = form.get('firstName');
+			const lastName = form.get('lastName');
+
+			const { status } = await api.userApi.createUser({
+				email: String(email),
+				password: String(password),
+				firstName: String(firstName),
+				lastName: String(lastName)
+			});
+
+			if (status === 201) {
+				success = 'New user created';
+
+				dispatch('user-created');
+				return;
+			} else {
+				error = 'Error create user account';
+			}
+		}
+	}
 </script>
 
 <div class="border bg-white p-4 shadow-sm w-[500px] rounded-3xl py-8">
-    <div class="flex flex-col place-items-center place-content-center gap-4 px-4">
-        <img class="text-center" src="/immich-logo.svg" height="100" width="100" alt="immich-logo"/>
-        <h1 class="text-2xl text-immich-primary font-medium">Create new user</h1>
-        <p class="text-sm border rounded-md p-4 font-mono text-gray-600">
-            Please provide your user with the password, they will have to change it on their first sign
-            in.
-        </p>
-    </div>
-
-    <form on:submit|preventDefault={registerUser} autocomplete="off">
-        <div class="m-4 flex flex-col gap-2">
-            <label class="immich-form-label" for="email">Email</label>
-            <input class="immich-form-input" id="email" name="email" type="email" required/>
-        </div>
-
-        <div class="m-4 flex flex-col gap-2">
-            <label class="immich-form-label" for="password">Password</label>
-            <input
-                    class="immich-form-input"
-                    id="password"
-                    name="password"
-                    type="password"
-                    required
-                    bind:value={password}
-            />
-        </div>
-
-        <div class="m-4 flex flex-col gap-2">
-            <label class="immich-form-label" for="confirmPassword">Confirm Password</label>
-            <input
-                    class="immich-form-input"
-                    id="confirmPassword"
-                    name="password"
-                    type="password"
-                    required
-                    bind:value={confirmPassowrd}
-            />
-        </div>
-
-        <div class="m-4 flex flex-col gap-2">
-            <label class="immich-form-label" for="firstName">First Name</label>
-            <input class="immich-form-input" id="firstName" name="firstName" type="text" required/>
-        </div>
-
-        <div class="m-4 flex flex-col gap-2">
-            <label class="immich-form-label" for="lastName">Last Name</label>
-            <input class="immich-form-input" id="lastName" name="lastName" type="text" required/>
-        </div>
-
-        {#if error}
-            <p class="text-red-400 ml-4 text-sm">{error}</p>
-        {/if}
-
-        {#if success}
-            <p class="text-immich-primary ml-4 text-sm">{success}</p>
-        {/if}
-        <div class="flex w-full">
-            <button
-                    type="submit"
-                    class="m-4 bg-immich-primary hover:bg-immich-primary/75 px-6 py-3 text-white rounded-full shadow-md w-full font-medium"
-            >Create
-            </button
-            >
-        </div>
-    </form>
+	<div class="flex flex-col place-items-center place-content-center gap-4 px-4">
+		<img class="text-center" src="/immich-logo.svg" height="100" width="100" alt="immich-logo" />
+		<h1 class="text-2xl text-immich-primary font-medium">Create new user</h1>
+		<p class="text-sm border rounded-md p-4 font-mono text-gray-600">
+			Please provide your user with the password, they will have to change it on their first sign
+			in.
+		</p>
+	</div>
+
+	<form on:submit|preventDefault={registerUser} autocomplete="off">
+		<div class="m-4 flex flex-col gap-2">
+			<label class="immich-form-label" for="email">Email</label>
+			<input class="immich-form-input" id="email" name="email" type="email" required />
+		</div>
+
+		<div class="m-4 flex flex-col gap-2">
+			<label class="immich-form-label" for="password">Password</label>
+			<input
+				class="immich-form-input"
+				id="password"
+				name="password"
+				type="password"
+				required
+				bind:value={password}
+			/>
+		</div>
+
+		<div class="m-4 flex flex-col gap-2">
+			<label class="immich-form-label" for="confirmPassword">Confirm Password</label>
+			<input
+				class="immich-form-input"
+				id="confirmPassword"
+				name="password"
+				type="password"
+				required
+				bind:value={confirmPassowrd}
+			/>
+		</div>
+
+		<div class="m-4 flex flex-col gap-2">
+			<label class="immich-form-label" for="firstName">First Name</label>
+			<input class="immich-form-input" id="firstName" name="firstName" type="text" required />
+		</div>
+
+		<div class="m-4 flex flex-col gap-2">
+			<label class="immich-form-label" for="lastName">Last Name</label>
+			<input class="immich-form-input" id="lastName" name="lastName" type="text" required />
+		</div>
+
+		{#if error}
+			<p class="text-red-400 ml-4 text-sm">{error}</p>
+		{/if}
+
+		{#if success}
+			<p class="text-immich-primary ml-4 text-sm">{success}</p>
+		{/if}
+		<div class="flex w-full">
+			<button
+				type="submit"
+				class="m-4 bg-immich-primary hover:bg-immich-primary/75 px-6 py-3 text-white rounded-full shadow-md w-full font-medium"
+				>Create
+			</button>
+		</div>
+	</form>
 </div>

web/src/lib/constants.ts

@@ -1,2 +1,2 @@
 import { env } from '$env/dynamic/public';
-export const loginPageMessage: string = env.PUBLIC_LOGIN_PAGE_MESSAGE;
+export const loginPageMessage: string = env.PUBLIC_LOGIN_PAGE_MESSAGE;