first iteration over templates

idhub/forms.py

@@ -13,7 +13,7 @@ class LoginForm(AuthenticationForm):
 
         user = authenticate(username=username, password=password)
 
-        if user is not None:
+        if user is None:
             raise self.get_invalid_login_error()
 
         return self.cleaned_data

idhub/static/css/dashboard.css

@@ -0,0 +1,139 @@
+body {
+  font-size: .875rem;
+}
+
+.feather {
+  width: 16px;
+  height: 16px;
+  vertical-align: text-bottom;
+}
+
+/*
+ * Sidebar
+ */
+
+.sidebar {
+  position: fixed;
+  top: 0;
+  /* rtl:raw:
+  right: 0;
+  */
+  bottom: 0;
+  /* rtl:remove */
+  left: 0;
+  z-index: 100; /* Behind the navbar */
+  padding: 48px 0 0; /* Height of navbar */
+  box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
+}
+
+@media (max-width: 767.98px) {
+  .sidebar {
+    top: 5rem;
+  }
+}
+
+.sidebar-sticky {
+  position: relative;
+  top: 0;
+  height: calc(100vh - 48px);
+  padding-top: .5rem;
+  overflow-x: hidden;
+  overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
+}
+
+.sidebar .nav-link {
+  font-weight: 300;
+  color: #333;
+}
+
+.sidebar .nav-link .feather {
+  margin-right: 4px;
+  color: #727272;
+}
+
+.sidebar .nav-link.active {
+  color: #9cc666;
+}
+
+.sidebar .nav-link:hover .feather,
+.sidebar .nav-link.active .feather {
+  color: inherit;
+}
+
+.sidebar-heading {
+  font-size: .75rem;
+  text-transform: uppercase;
+}
+
+/*
+ * Navbar
+ */
+
+.navbar-brand {
+  padding-top: .75rem;
+  padding-bottom: .75rem;
+  font-size: 2rem;
+  text-shadow: 2px 2px 4px #444;
+  font-weight: 700;
+}
+
+.navbar-sub-brand {
+  padding-top: .75rem;
+  padding-bottom: .75rem;
+  font-size: 1.5rem;
+  color: #fff;
+  text-decoration: none;
+}
+
+.navbar .navbar-toggler {
+  top: .25rem;
+  right: 1rem;
+}
+
+.navbar .form-control {
+  padding: .75rem 1rem;
+  border-width: 0;
+  border-radius: 0;
+}
+
+.bg-green {
+  background-color: #9cc666;
+}
+
+.bg-grey {
+  background-color: #545f71;
+  height: 3.5rem;
+  margin-bottom: 4rem;
+}
+
+.logout {
+  color: #fff;
+  position: relative;
+  font-size: 1.5em;
+  margin-right: 1rem;
+}
+
+#user-avatar {
+  color: #fff;
+  position: relative;
+  font-size: 2em;
+}
+
+.icon_sidebar {
+  font-size: 1.5em;
+  margin-right: 1rem;
+  position: relative;
+}
+
+.ul_sidebar {
+  margin-left: 2rem;
+}
+
+.sidebar .nav-link.active2 {
+  font-weight: 500;
+  color: #000;
+}
+
+h3 {
+  font-sice: 1.2em;
+}

idhub/static/css/dashboard.rtl.css

@@ -0,0 +1,96 @@
+body {
+  font-size: .875rem;
+}
+
+.feather {
+  width: 16px;
+  height: 16px;
+  vertical-align: text-bottom;
+}
+
+/*
+ * Sidebar
+ */
+
+.sidebar {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 100; /* Behind the navbar */
+  padding: 48px 0 0; /* Height of navbar */
+  box-shadow: inset 1px 0 0 rgba(0, 0, 0, .1);
+}
+
+@media (max-width: 767.98px) {
+  .sidebar {
+    top: 5rem;
+  }
+}
+
+.sidebar-sticky {
+  position: relative;
+  top: 0;
+  height: calc(100vh - 48px);
+  padding-top: .5rem;
+  overflow-x: hidden;
+  overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
+}
+
+.sidebar .nav-link {
+  font-weight: 500;
+  color: #333;
+}
+
+.sidebar .nav-link .feather {
+  margin-left: 4px;
+  color: #727272;
+}
+
+.sidebar .nav-link.active {
+  color: #2470dc;
+}
+
+.sidebar .nav-link:hover .feather,
+.sidebar .nav-link.active .feather {
+  color: inherit;
+}
+
+.sidebar-heading {
+  font-size: .75rem;
+  text-transform: uppercase;
+}
+
+/*
+ * Navbar
+ */
+
+.navbar-brand {
+  padding-top: .75rem;
+  padding-bottom: .75rem;
+  font-size: 1rem;
+  background-color: rgba(0, 0, 0, .25);
+  box-shadow: inset 1px 0 0 rgba(0, 0, 0, .25);
+}
+
+.navbar .navbar-toggler {
+  top: .25rem;
+  left: 1rem;
+}
+
+.navbar .form-control {
+  padding: .75rem 1rem;
+  border-width: 0;
+  border-radius: 0;
+}
+
+.form-control-dark {
+  color: #fff;
+  background-color: rgba(255, 255, 255, .1);
+  border-color: rgba(255, 255, 255, .1);
+}
+
+.form-control-dark:focus {
+  border-color: transparent;
+  box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
+}

