feat: bootstrap project

2026-05-31 20:22:50 +01:00
commit 66581ef584
65 changed files with 7915 additions and 0 deletions
@@ -0,0 +1,109 @@
+<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>