templates/reset_password/request.html.twig line 1

  1. <!doctype html>
  2. <html lang="fr">
  3. <head>
  4.     <meta charset="utf-8" />
  5.     <title>SmartImmo Management — Admin</title>
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7.     <meta content="SmartImmo Management est une application de gestion locative" name="description" />
  8.     <meta content="SmartTechnology" name="author" />
  9.     <link rel="shortcut icon" href="{{ asset('assets/img/smartimmoManagementHead.png') }}">
  11.     <!-- Fonts -->
  12.     <link rel="preconnect" href="https://fonts.googleapis.com/">
  13.     <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
  14.     <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700&family=Ubuntu:wght@400;500;700&display=swap" rel="stylesheet">
  16.     <style>
  17.         :root{
  18.             --brand:#1D4DBF;
  19.             --brand-600:#1a46ad;
  20.             --ink:#1b2130;
  21.             --muted:#6c7a90;
  22.             --bg:#f6f8fc;
  23.             --card:#ffffff;
  24.             --ring:rgba(29,77,191,.25);
  25.             --radius:16px;
  26.             --shadow:0 10px 30px rgba(22,34,66,.10);
  27.             --shadow-strong:0 12px 40px rgba(22,34,66,.18);
  28.         }
  29.         *{box-sizing:border-box}
  30.         html,body{height:100%}
  31.         body{
  32.             margin:0;
  33.             font-family: Poppins, Ubuntu, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Helvetica Neue", sans-serif;
  34.             color:var(--ink);
  35.             background:
  36.                     radial-gradient(1200px 600px at 10% -10%, rgba(29,77,191,.10), transparent 60%),
  37.                     radial-gradient(1000px 500px at 110% 10%, rgba(29,77,191,.08), transparent 60%),
  38.                     var(--bg);
  39.         }
  41.         /* Layout */
  42.         .auth-wrap{
  43.             min-height:100dvh;
  44.             display:grid;
  45.             place-items:center;
  46.             padding:24px;
  47.         }
  48.         .auth-card{
  49.             width:100%;
  50.             max-width:520px;
  51.             background:var(--card);
  52.             border-radius:var(--radius);
  53.             box-shadow:var(--shadow);
  54.             overflow:hidden;
  55.             transition:box-shadow .2s ease, transform .2s ease;
  56.         }
  57.         .auth-card:focus-within{ box-shadow:var(--shadow-strong); transform:translateY(-1px); }
  59.         /* Top brand banner */
  60.         .brand-top{
  61.             display:flex; align-items:center; justify-content:center;
  62.             padding:28px 28px 8px;
  63.         }
  64.         .brand-top img{ max-width:220px; height:auto; }
  66.         /* Headings */
  67.         .auth-head{ text-align:center; padding:4px 28px 0; }
  68.         .auth-head h1{
  69.             margin:0;
  70.             font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  71.             font-weight:600;
  72.             letter-spacing:.2px;
  73.         }
  74.         .auth-sub{
  75.             text-align:center;
  76.             color:var(--brand);
  77.             font-weight:500;
  78.             padding:6px 28px 4px;
  79.             font-size:.95rem;
  80.         }
  82.         /* Flash stack */
  83.         .flash-stack{ padding:0 28px; }
  84.         .alert{
  85.             border-radius:12px;
  86.             padding:10px 12px;
  87.             font-size:.9rem;
  88.             margin:10px 0 0;
  89.             border:1px solid transparent;
  90.         }
  91.         .alert-danger{
  92.             background:#fde8ea;
  93.             color:#7d1f2a;
  94.             border-color:#fac5cc;
  95.         }
  97.         /* Body / form */
  98.         .auth-body{ padding:18px 28px 24px; }
  99.         .auth-body p.text-muted{
  100.             color:var(--muted);
  101.             margin:0 0 12px;
  102.             font-size:.9rem;
  103.             line-height:1.45;
  104.         }
  106.         label.form-label{
  107.             display:block;
  108.             font-weight:500;
  109.             font-size:.9rem;
  110.             margin-bottom:6px;
  111.         }
  112.         .mb-3{ margin-bottom:14px; }
  114.         /* Inputs (works with or without Bootstrap) */
  115.         .form-control{
  116.             width:100%;
  117.             display:block;
  118.             border:1px solid #e5e8ef;
  119.             background:#fff;
  120.             border-radius:12px;
  121.             padding:10px 12px;
  122.             font-size:.95rem;
  123.             outline:none;
  124.             transition:border-color .15s ease, box-shadow .15s ease;
  125.         }
  126.         .form-control:focus{
  127.             border-color:var(--brand);
  128.             box-shadow:0 0 0 4px var(--ring);
  129.         }
  131.         /* Errors (Symfony form_errors output) */
  132.         .form-error-message, .form-errors, .invalid-feedback{
  133.             color:#9c2331;
  134.             font-size:.85rem;
  135.             margin-top:6px;
  136.         }
  138.         /* Button */
  139.         .btn{
  140.             appearance:none; border:0; cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
  141.             border-radius:12px; padding:10px 14px; font-weight:600; font-size:.95rem; text-decoration:none;
  142.             transition:transform .05s ease, box-shadow .15s ease, background .15s ease;
  143.         }
  144.         .btn-brand{
  145.             background:var(--brand);
  146.             color:#fff;
  147.             width:100%;
  148.             box-shadow:0 6px 16px rgba(29,77,191,.25);
  149.         }
  150.         .btn-brand:hover{ background:var(--brand-600); }
  151.         .btn-brand:active{ transform:translateY(1px); }
  153.         /* Links row */
  154.         .link-row{
  155.             display:flex; justify-content:center; gap:16px;
  156.             padding:0 28px 28px;
  157.         }
  158.         .btn-link{
  159.             color:var(--brand);
  160.             font-weight:500;
  161.             text-decoration:none;
  162.             font-size:.95rem;
  163.         }
  164.         .btn-link:hover{ text-decoration:underline; }
  166.         /* Small screens polish */
  167.         @media (max-width: 420px){
  168.             .auth-card{ border-radius:14px; }
  169.             .auth-body{ padding:16px 18px 20px; }
  170.             .flash-stack{ padding:0 18px; }
  171.             .brand-top{ padding:22px 18px 6px; }
  172.             .auth-head{ padding:0 18px; }
  173.             .auth-sub{ padding:6px 18px 2px; }
  174.             .link-row{ padding:0 18px 18px; }
  175.         }
  176.     </style>
  177. </head>
  178. <body>
  180. <div class="auth-wrap">
  181.     <div class="auth-card">
  182.         <!-- Brand -->
  183.         <div class="brand-top">
  184.             <img src="{{ asset('assets/img/smartImmoManagement.png') }}" alt="Smart Immo Management" />
  185.         </div>
  187.         <!-- Title + subtitle -->
  188.         <div class="auth-head">
  189.             <h1>Réinitialiser votre mot de passe</h1>
  190.         </div>
  192.         <!-- Flash errors -->
  193.         <div class="flash-stack">
  194.             {% for flashError in app.flashes('reset_password_error') %}
  195.                 <div class="alert alert-danger" role="alert">{{ flashError }}</div>
  196.             {% endfor %}
  197.         </div>
  199.         <!-- Body -->
  200.         <div class="auth-body">
  201.             <p class="text-muted small mb-3" style="font-size: 12px">
  202.                 Entrez votre adresse e-mail (et identifiant si demandé) pour recevoir un nouveau mot de passe.
  203.             </p>
  205.             {{ form_start(requestForm, {'attr': {'novalidate': 'novalidate'}}) }}
  207.             {# Username (optionnel selon votre logique) #}
  208.             <div class="mb-3">
  209.                 <label class="form-label" for="{{ requestForm.username.vars.id }}">Identifiant</label>
  210.                 {{ form_widget(requestForm.username, {'attr': {'class':'form-control', 'placeholder':'Votre identifiant'}}) }}
  211.                 {{ form_errors(requestForm.username) }}
  212.             </div>
  214.             {# Email #}
  215.             <div class="mb-3">
  216.                 <label class="form-label" for="{{ requestForm.email.vars.id }}">Adresse e-mail</label>
  217.                 {{ form_widget(requestForm.email, {'attr': {'class':'form-control', 'placeholder':'nom@domaine.com'}}) }}
  218.                 {{ form_errors(requestForm.email) }}
  219.             </div>
  221.             <button class="btn btn-brand" type="submit">
  222.                 Demander un nouveau mot de passe
  223.             </button>
  225.             {{ form_end(requestForm) }}
  226.         </div>
  228.         <!-- Links -->
  229.         <div class="link-row text-end">
  230.             <a class="btn-link" href="{{ path('app_login') }}">Retour à la page de connexion</a>
  231.         </div>
  232.     </div>
  233. </div>
  235. <!-- JS: vanilla (no jQuery) -->
  236. <script>
  237.     (function () {
  238.         // Si une nav principale existe (layout connecté), redirige vers le dashboard
  239.         if (document.querySelector("body nav")) {
  240.             window.location.href = "{{ path('app_dashboard') }}";
  241.         } else {
  242.             // Au cas où certains éléments auraient été masqués par CSS utilitaires
  243.             document.querySelectorAll("body div, body p").forEach(function(el){
  244.                 el.classList.remove("d-none");
  245.             });
  246.         }
  247.     })();
  248. </script>
  249. </body>
  250. </html>
  253. {#<!doctype html>#}
  254. {#<html lang="fr">#}
  255. {#<head>#}
  256. {#    <meta charset="utf-8" />#}
  257. {#    <title>SmartImmo Management — Admin</title>#}
  258. {#    <meta name="viewport" content="width=device-width, initial-scale=1">#}
  259. {#    <meta content="SmartImmo Management est une application de gestion locative" name="description" />#}
  260. {#    <meta content="SmartTechnology" name="author" />#}
  261. {#    <link rel="shortcut icon" href="{{ asset('assets/img/smartimmoManagementHead.png') }}">#}
  263. {#    <!-- Fonts -->#}
  264. {#    <link rel="preconnect" href="https://fonts.googleapis.com/">#}
  265. {#    <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>#}
  266. {#    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700&family=Ubuntu:wght@400;500;700&display=swap" rel="stylesheet">#}
  268. {#</head>#}
  269. {#<body>#}
  271. {#<div class="auth-wrap">#}
  272. {#    <div class="auth-card">#}
  273. {#        <!-- Brand -->#}
  274. {#        <div class="brand-top">#}
  275. {#            <img src="{{ asset('assets/img/smartImmoManagement.png') }}" alt="Smart Immo Management" width="50%">#}
  276. {#        </div>#}
  278. {#        <!-- Title + subtitle -->#}
  279. {#        <div class="auth-head">#}
  280. {#            <h1>Espace Admin</h1>#}
  281. {#        </div>#}
  282. {#        <div class="auth-sub" style="color: dodgerblue">#}
  283. {#            Réinitialiser votre mot de passe#}
  284. {#        </div>#}
  286. {#        <!-- Flash errors -->#}
  287. {#        <div class="px-4 flash-stack">#}
  288. {#            {% for flashError in app.flashes('reset_password_error') %}#}
  289. {#                <div class="alert alert-danger" role="alert">{{ flashError }}</div>#}
  290. {#            {% endfor %}#}
  291. {#        </div>#}
  293. {#        <!-- Body -->#}
  294. {#        <div class="auth-body">#}
  295. {#            <p class="text-muted mb-3" style="font-size: 12px">#}
  296. {#                Entrez votre adresse e-mail (et identifiant si demandé) pour recevoir un nouveau mot de passe.#}
  297. {#            </p>#}
  299. {#            {{ form_start(requestForm, {'attr': {'novalidate': 'novalidate'}}) }}#}
  301. {#            #}{# Username (optionnel selon votre logique) #}
  302. {#            <div class="mb-3" style="margin-bottom: 10px">#}
  303. {#                <label class="form-label" for="{{ requestForm.username.vars.id }}">Identifiant</label>#}
  304. {#                {{ form_widget(requestForm.username, {'attr': {'class':'form-control', 'placeholder':'Votre identifiant'}}) }}#}
  305. {#                {{ form_errors(requestForm.username) }}#}
  306. {#            </div>#}
  308. {#            #}{# Email #}
  309. {#            <div class="mb-3">#}
  310. {#                <label class="form-label" for="{{ requestForm.email.vars.id }}">Adresse e-mail</label>#}
  311. {#                {{ form_widget(requestForm.email, {'attr': {'class':'form-control', 'placeholder':'nom@domaine.com'}}) }}#}
  312. {#                {{ form_errors(requestForm.email) }}#}
  313. {#            </div>#}
  315. {#            <button class="btn btn-brand" type="submit" style="margin-top: 20px">#}
  316. {#                Demander un nouveau mot de passe#}
  317. {#            </button>#}
  319. {#            {{ form_end(requestForm) }}#}
  320. {#        </div>#}
  322. {#        <!-- Links -->#}
  323. {#        <div class="link-row">#}
  324. {#            <a class="btn-link" href="{{ path('app_login') }}">Se connecter</a>#}
  325. {#        </div>#}
  326. {#    </div>#}
  327. {#</div>#}
  331. {#<!-- JS -->#}
  332. {#<!-- Safe redirect logic (moved AFTER jQuery load to avoid errors) -->#}
  333. {#<script>#}
  334. {#    (function(){#}
  335. {#        // If a main nav exists (already logged-in layout), bounce to dashboard#}
  336. {#        if ($("body nav").length > 0) {#}
  337. {#            window.location.href = "{{ path('app_dashboard') }}";#}
  338. {#        } else {#}
  339. {#            $("body div, body p").removeClass("d-none");#}
  340. {#        }#}
  341. {#    })();#}
  342. {#</script>#}
  343. {#</body>#}
  344. {#</html>#}