login + logout +header

k-9_url

@@ -1,26 +1,26 @@
-https://www.shoutfactorytv.com/k-9/k-9-s1-e1-regeneration/54d111ea69702d0707150800
+youtube-dl https://www.shoutfactorytv.com/k-9/k-9-s1-e1-regeneration/54d111ea69702d0707150800
-https://www.shoutfactorytv.com/k-9/k-9-s1-e2-liberation/54d1122969702d04c9700800
+youtube-dl https://www.shoutfactorytv.com/k-9/k-9-s1-e2-liberation/54d1122969702d04c9700800
-https://www.shoutfactorytv.com/k-9/k-9-s1-e3-the-korven/54d1124369702d04ca100800
+youtube-dl https://www.shoutfactorytv.com/k-9/k-9-s1-e3-the-korven/54d1124369702d04ca100800
-https://www.shoutfactorytv.com/k-9/k-9-s1-e4-the-bounty-hunter/54d1127e69702d04c9740800
+youtube-dl https://www.shoutfactorytv.com/k-9/k-9-s1-e4-the-bounty-hunter/54d1127e69702d04c9740800
-https://www.shoutfactorytv.com/k-9/k-9-s1-e5-sirens-of-ceres/54d1129669702d07071c0800
+youtube-dl https://www.shoutfactorytv.com/k-9/k-9-s1-e5-sirens-of-ceres/54d1129669702d07071c0800
-https://www.shoutfactorytv.com/k-9/k-9-s1-e6-fear-itself/54d113a069702d04c9830800
+youtube-dl https://www.shoutfactorytv.com/k-9/k-9-s1-e6-fear-itself/54d113a069702d04c9830800
-https://www.shoutfactorytv.com/k-9/k-9-s1-e7-the-fall-of-the-house-of-gryffen/54d1142f69702d04c98b0800
+youtube-dl https://www.shoutfactorytv.com/k-9/k-9-s1-e7-the-fall-of-the-house-of-gryffen/54d1142f69702d04c98b0800
-https://www.shoutfactorytv.com/k-9/k-9-s1-e8-jaws-of-orthrus/54d1144169702d07072f0800
+youtube-dl https://www.shoutfactorytv.com/k-9/k-9-s1-e8-jaws-of-orthrus/54d1144169702d07072f0800
-https://www.shoutfactorytv.com/k-9/k-9-s1-e9-dream-eaters/54d1145769702d04c98d0800
+youtube-dl https://www.shoutfactorytv.com/k-9/k-9-s1-e9-dream-eaters/54d1145769702d04c98d0800
-https://www.shoutfactorytv.com/k-9/k-9-s1-e10-curse-of-anubis/54d1146969702d04c9910800
+youtube-dl https://www.shoutfactorytv.com/k-9/k-9-s1-e10-curse-of-anubis/54d1146969702d04c9910800
-https://www.shoutfactorytv.com/k-9/k-9-s1-e11-oroborus/54d1147c69702d04ca2c0800
+youtube-dl https://www.shoutfactorytv.com/k-9/k-9-s1-e11-oroborus/54d1147c69702d04ca2c0800
-https://www.shoutfactorytv.com/k-9/k-9-s1-e12-alien-avatar/54d1148e69702d04ca2f0800
+youtube-dl https://www.shoutfactorytv.com/k-9/k-9-s1-e12-alien-avatar/54d1148e69702d04ca2f0800
-https://www.shoutfactorytv.com/k-9/k-9-s1-e13-aeolian/54d114ac69702d0707380800
+youtube-dl https://www.shoutfactorytv.com/k-9/k-9-s1-e13-aeolian/54d114ac69702d0707380800
-https://www.shoutfactorytv.com/k-9/k-9-s1-e14-the-last-oak-tree/54d114c069702d04ca390800
+youtube-dl https://www.shoutfactorytv.com/k-9/k-9-s1-e14-the-last-oak-tree/54d114c069702d04ca390800
-https://www.shoutfactorytv.com/k-9/k-9-s1-e15-black-hunger/54d114e769702d04c99a0800
+youtube-dl https://www.shoutfactorytv.com/k-9/k-9-s1-e15-black-hunger/54d114e769702d04c99a0800
-https://www.shoutfactorytv.com/k-9/k-9-s1-e16-the-cambridge-spy/54d1151269702d04ca3e0800
+youtube-dl https://www.shoutfactorytv.com/k-9/k-9-s1-e16-the-cambridge-spy/54d1151269702d04ca3e0800
-https://www.shoutfactorytv.com/k-9/k-9-s1-e17-lost-library-of-ukko/54d1152469702d04c99f0800
+youtube-dl https://www.shoutfactorytv.com/k-9/k-9-s1-e17-lost-library-of-ukko/54d1152469702d04c99f0800
-https://www.shoutfactorytv.com/k-9/k-9-s1-e18-mutant-copper/54d1153769702d0707420800
+youtube-dl https://www.shoutfactorytv.com/k-9/k-9-s1-e18-mutant-copper/54d1153769702d0707420800
-https://www.shoutfactorytv.com/k-9/k-9-s1-e19-the-custodians/54d1154969702d04c9a40800
+youtube-dl https://www.shoutfactorytv.com/k-9/k-9-s1-e19-the-custodians/54d1154969702d04c9a40800
-https://www.shoutfactorytv.com/k-9/k-9-s1-e20-taphony-and-the-time-loop/54d1155c69702d04ca450800
+youtube-dl https://www.shoutfactorytv.com/k-9/k-9-s1-e20-taphony-and-the-time-loop/54d1155c69702d04ca450800
-https://www.shoutfactorytv.com/k-9/k-9-s1-e21-robot-gladiators/54d1157069702d0707460800
+youtube-dl https://www.shoutfactorytv.com/k-9/k-9-s1-e21-robot-gladiators/54d1157069702d0707460800
-https://www.shoutfactorytv.com/k-9/k-9-s1-e22-mind-snap/54d1158469702d0707490800
+youtube-dl https://www.shoutfactorytv.com/k-9/k-9-s1-e22-mind-snap/54d1158469702d0707490800
-https://www.shoutfactorytv.com/k-9/k-9-s1-e23-angel-of-the-north/54d115a669702d07074c0800
+youtube-dl https://www.shoutfactorytv.com/k-9/k-9-s1-e23-angel-of-the-north/54d115a669702d07074c0800
-https://www.shoutfactorytv.com/k-9/k-9-s1-e24-the-last-precinct/54d115bb69702d04c9ac0800
+youtube-dl https://www.shoutfactorytv.com/k-9/k-9-s1-e24-the-last-precinct/54d115bb69702d04c9ac0800
-https://www.shoutfactorytv.com/k-9/k-9-s1-e25-hound-of-the-korven/54d115cf69702d04ca4a0800
+youtube-dl https://www.shoutfactorytv.com/k-9/k-9-s1-e25-hound-of-the-korven/54d115cf69702d04ca4a0800
-https://www.shoutfactorytv.com/k-9/k-9-s1-e26-the-eclipse-of-the-korven/54d115e969702d04c9ae0800
+youtube-dl https://www.shoutfactorytv.com/k-9/k-9-s1-e26-the-eclipse-of-the-korven/54d115e969702d04c9ae0800

