vps1_gitea_admin/innovatieplatform
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Sprint 1: Auth, metro map canvas, services, and retro UI

Browse Source 
Authentication:
- Laravel Fortify + Sanctum with Inertia views
- RBAC middleware (admin, project_owner, team_member, viewer)
- Retro terminal-styled login/register/forgot-password pages

Metro Map (core UI):
- D3.js zoomable SVG canvas with metro line rendering
- Station nodes with glow-on-hover, status coloring, tooltips
- Breadcrumb navigation for multi-level drill-down
- Node preview panel with zoom-in action
- C64-style CLI bar with blinking cursor at bottom

Backend services:
- ProjectService (CRUD, phase transitions, park/stop, audit logging)
- ThemaService (CRUD with audit)
- MapDataService (strategy map L1, project map L2)
- Thin controllers: MapController, ProjectController, ThemaController
- 32 routes total (auth + app + API)

Style foundation:
- Retro-futurism theme: VT323, Press Start 2P, IBM Plex Mono fonts
- Dark palette with cyan/orange/green/purple neon accents
- Comprehensive seed data (4 themes, 12 projects, commitments, deps)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
znetsixe
2026-04-01 13:52:35 +02:00
parent 7d14ca7b3b
commit d03fe15542
40 changed files with 5368 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

377
resources/js/Pages/Auth/Login.vue Normal file
View File