idhub/static/css/default.css

@@ -1,384 +0,0 @@
-a, a:hover, a:focus {
-    text-decoration: none;
-    transition: all 0.3s;
-}
-
-a:hover {
-    color: rgba(0, 0, 0, .7);
-}
-
-.btn-arrow-left {
-    color: #eee;
-    background: #D3D0DA;
-    position: relative;
-    padding: 8px 20px 8px 30px;
-    margin-left: 1em;
-    /** equal value than arrow.left **/
-}
-
-.btn-arrow-left::after, .btn-arrow-left::before {
-    content: "";
-    position: absolute;
-    top: 50%;
-    left: -1em;
-    margin-top: -19px;
-    border-top: 19px solid transparent;
-    border-bottom: 19px solid transparent;
-    border-right: 1em solid;
-}
-
-.btn-arrow-left::after {
-    border-right-color: #D3D0DA;
-    z-index: 2;
-}
-
-.wrapper {
-    display: flex;
-    width: 100%;
-    align-items: stretch;
-}
-
-#sidebar {
-    min-width: 280px;
-    max-width: 280px;
-    min-height: 100vh;
-    position: fixed;
-    z-index: 999;
-    display: flex;
-    flex-direction: column;
-    transition-duration: 200ms;
-    transition-property: left;
-}
-
-#sidebar-btn {
-    display: none;
-    width: fit-content;
-    transition-duration: 200ms;
-    transition-property: left;
-}
-
-#sidebar #sidebar-services {
-    flex-grow: 1;
-}
-
-#sidebar.active {
-    margin-left: -250px;
-}
-
-#sidebar .sidebar-branding {
-    padding-left: 2rem;
-    padding-right: 2rem;
-}
-
-#sidebar #sidebar-services {
-    padding-left: 1rem;
-    padding-right: 1rem;
-}
-
-#sidebar #user-profile-menu {
-    background: rgba(254, 251, 242, 0.25);
-}
-
-#sidebar ul.components {
-    padding: 20px 0;
-}
-
-#sidebar ul li a {
-    padding: 10px;
-    font-size: 1.1em;
-    display: block;
-}
-
-#sidebar #user-avatar {
-    border: 2px solid white;
-    border-radius: 100%;
-    padding: 1px;
-}
-
-.vertical-center {
-    min-height: 100%;
-    /* Fallback for browsers do NOT support vh unit */
-    min-height: 100vh;
-    /* These two lines are counted as one :-)       */
-    display: flex;
-    align-items: center;
-}
-
-/** login **/
-
-#body-login .jumbotron {
-    background: #282532 no-repeat url("../images/logo-pangea-lilla-bg.svg") right;
-}
-
-#login-content {
-    background: white;
-    padding: 2rem;
-}
-
-#login-content input[type="text"].form-control, #login-content input[type="password"].form-control {
-    border-radius: 0;
-    border: 0;
-    border-bottom: 2px solid #8E8E8E;
-}
-
-#login-content .form-actions-no-box {
-    margin-top: 6rem;
-}
-
-#login-footer {
-    margin-top: 1.5rem;
-    text-align: center;
-}
-
-#login-footer a {
-    color: #FEFBF2;
-}
-
-#content {
-    background: #ECECEB no-repeat url("../images/logo-pangea-light-gray-bg.svg");
-    background-position: right 5% top 10%;
-    color: #343434;
-    padding-left: 2rem;
-    margin-left: 280px;
-    /** sidebar width **/
-}
-
-/** services **/
-
-h1.service-name {
-    font: Bold 26px/34px Roboto;
-    margin-top: 3rem;
-}
-
-.service-description {
-    font: 16px/21px Roboto;
-}
-
-.table.service-list {
-    margin-top: 2rem;
-    table-layout: fixed;
-}
-
-/** TODO update theme instead of overriding **/
-
-.service-list thead.thead-dark th, .service-card .card-header {
-    background: rgba(80, 70, 110, 0.25);
-    color: #50466E;
-    border-color: transparent;
-}
-
-/** /TODO **/
-
-.table.service-list td, .table.service-list th {
-    vertical-align: middle;
-}
-
-.service-list thead.thead-dark th:first-of-type {
-    border-top-left-radius: .25rem;
-}
-
-.service-list thead.thead-dark th:last-of-type {
-    border-top-right-radius: .25rem;
-}
-
-.service-list tfoot td:first-of-type {
-    border-bottom-left-radius: .25rem;
-}
-
-.service-list tfoot td:last-of-type {
-    border-bottom-right-radius: .25rem;
-}
-
-.service-list tbody {
-    background: white;
-    color: #343434;
-}
-
-.service-list tfoot {
-    background: white;
-    color: #343434;
-}
-
-.service-list tfoot tr td {
-    padding-top: 3rem;
-}
-
-.service-card {
-    margin-bottom: 3rem;
-}
-
-.service-card .card-body h4 {
-    color: #50466E;
-    font-weight: bold;
-}
-
-.service-card .card-body {
-    color: #787878;
-}
-
-.service-card .card-body i.fas {
-    color: #9C9AA7;
-}
-
-.service-manager-link {
-    position: absolute;
-    bottom: 0px;
-    right: 15px;
-}
-
-.service-card .service-manager-link a, .service-card .service-manager-link a i.fas {
-    color: white;
-}
-
-.service-card .card-body .service-brand i.fab {
-    color: #9C9AA7;
-}
-
-.card.resource-usage {
-    border-left: 5px solid #4C426A;
-}
-
-.card.resource-usage .progress {
-    height: 0.5rem;
-    margin-top: 0.75rem;
-}
-
-.card.resource-usage h5.card-title {
-    position: relative;
-}
-
-.card.resource-usage h5.card-title:after {
-    font-family: "Font Awesome 5 Free";
-    font-style: normal;
-    font-variant: normal;
-    text-rendering: auto;
-    -webkit-font-smoothing: antialiased;
-    position: absolute;
-    top: 0;
-    right: 10px;
-    color: #E8E7EB;
-    font-size: 2em;
-}
-
-.card.resource-usage.resource-disk h5.card-title:after {
-    content: "\f0a0";
-    font-weight: 900;
-}
-
-.card.resource-usage.resource-traffic h5.card-title:after {
-    content: "\f362";
-    font-weight: 900;
-}
-
-.card.resource-usage.resource-mailbox h5.card-title:after {
-    content: "\f0e0";
-    font-weight: 900;
-}
-
-.card.resource-usage.resource-notifications h5.card-title:after {
-    content: "\f0f3";
-    font-weight: 900;
-}
-
-.card.card-profile .card-header {
-    background: white;
-    border-bottom: none;
-    font-size: large;
-    text-transform: uppercase;
-}
-
-#configDetailsModal .modal-header {
-    border-bottom: 0;
-    text-align: center;
-}
-
-#configDetailsModal .modal-header .modal-title {
-    width: 100%;
-}
-
-#configDetailsModal .modal-body {
-    padding-left: 4rem;
-    padding-right: 4rem;
-}
-
-#configDetailsModal .modal-body label {
-    width: 50%;
-    text-align: right;
-    padding-right: 4%;
-}
-
-#configDetailsModal .modal-body span {
-    display: inline-block;
-    width: 45%;
-}
-
-#configDetailsModal .modal-footer {
-    border-top: 0;
-    justify-content: center;
-}
-
-.roll-hover {
-    visibility: hidden;
-    display: inline-block;
-    margin-left: 2rem;
-}
-
-td:hover .roll-hover {
-    visibility: visible;
-}
-
-#sidebar-btn * {
-    font-size: 14.4px !important;
-    font-family: "Font Awesome 5 Free";
-}
-
-@media (min-width: 1350px){
-    .card-deck .card {
-        flex: 1 0 0%;
-    }
-}
-
-@media (max-width: 800px){
-    #sidebar {
-        left: calc(-277px + 34px);
-    }
-    #sidebar * {
-        opacity: 0;
-        transition-delay: 150ms;
-        transition-duration: 300ms;
-    }
-    #sidebar-btn {
-        display: block;
-    }
-    #sidebar-btn::before {
-        font-family: "Font Awesome 5 Free";
-        content: "\f0c9";
-        font-weight: 900;
-    }
-    #content {
-        margin-left: 34px;
-    }
-    #sidebar-toggle:checked {
-        width: 277px;
-    }
-    #sidebar-toggle:checked ~ #sidebar {
-        left: 0;
-    }
-    #sidebar-toggle:checked ~ #sidebar * {
-        opacity: 100%;
-    }
-    #sidebar-toggle:checked ~ #sidebar-btn {
-        left: 243px;
-    }
-    #sidebar-toggle:checked ~ #sidebar-btn::before {
-        content: "\f00d";
-    }
-    
-}
-
-@media (min-width: 576px){
-    .card-deck .card {
-        flex: 1 0 40%;
-        margin: 15px;
-    }
-}