migrations/2022-07-20-084320_create_users/up.sql

@@ -7,7 +7,7 @@ create table users(
   email VARCHAR(255) NOT NULL DEFAULT '',
   google VARCHAR(255) NOT NULL DEFAULT '',
   email_valid VARCHAR(255) NOT NULL DEFAULT '',
-  email_valid VARCHAR(255) NOT NULL DEFAULT ''
+  data VARCHAR(255) NOT NULL DEFAULT ''
 );
 
 insert into users(username, password, salt) values ('adminkey', '', '');

static/js/modal.js

@@ -0,0 +1,95 @@
+/*
+ * Modal
+ *
+ * Pico.css - https://picocss.com
+ * Copyright 2019-2022 - Licensed under MIT
+ */
+
+// Config
+const isOpenClass = 'modal-is-open';
+const openingClass = 'modal-is-opening';
+const closingClass = 'modal-is-closing';
+const animationDuration = 400; // ms
+let visibleModal = null;
+
+
+// Toggle modal
+const toggleModal = event => {
+  event.preventDefault();
+  const modal = document.getElementById(event.currentTarget.getAttribute('data-target'));
+  (typeof(modal) != 'undefined' && modal != null)
+    && isModalOpen(modal) ? closeModal(modal) : openModal(modal)
+}
+
+// Is modal open
+const isModalOpen = modal => {
+  return modal.hasAttribute('open') && modal.getAttribute('open') != 'false' ? true : false;
+}
+
+// Open modal
+const openModal = modal => {
+  if (isScrollbarVisible()) {
+    document.documentElement.style.setProperty('--scrollbar-width', `${getScrollbarWidth()}px`);
+  }
+  document.documentElement.classList.add(isOpenClass, openingClass);
+  setTimeout(() => {
+    visibleModal = modal;
+    document.documentElement.classList.remove(openingClass);
+  }, animationDuration);
+  modal.setAttribute('open', true);
+}
+
+// Close modal
+const closeModal = modal => {
+  visibleModal = null;
+  document.documentElement.classList.add(closingClass);
+  setTimeout(() => {
+    document.documentElement.classList.remove(closingClass, isOpenClass);
+    document.documentElement.style.removeProperty('--scrollbar-width');
+    modal.removeAttribute('open');
+  }, animationDuration);
+}
+
+// Close with a click outside
+document.addEventListener('click', event => {
+  if (visibleModal != null) {
+    const modalContent = visibleModal.querySelector('article');
+    const isClickInside = modalContent.contains(event.target);
+    !isClickInside && closeModal(visibleModal);
+  }
+});
+
+// Close with Esc key
+document.addEventListener('keydown', event => {
+  if (event.key === 'Escape' && visibleModal != null) {
+    closeModal(visibleModal);
+  }
+});
+
+// Get scrollbar width
+const getScrollbarWidth = () => {
+
+  // Creating invisible container
+  const outer = document.createElement('div');
+  outer.style.visibility = 'hidden';
+  outer.style.overflow = 'scroll'; // forcing scrollbar to appear
+  outer.style.msOverflowStyle = 'scrollbar'; // needed for WinJS apps
+  document.body.appendChild(outer);
+
+  // Creating inner element and placing it in the container
+  const inner = document.createElement('div');
+  outer.appendChild(inner);
+
+  // Calculating difference between container's full width and the child width
+  const scrollbarWidth = (outer.offsetWidth - inner.offsetWidth);
+
+  // Removing temporary elements from the DOM
+  outer.parentNode.removeChild(outer);
+
+  return scrollbarWidth;
+}
+
+// Is scrollbar visible
+const isScrollbarVisible = () => {
+  return document.body.scrollHeight > screen.height;
+}

templates/header.html.twig

@@ -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 %}

templates/includecss.html.twig

@@ -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>