- cleanup of old files and css
- further implementation of user login
This commit is contained in:
dorian
parent
d9c9382b41
commit
903f730502
18 changed files with 457 additions and 572 deletions
0
api/submitSensorDataExample.json
Normal file → Executable file
0
api/submitSensorDataExample.json
Normal file → Executable file
106
css/blueweather.css
Normal file
106
css/blueweather.css
Normal file
|
|
@ -0,0 +1,106 @@
|
|||
/*
|
||||
*
|
||||
*/
|
||||
|
||||
.opacity-animated {
|
||||
-webkit-transition: opacity 1s; /* For Safari 3.1 to 6.0 */
|
||||
transition: opacity 1s;
|
||||
-webkit-transition: padding-top 1s; /* For Safari 3.1 to 6.0 */
|
||||
transform: scale(1);
|
||||
transition: 1s all ease;
|
||||
}
|
||||
|
||||
.flexFont {
|
||||
height:100%;
|
||||
width:100%;
|
||||
}
|
||||
|
||||
/*
|
||||
* Login modal
|
||||
*/
|
||||
.bd-placeholder-img {
|
||||
font-size: 1.125rem;
|
||||
text-anchor: middle;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.bd-placeholder-img-lg {
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-login {
|
||||
color: #636363;
|
||||
width: 350px;
|
||||
}
|
||||
|
||||
.modal-login .modal-content {
|
||||
padding: 20px;
|
||||
border-radius: 5px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.modal-login .modal-header {
|
||||
border-bottom: none;
|
||||
position: relative;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.modal-login h4 {
|
||||
text-align: center;
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
.modal-login .form-group {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.modal-login i {
|
||||
position: absolute;
|
||||
left: 13px;
|
||||
top: 11px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.modal-login .form-control,
|
||||
.modal-login .btn {
|
||||
min-height: 40px;
|
||||
border-radius: 3px;
|
||||
transition: all 0.5s;
|
||||
border: 1px solid #ced4da;
|
||||
border-width: 1px;
|
||||
}
|
||||
|
||||
.modal-login .close {
|
||||
position: absolute;
|
||||
top: -5px;
|
||||
right: -5px;
|
||||
}
|
||||
|
||||
.modal-login .forgot-link {
|
||||
color: #12b5e5;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.modal-login .modal-footer {
|
||||
color: #999;
|
||||
border: none;
|
||||
text-align: center;
|
||||
border-radius: 5px;
|
||||
font-size: 13px;
|
||||
margin-top: -20px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.modal-login .modal-footer a {
|
||||
color: #12b5e5;
|
||||
}
|
||||
|
||||
.trigger-btn {
|
||||
display: inline-block;
|
||||
margin: 100px auto;
|
||||
}
|
||||
|
|
@ -81,8 +81,6 @@ body {
|
|||
|
||||
.navbar .form-control {
|
||||
padding: .75rem 1rem;
|
||||
border-width: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.form-control-dark {
|
||||
|
|
@ -109,22 +107,4 @@ body {
|
|||
.bd-placeholder-img-lg {
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-toggle::after {
|
||||
display:none;
|
||||
}
|
||||
|
||||
/*
|
||||
*
|
||||
*/
|
||||
|
||||
.opacity-animated {
|
||||
-webkit-transition: opacity 1s; /* For Safari 3.1 to 6.0 */
|
||||
transition: opacity 1s;
|
||||
}
|
||||
|
||||
.flexFont {
|
||||
height:100%;
|
||||
width:100%;
|
||||
}
|
||||
0
css/font-awesome.min.css
vendored
Normal file → Executable file
0
css/font-awesome.min.css
vendored
Normal file → Executable file
110
css/index.css
110
css/index.css
|
|
@ -2,15 +2,105 @@
|
|||
*
|
||||
*/
|
||||
|
||||
.opacity-animated {
|
||||
-webkit-transition: opacity 1s; /* For Safari 3.1 to 6.0 */
|
||||
transition: opacity 1s;
|
||||
-webkit-transition: padding-top 1s; /* For Safari 3.1 to 6.0 */
|
||||
transform: scale(1);
|
||||
transition: 1s all ease;
|
||||
.bd-placeholder-img {
|
||||
font-size: 1.125rem;
|
||||
text-anchor: middle;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.bd-placeholder-img-lg {
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Offcanvas
|
||||
*/
|
||||
|
||||
html,
|
||||
body {
|
||||
overflow-x: hidden; /* Prevent scroll on narrow devices */
|
||||
}
|
||||
|
||||
body {
|
||||
padding-top: 56px;
|
||||
|
||||
.flexFont {
|
||||
height:100%;
|
||||
width:100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.offcanvas-collapse {
|
||||
position: fixed;
|
||||
top: 56px; /* Height of navbar */
|
||||
bottom: 0;
|
||||
left: 100%;
|
||||
width: 100%;
|
||||
padding-right: 1rem;
|
||||
padding-left: 1rem;
|
||||
overflow-y: auto;
|
||||
visibility: hidden;
|
||||
background-color: #343a40;
|
||||
transition: visibility .3s ease-in-out, -webkit-transform .3s ease-in-out;
|
||||
transition: transform .3s ease-in-out, visibility .3s ease-in-out;
|
||||
transition: transform .3s ease-in-out, visibility .3s ease-in-out, -webkit-transform .3s ease-in-out;
|
||||
}
|
||||
.offcanvas-collapse.open {
|
||||
visibility: visible;
|
||||
-webkit-transform: translateX(-100%);
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
}
|
||||
|
||||
.nav-scroller {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
height: 2.75rem;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.nav-scroller .nav {
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-wrap: nowrap;
|
||||
flex-wrap: nowrap;
|
||||
padding-bottom: 1rem;
|
||||
margin-top: -1px;
|
||||
overflow-x: auto;
|
||||
color: rgba(255, 255, 255, .75);
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.nav-underline .nav-link {
|
||||
padding-top: .75rem;
|
||||
padding-bottom: .75rem;
|
||||
font-size: .875rem;
|
||||
color: #6c757d;
|
||||
}
|
||||
|
||||
.nav-underline .nav-link:hover {
|
||||
color: #007bff;
|
||||
}
|
||||
|
||||
.nav-underline .active {
|
||||
font-weight: 500;
|
||||
color: #343a40;
|
||||
}
|
||||
|
||||
.text-white-50 { color: rgba(255, 255, 255, .5); }
|
||||
|
||||
.bg-purple { background-color: #6f42c1; }
|
||||
.bg-blue { background-color: #007bff; }
|
||||
.bg-ff { background-color: #e6e4e4; }
|
||||
|
||||
.lh-100 { line-height: 1; }
|
||||
.lh-125 { line-height: 1.25; }
|
||||
.lh-150 { line-height: 1.5; }
|
||||
|
||||
.rounded {
|
||||
border-radius: .7rem !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,84 +0,0 @@
|
|||
html,
|
||||
body {
|
||||
overflow-x: hidden; /* Prevent scroll on narrow devices */
|
||||
}
|
||||
|
||||
body {
|
||||
padding-top: 56px;
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.offcanvas-collapse {
|
||||
position: fixed;
|
||||
top: 56px; /* Height of navbar */
|
||||
bottom: 0;
|
||||
left: 100%;
|
||||
width: 100%;
|
||||
padding-right: 1rem;
|
||||
padding-left: 1rem;
|
||||
overflow-y: auto;
|
||||
visibility: hidden;
|
||||
background-color: #343a40;
|
||||
transition: visibility .3s ease-in-out, -webkit-transform .3s ease-in-out;
|
||||
transition: transform .3s ease-in-out, visibility .3s ease-in-out;
|
||||
transition: transform .3s ease-in-out, visibility .3s ease-in-out, -webkit-transform .3s ease-in-out;
|
||||
}
|
||||
.offcanvas-collapse.open {
|
||||
visibility: visible;
|
||||
-webkit-transform: translateX(-100%);
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
}
|
||||
|
||||
.nav-scroller {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
height: 2.75rem;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.nav-scroller .nav {
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-wrap: nowrap;
|
||||
flex-wrap: nowrap;
|
||||
padding-bottom: 1rem;
|
||||
margin-top: -1px;
|
||||
overflow-x: auto;
|
||||
color: rgba(255, 255, 255, .75);
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.nav-underline .nav-link {
|
||||
padding-top: .75rem;
|
||||
padding-bottom: .75rem;
|
||||
font-size: .875rem;
|
||||
color: #6c757d;
|
||||
}
|
||||
|
||||
.nav-underline .nav-link:hover {
|
||||
color: #007bff;
|
||||
}
|
||||
|
||||
.nav-underline .active {
|
||||
font-weight: 500;
|
||||
color: #343a40;
|
||||
}
|
||||
|
||||
.text-white-50 { color: rgba(255, 255, 255, .5); }
|
||||
|
||||
.bg-purple { background-color: #6f42c1; }
|
||||
.bg-blue { background-color: #007bff; }
|
||||
.bg-ff { background-color: #e6e4e4; }
|
||||
|
||||
.lh-100 { line-height: 1; }
|
||||
.lh-125 { line-height: 1.25; }
|
||||
.lh-150 { line-height: 1.5; }
|
||||
|
||||
.rounded {
|
||||
border-radius: .7rem !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,44 +0,0 @@
|
|||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
padding-top: 40px;
|
||||
padding-bottom: 40px;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.form-signin {
|
||||
width: 100%;
|
||||
max-width: 330px;
|
||||
padding: 15px;
|
||||
margin: auto;
|
||||
}
|
||||
.form-signin .checkbox {
|
||||
font-weight: 400;
|
||||
}
|
||||
.form-signin .form-control {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
height: auto;
|
||||
padding: 10px;
|
||||
font-size: 16px;
|
||||
}
|
||||
.form-signin .form-control:focus {
|
||||
z-index: 2;
|
||||
}
|
||||
.form-signin input[type="email"] {
|
||||
margin-bottom: -1px;
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
.form-signin input[type="password"] {
|
||||
margin-bottom: 10px;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
|
|
@ -13,14 +13,16 @@
|
|||
<link href="css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="css/font-awesome.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Custom styles for this template -->
|
||||
<link href="css/bootstrap.min.css" rel="stylesheet">
|
||||
<!-- gobal custom styles -->
|
||||
<link href="css/blueweather.css" rel="stylesheet">
|
||||
|
||||
<!-- Custom styles for this site -->
|
||||
<link href="css/dashboard.css" rel="stylesheet">
|
||||
|
||||
</head>
|
||||
|
||||
<body style="height: 100%;">
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark shadow">
|
||||
<nav class="navbar nav-pills navbar-expand-lg navbar-dark bg-dark shadow">
|
||||
<!-- left part of toolbar -->
|
||||
<a class="navbar-brand" href="index.html">BlueWeather</a>
|
||||
|
||||
|
|
@ -29,36 +31,9 @@
|
|||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
||||
<ul class="navbar-nav ml-auto">
|
||||
<li class="nav-item dropdown no-arrow">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-toggle="dropdown"
|
||||
aria-haspopup="true" aria-expanded="false" style="padding: 0;">
|
||||
<img class="img-profile rounded-circle" height="30" src="https://source.unsplash.com/QAB-WJcbgJk/60x60">
|
||||
</a>
|
||||
<!-- Dropdown - User Information -->
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="userDropdown">
|
||||
<a class="dropdown-item" href="#">
|
||||
<span data-feather="user"></span>
|
||||
Profile
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
<span data-feather="settings"></span>
|
||||
Settings
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fas fa-list fa-sm fa-fw mr-2 text-gray-400"></i>
|
||||
Activity Log
|
||||
</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#" data-toggle="modal" data-target="#logoutModal">
|
||||
<span data-feather="log-out"></span>
|
||||
Logout
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<ul id="profileContainer" class="navbar-nav ml-auto">
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<div class="container-fluid" style="height: 100%">
|
||||
|
|
@ -81,7 +56,6 @@
|
|||
<span data-feather="plus-circle"></span>
|
||||
</a>
|
||||
</h6>
|
||||
|
||||
<ul class="nav flex-column mb-2" id="sensorsList">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">
|
||||
|
|
|
|||
BIN
img/user.png
Executable file
BIN
img/user.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
47
index.html
47
index.html
|
|
@ -8,47 +8,29 @@
|
|||
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
|
||||
<link rel="icon" href="img/favicon.ico" type="image/x-icon">
|
||||
|
||||
<!-- Bootstrap CSS -->
|
||||
<!-- External styles -->
|
||||
<link rel="stylesheet" href="css/bootstrap.min.css" crossorigin="anonymous">
|
||||
|
||||
<!-- Custom styles for this template -->
|
||||
<!-- gobal custom styles -->
|
||||
<link href="css/blueweather.css" rel="stylesheet">
|
||||
|
||||
<!-- Custom styles for this site -->
|
||||
<link href="css/index.css" rel="stylesheet">
|
||||
|
||||
<style>
|
||||
.bd-placeholder-img {
|
||||
font-size: 1.125rem;
|
||||
text-anchor: middle;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-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="css/offcanvas.css" rel="stylesheet">
|
||||
<link href="css/dashboard.css" rel="stylesheet">
|
||||
|
||||
<title>BlueWeather</title>
|
||||
</head>
|
||||
|
||||
<body class="bg-ff" style="height: 100%;padding-top: 0;">
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark shadow">
|
||||
<nav class="navbar nav-pills navbar-expand-lg navbar-dark bg-dark shadow">
|
||||
<a class="navbar-brand" href="#">BlueWeather</a>
|
||||
|
||||
<ul class="navbar-nav px-3">
|
||||
<li class="nav-item text-nowrap">
|
||||
<a class="nav-link" href="login.html">Sign in</a>
|
||||
</li>
|
||||
<ul id="profileContainer" class="navbar-nav ml-auto">
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<!-- Locations list -->
|
||||
<main role="main" class="container" style="padding-top: 30px;">
|
||||
|
||||
<div class="d-flex align-items-center p-3 my-3 text-white-50 bg-blue rounded shadow-sm">
|
||||
<img class="mr-3" src="img/icon.png" alt="" width="48" height="48">
|
||||
<div class="lh-100">
|
||||
|
|
@ -72,9 +54,18 @@
|
|||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
<!-- js -->
|
||||
<!-- External libs -->
|
||||
<script src="js/jquery.min.js"></script>
|
||||
<script src="js/bootstrap.bundle.min.js"></script>
|
||||
<script src="js/popper.min.js"></script>
|
||||
<script src="js/feather.js"></script>
|
||||
<script src="js/bootstrap.min.js"></script>
|
||||
|
||||
<!-- Internal code -->
|
||||
<script src="js/blueweather.js"></script>
|
||||
<script src="js/index.js"></script>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -3,13 +3,17 @@ class BlueWeather {
|
|||
constructor() {
|
||||
// cunstruct xmlhttp
|
||||
this.xhttp = new XMLHttpRequest();
|
||||
this.host = window.location.href.substring(0, window.location.href.lastIndexOf("/"));
|
||||
this.host = "https://weather.itsblue.de"//window.location.href.substring(0, window.location.href.lastIndexOf("/"));
|
||||
|
||||
this.log("init done", 2)
|
||||
|
||||
this.session = {
|
||||
loggedIn: false,
|
||||
token: ""
|
||||
token: "",
|
||||
user: {
|
||||
realName: "Real Name",
|
||||
username: "username"
|
||||
}
|
||||
}
|
||||
|
||||
this.restoreSession()
|
||||
|
|
@ -20,14 +24,15 @@ class BlueWeather {
|
|||
// ----------------------
|
||||
|
||||
restoreSession() {
|
||||
if(this.getCookie("session") !== "") {
|
||||
if(this.getCookie("session") !== "" && this.getCookie("session") !== undefined) {
|
||||
console.log("old session found: " + this.getCookie("session"), 3)
|
||||
// old session found
|
||||
this.session.loggedIn = true
|
||||
this.session.token = this.getCookie("session")
|
||||
}
|
||||
}
|
||||
|
||||
login(async, processingFunction, username, password) {
|
||||
login(async, username, password, processingFunction) {
|
||||
this.xhttp.abort()
|
||||
var thisObject = this
|
||||
|
||||
|
|
@ -39,14 +44,14 @@ class BlueWeather {
|
|||
thisObject.log("login response was: " + this.responseText, 3)
|
||||
var ret = JSON.parse(this.responseText)
|
||||
if(ret && ret['status'] === 200) {
|
||||
this.session.token = ret["token"]
|
||||
this.session.loggedIn = true
|
||||
//this.session.token = ret["token"]
|
||||
//this.session.loggedIn = true
|
||||
processingFunction(true)
|
||||
return
|
||||
}
|
||||
else {
|
||||
this.session.token = ""
|
||||
this.session.loggedIn = false
|
||||
//this.session.token = ""
|
||||
//this.session.loggedIn = false
|
||||
}
|
||||
}
|
||||
processingFunction(false)
|
||||
|
|
@ -129,6 +134,212 @@ class BlueWeather {
|
|||
this.xhttp.send()
|
||||
}
|
||||
|
||||
// ----------------------
|
||||
// - template functions -
|
||||
// ----------------------
|
||||
|
||||
loadProfileObject(parent) {
|
||||
if(!parent) {
|
||||
return false
|
||||
}
|
||||
|
||||
var thisObject = this
|
||||
|
||||
var profileObject = document.createElement("li")
|
||||
parent.appendChild(profileObject)
|
||||
profileObject.classList.add("nav-item")
|
||||
|
||||
if(!this.session.loggedIn) {
|
||||
this.log("not logged in", 3)
|
||||
|
||||
profileObject.classList.add("text-nowrap")
|
||||
|
||||
// create login button
|
||||
var loginButton = document.createElement('button')
|
||||
profileObject.appendChild(loginButton)
|
||||
loginButton.type = "button"
|
||||
loginButton.setAttribute("data-toggle", "modal")
|
||||
loginButton.setAttribute("data-target", "#loginModal")
|
||||
loginButton.classList.add("btn", "btn-outline-light")
|
||||
loginButton.innerHTML = "Login"
|
||||
|
||||
// ------------
|
||||
// create modal
|
||||
var loginModal = document.createElement('div')
|
||||
loginModal.id = "loginModal"
|
||||
loginModal.setAttribute("tabindex", "-1")
|
||||
loginModal.setAttribute("role", "dialog")
|
||||
loginModal.setAttribute("aria-labelledby", "exampleModalLabel")
|
||||
loginModal.setAttribute("aria-hidden", "true")
|
||||
loginModal.classList.add("modal", "fade")
|
||||
|
||||
// create login form
|
||||
var loginDiv = document.createElement("div")
|
||||
loginModal.appendChild(loginDiv)
|
||||
loginDiv.classList.add("modal-dialog", "modal-login")
|
||||
loginDiv.setAttribute("role", "document")
|
||||
// - modal content
|
||||
var modalContent = document.createElement("div")
|
||||
loginDiv.appendChild(modalContent)
|
||||
modalContent.classList.add("modal-content")
|
||||
|
||||
// -- modal header
|
||||
var modalHeader = document.createElement("div")
|
||||
modalContent.appendChild(modalHeader)
|
||||
modalHeader.classList.add("modal-header")
|
||||
// --- close button
|
||||
var modalCloseButton = document.createElement("button")
|
||||
modalHeader.appendChild(modalCloseButton)
|
||||
modalCloseButton.setAttribute("type", "button")
|
||||
modalCloseButton.setAttribute("data-dismiss", "modal")
|
||||
modalCloseButton.setAttribute("aria-label", "Close")
|
||||
modalCloseButton.classList.add("close")
|
||||
modalCloseButton.innerHTML = '<span aria-hidden="true">×</span>'
|
||||
|
||||
// -- modal body
|
||||
var modalBody = document.createElement("div")
|
||||
modalContent.appendChild(modalBody)
|
||||
modalBody.classList.add("modal-body", "text-center")
|
||||
// --- login form
|
||||
var loginForm = document.createElement("form")
|
||||
modalBody.appendChild(loginForm)
|
||||
loginForm.classList.add("form-signin")
|
||||
// ---- login form fieldset
|
||||
var fieldset = document.createElement("fieldset")
|
||||
loginForm.appendChild(fieldset)
|
||||
// ----- blueweather icon
|
||||
var loginFormIcon = document.createElement("img")
|
||||
fieldset.appendChild(loginFormIcon)
|
||||
loginFormIcon.width = "72"
|
||||
loginFormIcon.height = "72"
|
||||
loginFormIcon.src = "img/icon.png"
|
||||
loginFormIcon.alt = ""
|
||||
loginFormIcon.classList.add("mb-4")
|
||||
// ----- 'Please sign in' text
|
||||
var loginFormHeadline = document.createElement("h1")
|
||||
fieldset.append(loginFormHeadline)
|
||||
loginFormHeadline.classList.add("h3", "mb-3", "font-weight-normal")
|
||||
loginFormHeadline.innerHTML = "Please sign in"
|
||||
// ----- login failed alert
|
||||
var alert = document.createElement("div")
|
||||
fieldset.append(alert)
|
||||
alert.id = "loginFormLoginFailedAlert"
|
||||
alert.appear = function() {
|
||||
alert.innerHTML = '<div class="alert alert-danger alert-dismissible fade show" role="alert">Invalid username or password<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button></div>'
|
||||
}
|
||||
// ----- username input
|
||||
var usernameInputGroup = document.createElement("div")
|
||||
fieldset.appendChild(usernameInputGroup)
|
||||
usernameInputGroup.classList.add("form-group", "input-group")
|
||||
usernameInputGroup.innerHTML = '<div class="input-group-prepend"><div class="input-group-text"><span data-feather="user"></span></div></div><input type="text" class="form-control" id="loginFormUsernameInput" placeholder="Username"> </div>'
|
||||
// ----- password input
|
||||
var passwordInputGroup = document.createElement("div")
|
||||
fieldset.appendChild(passwordInputGroup)
|
||||
passwordInputGroup.classList.add("form-group", "input-group")
|
||||
passwordInputGroup.innerHTML = '<div class="input-group-prepend"><div class="input-group-text"><span data-feather="lock"></span></div></div><input type="password" class="form-control" id="loginFormPasswordInput" placeholder="Password"> </div>'
|
||||
// ----- 'remember me' checkbox
|
||||
var rememberCheckboxContainer = document.createElement("div")
|
||||
rememberCheckboxContainer.classList.add("checkbox", "mb-3")
|
||||
rememberCheckboxContainer.innerHTML = '<label> <input id="loginFormRememberMeChekbox" type="checkbox"> Remember me </label>'
|
||||
// ----- 'sign in' button
|
||||
var signInButton = document.createElement("button")
|
||||
modalBody.appendChild(signInButton)
|
||||
signInButton.id = "loginFormSignInButton"
|
||||
signInButton.type = "submit"
|
||||
signInButton.classList.add("btn", "btn-lg", "btn-primary", "btn-block")
|
||||
signInButton.innerHTML = "Sign in"
|
||||
signInButton.setLoading = function() {
|
||||
signInButton.disabled = true
|
||||
signInButton.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Signing in...'
|
||||
}
|
||||
signInButton.setNormal = function() {
|
||||
signInButton.disabled = false
|
||||
signInButton.innerHTML = 'Sign in'
|
||||
}
|
||||
signInButton.onclick = function() {
|
||||
signInButton.setLoading()
|
||||
var username = document.getElementById("loginFormUsernameInput").value
|
||||
var password = document.getElementById("loginFormPasswordInput").value
|
||||
thisObject.login(true, username, password, function(loginSuccess){
|
||||
if(!loginSuccess){
|
||||
alert.appear()
|
||||
}
|
||||
signInButton.setNormal()
|
||||
})
|
||||
}
|
||||
// ----------
|
||||
|
||||
parent.appendChild(loginModal)
|
||||
}
|
||||
else {
|
||||
|
||||
this.log("logged in", 3)
|
||||
profileObject.classList.add("dropdown")
|
||||
|
||||
// create profile picture button
|
||||
var profileButton = document.createElement("a")
|
||||
profileObject.appendChild(profileButton)
|
||||
profileButton.id = "userDropdown"
|
||||
profileButton.style = "padding: 0;"
|
||||
profileButton.href = "#"
|
||||
profileButton.setAttribute("role", "button")
|
||||
profileButton.classList.add("nav-link", "dropdown-toggle")
|
||||
profileButton.setAttribute("data-toggle", "dropdown")
|
||||
profileButton.setAttribute("aria-haspopup", "true")
|
||||
profileButton.setAttribute("aria-expanded", "false")
|
||||
|
||||
// create profile image inside button
|
||||
var profileImage = document.createElement("img")
|
||||
profileButton.appendChild(profileImage)
|
||||
profileImage.height="30"
|
||||
profileImage.src = "img/user.png"
|
||||
profileImage.classList.add("img-profile", "rounded-circle")
|
||||
|
||||
// create dropdown menu
|
||||
var profileDropdown = document.createElement("div")
|
||||
profileObject.appendChild(profileDropdown)
|
||||
profileDropdown.classList.add("dropdown-menu", "dropdown-menu-right")
|
||||
profileDropdown.setAttribute("aria-labelledby", "userDropdown")
|
||||
|
||||
// fill the dropdown menu
|
||||
function createDropdownMenuElement(icon, text) {
|
||||
// create element
|
||||
var elem = document.createElement("a")
|
||||
elem.classList.add("dropdown-item")
|
||||
elem.href = "#"
|
||||
|
||||
// create icon
|
||||
var iconSpan = document.createElement("span")
|
||||
elem.appendChild(iconSpan)
|
||||
iconSpan.setAttribute("data-feather", icon)
|
||||
|
||||
// create text
|
||||
var text = document.createTextNode(text)
|
||||
elem.appendChild(text)
|
||||
|
||||
return elem
|
||||
}
|
||||
|
||||
function createDropdownSeparator() {
|
||||
var sep = document.createElement("div")
|
||||
sep.classList.add("dropdown-divider")
|
||||
return sep
|
||||
}
|
||||
|
||||
var header = document.createElement("div")
|
||||
header.classList.add("dropdown-item")
|
||||
header.innerHTML = "<h6><b>" + this.session.user.realName + "</b></h6>@" + this.session.user.username
|
||||
profileDropdown.appendChild(header)
|
||||
profileDropdown.appendChild(createDropdownSeparator())
|
||||
profileDropdown.appendChild(createDropdownMenuElement("settings", " Settings"))
|
||||
profileDropdown.appendChild(createDropdownSeparator())
|
||||
profileDropdown.appendChild(createDropdownMenuElement("log-out", " Log out"))
|
||||
|
||||
}
|
||||
|
||||
feather.replace()
|
||||
}
|
||||
|
||||
// --------------------
|
||||
// - helper functions -
|
||||
// --------------------
|
||||
|
|
|
|||
0
js/bootstrap.bundle.min.js → js/bootstrap.min.js
vendored
Normal file → Executable file
0
js/bootstrap.bundle.min.js → js/bootstrap.min.js
vendored
Normal file → Executable file
|
|
@ -615,4 +615,5 @@ window.onresize = function (event) {
|
|||
flexFont();
|
||||
};
|
||||
feather.replace()
|
||||
dashboard = new BlueWeatherDashboard()
|
||||
dashboard = new BlueWeatherDashboard()
|
||||
dashboard.blueweather.loadProfileObject(document.getElementById("profileContainer"))
|
||||
|
|
@ -54,5 +54,6 @@ class BlueWeatherIndex {
|
|||
})
|
||||
}
|
||||
}
|
||||
|
||||
index = new BlueWeatherIndex()
|
||||
feather.replace()
|
||||
index = new BlueWeatherIndex()
|
||||
index.blueweather.loadProfileObject(document.getElementById("profileContainer"))
|
||||
0
js/popper.min.js
vendored
Normal file → Executable file
0
js/popper.min.js
vendored
Normal file → Executable file
58
login.html
58
login.html
|
|
@ -1,58 +0,0 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v3.8.5">
|
||||
<title>BlueWeather login</title>
|
||||
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.3/examples/sign-in/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
|
||||
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
|
||||
|
||||
|
||||
<style>
|
||||
.bd-placeholder-img {
|
||||
font-size: 1.125rem;
|
||||
text-anchor: middle;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-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="css/signin.css" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body class="text-center">
|
||||
<form class="form-signin">
|
||||
<img class="mb-4" src="img/icon-cloud.jpg" alt="" width="120" height="120">
|
||||
<h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
|
||||
<label for="inputEmail" class="sr-only">Email address</label>
|
||||
<input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
|
||||
<label for="inputPassword" class="sr-only">Password</label>
|
||||
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
|
||||
<div class="checkbox mb-3">
|
||||
<label>
|
||||
<input type="checkbox" value="remember-me"> Remember me
|
||||
</label>
|
||||
</div>
|
||||
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
|
||||
|
||||
<!-- <p class="mt-5 mb-3 text-muted">© 2017-2019</p> -->
|
||||
</form>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
132
loginmodal.html
132
loginmodal.html
|
|
@ -1,132 +0,0 @@
|
|||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Bootstrap Elegant Modal Login Modal Form with Icons</title>
|
||||
<link href="https://fonts.googleapis.com/css?family=Roboto|Varela+Round" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
|
||||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
|
||||
<style type="text/css">
|
||||
body {
|
||||
font-family: 'Varela Round', sans-serif;
|
||||
}
|
||||
.modal-login {
|
||||
color: #636363;
|
||||
width: 350px;
|
||||
}
|
||||
.modal-login .modal-content {
|
||||
padding: 20px;
|
||||
border-radius: 5px;
|
||||
border: none;
|
||||
}
|
||||
.modal-login .modal-header {
|
||||
border-bottom: none;
|
||||
position: relative;
|
||||
justify-content: center;
|
||||
}
|
||||
.modal-login h4 {
|
||||
text-align: center;
|
||||
font-size: 26px;
|
||||
}
|
||||
.modal-login .form-group {
|
||||
position: relative;
|
||||
}
|
||||
.modal-login i {
|
||||
position: absolute;
|
||||
left: 13px;
|
||||
top: 11px;
|
||||
font-size: 18px;
|
||||
}
|
||||
.modal-login .form-control {
|
||||
padding-left: 40px;
|
||||
}
|
||||
.modal-login .form-control:focus {
|
||||
border-color: #12b5e5;
|
||||
}
|
||||
.modal-login .form-control, .modal-login .btn {
|
||||
min-height: 40px;
|
||||
border-radius: 3px;
|
||||
transition: all 0.5s;
|
||||
}
|
||||
.modal-login .close {
|
||||
position: absolute;
|
||||
top: -5px;
|
||||
right: -5px;
|
||||
}
|
||||
.modal-login input[type="checkbox"] {
|
||||
margin-top: 1px;
|
||||
}
|
||||
.modal-login .forgot-link {
|
||||
color: #12b5e5;
|
||||
float: right;
|
||||
}
|
||||
.modal-login .btn {
|
||||
background: #12b5e5;
|
||||
border: none;
|
||||
line-height: normal;
|
||||
}
|
||||
.modal-login .btn:hover, .modal-login .btn:focus {
|
||||
background: #10a3cd;
|
||||
}
|
||||
.modal-login .modal-footer {
|
||||
color: #999;
|
||||
border: none;
|
||||
text-align: center;
|
||||
border-radius: 5px;
|
||||
font-size: 13px;
|
||||
margin-top: -20px;
|
||||
justify-content: center;
|
||||
}
|
||||
.modal-login .modal-footer a {
|
||||
color: #12b5e5;
|
||||
}
|
||||
.trigger-btn {
|
||||
display: inline-block;
|
||||
margin: 100px auto;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="text-center">
|
||||
<!-- Button HTML (to Trigger Modal) -->
|
||||
<a href="#myModal" class="trigger-btn" data-toggle="modal">Click to Open Login Modal</a>
|
||||
</div>
|
||||
|
||||
<!-- Modal HTML -->
|
||||
<div id="myModal" class="modal fade">
|
||||
<div class="modal-dialog modal-login">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h4 class="modal-title">Sign in</h4>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form action="/examples/actions/confirmation.php" method="post">
|
||||
<div class="form-group">
|
||||
<i class="fa fa-user"></i>
|
||||
<input type="text" class="form-control" placeholder="Username" required="required">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<i class="fa fa-lock"></i>
|
||||
<input type="password" class="form-control" placeholder="Password" required="required">
|
||||
</div>
|
||||
<div class="form-group small clearfix">
|
||||
<label class="checkbox-inline"><input type="checkbox"> Remember me</label>
|
||||
<a href="#" class="forgot-link">Forgot Password?</a>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input type="submit" class="btn btn-primary btn-block btn-lg" value="Sign in">
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">Don't have an account? <a href="">Sign up</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
151
loginmodal2.html
151
loginmodal2.html
|
|
@ -1,151 +0,0 @@
|
|||
<html>
|
||||
|
||||
<head>
|
||||
<link href="css/bootstrap.min.css" rel="stylesheet">
|
||||
<script src="js/jquery.min.js" type="text/javascript"></script>
|
||||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
|
||||
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
|
||||
crossorigin="anonymous"></script>
|
||||
|
||||
<style>
|
||||
.bd-placeholder-img {
|
||||
font-size: 1.125rem;
|
||||
text-anchor: middle;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.bd-placeholder-img-lg {
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-login {
|
||||
color: #636363;
|
||||
width: 350px;
|
||||
}
|
||||
|
||||
.modal-login .modal-content {
|
||||
padding: 20px;
|
||||
border-radius: 5px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.modal-login .modal-header {
|
||||
border-bottom: none;
|
||||
position: relative;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.modal-login h4 {
|
||||
text-align: center;
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
.modal-login .form-group {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.modal-login i {
|
||||
position: absolute;
|
||||
left: 13px;
|
||||
top: 11px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.modal-login .form-control,
|
||||
.modal-login .btn {
|
||||
min-height: 40px;
|
||||
border-radius: 3px;
|
||||
transition: all 0.5s;
|
||||
}
|
||||
|
||||
.modal-login .close {
|
||||
position: absolute;
|
||||
top: -5px;
|
||||
right: -5px;
|
||||
}
|
||||
|
||||
.modal-login .forgot-link {
|
||||
color: #12b5e5;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.modal-login .modal-footer {
|
||||
color: #999;
|
||||
border: none;
|
||||
text-align: center;
|
||||
border-radius: 5px;
|
||||
font-size: 13px;
|
||||
margin-top: -20px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.modal-login .modal-footer a {
|
||||
color: #12b5e5;
|
||||
}
|
||||
|
||||
.trigger-btn {
|
||||
display: inline-block;
|
||||
margin: 100px auto;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- Button trigger modal -->
|
||||
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
|
||||
Launch demo modal
|
||||
</button>
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
|
||||
aria-hidden="true">
|
||||
<div class="modal-dialog modal-login" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body text-center">
|
||||
<form class="form-signin">
|
||||
<fieldset>
|
||||
<img class="mb-4" src="img/icon.png" alt="" width="72" height="72">
|
||||
<h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
|
||||
<div class="form-group input-group">
|
||||
<div class="input-group-prepend">
|
||||
<div class="input-group-text"><span data-feather="user"></span></div>
|
||||
</div>
|
||||
<input type="text" class="form-control" id="inlineFormInputGroupUsername"
|
||||
placeholder="Username">
|
||||
</div>
|
||||
<div class="form-group input-group">
|
||||
<div class="input-group-prepend">
|
||||
<div class="input-group-text"><span data-feather="lock"></span></div>
|
||||
</div>
|
||||
<input type="password" class="form-control" id="inlineFormInputGroupUsername"
|
||||
placeholder="Password">
|
||||
</div>
|
||||
<div class="checkbox mb-3">
|
||||
<label>
|
||||
<input type="checkbox" value="remember-me"> Remember me
|
||||
</label>
|
||||
</div>
|
||||
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="js/feather.js"></script>
|
||||
<script>
|
||||
feather.replace()
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
Reference in a new issue