idhub/static/js/dashboard.js

@@ -0,0 +1,53 @@
+/* globals Chart:false, feather:false */
+
+(function () {
+  'use strict'
+
+  feather.replace({ 'aria-hidden': 'true' })
+
+  // Graphs
+  var ctx = document.getElementById('myChart')
+  // eslint-disable-next-line no-unused-vars
+  var myChart = new Chart(ctx, {
+    type: 'line',
+    data: {
+      labels: [
+        'Sunday',
+        'Monday',
+        'Tuesday',
+        'Wednesday',
+        'Thursday',
+        'Friday',
+        'Saturday'
+      ],
+      datasets: [{
+        data: [
+          15339,
+          21345,
+          18483,
+          24003,
+          23489,
+          24092,
+          12034
+        ],
+        lineTension: 0,
+        backgroundColor: 'transparent',
+        borderColor: '#007bff',
+        borderWidth: 4,
+        pointBackgroundColor: '#007bff'
+      }]
+    },
+    options: {
+      scales: {
+        yAxes: [{
+          ticks: {
+            beginAtZero: false
+          }
+        }]
+      },
+      legend: {
+        display: false
+      }
+    }
+  })
+})()

idhub/templates/auth/login.html

@@ -1,9 +1,69 @@
-{% extends "idhub/base.html" %}
+
 {% load i18n static %}
 
