feat: implement candidate security honeypots and redesign authenticated layout
This commit is contained in:
jeremy bayse
@@ -1,202 +1,143 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import ApplicationLogo from '@/Components/ApplicationLogo.vue';
|
||||
import { Link, usePage } from '@inertiajs/vue3';
|
||||
import Dropdown from '@/Components/Dropdown.vue';
|
||||
import DropdownLink from '@/Components/DropdownLink.vue';
|
||||
import NavLink from '@/Components/NavLink.vue';
|
||||
import ResponsiveNavLink from '@/Components/ResponsiveNavLink.vue';
|
||||
import { Link } from '@inertiajs/vue3';
|
||||
import EnvironmentBanner from '@/Components/EnvironmentBanner.vue';
|
||||
|
||||
const showingNavigationDropdown = ref(false);
|
||||
const page = usePage();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<EnvironmentBanner />
|
||||
<div>
|
||||
<div class="min-h-screen" style="background:#f8fafc;">
|
||||
<nav style="border-bottom:1px solid #e2e8f0; background:white; box-shadow:0 1px 3px rgba(0,0,0,0.04);">
|
||||
<!-- Primary Navigation Menu -->
|
||||
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex h-16 justify-between">
|
||||
<div class="flex">
|
||||
<!-- Logo -->
|
||||
<div class="flex shrink-0 items-center">
|
||||
<Link :href="route('dashboard')">
|
||||
<ApplicationLogo
|
||||
class="block h-9 w-auto fill-indigo-600"
|
||||
/>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<!-- Navigation Links -->
|
||||
<div
|
||||
class="hidden space-x-8 sm:-my-px sm:ms-10 sm:flex"
|
||||
>
|
||||
<NavLink
|
||||
:href="route('dashboard')"
|
||||
:active="route().current('dashboard')"
|
||||
>
|
||||
Dashboard
|
||||
</NavLink>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hidden sm:ms-6 sm:flex sm:items-center">
|
||||
<!-- Settings Dropdown -->
|
||||
<div class="relative ms-3">
|
||||
<Dropdown align="right" width="48">
|
||||
<template #trigger>
|
||||
<span class="inline-flex rounded-md">
|
||||
<button
|
||||
type="button"
|
||||
style="display:inline-flex; align-items:center; border-radius:0.75rem; border:1.5px solid #e2e8f0; background:#f1f5f9; padding:0.5rem 1rem; font-size:0.875rem; font-weight:700; color:#0f172a; transition:all 0.15s ease;"
|
||||
>
|
||||
{{ $page.props.auth.user.name }}
|
||||
|
||||
<svg
|
||||
class="-me-0.5 ms-2 h-4 w-4"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<template #content>
|
||||
<DropdownLink
|
||||
:href="route('profile.edit')"
|
||||
>
|
||||
Profile
|
||||
</DropdownLink>
|
||||
<DropdownLink
|
||||
:href="route('logout')"
|
||||
method="post"
|
||||
as="button"
|
||||
>
|
||||
Log Out
|
||||
</DropdownLink>
|
||||
</template>
|
||||
</Dropdown>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Hamburger -->
|
||||
<div class="-me-2 flex items-center sm:hidden">
|
||||
<button
|
||||
@click="
|
||||
showingNavigationDropdown =
|
||||
!showingNavigationDropdown
|
||||
"
|
||||
class="inline-flex items-center justify-center rounded-md p-2 text-gray-400 transition duration-150 ease-in-out hover:bg-gray-100 hover:text-gray-500 focus:bg-gray-100 focus:text-gray-500 focus:outline-none"
|
||||
>
|
||||
<svg
|
||||
class="h-6 w-6"
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
:class="{
|
||||
hidden: showingNavigationDropdown,
|
||||
'inline-flex':
|
||||
!showingNavigationDropdown,
|
||||
}"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M4 6h16M4 12h16M4 18h16"
|
||||
/>
|
||||
<path
|
||||
:class="{
|
||||
hidden: !showingNavigationDropdown,
|
||||
'inline-flex':
|
||||
showingNavigationDropdown,
|
||||
}"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M6 18L18 6M6 6l12 12"
|
||||
/>
|
||||
<div class="min-h-screen bg-neutral font-sans text-ink selection:bg-highlight selection:text-highlight-dark flex flex-col">
|
||||
<!-- Top Navigation -->
|
||||
<nav class="h-[70px] bg-surface border-b border-ink/[0.05] shadow-xs z-20 shrink-0">
|
||||
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 h-full">
|
||||
<div class="flex items-center justify-between h-full">
|
||||
|
||||
<!-- Left side: Logo -->
|
||||
<div class="flex items-center">
|
||||
<Link :href="route('dashboard')" class="flex items-center gap-3">
|
||||
<!-- Logo Icon -->
|
||||
<div class="w-[34px] h-[34px] bg-highlight rounded-xl flex items-center justify-center shrink-0 shadow-gold hover:-translate-y-0.5 transition-transform duration-200">
|
||||
<svg class="w-4 h-4 text-highlight-dark" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Wordmark -->
|
||||
<span class="font-serif font-black text-xl text-primary tracking-tight whitespace-nowrap">
|
||||
RECRU<span class="text-highlight italic">IT</span>
|
||||
</span>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Responsive Navigation Menu -->
|
||||
<div
|
||||
:class="{
|
||||
block: showingNavigationDropdown,
|
||||
hidden: !showingNavigationDropdown,
|
||||
}"
|
||||
class="sm:hidden"
|
||||
>
|
||||
<div class="space-y-1 pb-3 pt-2">
|
||||
<ResponsiveNavLink
|
||||
:href="route('dashboard')"
|
||||
:active="route().current('dashboard')"
|
||||
<!-- Right side: Profile Dropdown -->
|
||||
<div class="hidden sm:flex items-center gap-4">
|
||||
<Dropdown align="right" width="48">
|
||||
<template #trigger>
|
||||
<button class="flex items-center gap-3 p-1.5 pr-3 rounded-2xl border border-ink/[0.05] hover:bg-ink/[0.02] hover:border-ink/[0.1] transition-all duration-200">
|
||||
<div class="w-[34px] h-[34px] rounded-xl bg-highlight flex items-center justify-center text-[13px] font-black text-highlight-dark shrink-0 shadow-sm">
|
||||
{{ $page.props.auth.user.name.charAt(0) }}
|
||||
</div>
|
||||
<div class="text-left flex-1 min-w-0">
|
||||
<div class="text-[13px] font-bold text-primary truncate leading-tight">{{ $page.props.auth.user.name }}</div>
|
||||
<div class="text-[11px] text-ink/40 font-subtitle truncate">{{ $page.props.auth.user.email }}</div>
|
||||
</div>
|
||||
<div class="text-ink/30 ml-1">
|
||||
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M6 9l6 6 6-6"/>
|
||||
</svg>
|
||||
</div>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<template #content>
|
||||
<div class="px-4 py-2 border-b border-ink/5">
|
||||
<div class="text-[10px] font-black uppercase tracking-[0.1em] text-ink/30">Candidat</div>
|
||||
</div>
|
||||
<DropdownLink :href="route('profile.edit')" class="!text-[13px]">
|
||||
Paramètres du profil
|
||||
</DropdownLink>
|
||||
<div class="border-t border-ink/5 my-1" />
|
||||
<DropdownLink :href="route('logout')" method="post" as="button" class="!text-accent font-bold !text-[13px]">
|
||||
Se déconnecter
|
||||
</DropdownLink>
|
||||
</template>
|
||||
</Dropdown>
|
||||
</div>
|
||||
|
||||
<!-- Mobile Menu Button -->
|
||||
<div class="-mr-2 flex items-center sm:hidden">
|
||||
<button
|
||||
@click="showingNavigationDropdown = !showingNavigationDropdown"
|
||||
class="inline-flex items-center justify-center p-2 rounded-xl text-primary hover:bg-ink/5 transition duration-150 ease-in-out focus:outline-none focus:bg-ink/5"
|
||||
>
|
||||
Dashboard
|
||||
</ResponsiveNavLink>
|
||||
</div>
|
||||
|
||||
<!-- Responsive Settings Options -->
|
||||
<div
|
||||
class="border-t border-gray-200 pb-1 pt-4"
|
||||
>
|
||||
<div class="px-4">
|
||||
<div
|
||||
class="text-base font-medium text-gray-800"
|
||||
>
|
||||
{{ $page.props.auth.user.name }}
|
||||
</div>
|
||||
<div class="text-sm font-medium text-gray-500">
|
||||
{{ $page.props.auth.user.email }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-3 space-y-1">
|
||||
<ResponsiveNavLink :href="route('profile.edit')">
|
||||
Profile
|
||||
</ResponsiveNavLink>
|
||||
<ResponsiveNavLink
|
||||
:href="route('logout')"
|
||||
method="post"
|
||||
as="button"
|
||||
>
|
||||
Log Out
|
||||
</ResponsiveNavLink>
|
||||
</div>
|
||||
<svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
|
||||
<path
|
||||
:class="{'hidden': showingNavigationDropdown, 'inline-flex': !showingNavigationDropdown }"
|
||||
stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"
|
||||
/>
|
||||
<path
|
||||
:class="{'hidden': !showingNavigationDropdown, 'inline-flex': showingNavigationDropdown }"
|
||||
stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<!-- Page Heading -->
|
||||
<header
|
||||
style="background:white; border-bottom:1px solid #f1f5f9; box-shadow:none;"
|
||||
v-if="$slots.header"
|
||||
>
|
||||
<div class="mx-auto max-w-7xl px-4 py-6 sm:px-6 lg:px-8">
|
||||
<slot name="header" />
|
||||
<!-- Mobile Navigation Menu -->
|
||||
<div :class="{'block': showingNavigationDropdown, 'hidden': !showingNavigationDropdown}" class="sm:hidden bg-surface border-b border-ink/10 shadow-lg absolute w-full z-50">
|
||||
<div class="pt-4 pb-3 border-t border-ink/5">
|
||||
<div class="px-4 flex items-center gap-3">
|
||||
<div class="w-10 h-10 rounded-xl bg-highlight flex items-center justify-center text-sm font-black text-highlight-dark shrink-0">
|
||||
{{ $page.props.auth.user.name.charAt(0) }}
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-sm font-bold text-primary">{{ $page.props.auth.user.name }}</div>
|
||||
<div class="text-[11px] font-subtitle text-ink/50">{{ $page.props.auth.user.email }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 space-y-1">
|
||||
<Link :href="route('profile.edit')" class="block w-full px-4 py-2.5 text-left text-[13px] font-bold text-primary hover:bg-ink/5 transition-colors">
|
||||
Paramètres du profil
|
||||
</Link>
|
||||
<Link :href="route('logout')" method="post" as="button" class="block w-full px-4 py-2.5 text-left text-[13px] font-bold text-accent hover:bg-ink/5 transition-colors">
|
||||
Se déconnecter
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Page Content -->
|
||||
<main>
|
||||
<slot />
|
||||
</main>
|
||||
|
||||
<footer class="pb-8 pt-4 text-center" style="background:#f8fafc;">
|
||||
<span class="text-[10px] font-mono" style="color:#9ca3af;">v{{ $page.props.app_version }}</span>
|
||||
</footer>
|
||||
</div>
|
||||
<!-- Page Heading -->
|
||||
<header v-if="$slots.header" class="bg-surface border-b border-ink/[0.05] shadow-xs shrink-0 relative z-10">
|
||||
<div class="mx-auto max-w-7xl px-4 py-5 sm:px-6 lg:px-8">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-[3px] h-5 bg-highlight rounded-full hidden md:block"></div>
|
||||
<div class="font-serif font-black text-lg text-primary tracking-tight">
|
||||
<slot name="header" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Page Content -->
|
||||
<main class="flex-1 flex flex-col relative">
|
||||
<slot />
|
||||
</main>
|
||||
|
||||
<footer class="pb-6 pt-6 text-center shrink-0">
|
||||
<span class="text-[10px] font-mono font-bold uppercase tracking-[0.1em] text-ink/20">v{{ $page.props.app_version }}</span>
|
||||
</footer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* Any required scoped styling here */
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user