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)
if user is not None:
if user is None:
raise self.get_invalid_login_error()
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 %}
{% 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 %}
{{ block.super }}
{% endblock %}
</body>
{% endblock %}
</main>
</div>
</div>
<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,143 +1,160 @@
{% load i18n static %}
<!DOCTYPE html>
<html>
<head>
<!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>
{% 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">
<!-- 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 %}
<title>{% block title %}{% if title %}{{ title }} {% endif %}IdHub{% endblock %}</title>
{% block style %}
{% block bootstrap_theme %}
<link rel="stylesheet" type="text/css" href="{% static "css/bootstrap.min.css" %}" />
<link rel="stylesheet" type="text/css" href="{% static "css/theme.min.css" %}" />
{% 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>
{% block body %}
<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">
</head>
<body>
<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>
<div class="navbar-nav navbar-sub-brand">
PANGEA
</div>
<div class="dropdown-divider"></div>
{# <!-- services menu --> #}
<ul id="sidebar-services" class="nav flex-column">
{% for item in services_menu %}
<li class="nav-item">
<a class="nav-link text-light active" href="{% url item.pattern_name %}">
<i class="fas fa-{{ item.icon }}"></i>
{{ item.title }}
</a>
</li>
{% endfor %}
</ul>
{# <!-- 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 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="container-fluid">
<div class="row">
<nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
<div class="position-sticky pt-5">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link fw-bold" aria-current="page" href="#">
<i class="bi bi-house-door icon_sidebar"></i>
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>
<li class="nav-item">
<a class="nav-link" href="#">
My roles
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
GDPR info
</a>
</li>
</ul>
</li>
<li class="nav-item">
<span class="nav-link active fw-bold" href="#">
<i class="bi bi-patch-check icon_sidebar"></i>
My Wallet
</span>
<ul class="flex-column mb-2 ul_sidebar">
<li class="nav-item">
<a class="nav-link active2" href="#">
Identities (DID)
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
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>
</nav>
<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">
<a class="nav-link text-light" href="{% url 'logout' %}">
{% trans 'Log out' %}
<i class="fas fa-power-off"></i>
</a>
</li>
</ul>
</div>
<div class="mt-4 pr-3 pb-2 text-light d-block text-right">
<div class="dropdown">
<a class="btn p-0 text-light" id="dropdownMenu3" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
<i class="fas fa-globe"></i> {% trans "Language" %}
</a>
<div class="dropdown-menu">
{% for code, language in languages %}
<a class="dropdown-item" href="{% url 'profile-set-lang' code %}">{{ language }}</a>
{% endfor %}
<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
{% 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="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>
<small>Panel Version {{ version }}</small>
</div>
{% 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">
{{ message }}
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
{% endfor %}
{% endblock messages %}
{% block content %}
{% endblock content %}
</div><!-- ./content -->
</div><!-- ./wrapper -->
<!-- Help Modal -->
<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>
{% block content %}
{% endblock content %}
</main>
</div>
</div>
</div>
{% block script %}
<script src="{% static "js/jquery-3.3.1.slim.min.js" %}"></script>
<script src="{% static "js/popper.min.js" %}"></script>
<script src="{% static "js/bootstrap.min.js" %}"></script>
{% block extrascript %}{% endblock %}
{% endblock %}
</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

@ -2,158 +2,135 @@
{% load i18n %}
{% block content %}
<h2 style="margin-top: 10px;">{% trans "Welcome back" %} <strong>{{ profile.username }}</strong></h2>
{% if profile.last_login %}
<p>{% blocktrans with last_login=profile.last_login|date:"SHORT_DATE_FORMAT" %}Last time you logged in was: {{ last_login }}{% endblocktrans %}</p>
{% else %}
<p>{% trans "It's the first time you log into the system, welcome on board!" %}</p>
{% endif %}
<div class="card-deck">
{% for resource, usage in resource_usage.items %}
<div class="card resource-usage resource-{{ resource }}">
<div class="card-body">
<h5 class="card-title">{{ usage.verbose_name }}</h5>
{% if usage.data.alert %}
<div class="text-center mt-4">
{{ usage.data.alert }}
</div>
{% endif %}
</div>
</div>
{% endfor %}
<div class="card resource-usage resource-notifications">
<div class="card-body">
<h5 class="card-title">{% trans "Notifications" %}</h5>
{% for message in notifications %}
<p class="card-text">{{ message }}</p>
{% empty %}
<p class="card-text">{% trans "There is no notifications at this time." %}</p>
{% endfor %}
</div>
</div>
<h3>
<i class="bi bi-patch-check"></i>
Identities (DID)
</h3>
<div class="table-responsive">
<table class="table table-striped table-sm">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Header</th>
<th scope="col">Header</th>
<th scope="col">Header</th>
<th scope="col">Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>1,001</td>
<td>random</td>
<td>data</td>
<td>placeholder</td>
<td>text</td>
</tr>
<tr>
<td>1,002</td>
<td>placeholder</td>
<td>irrelevant</td>
<td>visual</td>
<td>layout</td>
</tr>
<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 %}

View File

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