-{% block body %}
+<!doctype html>
+<html lang="en">
+  <head>
+  {% block head %}
+    {% block meta %}
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <meta name="robots" content="NONE,NOARCHIVE" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="">
+    <meta name="author" content="Pangea">
+    {% endblock %}
+    <title>{% block title %}{% if title %}{{ title }} – {% endif %}IdHub{% endblock %}</title>
 
+    <!-- Bootstrap core CSS -->
+    {% block style %}
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
+    <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
+    <link href="{% static "/css/bootstrap.min.css" %}" rel="stylesheet">
+
+    <style>
+      .bd-placeholder-img {
+        font-size: 1.125rem;
+        text-anchor: middle;
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        user-select: none;
+      }
+
+      @media (min-width: 768px) {
+        .bd-placeholder-img-lg {
+          font-size: 3.5rem;
+        }
+      }
+    </style>
+
+  
+    <!-- Custom styles for this template -->
+    <link href="{% static "/css/dashboard.css" %}" rel="stylesheet">
+    {% endblock %}
+  {% endblock %}
+  </head>
 <body id="body-login">
+    <header class="navbar navbar-dark sticky-top bg-grey flex-md-nowrap p-0 shadow">
+      <div class="navbar-nav navbar-sub-brand">
+      </div>
+      <div class="navbar-nav">
+      </div>
+    </header>
+
+    <div class="container-fluid">
+      <div class="row">
+        <main class="col-md-12 bt-5">
+          {% block messages %}
+            {% for message in messages %}
+              <div class="alert alert-{{ message.tags|default:'info' }} alert-dismissible fade show" role="alert">
+                {{ message }}
+                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
+                  <span aria-hidden="true">&times;</span>
+                </button>
+              </div>
+            {% endfor %}
+          {% endblock messages %}
+
     <div class="jumbotron vertical-center">
         <div id="login-wrapper" class="container" style="width: 430px;">
             <div id="login-content" class="rounded">
@@ -88,8 +148,13 @@
     </div>
   </div>
 
-  {% block script %}
+        </main>
-  {{ block.super }}
+      </div>
-  {% endblock %}
+    </div>
-</body>
+
-{% endblock %}
+    <script src="/static/js/bootstrap.bundle.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons@4.28.0/dist/feather.min.js" integrity="sha384-uO3SXW5IuS1ZpFPKugNNWqTZRRglnUJK6UAZ/gxOX80nxEkN9NcGZTftn6RzhGWE" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js" integrity="sha384-zNy6FEbO50N+Cg5wap8IKA4M/ZnLJgzc6w2NqACZaK0u0FXfOWRRJOnQtpZun8ha" crossorigin="anonymous"></script>
+    <script src="/static/js/dashboard.js"></script>
+  </body>
+</html>

idhub/templates/idhub/base.html

@@ -1,106 +1,131 @@
 {% load i18n static %}
 
-<!DOCTYPE html>
+<!doctype html>
-<html>
+<html lang="en">
-
+  <head>
-<head>
   {% block head %}
-
     {% block meta %}
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <meta name="robots" content="NONE,NOARCHIVE" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="">
+    <meta name="author" content="Pangea">
     {% endblock %}
-
     <title>{% block title %}{% if title %}{{ title }} – {% endif %}IdHub{% endblock %}</title>
 
+    <!-- Bootstrap core CSS -->
     {% block style %}
-  {% block bootstrap_theme %}
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
-  <link rel="stylesheet" type="text/css" href="{% static "css/bootstrap.min.css" %}" />
+    <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
-  <link rel="stylesheet" type="text/css" href="{% static "css/theme.min.css" %}" />
+    <link href="{% static "/css/bootstrap.min.css" %}" rel="stylesheet">
+
+    <style>
+      .bd-placeholder-img {
+        font-size: 1.125rem;
+        text-anchor: middle;
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        user-select: none;
+      }
+
+      @media (min-width: 768px) {
+        .bd-placeholder-img-lg {
+          font-size: 3.5rem;
+        }
+      }
+    </style>
+
+  
+    <!-- Custom styles for this template -->
+    <link href="{% static "/css/dashboard.css" %}" rel="stylesheet">
     {% endblock %}
