import cleanup

src/routes/admin/users/[user]/edit/+page.svelte

@@ -4,6 +4,7 @@
 	import type { PageProps } from './$types';
 	import { PERMISSIONS } from '$lib/consts';
 	import { userPerms, employerPerms, adminPerms, telFormatter } from '$lib/shared.svelte';
+
 	let permsAccordions: boolean[] = [false, false, false];
 
 	let passwordVisible = $state(false);
@@ -104,32 +105,32 @@
 				Edit User {data.user.username}{data.user.fullName ? ` (${data.user.fullName})` : ''}
 			</div>
 		</div>
-		<form method="POST" class="px-4" autocomplete="off" use:enhance>
+		<form autocomplete="off" class="px-4" method="POST" use:enhance>
 			<div class="mt-4 text-sm font-semibold">
 				Username <span class="text-red-500">*</span>
 				<input
-					type="text"
-					name="username"
-					id="username"
-					value={data.user?.username}
-					placeholder="Username"
 					class="w-full rounded font-normal"
+					id="username"
+					name="username"
+					placeholder="Username"
 					required
+					type="text"
+					value={data.user?.username}
 				/>
 			</div>
 			<div class="relative pt-4 text-sm font-semibold">
 				New password (optional)
 				<input
-					type="password"
-					name="password"
-					id="password"
-					placeholder="New password"
 					class="w-full rounded font-normal"
+					id="password"
+					name="password"
+					placeholder="New password"
+					type="password"
 				/>
 				<button
-					type="button"
-					onclick={showPassword}
 					class="absolute right-2.5 -translate-y-1/2 transform pt-12"
+					onclick={showPassword}
+					type="button"
 				>
 					<span class="material-symbols-outlined"
 						>{passwordVisible ? 'visibility' : 'visibility_off'}</span
@@ -139,48 +140,48 @@
 			<div class="mt-4 text-sm font-semibold">
 				Full name <span class="danger-color">*</span>
 				<input
-					type="text"
-					name="fullName"
-					id="fullName"
-					value={data.user?.fullName}
-					placeholder="Full name"
 					class="w-full rounded font-normal"
+					id="fullName"
+					name="fullName"
+					placeholder="Full name"
 					required
+					type="text"
+					value={data.user?.fullName}
 				/>
 			</div>
 			<div class="mt-4 text-sm font-semibold">
 				Email <span class="danger-color">*</span>
 				<input
-					type="email"
-					name="email"
-					id="email"
-					value={data.user?.email}
-					placeholder="Email"
 					class="w-full rounded font-normal"
+					id="email"
+					name="email"
+					placeholder="Email"
 					required
+					type="email"
+					value={data.user?.email}
 				/>
 			</div>
 			<div class="mt-4 text-sm font-semibold">
 				Phone (optional)
 				<input
-					type="tel"
-					name="phone"
-					id="phone"
-					value={data.user?.phone}
-					placeholder="Phone"
 					class="w-full rounded font-normal"
+					id="phone"
+					name="phone"
 					pattern="([0-9]\{3}) [0-9]\{3}-[0-9]\{3}"
+					placeholder="Phone"
+					type="tel"
+					value={data.user?.phone}
 				/>
 			</div>
 			<div class="mt-4 text-sm font-semibold">
 				Company code (optional)
 				<input
-					type="text"
-					name="companyCode"
-					id="companyCode"
-					placeholder="Company code"
-					value={data.user?.companyCode}
 					class="w-full rounded font-normal"
+					id="companyCode"
+					name="companyCode"
+					placeholder="Company code"
+					type="text"
+					value={data.user?.companyCode}
 				/>
 			</div>
 			<p class="low-emphasis-text">
@@ -195,12 +196,12 @@
 					<span class="flex place-items-center">
 						<span class="ml-1 mr-3"
 							><input
-								type="checkbox"
-								name="userPerms"
-								id="userPerms"
-								class="select-all"
 								checked={(perms & userPerms) === userPerms}
+								class="select-all"
+								id="userPerms"
 								indeterminate={(perms & userPerms) !== userPerms && (perms & userPerms) > 0}
+								name="userPerms"
+								type="checkbox"
 							/></span
 						>User Permissions
 					</span>