@@ -0,0 +1,377 @@
<script setup>
import { useForm, Link } from '@inertiajs/vue3'
const form = useForm({
email: '',
password: '',
remember: false,
})
const submit = () => {
form.post('/login', {
onFinish: () => form.reset('password'),
})
}
</script>
<template>
<div class="auth-screen">
<div class="scanlines" />
<div class="terminal-frame">
<div class="terminal-header">
<span class="header-dot red" />
<span class="header-dot yellow" />
<span class="header-dot green" />
<span class="header-title">AUTH.SYS v2.0</span>
</div>
<div class="terminal-body">
<div class="prompt-line">
<span class="prompt-symbol">&gt;</span>
<span class="prompt-text">SYSTEM LOGIN</span>
<span class="cursor" />
</div>
<h1 class="page-title">LOGIN</h1>
<div class="divider">
<span>━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━</span>
</div>
<form @submit.prevent="submit" class="auth-form">
<div class="field-group">
<label class="field-label" for="email">
<span class="label-prefix">[01]</span> EMAIL_ADDRESS:
</label>
<input
id="email"
v-model="form.email"
type="email"
class="field-input"
:class="{ 'field-error': form.errors.email }"
autocomplete="username"
placeholder="user@domain.nl"
autofocus
/>
<p v-if="form.errors.email" class="error-msg">
<span class="error-prefix">ERR:</span> {{ form.errors.email }}
</p>
</div>
<div class="field-group">
<label class="field-label" for="password">
<span class="label-prefix">[02]</span> PASSWORD:
</label>
<input
id="password"
v-model="form.password"
type="password"
class="field-input"
:class="{ 'field-error': form.errors.password }"
autocomplete="current-password"
placeholder="••••••••••••"
/>
<p v-if="form.errors.password" class="error-msg">
<span class="error-prefix">ERR:</span> {{ form.errors.password }}
</p>
</div>
<div class="field-group remember-group">
<label class="checkbox-label">
<input
v-model="form.remember"
type="checkbox"
class="checkbox-input"
/>
<span class="checkbox-text">REMEMBER SESSION</span>
</label>
</div>
<button
type="submit"
class="submit-btn"
:disabled="form.processing"
>
<span v-if="form.processing">AUTHENTICATING...</span>
<span v-else>&gt;&gt; AUTHENTICATE</span>
</button>
</form>
<div class="divider">
<span>━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━</span>
</div>
<div class="links">
<Link href="/forgot-password" class="auth-link">
FORGOT PASSWORD?
</Link>
<span class="link-separator"> // </span>
<Link href="/register" class="auth-link">
NEW USER? REGISTER
</Link>
</div>
</div>
</div>
</div>
</template>
<style scoped>
.auth-screen {
width: 100vw;
height: 100vh;
background: #1a1a2e;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
.scanlines {
position: absolute;
inset: 0;
background: repeating-linear-gradient(
0deg,
transparent,
transparent 2px,
rgba(0, 0, 0, 0.08) 2px,
rgba(0, 0, 0, 0.08) 4px
);
pointer-events: none;
z-index: 1;
}
.terminal-frame {
position: relative;
z-index: 2;
width: 480px;
background: #0d0d1a;
border: 2px solid #00d2ff;
box-shadow:
0 0 40px rgba(0, 210, 255, 0.25),
inset 0 0 40px rgba(0, 210, 255, 0.03);
}
.terminal-header {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
background: rgba(0, 210, 255, 0.08);
border-bottom: 1px solid rgba(0, 210, 255, 0.3);
}
.header-dot {
width: 10px;
height: 10px;
border-radius: 50%;
display: block;
}
.header-dot.red { background: #e94560; box-shadow: 0 0 6px #e94560; }
.header-dot.yellow { background: #f5a623; box-shadow: 0 0 6px #f5a623; }
.header-dot.green { background: #00ff88; box-shadow: 0 0 6px #00ff88; }
.header-title {
font-family: 'IBM Plex Mono', monospace;
font-size: 11px;
color: #8892b0;
margin-left: auto;
letter-spacing: 2px;
}
.terminal-body {
padding: 32px 40px;
}
.prompt-line {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 20px;
}
.prompt-symbol {
font-family: 'VT323', monospace;
font-size: 20px;
color: #00ff88;
}
.prompt-text {
font-family: 'IBM Plex Mono', monospace;
font-size: 12px;
color: #8892b0;
letter-spacing: 2px;
}
.cursor {
display: inline-block;
width: 10px;
height: 16px;
background: #00d2ff;
animation: blink 1s step-end infinite;
margin-left: 4px;
}
@keyframes blink {
50% { opacity: 0; }
}
.page-title {
font-family: 'Press Start 2P', monospace;
font-size: 22px;
color: #00d2ff;
text-shadow: 0 0 30px rgba(0, 210, 255, 0.5);
letter-spacing: 4px;
margin: 0 0 16px 0;
}
.divider {
font-family: 'VT323', monospace;
font-size: 16px;
color: rgba(0, 210, 255, 0.3);
margin: 16px 0;
overflow: hidden;
}
.auth-form {
margin-top: 24px;
display: flex;
flex-direction: column;
gap: 20px;
}
.field-group {
display: flex;
flex-direction: column;
gap: 6px;
}
.field-label {
font-family: 'VT323', monospace;
font-size: 18px;
color: #8892b0;
letter-spacing: 1px;
}
.label-prefix {
color: #00d2ff;
margin-right: 4px;
}
.field-input {
background: rgba(0, 210, 255, 0.04);
border: 1px solid rgba(0, 210, 255, 0.4);
color: #e8e8e8;
font-family: 'IBM Plex Mono', monospace;
font-size: 14px;
padding: 10px 14px;
outline: none;
transition: border-color 0.2s, box-shadow 0.2s;
width: 100%;
box-sizing: border-box;
}
.field-input::placeholder {
color: rgba(136, 146, 176, 0.4);
}
.field-input:focus {
border-color: #00d2ff;
box-shadow: 0 0 12px rgba(0, 210, 255, 0.2);
}
.field-input.field-error {
border-color: #e94560;
box-shadow: 0 0 8px rgba(233, 69, 96, 0.2);
}
.error-msg {
font-family: 'VT323', monospace;
font-size: 16px;
color: #e94560;
margin: 0;
}
.error-prefix {
font-family: 'IBM Plex Mono', monospace;
font-size: 11px;
font-weight: bold;
margin-right: 4px;
}
.remember-group {
flex-direction: row;
align-items: center;
}
.checkbox-label {
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
}
.checkbox-input {
width: 14px;
height: 14px;
accent-color: #00d2ff;
cursor: pointer;
}
.checkbox-text {
font-family: 'VT323', monospace;
font-size: 18px;
color: #8892b0;
letter-spacing: 1px;
}
.submit-btn {
margin-top: 8px;
padding: 14px 24px;
background: rgba(0, 210, 255, 0.08);
border: 2px solid #00d2ff;
color: #00d2ff;
font-family: 'Press Start 2P', monospace;
font-size: 11px;
letter-spacing: 2px;
cursor: pointer;
transition: all 0.2s;
text-align: center;
width: 100%;
}
.submit-btn:hover:not(:disabled) {
background: rgba(0, 210, 255, 0.18);
box-shadow: 0 0 24px rgba(0, 210, 255, 0.35);
transform: translateY(-1px);
}
.submit-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.links {
text-align: center;
font-family: 'VT323', monospace;
font-size: 18px;
}
.auth-link {
color: #8892b0;
text-decoration: none;
letter-spacing: 1px;
transition: color 0.2s;
}
.auth-link:hover {
color: #00d2ff;
text-shadow: 0 0 8px rgba(0, 210, 255, 0.4);
}
.link-separator {
color: rgba(0, 210, 255, 0.3);
margin: 0 4px;
}
</style>