first iteration over templates

This commit is contained in:
Cayo Puigdefabregas 2023-10-02 17:49:33 +02:00
parent f619a43dcc
commit 86984bf0be
20 changed files with 671 additions and 705 deletions

View File

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

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

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

View File

@ -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);
}

View File

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

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -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
}
}
})
})()

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1,9 +1,69 @@
{% extends "idhub/base.html" %}
{% load i18n static %} {% 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"> <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 class="jumbotron vertical-center">
<div id="login-wrapper" class="container" style="width: 430px;"> <div id="login-wrapper" class="container" style="width: 430px;">
<div id="login-content" class="rounded"> <div id="login-content" class="rounded">
@ -88,8 +148,13 @@
</div> </div>
</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>

View File

@ -1,106 +1,131 @@
{% load i18n static %} {% load i18n static %}
<!DOCTYPE html> <!doctype html>
<html> <html lang="en">
<head>
<head>
{% block head %} {% block head %}
{% block meta %} {% block meta %}
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="robots" content="NONE,NOARCHIVE" /> <meta name="robots" content="NONE,NOARCHIVE" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="Pangea">
{% endblock %} {% endblock %}
<title>{% block title %}{% if title %}{{ title }} {% endif %}IdHub{% endblock %}</title> <title>{% block title %}{% if title %}{{ title }} {% endif %}IdHub{% endblock %}</title>
<!-- Bootstrap core CSS -->
{% block style %} {% 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 %} {% 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 %} {% 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>
<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"> <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> </a>
</li> </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> </a>
</li> </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> </a>
</li> </li>
</ul> </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> </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>
</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 %} {% block messages %}
{% for message in messages %} {% for message in messages %}
<div class="alert alert-{{ message.tags|default:'info' }} alert-dismissible fade show" role="alert"> <div class="alert alert-{{ message.tags|default:'info' }} alert-dismissible fade show" role="alert">
@ -111,33 +136,25 @@
</div> </div>
{% endfor %} {% endfor %}
{% endblock messages %} {% 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 %} {% block content %}
{% endblock 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>
</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> </html>

View File

@ -2,158 +2,135 @@
{% load i18n %} {% load i18n %}
{% block content %} {% 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> </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 %} {% endblock %}

View File

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