343 lines
9.5 KiB
Svelte
343 lines
9.5 KiB
Svelte
<script lang="ts">
|
|
import { onMount } from 'svelte';
|
|
import { enhance } from '$app/forms';
|
|
import type { PageProps } from './$types';
|
|
import { telFormatter } from '$lib/shared.svelte';
|
|
|
|
let permsAccordions: boolean[] = [false, false, false];
|
|
|
|
let passwordVisible = $state(false);
|
|
|
|
function showPassword() {
|
|
const password = document.querySelector('input[name="newPassword"]');
|
|
if (password) {
|
|
if (password.getAttribute('type') === 'password') {
|
|
password.setAttribute('type', 'text');
|
|
passwordVisible = true;
|
|
} else {
|
|
password.setAttribute('type', 'password');
|
|
passwordVisible = false;
|
|
}
|
|
}
|
|
}
|
|
|
|
onMount(() => {
|
|
let acc = document.getElementsByClassName('accordion');
|
|
for (let i = 0; i < acc.length; i++) {
|
|
acc[i].addEventListener('click', function (this: HTMLElement, event: Event) {
|
|
const target = event?.target as HTMLElement | null;
|
|
if (target?.tagName === 'INPUT' && (target as HTMLInputElement).type === 'checkbox') {
|
|
return; // Do nothing if it's the checkbox
|
|
}
|
|
|
|
this.classList.toggle('active');
|
|
permsAccordions[i] = !permsAccordions[i];
|
|
|
|
let panel = this.nextElementSibling as HTMLElement;
|
|
if (panel.style.display === 'block') {
|
|
panel.style.display = 'none';
|
|
} else {
|
|
panel.style.display = 'block';
|
|
}
|
|
});
|
|
|
|
let selectAllCheckbox = acc[i].querySelector('.select-all') as HTMLInputElement;
|
|
// console.log(selectAllCheckbox);
|
|
selectAllCheckbox.addEventListener('change', function () {
|
|
let checkboxes =
|
|
this.parentElement!.parentElement!.parentElement!.nextElementSibling!.querySelectorAll(
|
|
'.permCheckbox'
|
|
) as NodeListOf<HTMLInputElement>;
|
|
// console.log(checkboxes);
|
|
checkboxes.forEach((checkbox) => {
|
|
checkbox.checked = selectAllCheckbox.checked;
|
|
});
|
|
});
|
|
|
|
let permCheckboxes = acc[i].nextElementSibling!.querySelectorAll(
|
|
'.permCheckbox'
|
|
) as NodeListOf<HTMLInputElement>;
|
|
permCheckboxes.forEach((checkbox) => {
|
|
checkbox.addEventListener('change', function () {
|
|
let allChecked = true;
|
|
let someChecked = false;
|
|
permCheckboxes.forEach((cb) => {
|
|
if (cb.checked) {
|
|
someChecked = true;
|
|
} else {
|
|
allChecked = false;
|
|
}
|
|
});
|
|
selectAllCheckbox.checked = allChecked;
|
|
selectAllCheckbox.indeterminate = !allChecked && someChecked;
|
|
});
|
|
});
|
|
}
|
|
document.getElementById('phone')?.addEventListener('input', function (this: HTMLInputElement) {
|
|
this.value = telFormatter(this.value);
|
|
});
|
|
});
|
|
|
|
let { data, form }: PageProps = $props();
|
|
</script>
|
|
|
|
<div class="content">
|
|
<div class="elevated separator-borders m-4 rounded">
|
|
<div class="bottom-border flex place-content-between">
|
|
<div class="p-3 font-semibold">Create new user</div>
|
|
</div>
|
|
<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
|
|
class="w-full rounded font-normal"
|
|
id="username"
|
|
name="username"
|
|
placeholder="Username"
|
|
required
|
|
type="text"
|
|
/>
|
|
</div>
|
|
<div class="relative mt-4 text-sm font-semibold">
|
|
Password <span class="text-red-500">*</span>
|
|
<input
|
|
class="w-full rounded font-normal"
|
|
id="newPassword"
|
|
name="newPassword"
|
|
placeholder="Password"
|
|
required
|
|
type="password"
|
|
/>
|
|
<button
|
|
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
|
|
>
|
|
</button>
|
|
</div>
|
|
<div class="mt-4 text-sm font-semibold">
|
|
Full name <span class="danger-color">*</span>
|
|
<input
|
|
class="w-full rounded font-normal"
|
|
id="fullName"
|
|
name="fullName"
|
|
placeholder="Full Name"
|
|
required
|
|
type="text"
|
|
/>
|
|
</div>
|
|
<div class="mt-4 text-sm font-semibold">
|
|
Email <span class="danger-color">*</span>
|
|
<input
|
|
class="w-full rounded font-normal"
|
|
id="email"
|
|
name="email"
|
|
placeholder="Email"
|
|
required
|
|
type="email"
|
|
/>
|
|
</div>
|
|
<div class="mt-4 text-sm font-semibold">
|
|
Phone (optional)
|
|
<input
|
|
class="w-full rounded font-normal"
|
|
id="phone"
|
|
name="phone"
|
|
pattern="([0-9]\{3}) [0-9]\{3}-[0-9]\{3}"
|
|
placeholder="Phone"
|
|
type="tel"
|
|
/>
|
|
</div>
|
|
<div class="mt-4 text-sm font-semibold">
|
|
Company code (optional)
|
|
<input
|
|
class="w-full rounded font-normal"
|
|
id="companyCode"
|
|
name="companyCode"
|
|
placeholder="Company code"
|
|
type="text"
|
|
/>
|
|
</div>
|
|
<p class="low-emphasis-text">
|
|
This code can be used to associate an employer with their company. If left blank, they will
|
|
not be able to create any postings.
|
|
</p>
|
|
<div class="bg-color separator-borders mb-2 mt-4 rounded">
|
|
<button
|
|
class="accordion flex w-full place-content-between rounded p-2 text-left"
|
|
type="button"
|
|
>
|
|
<span class="flex place-items-center">
|
|
<span class="ml-1 mr-3"
|
|
><input
|
|
class="select-all"
|
|
id="userPerms"
|
|
indeterminate={true}
|
|
name="userPerms"
|
|
type="checkbox"
|
|
/></span
|
|
>User Permissions
|
|
</span>
|
|
<span class="material-symbols-outlined"
|
|
>{permsAccordions[0] ? 'arrow_drop_up' : 'arrow_drop_down'}</span
|
|
>
|
|
</button>
|
|
<div class="panel hidden p-2">
|
|
<div>
|
|
<div class="mb-1">
|
|
<label class="flex place-items-center" for="view">
|
|
<input
|
|
checked={true}
|
|
class="permCheckbox mx-1"
|
|
id="view"
|
|
name="view"
|
|
type="checkbox"
|
|
/>
|
|
<span class="ml-2">View access</span></label
|
|
>
|
|
</div>
|
|
<div class="mb-1">
|
|
<label class="flex place-items-center" for="apply">
|
|
<input class="permCheckbox mx-1" id="apply" name="apply" type="checkbox" />
|
|
<span class="ml-2">Apply for jobs</span></label
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bg-color separator-borders my-2 rounded">
|
|
<button
|
|
class="accordion flex w-full place-content-between rounded p-2 text-left"
|
|
type="button"
|
|
>
|
|
<span class="flex place-items-center">
|
|
<span class="ml-1 mr-3"
|
|
><input
|
|
class="select-all"
|
|
id="companyPerms"
|
|
name="companyPerms"
|
|
type="checkbox"
|
|
/></span
|
|
>Company Permissions
|
|
</span>
|
|
<span class="material-symbols-outlined"
|
|
>{permsAccordions[1] ? 'arrow_drop_up' : 'arrow_drop_down'}</span
|
|
>
|
|
</button>
|
|
<div class="panel hidden p-2">
|
|
<div>
|
|
<div class="mb-1">
|
|
<label class="flex place-items-center" for="submitPostings">
|
|
<input
|
|
class="permCheckbox mx-1"
|
|
id="submitPostings"
|
|
name="submitPostings"
|
|
type="checkbox"
|
|
/>
|
|
<span class="ml-2">Submit postings</span></label
|
|
>
|
|
</div>
|
|
<div class="mb-1">
|
|
<label class="flex place-items-center" for="manageEmployers">
|
|
<input
|
|
class="permCheckbox mx-1"
|
|
id="manageEmployers"
|
|
name="manageEmployers"
|
|
type="checkbox"
|
|
/>
|
|
<span class="ml-2">Manage employers (within their company)</span></label
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bg-color separator-borders mt-2 rounded">
|
|
<button
|
|
class="accordion flex w-full place-content-between rounded p-2 text-left"
|
|
type="button"
|
|
>
|
|
<span class="flex place-items-center">
|
|
<span class="ml-1 mr-3"
|
|
><input class="select-all" id="adminPerms" name="adminPerms" type="checkbox" /></span
|
|
>Admin Permissions
|
|
</span>
|
|
<span class="material-symbols-outlined"
|
|
>{permsAccordions[0] ? 'arrow_drop_up' : 'arrow_drop_down'}</span
|
|
>
|
|
</button>
|
|
<div class="panel hidden p-2">
|
|
<div>
|
|
<div class="mb-1">
|
|
<label class="flex place-items-center" for="manageTags">
|
|
<input
|
|
class="permCheckbox mx-1"
|
|
id="manageTags"
|
|
name="manageTags"
|
|
type="checkbox"
|
|
/>
|
|
<span class="ml-2">Manage tags</span></label
|
|
>
|
|
</div>
|
|
<div class="mb-1">
|
|
<label class="flex place-items-center" for="managePostings">
|
|
<input
|
|
class="permCheckbox mx-1"
|
|
id="managePostings"
|
|
name="managePostings"
|
|
type="checkbox"
|
|
/>
|
|
<span class="ml-2">Manage postings</span></label
|
|
>
|
|
</div>
|
|
<div class="mb-1">
|
|
<label class="flex place-items-center" for="manageUsers">
|
|
<input
|
|
class="permCheckbox mx-1"
|
|
id="manageUsers"
|
|
name="manageUsers"
|
|
type="checkbox"
|
|
/>
|
|
<span class="ml-2">Manage users</span></label
|
|
>
|
|
</div>
|
|
<div class="mb-1">
|
|
<label class="flex place-items-center" for="manageCompanies">
|
|
<input
|
|
class="permCheckbox mx-1"
|
|
id="manageCompanies"
|
|
name="manageCompanies"
|
|
type="checkbox"
|
|
/>
|
|
<span class="ml-2">Manage companies</span></label
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<label class="flex place-items-center p-2" for="accountActive">
|
|
<input
|
|
checked
|
|
class="permCheckbox mx-1"
|
|
id="accountActive"
|
|
name="accountActive"
|
|
type="checkbox"
|
|
/>
|
|
<span class="ml-2">Account active</span></label
|
|
>
|
|
|
|
{#if form?.errorMessage}
|
|
<div class="mb-2 text-red-500">{form.errorMessage}</div>
|
|
{/if}
|
|
<button
|
|
class="dull-primary-bg-color mb-4 mt-2 rounded px-2 py-1"
|
|
formaction="?/submit"
|
|
type="submit"
|
|
>Create user
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|