-
-  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto&display=swap" />
-
-  <link rel="stylesheet" href="{% static "fontawesome/css/all.min.css" %}" />
-  <link rel="stylesheet" type="text/css" href="{% static "css/default.css" %}" />
   {% endblock %}
-
+  </head>
-  {% endblock %}
+  <body>
-</head>
+    <header class="navbar navbar-dark sticky-top bg-green flex-md-nowrap p-0 shadow">
-
+      <a class="navbar-brand col-md-3 col-lg-2 me-0 px-3" href="#">ID HUB</a>
-{% block body %}
+      <div class="navbar-nav navbar-sub-brand">
-
+         PANGEA
-<body class="{% block bodyclass %}{% endblock %}">
-  <div class="wrapper">
-    <input style="display: none" type="checkbox" id="sidebar-toggle" />
-    <label type="button" for="sidebar-toggle" id="sidebar-btn" class="btn btn-primary fixed-top"></label>
-    <nav id="sidebar" class="bg-primary border-right pt-4">
-      {% block sidebar %}
-      <div class="sidebar-branding">
       </div>
+      <div class="navbar-nav">
+        <div class="nav-item text-nowrap">
+            <i id="user-avatar" class="bi bi-person-circle"></i>
+            <a class="navbar-sub-brand px-3" href="#">Lorena</a>
+            <span class="logout">
+              <i class="fa-solid fa-arrow-right-from-bracket"></i>
+            </span>
+        </div>
+      </div>
+    </header>
 
