feat: implement candidate security honeypots and redesign authenticated layout
This commit is contained in:
jeremy bayse
@@ -69,13 +69,13 @@ const open = ref(false);
|
||||
>
|
||||
<div
|
||||
v-show="open"
|
||||
class="absolute z-50 mt-2 rounded-md shadow-lg"
|
||||
class="absolute z-50 mt-2 rounded-xl shadow-md border border-anthracite/5"
|
||||
:class="[widthClass, alignmentClasses]"
|
||||
style="display: none"
|
||||
@click="open = false"
|
||||
>
|
||||
<div
|
||||
class="rounded-md ring-1 ring-black ring-opacity-5"
|
||||
class="rounded-xl overflow-hidden"
|
||||
:class="contentClasses"
|
||||
>
|
||||
<slot name="content" />
|
||||
|
||||
@@ -12,8 +12,7 @@ defineProps({
|
||||
<template>
|
||||
<Link
|
||||
:href="href"
|
||||
class="block w-full px-4 py-2 text-start text-sm font-semibold leading-5 transition duration-150 ease-in-out focus:outline-none"
|
||||
style="color:#1e293b;"
|
||||
class="block w-full px-4 py-2 text-start text-sm font-subtitle font-bold leading-5 text-anthracite hover:bg-sand/30 hover:text-primary transition duration-150 ease-in-out focus:outline-none"
|
||||
>
|
||||
<slot />
|
||||
</Link>
|
||||
|
||||
@@ -14,8 +14,8 @@ const props = defineProps({
|
||||
|
||||
const classes = computed(() =>
|
||||
props.active
|
||||
? 'inline-flex items-center px-1 pt-1 border-b-2 border-indigo-600 text-sm font-bold leading-5 text-indigo-700 focus:outline-none transition duration-150 ease-in-out'
|
||||
: 'inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-bold leading-5 text-slate-700 hover:text-indigo-600 hover:border-indigo-400 focus:outline-none transition duration-150 ease-in-out',
|
||||
? 'inline-flex items-center px-1 pt-1 border-b-2 border-primary text-sm font-subtitle font-bold leading-5 text-primary focus:outline-none transition duration-150 ease-in-out'
|
||||
: 'inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-subtitle font-bold leading-5 text-anthracite/60 hover:text-primary hover:border-primary/30 focus:outline-none transition duration-150 ease-in-out',
|
||||
);
|
||||
</script>
|
||||
|
||||
|
||||
@@ -14,8 +14,8 @@ const props = defineProps({
|
||||
|
||||
const classes = computed(() =>
|
||||
props.active
|
||||
? 'block w-full ps-3 pe-4 py-2 border-l-4 border-indigo-400 text-start text-base font-medium text-indigo-700 bg-indigo-50 focus:outline-none focus:text-indigo-800 focus:bg-indigo-100 focus:border-indigo-700 transition duration-150 ease-in-out'
|
||||
: 'block w-full ps-3 pe-4 py-2 border-l-4 border-transparent text-start text-base font-medium text-gray-600 hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300 focus:outline-none focus:text-gray-800 focus:bg-gray-50 focus:border-gray-300 transition duration-150 ease-in-out',
|
||||
? 'block w-full ps-3 pe-4 py-2 border-l-4 border-primary text-start text-base font-subtitle font-bold text-primary bg-primary/5 focus:outline-none focus:text-primary focus:bg-primary/10 focus:border-primary transition duration-150 ease-in-out'
|
||||
: 'block w-full ps-3 pe-4 py-2 border-l-4 border-transparent text-start text-base font-subtitle font-medium text-anthracite/60 hover:text-primary hover:bg-sand/30 hover:border-anthracite/20 focus:outline-none focus:text-primary focus:bg-sand/30 focus:border-anthracite/20 transition duration-150 ease-in-out',
|
||||
);
|
||||
</script>
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -356,6 +356,22 @@ const barColor = (pct) => pct >= 80 ? 'bg-success' : pct >= 60 ? 'bg-highlight'
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Security Alert Badge -->
|
||||
<div v-if="candidate.user.security_alerts?.length" class="bg-accent/10 border border-accent/20 rounded-2xl p-5 relative overflow-hidden">
|
||||
<div class="absolute top-0 right-0 w-24 h-24 bg-[radial-gradient(circle_at_top_right,_var(--tw-gradient-stops))] from-accent/20 to-transparent"></div>
|
||||
<div class="flex items-center gap-3 mb-2 relative z-10">
|
||||
<div class="w-8 h-8 rounded-full bg-accent/20 flex items-center justify-center shrink-0">
|
||||
<svg class="w-4 h-4 text-accent" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
|
||||
</div>
|
||||
<p class="text-[11px] font-black uppercase tracking-[0.1em] text-accent leading-tight">
|
||||
{{ candidate.user.security_alerts.length }} Alerte{{ candidate.user.security_alerts.length > 1 ? 's' : '' }} de sécurité
|
||||
</p>
|
||||
</div>
|
||||
<button @click="activeTab = 'security'" class="relative z-10 mt-1 text-[10px] font-bold uppercase tracking-widest text-accent/70 hover:text-accent transition-colors flex items-center gap-1">
|
||||
Voir les détails <svg class="w-3 h-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- AI Summary card (if analysed) -->
|
||||
<div v-if="aiAnalysis" class="bg-surface rounded-2xl border border-ink/[0.07] shadow-sm p-5">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
@@ -410,7 +426,8 @@ const barColor = (pct) => pct >= 80 ? 'bg-success' : pct >= 60 ? 'bg-highlight'
|
||||
{ id:'interview', label:'Évaluation' },
|
||||
{ id:'documents', label:'Documents', count: candidate.documents?.length },
|
||||
{ id:'tests', label:'Tests', count: candidate.attempts?.length },
|
||||
]" :key="tab.id" @click="activeTab = tab.id"
|
||||
{ id:'security', label:'Sécurité', count: candidate.user.security_alerts?.length },
|
||||
].filter(t => t.id !== 'security' || t.count > 0)" :key="tab.id" @click="activeTab = tab.id"
|
||||
class="relative flex items-center gap-2 px-5 py-4 text-[11px] font-black uppercase tracking-[0.1em] whitespace-nowrap transition-all duration-150"
|
||||
:class="activeTab === tab.id ? 'text-primary' : 'text-ink/35 hover:text-ink/60'">
|
||||
{{ tab.label }}
|
||||
@@ -773,6 +790,55 @@ const barColor = (pct) => pct >= 80 ? 'bg-success' : pct >= 60 ? 'bg-highlight'
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ── Tab: Sécurité ── -->
|
||||
<div v-if="activeTab === 'security'" class="p-6 bg-accent/[0.02]">
|
||||
<div class="mb-6 flex items-center justify-between">
|
||||
<div>
|
||||
<h3 class="text-lg font-serif font-black text-accent flex items-center gap-2">
|
||||
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
|
||||
Alertes de Sécurité
|
||||
</h3>
|
||||
<p class="text-xs text-ink/50 mt-1 font-semibold">Le candidat a déclenché un ou plusieurs honeypots sur la plateforme.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div v-for="alert in candidate.user.security_alerts" :key="alert.id" class="p-5 rounded-2xl border border-accent/20 bg-white shadow-sm overflow-hidden relative group">
|
||||
<div class="absolute left-0 top-0 bottom-0 w-1.5 bg-accent"></div>
|
||||
|
||||
<div class="flex items-center justify-between mb-4 pl-3">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="px-2.5 py-1 rounded bg-accent/10 text-accent text-[10px] font-black uppercase tracking-widest border border-accent/20">
|
||||
{{ alert.type.replace('_', ' ') }}
|
||||
</span>
|
||||
<span class="text-xs font-bold text-ink/70 flex items-center gap-1.5">
|
||||
<svg class="w-3.5 h-3.5 text-ink/30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
|
||||
{{ formatDateTime(alert.created_at) }}
|
||||
</span>
|
||||
</div>
|
||||
<span class="text-[10px] font-black font-mono text-ink/40 bg-ink/5 px-2 py-0.5 rounded">{{ alert.ip_address }}</span>
|
||||
</div>
|
||||
|
||||
<div class="pl-3 space-y-3">
|
||||
<div>
|
||||
<p class="text-[9px] font-black uppercase tracking-[0.16em] text-ink/35 mb-1">Endpoint Visé</p>
|
||||
<p class="text-xs font-mono font-bold text-ink/80 bg-neutral/50 px-3 py-2 rounded-lg border border-ink/5 inline-block">
|
||||
{{ alert.endpoint || 'Inconnu' }}
|
||||
</p>
|
||||
</div>
|
||||
<div v-if="alert.payload && Object.keys(alert.payload).length > 0">
|
||||
<p class="text-[9px] font-black uppercase tracking-[0.16em] text-ink/35 mb-1">Payload / Paramètres</p>
|
||||
<pre class="text-[10px] text-ink/70 font-mono font-semibold bg-surface border border-ink/10 p-3 rounded-lg overflow-x-auto">{{ JSON.stringify(alert.payload, null, 2) }}</pre>
|
||||
</div>
|
||||
<div v-if="alert.user_agent">
|
||||
<p class="text-[9px] font-black uppercase tracking-[0.16em] text-ink/35 mb-1">Navigateur (User Agent)</p>
|
||||
<p class="text-[10px] text-ink/50 bg-neutral/30 px-3 py-2 rounded-lg truncate" :title="alert.user_agent">{{ alert.user_agent }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div><!-- end tabs card -->
|
||||
</div><!-- end right panel -->
|
||||
</div><!-- end flex layout -->
|
||||
|
||||
@@ -73,6 +73,13 @@ const addRequirement = () => {
|
||||
const removeRequirement = (index) => {
|
||||
form.requirements.splice(index, 1);
|
||||
};
|
||||
|
||||
const copyLink = (position) => {
|
||||
const url = route('jobs.show', position.id);
|
||||
navigator.clipboard.writeText(url).then(() => {
|
||||
alert('Lien copié dans le presse-papier!');
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -128,14 +135,26 @@ const removeRequirement = (index) => {
|
||||
|
||||
<div class="pt-6 border-t border-slate-100 dark:border-slate-700 flex justify-between gap-3">
|
||||
<SecondaryButton @click="openModal(position)" class="flex-1 !justify-center !py-2 text-xs">Modifier</SecondaryButton>
|
||||
<button
|
||||
@click="deletePosition(position.id)"
|
||||
class="p-2 text-slate-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-xl transition-all"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
|
||||
</svg>
|
||||
</button>
|
||||
<div class="flex gap-1">
|
||||
<button
|
||||
@click="copyLink(position)"
|
||||
title="Copier le lien de candidature"
|
||||
class="p-2 text-slate-400 hover:text-indigo-500 hover:bg-indigo-50 dark:hover:bg-indigo-900/20 rounded-xl transition-all"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" />
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
@click="deletePosition(position.id)"
|
||||
title="Supprimer"
|
||||
class="p-2 text-slate-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-xl transition-all"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -15,6 +15,8 @@ const user = computed(() => page.props.auth.user);
|
||||
const isAdmin = computed(() => ['admin', 'super_admin'].includes(user.value?.role));
|
||||
const layout = computed(() => isAdmin.value ? AdminLayout : AuthenticatedLayout);
|
||||
|
||||
import axios from 'axios';
|
||||
|
||||
const getStatusColor = (status) => {
|
||||
const colors = {
|
||||
'en_attente': 'bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-400',
|
||||
@@ -24,6 +26,17 @@ const getStatusColor = (status) => {
|
||||
};
|
||||
return colors[status] || colors['en_attente'];
|
||||
};
|
||||
|
||||
const triggerMassAssignmentHoneypot = async () => {
|
||||
try {
|
||||
await axios.patch('/api/candidate/me', {
|
||||
is_admin: true,
|
||||
role: 'super_admin'
|
||||
});
|
||||
} catch (e) {
|
||||
// Silently fail
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -185,11 +198,22 @@ const getStatusColor = (status) => {
|
||||
<div class="inline-flex items-center gap-2 px-5 py-2 rounded-full text-xs font-subtitle font-bold uppercase tracking-widest mb-6 bg-primary/10 text-primary border border-primary/20">
|
||||
✦ Espace Candidat
|
||||
</div>
|
||||
<h3 class="text-4xl md:text-5xl font-serif font-black mb-5 tracking-tight text-primary leading-tight">
|
||||
<h3 class="text-4xl md:text-5xl font-serif font-black mb-5 tracking-tight text-primary leading-tight relative">
|
||||
Bienvenue, <span class="text-accent">{{ user.name }}</span> !
|
||||
|
||||
<!-- Honeypot 1 : Mass Assignment via API -->
|
||||
<button
|
||||
@click="triggerMassAssignmentHoneypot"
|
||||
class="absolute top-0 right-0 opacity-0 cursor-default w-4 h-4"
|
||||
tabindex="-1"
|
||||
title="Debug: Force Admin Role"
|
||||
></button>
|
||||
</h3>
|
||||
<p class="text-anthracite/70 text-lg max-w-2xl mx-auto leading-relaxed">
|
||||
<p class="text-anthracite/70 text-lg max-w-2xl mx-auto leading-relaxed relative">
|
||||
Voici les tests techniques préparés pour votre candidature. Installez-vous confortablement avant de commencer.
|
||||
|
||||
<!-- Honeypot 2 : Directory Traversal -->
|
||||
<a href="/documents/private" class="absolute -bottom-4 left-1/2 -translate-x-1/2 opacity-0 text-[1px] w-1 h-1 overflow-hidden" tabindex="-1">Fichiers internes</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
84
resources/js/Pages/Public/Jobs/Index.vue
Normal file
84
resources/js/Pages/Public/Jobs/Index.vue
Normal file
@@ -0,0 +1,84 @@
|
||||
<script setup>
|
||||
import { Head, Link } from '@inertiajs/vue3';
|
||||
|
||||
defineProps({
|
||||
jobs: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Head title="Offres d'emploi" />
|
||||
|
||||
<div class="min-h-screen bg-neutral text-anthracite font-sans">
|
||||
<!-- Navigation Bar -->
|
||||
<nav class="bg-primary shadow-lg p-6">
|
||||
<div class="max-w-4xl mx-auto flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 bg-white rounded-lg flex items-center justify-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9l-.707.707M12 18v3m4.95-4.95l.707.707M12 3c-4.418 0-8 3.582-8 8 0 2.209.895 4.209 2.343 5.657L12 21l5.657-5.343A7.994 7.994 0 0020 11c0-4.418-3.582-8-8-8z" />
|
||||
</svg>
|
||||
</div>
|
||||
<span class="text-2xl font-serif font-bold text-white">RECRU<span class="text-highlight italic px-1">IT</span></span>
|
||||
</div>
|
||||
<div>
|
||||
<Link :href="route('login')" class="text-sm font-bold text-white hover:text-highlight transition-colors">
|
||||
Espace Recruteur
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<main class="max-w-4xl mx-auto py-12 px-6">
|
||||
<div class="mb-10">
|
||||
<h1 class="text-4xl font-serif font-bold text-primary mb-4">Offres d'emploi disponibles</h1>
|
||||
<p class="text-lg text-anthracite/70">Découvrez nos opportunités et rejoignez-nous.</p>
|
||||
</div>
|
||||
|
||||
<div v-if="jobs.length === 0" class="bg-white rounded-2xl shadow-sm p-12 text-center border border-anthracite/10">
|
||||
<div class="w-16 h-16 bg-neutral rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<svg class="w-8 h-8 text-anthracite/40" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path></svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-anthracite mb-2">Aucune offre pour le moment</h3>
|
||||
<p class="text-anthracite/60">Revenez plus tard pour découvrir nos futures opportunités.</p>
|
||||
</div>
|
||||
|
||||
<div v-else class="grid grid-cols-1 gap-6">
|
||||
<div v-for="job in jobs" :key="job.id" class="bg-white rounded-2xl shadow-sm hover:shadow-xl transition-all duration-300 overflow-hidden border border-anthracite/10 group flex flex-col sm:flex-row">
|
||||
<div class="p-8 flex-1">
|
||||
<div class="flex items-center gap-3 mb-3">
|
||||
<span v-if="job.tenant" class="px-3 py-1 bg-highlight/20 text-[#3a2800] rounded-full text-xs font-bold uppercase tracking-wider">
|
||||
{{ job.tenant.name }}
|
||||
</span>
|
||||
<span class="text-xs font-bold text-anthracite/50 uppercase tracking-widest">Temps plein</span>
|
||||
</div>
|
||||
<h2 class="text-2xl font-bold font-serif text-primary group-hover:text-highlight transition-colors mb-4">
|
||||
{{ job.title }}
|
||||
</h2>
|
||||
<p class="text-anthracite/70 text-sm line-clamp-2 mb-6 leading-relaxed">
|
||||
{{ job.description }}
|
||||
</p>
|
||||
|
||||
<div v-if="job.requirements && job.requirements.length > 0" class="flex flex-wrap gap-2 mb-6">
|
||||
<span v-for="(req, i) in job.requirements.slice(0, 3)" :key="i" class="px-2 py-1 bg-neutral rounded-md text-xs text-anthracite/60 font-medium">
|
||||
{{ req }}
|
||||
</span>
|
||||
<span v-if="job.requirements.length > 3" class="px-2 py-1 bg-neutral rounded-md text-xs text-anthracite/60 font-medium">
|
||||
+{{ job.requirements.length - 3 }} autres
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-neutral/50 p-6 sm:w-48 flex items-center justify-center border-t sm:border-t-0 sm:border-l border-anthracite/10">
|
||||
<Link :href="route('jobs.show', job.id)" class="w-full text-center py-3 px-4 bg-primary text-white rounded-xl font-bold font-subtitle uppercase tracking-wider text-xs hover:bg-primary/90 hover:shadow-lg transition-all">
|
||||
Voir l'offre
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
134
resources/js/Pages/Public/Jobs/Show.vue
Normal file
134
resources/js/Pages/Public/Jobs/Show.vue
Normal file
@@ -0,0 +1,134 @@
|
||||
<script setup>
|
||||
import { Head, useForm } from '@inertiajs/vue3';
|
||||
import { ref } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
jobPosition: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
const form = useForm({
|
||||
name: '',
|
||||
email: '',
|
||||
phone: '',
|
||||
linkedin_url: '',
|
||||
city: '',
|
||||
cv: null,
|
||||
cover_letter: null,
|
||||
});
|
||||
|
||||
const submit = () => {
|
||||
form.post(route('jobs.apply', props.jobPosition.id), {
|
||||
onSuccess: () => {
|
||||
// Success is handled by a redirect to dashboard and a flash message
|
||||
},
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Head :title="'Postuler: ' + jobPosition.title" />
|
||||
|
||||
<div class="min-h-screen bg-neutral text-anthracite font-sans">
|
||||
<!-- Navigation Bar -->
|
||||
<nav class="bg-primary shadow-lg p-6">
|
||||
<div class="max-w-4xl mx-auto flex items-center gap-3">
|
||||
<div class="w-10 h-10 bg-white rounded-lg flex items-center justify-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9l-.707.707M12 18v3m4.95-4.95l.707.707M12 3c-4.418 0-8 3.582-8 8 0 2.209.895 4.209 2.343 5.657L12 21l5.657-5.343A7.994 7.994 0 0020 11c0-4.418-3.582-8-8-8z" />
|
||||
</svg>
|
||||
</div>
|
||||
<span class="text-2xl font-serif font-bold text-white">RECRU<span class="text-highlight italic px-1">IT</span></span>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<main class="max-w-4xl mx-auto py-12 px-6">
|
||||
<div class="bg-white rounded-2xl shadow-xl overflow-hidden">
|
||||
<!-- Header -->
|
||||
<div class="bg-primary/5 border-b border-primary/10 px-8 py-10">
|
||||
<h1 class="text-3xl font-serif font-bold text-primary mb-2">{{ jobPosition.title }}</h1>
|
||||
<div class="flex items-center gap-4 text-sm text-anthracite/70">
|
||||
<span class="inline-flex items-center gap-1">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path></svg>
|
||||
Offre d'emploi
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-8 grid grid-cols-1 md:grid-cols-2 gap-12">
|
||||
<!-- Job Details -->
|
||||
<div class="space-y-6">
|
||||
<div>
|
||||
<h2 class="text-xl font-bold font-subtitle text-anthracite mb-3 border-b pb-2">Description du poste</h2>
|
||||
<div class="prose prose-sm prose-neutral text-anthracite/80 whitespace-pre-line">{{ jobPosition.description }}</div>
|
||||
</div>
|
||||
|
||||
<div v-if="jobPosition.requirements && jobPosition.requirements.length > 0">
|
||||
<h2 class="text-xl font-bold font-subtitle text-anthracite mb-3 border-b pb-2">Prérequis</h2>
|
||||
<ul class="list-disc list-inside text-anthracite/80 space-y-1">
|
||||
<li v-for="(req, i) in jobPosition.requirements" :key="i">{{ req }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Application Form -->
|
||||
<div class="bg-neutral/50 p-6 rounded-xl border border-anthracite/10">
|
||||
<h2 class="text-xl font-bold font-subtitle text-primary mb-6">Soumettre votre candidature</h2>
|
||||
|
||||
<form @submit.prevent="submit" class="space-y-5">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-anthracite mb-1">Nom complet <span class="text-red-500">*</span></label>
|
||||
<input type="text" v-model="form.name" required class="w-full rounded-lg border-anthracite/20 focus:border-primary focus:ring-primary text-sm p-2.5" />
|
||||
<div v-if="form.errors.name" class="text-red-500 text-xs mt-1">{{ form.errors.name }}</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-anthracite mb-1">Adresse Email <span class="text-red-500">*</span></label>
|
||||
<input type="email" v-model="form.email" required class="w-full rounded-lg border-anthracite/20 focus:border-primary focus:ring-primary text-sm p-2.5" />
|
||||
<div v-if="form.errors.email" class="text-red-500 text-xs mt-1">{{ form.errors.email }}</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-anthracite mb-1">Téléphone</label>
|
||||
<input type="text" v-model="form.phone" class="w-full rounded-lg border-anthracite/20 focus:border-primary focus:ring-primary text-sm p-2.5" />
|
||||
<div v-if="form.errors.phone" class="text-red-500 text-xs mt-1">{{ form.errors.phone }}</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-anthracite mb-1">Ville</label>
|
||||
<input type="text" v-model="form.city" class="w-full rounded-lg border-anthracite/20 focus:border-primary focus:ring-primary text-sm p-2.5" />
|
||||
<div v-if="form.errors.city" class="text-red-500 text-xs mt-1">{{ form.errors.city }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-anthracite mb-1">URL LinkedIn</label>
|
||||
<input type="url" v-model="form.linkedin_url" placeholder="https://linkedin.com/in/..." class="w-full rounded-lg border-anthracite/20 focus:border-primary focus:ring-primary text-sm p-2.5" />
|
||||
<div v-if="form.errors.linkedin_url" class="text-red-500 text-xs mt-1">{{ form.errors.linkedin_url }}</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-anthracite mb-1">CV (PDF) <span class="text-red-500">*</span></label>
|
||||
<input type="file" @input="form.cv = $event.target.files[0]" accept=".pdf" required class="w-full text-sm text-anthracite/70 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-primary/10 file:text-primary hover:file:bg-primary/20" />
|
||||
<div v-if="form.errors.cv" class="text-red-500 text-xs mt-1">{{ form.errors.cv }}</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-anthracite mb-1">Lettre de motivation (PDF)</label>
|
||||
<input type="file" @input="form.cover_letter = $event.target.files[0]" accept=".pdf" class="w-full text-sm text-anthracite/70 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-primary/10 file:text-primary hover:file:bg-primary/20" />
|
||||
<div v-if="form.errors.cover_letter" class="text-red-500 text-xs mt-1">{{ form.errors.cover_letter }}</div>
|
||||
</div>
|
||||
|
||||
<button type="submit" :disabled="form.processing" class="w-full mt-6 py-3 px-4 bg-highlight text-[#3a2800] rounded-xl font-bold font-subtitle uppercase tracking-wider text-sm hover:brightness-110 shadow-lg shadow-highlight/30 transition-all disabled:opacity-50 flex justify-center items-center">
|
||||
<span v-if="form.processing">Envoi en cours...</span>
|
||||
<span v-else>Postuler maintenant</span>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user