Duarte
110 lines
3.7 KiB
Svelte
110 lines
3.7 KiB
Svelte
<script lang="ts">
|
|
import { enhance } from '$app/forms';
|
|
|
|
let { form }: { form: any } = $props();
|
|
let isLoading = $state(false);
|
|
</script>
|
|
|
|
<svelte:head>
|
|
<title>Novo Utilizador - RefoodOne</title>
|
|
</svelte:head>
|
|
|
|
<div class="container py-4">
|
|
<div class="mb-4">
|
|
<a href="/admin/utilizadores" class="btn btn-link text-decoration-none p-0 d-inline-flex align-items-center gap-1 text-secondary">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-left" viewBox="0 0 16 16">
|
|
<path fill-rule="evenodd" d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8"/>
|
|
</svg>
|
|
Voltar para a lista
|
|
</a>
|
|
<h2 class="fw-bold text-dark mt-2 mb-1">Novo Utilizador</h2>
|
|
<p class="text-muted mb-0">Criar uma nova conta de acesso ao sistema</p>
|
|
</div>
|
|
|
|
{#if form?.error}
|
|
<div class="alert alert-danger border-0 rounded-3 mb-4" role="alert">
|
|
{form.error}
|
|
</div>
|
|
{/if}
|
|
|
|
<div class="card border-0 shadow-sm rounded-4 p-4 bg-white" style="max-width: 800px;">
|
|
<form method="POST" use:enhance={() => {
|
|
isLoading = true;
|
|
return async ({ update }) => {
|
|
isLoading = false;
|
|
await update();
|
|
};
|
|
}}>
|
|
<div class="row g-3 mb-4">
|
|
<div class="col-md-6">
|
|
<label for="username" class="form-label fw-semibold text-secondary small">Nome de Utilizador <span class="text-danger">*</span></label>
|
|
<input
|
|
type="text"
|
|
name="username"
|
|
id="username"
|
|
class="form-control rounded-3 border-2"
|
|
placeholder="Ex: joao.silva"
|
|
value={form?.username ?? ''}
|
|
required
|
|
disabled={isLoading}
|
|
/>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<label for="role" class="form-label fw-semibold text-secondary small">Perfil (Role) <span class="text-danger">*</span></label>
|
|
<select name="role" id="role" class="form-select rounded-3 border-2" disabled={isLoading} required>
|
|
<option value="" disabled selected={!form?.role}>Selecione um perfil...</option>
|
|
<option value="admin" selected={form?.role === 'admin'}>Administrador</option>
|
|
<option value="shift_manager" selected={form?.role === 'shift_manager'}>Gestor de Turno</option>
|
|
<option value="volunteer" selected={form?.role === 'volunteer'}>Voluntário</option>
|
|
</select>
|
|
</div>
|
|
|
|
<hr class="my-4 text-muted" />
|
|
|
|
<h5 class="fw-bold text-dark mb-3">Definir Palavra-passe</h5>
|
|
|
|
<div class="col-md-6">
|
|
<label for="password" class="form-label fw-semibold text-secondary small">Palavra-passe <span class="text-danger">*</span></label>
|
|
<input
|
|
type="password"
|
|
name="password"
|
|
id="password"
|
|
class="form-control rounded-3 border-2"
|
|
placeholder="Palavra-passe"
|
|
required
|
|
disabled={isLoading}
|
|
/>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<label for="confirmPassword" class="form-label fw-semibold text-secondary small">Confirmar Palavra-passe <span class="text-danger">*</span></label>
|
|
<input
|
|
type="password"
|
|
name="confirmPassword"
|
|
id="confirmPassword"
|
|
class="form-control rounded-3 border-2"
|
|
placeholder="Confirmar palavra-passe"
|
|
required
|
|
disabled={isLoading}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="d-flex justify-content-end gap-3">
|
|
<a href="/admin/utilizadores" class="btn btn-outline-secondary rounded-3 px-4 py-2 fw-semibold">
|
|
Cancelar
|
|
</a>
|
|
<button type="submit" class="btn btn-success rounded-3 px-4 py-2 fw-bold text-white border-0 shadow-sm" disabled={isLoading}>
|
|
{#if isLoading}
|
|
<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
|
|
A guardar...
|
|
{:else}
|
|
Guardar
|
|
{/if}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|