login + logout +header

This commit is contained in:
2023-01-05 15:57:26 +01:00
parent bc98268740
commit 2d9bf66b7a
5 changed files with 172 additions and 79 deletions

View File

@@ -1,5 +1,7 @@
<header>
<nav>
<ul>
</ul>
<ul>
<li><img src="/static/img/logo.svg" alt="DrWhy" height="24" width="24"></li>
</ul>
@@ -12,59 +14,54 @@
<li><a href="#">K-9 and Company</a></li>
<li><a href="#">Class</a></li>
</ul>
<ul>
{% if user is defined %}
<details role="list">
<summary aria-haspopup="listbox" role="button">
<img src="{{user.image}}" alt="avatar" class="rounded" width="50" height="50">
</summary>
<ul role="listbox">
<li><a class="dropdown-item" href="/profile/{{user.id}}">Profil</a></li>
<li><a class="dropdown-item text-danger" href="/logout">Deconnexion</a></li>
</ul>
</details>
{% else %}
<button class="contrast" data-target="modal-signin" onClick="toggleModal(event)">Inscription</button>
<button class="contrast" data-target="modal-login" onClick="toggleModal(event)">Connexion</button>
{# <button type="button" class="btn btn-primary text-light ms-2" data-bs-toggle="modal" data-bs-target="#modalSignUp">Inscription</button>
<button type="button" class="btn btn-black text-light ms-2" data-bs-toggle="modal" data-bs-target="#modalLogIn">Connexion</button> #}
{% endif %}
</ul>
<ul>
</ul>
</nav>
<dialog id="modal-login">
<article>
<a href="#close"
aria-label="Close"
class="close"
data-target="modal-login"
onClick="toggleModal(event)">
</a>
{% include 'forms/user/login.html.twig' %}
</article>
</dialog>
<dialog id="modal-signin">
<article>
<a href="#close"
aria-label="Close"
class="close"
data-target="modal-signin"
onClick="toggleModal(event)">
</a>
{% include 'forms/user/register.html.twig' %}
</article>
</dialog>
<nav class="navbar navbar-expand-md navbar-dark bg-dark" id="navbar" style="background-color: hsl(210deg 11% 20%) !important;">
<div class="container-fluid">
<a class="navbar-brand" href="/">
<img src="/static/img/logo.svg" alt="DrWhy" height="24">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav me-auto mb-2 mb-md-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="/#anchorStart">COMMENCER</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/#features">FONCTIONNALITES</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/#example">EXEMPLES</a>
</li>
</ul>
{# <form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3">
<input type="search" class="form-control" placeholder="Search..." aria-label="Search">
</form> #}
{% if user is defined %}
<a href="/dashboard" class="btn btn-primary">Tableaux de bord</a>
<div class="dropdown text-end ms-2">
<a href="#" class="d-block link-light text-decoration-none dropdown-toggle" id="dropdownUser1" data-bs-toggle="dropdown" aria-expanded="false">
<img src="{{user.image}}" alt="avatar" class="rounded" width="38" height="38">
</a>
<ul class="dropdown-menu text-small" aria-labelledby="dropdownUser1" style="left:-6.5rem">
<li><a class="dropdown-item" href="/profile/{{user.id}}">Profil</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item text-danger" href="/logout">Deconnexion</a></li>
</ul>
</div>
{% else %}
<button type="button" class="btn btn-primary text-light ms-2" data-bs-toggle="modal" data-bs-target="#modalSignUp">Inscription</button>
<button type="button" class="btn btn-black text-light ms-2" data-bs-toggle="modal" data-bs-target="#modalLogIn">Connexion</button>
{% endif %}
</div>
</div>
</nav>
</header>
{# <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal"> #}
{% if user is not defined %}
{# Modal pour LogIn #}
<div class="modal fade" role="dialog" id="modalLogIn">
{# <div class="modal fade" role="dialog" id="modalLogIn">
<div class="modal-dialog" role="document">
<div class="modal-content rounded-5 shadow">
<div class="modal-header p-5 pb-4 border-bottom-0">
@@ -77,10 +74,10 @@
</div>
</div>
</div>
</div>
</div> #}
{# Modal pour SignUp #}
<div class="modal fade" role="dialog" id="modalSignUp">
{# <div class="modal fade" role="dialog" id="modalSignUp">
<div class="modal-dialog" role="document">
<div class="modal-content rounded-5 shadow">
<div class="modal-header p-5 pb-4 border-bottom-0">
@@ -93,5 +90,5 @@
</div>
</div>
</div>
</div>
</div> #}
{% endif %}

View File

@@ -15,4 +15,5 @@
<script src="https://accounts.google.com/gsi/client" async defer></script>
<link rel="stylesheet" href="/static/css/pico.min.css">
<link rel="stylesheet" href="/static/css/pico.min.css">
<script src="/static/js/modal.js"></script>