Add a log out button

- clear dead code in css file - add a role access authorization on my_capsules page

Add a log out button
fa95225a · Camille Simiand · 0773f779 · fa95225a · fa95225a
Commit fa95225a authored 3 years ago by Camille Simiand
--- a/assets/styles/app.scss
+++ b/assets/styles/app.scss
@@ -4,10 +4,6 @@

 @import "./layout/header";

-form {
-  //font-size: 16px;
-}
-
 form label {
  color: rgba(255,255,255,.5)
 }
@@ -20,7 +16,6 @@ form input {
  color: #fff;
  height: auto;
  padding: 15px 10px;
-  //margin-top: 20px;
 }

 form input[type=checkbox]{
@@ -45,11 +40,19 @@ button[type=submit]{
  background: rgba(0,0,0,.1);
  border: none;
  border-radius: 3px;
-  //box-shadow: 0 2px 0 #3b8c7e;
  opacity: 1;
-  //color: #FFF !important;
 }

-.btn-check:focus + .btn-primary, .btn-primary:focus, .btn-primary:hover {
-  //color: #FFF !important;
+#user-block {
+  position: absolute;
+  right: 0;
+  text-align: right;
+  font-weight: 300;
+  color: rgba(255,255,255,.5);
+  font-size: 14px;
+}
+
+#user-block-nom {
+  text-transform: capitalize;
+  font-weight: 500;
 }
\ No newline at end of file
--- a/templates/layout.html.twig
+++ b/templates/layout.html.twig
@@ -12,13 +12,27 @@
    {% block javascripts %}
      {{ encore_entry_script_tags('app') }}
    {% endblock %}
+
    <link rel="icon" type="image/x-icon" href="{{ asset('build/images/favicon.ico') }}" />
+
  </head>
+
  <body class="container">
-  <div class="d-flex flex-row justify-content-center mb-4">
-    <div class="d-flex flex-column">
-      <a href="/my_capsules"><img id="header-memorekall-logo" class="memorekall-logo" src="{{ asset('build/images/MemoRekall.png') }}"></a>
+    <div class="position-relative d-flex flex-row align-items-center justify-content-center mb-5">
+        <a href="/my_capsules" class="align-self-center">
+          <img id="header-memorekall-logo" class="memorekall-logo" src="{{ asset('build/images/MemoRekall.png') }}">
+        </a>
+
+        {% if is_granted("IS_AUTHENTICATED_REMEMBERED") %}
+          <div id="user-block">
+            <div id="user-block-nom">{{ app.user.firstName }} {{ app.user.lastName }}</div>
+            <form>
+              <button class="btn btn-primary" formaction="/logout">Log out</button>
+            </form>
+          </div>
+        {% endif %}
    </div>
+
  </div>

  {%  block connexion %} {% endblock %}