@@ -211,25 +212,25 @@
 				<div class="panel hidden p-2">
 					<div>
 						<div class="mb-1">
-							<label for="view" class="flex place-items-center">
+							<label class="flex place-items-center" for="view">
 								<input
-									type="checkbox"
-									name="view"
-									id="view"
-									class="permCheckbox mx-1"
 									checked={(perms & PERMISSIONS.VIEW) > 0}
+									class="permCheckbox mx-1"
+									id="view"
+									name="view"
+									type="checkbox"
 								/>
 								<span class="ml-2">View access</span></label
 							>
 						</div>
 						<div class="mb-1">
-							<label for="apply" class="flex place-items-center">
+							<label class="flex place-items-center" for="apply">
 								<input
-									type="checkbox"
-									name="apply"
-									id="apply"
-									class="permCheckbox mx-1"
 									checked={(perms & PERMISSIONS.APPLY_FOR_JOBS) > 0}
+									class="permCheckbox mx-1"
+									id="apply"
+									name="apply"
+									type="checkbox"
 								/>
 								<span class="ml-2">Apply for jobs</span></label
 							>
@@ -245,13 +246,13 @@
 					<span class="flex place-items-center">
 						<span class="ml-1 mr-3"
 							><input
-								type="checkbox"
-								name="companyPerms"
-								id="companyPerms"
-								class="select-all"
 								checked={(perms & employerPerms) === employerPerms}
+								class="select-all"
+								id="companyPerms"
 								indeterminate={(perms & employerPerms) !== employerPerms &&
 									(perms & employerPerms) > 0}
+								name="companyPerms"
+								type="checkbox"
 							/></span
 						>Company Permissions
 					</span>
@@ -262,25 +263,25 @@
 				<div class="panel hidden p-2">
 					<div>
 						<div class="mb-1">
-							<label for="submitPostings" class="flex place-items-center">
+							<label class="flex place-items-center" for="submitPostings">
 								<input
-									type="checkbox"
-									name="submitPostings"
-									id="submitPostings"
 									checked={(perms & PERMISSIONS.SUBMIT_POSTINGS) >= 0}
 									class="permCheckbox mx-1"
+									id="submitPostings"
+									name="submitPostings"
+									type="checkbox"
 								/>
 								<span class="ml-2">Submit postings</span></label
 							>
 						</div>
 						<div class="mb-1">
-							<label for="manageEmployers" class="flex place-items-center">
+							<label class="flex place-items-center" for="manageEmployers">
 								<input
-									type="checkbox"
-									name="manageEmployers"
-									id="manageEmployers"
 									checked={(perms & PERMISSIONS.MANAGE_EMPLOYERS) > 0}
 									class="permCheckbox mx-1"
+									id="manageEmployers"
+									name="manageEmployers"
+									type="checkbox"
 								/>
 								<span class="ml-2">Manage employers (within their company)</span></label
 							>
@@ -296,12 +297,12 @@
 					<span class="flex place-items-center">
 						<span class="ml-1 mr-3"
 							><input
-								type="checkbox"
-								name="adminPerms"
-								id="adminPerms"
-								class="select-all"
 								checked={(perms & adminPerms) === adminPerms}
+								class="select-all"
+								id="adminPerms"
 								indeterminate={(perms & adminPerms) !== adminPerms && (perms & adminPerms) > 0}
+								name="adminPerms"
+								type="checkbox"
 							/></span
 						>Admin Permissions
 					</span>
@@ -312,49 +313,49 @@
 				<div class="panel hidden p-2">
 					<div>
 						<div class="mb-1">
-							<label for="manageTags" class="flex place-items-center">
+							<label class="flex place-items-center" for="manageTags">
 								<input
-									type="checkbox"
-									name="manageTags"
-									id="manageTags"
 									checked={(perms & PERMISSIONS.MANAGE_TAGS) > 0}
 									class="permCheckbox mx-1"
+									id="manageTags"
+									name="manageTags"
+									type="checkbox"
 								/>
 								<span class="ml-2">Manage tags</span></label
 							>
 						</div>
 						<div class="mb-1">