-      <div class="dropdown-divider"></div>
+    <div class="container-fluid">
-      {# <!-- services menu --> #}
+      <div class="row">
-      <ul id="sidebar-services" class="nav flex-column">
+        <nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
-        {% for item in services_menu %}
+          <div class="position-sticky pt-5">
+            <ul class="nav flex-column">
               <li class="nav-item">
-            <a class="nav-link text-light active" href="{% url item.pattern_name %}">
+                <a class="nav-link fw-bold" aria-current="page" href="#">
-              <i class="fas fa-{{ item.icon }}"></i>
+                  <i class="bi bi-house-door icon_sidebar"></i>
-              {{ item.title }}
+                  Home
+                </a>
+                <hr />
+              </li>
+              <li class="nav-item">
+                <span class="nav-link fw-bold" href="#">
+                  <i class="fa-regular fa-user icon_sidebar"></i>
+                  My datas
+                </span>
+                <ul class="flex-column mb-2 ul_sidebar">
+                  <li class="nav-item">
+                    <a class="nav-link" href="#">
+                      My personal data
                     </a>
                   </li>
-        {% endfor %}
+                  <li class="nav-item">
-      </ul>
+                    <a class="nav-link" href="#">
-
+                      My roles
-      {# <!-- user profile menu --> #}
-      <div id="user-profile-menu" class="mt-5 pt-1 dropdown dropright">
-        <button type="button" class="btn nav-link text-light w-100" data-toggle="dropdown">
-          <img id="user-avatar" class="float-right" width="64" height="64" src="{% static "images/default-profile-picture.png" %}" alt="user-profile-picture"/>
-            <strong>{{ profile.username }}</strong><br/>
-            <i class="fas fa-cog"></i> {% trans "Settings" %}
-        </button>
-        <div class="dropdown-menu">
-          <a class="dropdown-item" href="{% url 'profile' %}"><i class="fas fa-user-circle"></i> {% trans 'Profile' %}</a>
-          <a class="dropdown-item" href="{% url 'billing' %}"><i class="fas fa-receipt"></i> {% trans 'Billing' %}</a>
-        </div>
-      </div>
-
-
-
-      <div class="sidebar-logout">
-        <ul class="nav flex-row">
-          <li class="nav-item btn btn-outline-primary btn-sm" data-toggle="modal" data-target="#helpModal">
-            <a class="nav-link text-light" href="#">
-              <i class="far fa-question-circle"></i>
                     </a>
                   </li>
-          <li class="nav-item text-right flex-grow-1">
+                  <li class="nav-item">
-            <a class="nav-link text-light" href="{% url 'logout' %}">
+                    <a class="nav-link" href="#">
-              {% trans 'Log out' %}
+                      GDPR info
-              <i class="fas fa-power-off"></i>
                     </a>
                   </li>
                 </ul>
-      </div>
+              </li>
-
+              <li class="nav-item">
-      <div class="mt-4 pr-3 pb-2 text-light d-block text-right">
+                <span class="nav-link active fw-bold" href="#">
-          <div class="dropdown">
+                  <i class="bi bi-patch-check icon_sidebar"></i>
-            <a class="btn p-0 text-light" id="dropdownMenu3" data-toggle="dropdown" aria-haspopup="true"
+                  My Wallet
-              aria-expanded="false">
+                </span>
-              <i class="fas fa-globe"></i> {% trans "Language" %}
+                <ul class="flex-column mb-2 ul_sidebar">
+                  <li class="nav-item">
+                    <a class="nav-link active2" href="#">
+                      Identities (DID)
                     </a>
-            <div class="dropdown-menu">
+                  </li>
-              {% for code, language in languages %}
+                  <li class="nav-item">
-                  <a class="dropdown-item" href="{% url 'profile-set-lang' code %}">{{ language }}</a>
+                    <a class="nav-link" href="#">
-              {% endfor %}
+                      Credentials
+                    </a>
+                  </li>
+                  <li class="nav-item">
+                    <a class="nav-link" href="#">
+                      Credentials required
+                    </a>
+                  </li>
+                  <li class="nav-item">
+                    <a class="nav-link" href="#">
+                      Present Credentials
+                    </a>
+                  </li>
+                </ul>
+              </li>
+            </ul>
           </div>
-          </div>
+        </nav>
-        <small>Panel Version {{ version }}</small>
+
-      </div>
+        <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
-      {% endblock sidebar %}
-    </nav><!-- ./sidebar -->
-    <div id="content" class="container-fluid pt-4">
           {% block messages %}
             {% for message in messages %}
               <div class="alert alert-{{ message.tags|default:'info' }} alert-dismissible fade show" role="alert">
@@ -111,33 +136,25 @@
               </div>
             {% endfor %}
           {% endblock messages %}
+          <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
+            <h1 class="h1 text-center bg-primary">{{ title }}</h1>
+            <div class="btn-toolbar mb-2 mb-md-0">
+              <div class="btn-group me-2">
+                <input class="form-control form-control-grey " type="text" placeholder="Search" aria-label="Search">
+              </div>
+            </div>
+          </div>
+
           {% block content %}
           {% endblock content %}
-    </div><!-- ./content -->
-  </div><!-- ./wrapper -->
 
-  <!-- Help Modal -->
+        </main>
-  <div class="modal fade" id="helpModal" tabindex="-1" role="dialog" aria-labelledby="helpModal" aria-hidden="true">
-    <div class="modal-dialog modal-dialog-centered" role="document">
-      <div class="modal-content">
-        <div class="modal-body">
-          <span class="text-center m-auto">Do you need help? Write to <a href="mailto:suport@pangea.org" target="_blank">suport@pangea.org</a></span>
-          <button type="button" class="close m-0 pb-1" data-dismiss="modal" aria-label="Close">
-            <span aria-hidden="true">&times;</span>
-          </button>
-        </div>
-      </div>
       </div>
     </div>
 
-  {% block script %}
+    <script src="/static/js/bootstrap.bundle.min.js"></script>
-  <script src="{% static "js/jquery-3.3.1.slim.min.js" %}"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons@4.28.0/dist/feather.min.js" integrity="sha384-uO3SXW5IuS1ZpFPKugNNWqTZRRglnUJK6UAZ/gxOX80nxEkN9NcGZTftn6RzhGWE" crossorigin="anonymous"></script>
-  <script src="{% static "js/popper.min.js" %}"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js" integrity="sha384-zNy6FEbO50N+Cg5wap8IKA4M/ZnLJgzc6w2NqACZaK0u0FXfOWRRJOnQtpZun8ha" crossorigin="anonymous"></script>
-  <script src="{% static "js/bootstrap.min.js" %}"></script>
+    <script src="/static/js/dashboard.js"></script>
-  {% block extrascript %}{% endblock %}
+  </body>
-  {% endblock %}
-
-</body>
-{% endblock %}
-
 </html>

idhub/templates/idhub/user_dashboard.html

@@ -2,158 +2,135 @@
 {% load i18n %}
 
 {% block content %}
-
+<h3>
-<h2 style="margin-top: 10px;">{% trans "Welcome back" %} <strong>{{ profile.username }}</strong></h2>
+  <i class="bi bi-patch-check"></i>
-{% if profile.last_login %}
+  Identities (DID)
-<p>{% blocktrans with last_login=profile.last_login|date:"SHORT_DATE_FORMAT" %}Last time you logged in was: {{ last_login }}{% endblocktrans %}</p>
+</h3>
-{% else %}
+<div class="table-responsive">
-<p>{% trans "It's the first time you log into the system, welcome on board!" %}</p>
+  <table class="table table-striped table-sm">
-{% endif %}
+    <thead>
-
+      <tr>
-<div class="card-deck">
+        <th scope="col">#</th>
-  {% for resource, usage in resource_usage.items %}
+        <th scope="col">Header</th>
-  <div class="card resource-usage resource-{{ resource }}">
+        <th scope="col">Header</th>
-    <div class="card-body">
+        <th scope="col">Header</th>
-      <h5 class="card-title">{{ usage.verbose_name }}</h5>
+        <th scope="col">Header</th>
-      {% if usage.data.alert %}
+      </tr>
-        <div class="text-center mt-4">
+    </thead>
-          {{ usage.data.alert }}
+    <tbody>
-        </div>
+      <tr>
-      {% endif %}
+        <td>1,001</td>
-    </div>
+        <td>random</td>
-  </div>
+        <td>data</td>
-  {% endfor %}
+        <td>placeholder</td>
-  <div class="card resource-usage resource-notifications">
+        <td>text</td>
-    <div class="card-body">
+      </tr>
-      <h5 class="card-title">{% trans "Notifications" %}</h5>
+      <tr>
-      {% for message in notifications %}
+        <td>1,002</td>
-      <p class="card-text">{{ message }}</p>
+        <td>placeholder</td>
-      {% empty %}
+        <td>irrelevant</td>
-      <p class="card-text">{% trans "There is no notifications at this time." %}</p>
+        <td>visual</td>
-      {% endfor %}
+        <td>layout</td>
-    </div>
+      </tr>
-  </div>
+      <tr>
+        <td>1,003</td>
+        <td>data</td>
+        <td>rich</td>
+        <td>dashboard</td>
+        <td>tabular</td>
+      </tr>
+      <tr>
+        <td>1,003</td>
+        <td>information</td>
+        <td>placeholder</td>
+        <td>illustrative</td>
+        <td>data</td>
+      </tr>
+      <tr>
+        <td>1,004</td>
+        <td>text</td>
+        <td>random</td>
+        <td>layout</td>
+        <td>dashboard</td>
+      </tr>
+      <tr>
+        <td>1,005</td>
+        <td>dashboard</td>
+        <td>irrelevant</td>
+        <td>text</td>
+        <td>placeholder</td>
+      </tr>
+      <tr>
+        <td>1,006</td>
+        <td>dashboard</td>
+        <td>illustrative</td>
+        <td>rich</td>
+        <td>data</td>
+      </tr>
+      <tr>
+        <td>1,007</td>
+        <td>placeholder</td>
+        <td>tabular</td>
+        <td>information</td>
+        <td>irrelevant</td>
+      </tr>
+      <tr>
+        <td>1,008</td>
+        <td>random</td>
+        <td>data</td>
+        <td>placeholder</td>
+        <td>text</td>
+      </tr>
+      <tr>
+        <td>1,009</td>
+        <td>placeholder</td>
+        <td>irrelevant</td>
+        <td>visual</td>
+        <td>layout</td>
+      </tr>
+      <tr>
+        <td>1,010</td>
+        <td>data</td>
+        <td>rich</td>
+        <td>dashboard</td>
+        <td>tabular</td>
+      </tr>
+      <tr>
+        <td>1,011</td>
+        <td>information</td>
+        <td>placeholder</td>
+        <td>illustrative</td>
+        <td>data</td>
+      </tr>
+      <tr>
+        <td>1,012</td>
+        <td>text</td>
+        <td>placeholder</td>
+        <td>layout</td>
+        <td>dashboard</td>
+      </tr>
+      <tr>
+        <td>1,013</td>
+        <td>dashboard</td>
+        <td>irrelevant</td>
+        <td>text</td>
+        <td>visual</td>
+      </tr>
+      <tr>
+        <td>1,014</td>
+        <td>dashboard</td>
+        <td>illustrative</td>
+        <td>rich</td>
+        <td>data</td>
+      </tr>
+      <tr>
+        <td>1,015</td>
+        <td>random</td>
+        <td>tabular</td>
+        <td>information</td>
+        <td>text</td>
+      </tr>
+    </tbody>
+  </table>
 </div>
-
-
-<h1 class="service-name">{% trans "Your domains and websites" %}</h1>
-<p class="service-description">{% trans "Dashboard page description." %}</p>
-
-{% for domain in domains %}
-<div class="card service-card">
-  <div class="card-header">
-    <div class="row">
-      <div class="col-md">
-        <strong>{{ domain.name }}</strong>
-      </div>
-      <div class="col-md-8">
-        {% with domain.websites.0 as website %}
-        {% with website.contents.0 as content %}
-        <button type="button" class="btn text-secondary" data-toggle="modal" data-target="#configDetailsModal"
-          data-domain="" data-website="" data-webapp-type="" data-root-path=""
-          data-url="#">
-            {% trans "view configuration" %} <strong class="fas fa-tools"></strong>
-        </button>
-        {% endwith %}
-        {% endwith %}
-      </div>
-      <div class="col-md text-right">
-        {% comment "@slamora: orchestra doesn't have this information [won't fix] See issue #2" %}
-          {% trans "Expiration date" %}: <strong>{{ domain.expiration_date|date:"SHORT_DATE_FORMAT" }}</strong>
-        {% endcomment %}
-      </div>
-    </div>
-  </div><!-- /card-header-->
-  <div class="card-body row text-center">
-      <div class="col-6 col-md-3 col-lg-2 border-right">
-          <h4>{% trans "Mail" %}</h4>
-          <p class="card-text"><i class="fas fa-envelope fa-3x"></i></p>
-          <p class="card-text text-dark">
-            {{ domain.addresses|length }} {% trans "mail addresses created" %}
-          </p>
-          <a class="stretched-link" href="#"></a>
-      </div>
-      <div class="col-6 col-md-3 col-lg-2 border-right">
-          <h4>{% trans "Mail list" %}</h4>
-          <p class="card-text"><i class="fas fa-mail-bulk fa-3x"></i></p>
-          <a class="stretched-link" href="#"></a>
-      </div>
-      <div class="col-6 col-md-3 col-lg-2 border-right">
-          <h4>{% trans "Software as a Service" %}</h4>
-          <p class="card-text"><i class="fas fa-fire fa-3x"></i></p>
-          <p class="card-text text-dark">{% trans "Nothing installed" %}</p>
-          <a class="stretched-link" href="#"></a>
-      </div>
-      <div class="d-none d-lg-block col-lg-1"></div>
-      <div class="col-6 col-md-3 col-lg-4">
-          <h4>{% trans "Disk usage" %}</h4>
-          <p class="card-text"><i class="fas fa-hdd fa-3x"></i></p>
-          <div class="w-75 m-auto">
-          </div>
-      </div>
-      <div class="d-none d-lg-block col-lg-1"></div>
-  </div>
-</div>
-
-{% endfor %}
-
-<!-- configuration details modal -->
-<div class="modal fade" id="configDetailsModal" tabindex="-1" role="dialog" aria-labelledby="configDetailsModalLabel" aria-hidden="true">
-    <div class="modal-dialog modal-dialog-centered" role="document">
-      <div class="modal-content">
-        <div class="modal-header">
-          <h5 class="modal-title text-secondary" id="configDetailsModalLabel">{% trans "Configuration details" %}</h5>
-          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-            <span aria-hidden="true">&times;</span>
-          </button>
-        </div>
-        <div class="modal-body">
-          <div class="domain-ftp pb-3 border-bottom">
-            <h6 class="pl-4 mb-4">{% trans "FTP access:" %}</h6>
-            {# Translators: domain configuration detail modal #}
-            <p>{% trans "Contact with the support team to get details concerning FTP access." %}</p>
-            {% comment %}
-            <!-- hidden until API provides FTP information -->
-            <label>{% trans "Username" %}:</label> <span id="config-username" class="font-weight-bold">username</span><br/>
-            <label>{% trans "Password:" %}</label> <span id="config-password" class="font-weight-bold">password</span>
-            {% endcomment %}
-          </div>
-          <div class="domain-website pt-4">
-            <div id="no-website"><h6 class="pl-4">{% trans "No website configured." %}</h6></div>
-            <div id="config-website">
-              <label>{% trans "Root directory:" %}</label> <span id="config-root-path" class="font-weight-bold">root directory</span>
-              <label>{% trans "Type:" %}</label><span id="config-webapp-type" class="font-weight-bold">type</span>
-            </div>
-          </div>
-        </div>
-        <div class="modal-footer">
-          <a href="#domain-detail" class="btn btn-primary">{% trans "View DNS records" %}</a>
-        </div>
-      </div>
-    </div>
-  </div>
-{% endblock %}
-{% block extrascript %}
-<script>
-$('#configDetailsModal').on('show.bs.modal', function (event) {
-  var button = $(event.relatedTarget); // Button that triggered the modal
-  var modal = $(this);
-
-  // Extract info from data-* attributes
-  modal.find('.modal-title').text(button.data('domain'));
-  modal.find('.modal-body #config-webapp-type').text(button.data('webapp-type'));
-  modal.find('.modal-body #config-root-path').text(button.data('root-path'));
-  modal.find('.modal-footer .btn').attr('href', button.data('url'));
-
-  var nowebsite = modal.find('.modal-body #no-website');
-  var websitecfg = modal.find('.modal-body #config-website');
-  if(button.data('website')) {
-    nowebsite.hide();
-    websitecfg.show();
-  } else {
-    nowebsite.show();
-    websitecfg.hide();
-  }
-})
-</script>
 {% endblock %}

idhub/views.py

@@ -4,6 +4,7 @@ import json
 
 from django.conf import settings
 from django.contrib import messages
+from django.contrib.auth.mixins import LoginRequiredMixin
 from django.core.exceptions import ImproperlyConfigured
 from django.http import HttpResponse, HttpResponseNotFound, HttpResponseRedirect
 from django.urls import reverse_lazy
@@ -23,23 +24,31 @@ logger = logging.getLogger(__name__)
 
 
 
+# class UserDashboardView(LoginRequiredMixin, TemplateView):
 class UserDashboardView(TemplateView):
     template_name = "idhub/user_dashboard.html"
-    extra_context = {
+    title = _('Dashboard')
-        'title': _('Dashboard'),
+    #login_url = "/login/"
-    }
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        context.update({
+            'title': self.title,
+        })
+        return context
+
 
 
 class LoginView(FormView):
     template_name = 'auth/login.html'
     form_class = LoginForm
-    success_url = reverse_lazy('dashboard')
+    success_url = reverse_lazy('idhub:user_dashboard')
     extra_context = {
         'title': _('Login'),
     }
 
     def form_valid(self, form):
-        return self.success_url
+        return super().form_valid(form)
 
 
 class LogoutView(RedirectView):