-							<label for="managePostings" class="flex place-items-center">
+							<label class="flex place-items-center" for="managePostings">
 								<input
-									type="checkbox"
-									name="managePostings"
-									id="managePostings"
 									checked={(perms & PERMISSIONS.MANAGE_POSTINGS) > 0}
 									class="permCheckbox mx-1"
+									id="managePostings"
+									name="managePostings"
+									type="checkbox"
 								/>
 								<span class="ml-2">Manage postings</span></label
 							>
 						</div>
 						<div class="mb-1">
-							<label for="manageUsers" class="flex place-items-center">
+							<label class="flex place-items-center" for="manageUsers">
 								<input
-									type="checkbox"
-									name="manageUsers"
-									id="manageUsers"
 									checked={(perms & PERMISSIONS.MANAGE_USERS) > 0}
 									class="permCheckbox mx-1"
+									id="manageUsers"
+									name="manageUsers"
+									type="checkbox"
 								/>
 								<span class="ml-2">Manage users</span></label
 							>
 						</div>
 						<div class="mb-1">
-							<label for="manageCompanies" class="flex place-items-center">
+							<label class="flex place-items-center" for="manageCompanies">
 								<input
-									type="checkbox"
-									name="manageCompanies"
-									id="manageCompanies"
 									checked={(perms & PERMISSIONS.MANAGE_COMPANIES) > 0}
 									class="permCheckbox mx-1"
+									id="manageCompanies"
+									name="manageCompanies"
+									type="checkbox"
 								/>
 								<span class="ml-2">Manage companies</span></label
 							>
@@ -362,13 +363,13 @@
 					</div>
 				</div>
 			</div>
-			<label for="accountActive" class="flex place-items-center p-2">
+			<label class="flex place-items-center p-2" for="accountActive">
 				<input
-					type="checkbox"
-					name="accountActive"
-					id="accountActive"
 					checked={data.user?.active}
 					class="permCheckbox mx-1"
+					id="accountActive"
+					name="accountActive"
+					type="checkbox"
 				/>
 				<span class="ml-2">Account active</span></label
 			>
@@ -379,23 +380,25 @@
 			<div class="flex justify-between">
 				<button
 					class="dull-primary-bg-color mb-4 mt-2 rounded px-2 py-1"
+					formaction="?/submit"
 					type="submit"
-					formaction="?/submit">Save user</button
-				>
+					>Save user
+				</button>
 				<button
 					class="danger-bg-color mb-4 mt-2 rounded px-2 py-1"
+					onclick={openConfirm}
 					type="button"
-					onclick={openConfirm}>Delete user</button
-				>
+					>Delete user
+				</button>
 			</div>
 		</form>
-		<form id="deleteConfirmModal" class="modal" method="POST" use:enhance>
+		<form class="modal" id="deleteConfirmModal" method="POST" use:enhance>
 			<div class="modal-content">
 				<div class="mb-2 inline-flex w-full justify-between">
 					<h2 class="font-semibold">Are you sure?</h2>
 					<button class="material-symbols-outlined" onclick={closeConfirm} type="button"
-						>close</button
-					>
+						>close
+					</button>
 				</div>
 				<p>
 					This will permanently delete user <span class="font-semibold">{data.user?.username}.</span
@@ -403,23 +406,24 @@
 				</p>
 				<p>Please type "I understand" into the box below to confirm</p>
 				<input
-					type="text"
-					name="confirm"
-					id="confirm"
-					placeholder="I understand"
 					class="w-full rounded font-normal"
+					id="confirm"
+					name="confirm"
 					pattern="I understand"
+					placeholder="I understand"
 					required
+					type="text"
 				/>
 				<div class="mt-4 flex justify-between">
-					<button class="danger-bg-color rounded px-2 py-1" type="submit" formaction="?/delete"
-						>Delete user</button
-					>
+					<button class="danger-bg-color rounded px-2 py-1" formaction="?/delete" type="submit"
+						>Delete user
+					</button>
 					<button
 						class="separator-borders bg-color rounded px-2 py-1"
+						onclick={closeConfirm}
 						type="button"
-						onclick={closeConfirm}>Cancel</button
-					>
+						>Cancel
+					</button>
 				</div>
 			</div>
 		</form>