mirror of
https://gitlab.com/crafty-controller/crafty-4.git
synced 2025-07-25 02:55:58 +00:00
208 lines
8.3 KiB
HTML
208 lines
8.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<!-- Required meta tags -->
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
<title>Crafty Controller</title>
|
|
<!-- plugins:css -->
|
|
<link rel="stylesheet" href="/static/assets/vendors/mdi/css/materialdesignicons.min.css">
|
|
<link rel="stylesheet" href="/static/assets/vendors/flag-icon-css/css/flag-icon.min.css">
|
|
<link rel="stylesheet" href="/static/assets/vendors/ti-icons/css/themify-icons.css">
|
|
<link rel="stylesheet" href="/static/assets/vendors/typicons/typicons.css">
|
|
<link rel="stylesheet" href="/static/assets/vendors/css/vendor.bundle.base.css">
|
|
<link rel="manifest" href="/static/assets/crafty.webmanifest">
|
|
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
<meta name="mobile-web-app-capable" content="yes" />
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
|
<!-- <meta name="apple-mobile-web-app-title" content="Crafty Controller 4"> -->
|
|
<link rel="apple-touch-icon" href="../static/assets/images/Crafty_4-0.png">
|
|
<!-- endinject -->
|
|
<!-- Plugin css for this page -->
|
|
<!-- End Plugin css for this page -->
|
|
<!-- Layout styles -->
|
|
<link rel="stylesheet" href="/static/assets/css/dark/style.css">
|
|
<!-- End Layout styles -->
|
|
<link rel="shortcut icon" type="image/svg+xml" href="/static/assets/images/logo_small.svg">
|
|
<link rel="alternate icon" href="/static/assets/images/favicon.png" />
|
|
</head>
|
|
<style>
|
|
.auth.auth-bg-1 {
|
|
background: url("../../static/assets/images/auth/{% raw data['background'] %}"),
|
|
url("/static/assets/images/auth/login_1.jpg");
|
|
background-size: cover;
|
|
background-position: center;
|
|
}
|
|
</style>
|
|
|
|
<body class="dark-theme">
|
|
<div class="container-scroller">
|
|
<div class="container-fluid page-body-wrapper full-page-wrapper">
|
|
<div class="content-wrapper d-flex align-items-center auth auth-bg-1 theme-one">
|
|
<div class="row w-100">
|
|
<div class="col-lg-4 mx-auto">
|
|
|
|
<div id="login-form-background" class="auto-form-wrapper login-modal">
|
|
<div id="login_opacity" data-value="{{ data['login_opacity'] }}" hidden></div>
|
|
<div class="text-center auto-form-logo">
|
|
<img src="/static/assets/images/logo_long.svg">
|
|
</div>
|
|
<style>
|
|
.login-modal {
|
|
border-radius: 0.4rem !important;
|
|
box-shadow: 0 8px 12px 0 hsla(0, 0%, 0%, 0.2) !important;
|
|
}
|
|
|
|
.login-text-input {
|
|
border: none !important;
|
|
background-color: hsl(234, 30%, 45%);
|
|
color: var(--white) !important;
|
|
}
|
|
|
|
.login-text-input:hover,
|
|
.login-text-input:focus {
|
|
background-color: hsl(234, 30%, 39%) !important;
|
|
}
|
|
|
|
.login-input {
|
|
border-radius: 0.4rem !important;
|
|
box-shadow: 0 8px 12px 0 hsla(0, 0%, 0%, 0.2);
|
|
transition: all 0.3s ease-in-out;
|
|
}
|
|
|
|
.login-input:hover,
|
|
.login-input:focus {
|
|
box-shadow: 0 12px 16px 0 hsla(0, 0%, 0%, 0.4);
|
|
}
|
|
</style>
|
|
<form id="login-form" data-query="{{ data.get('query', None) }}">
|
|
{% raw xsrf_form_html() %}
|
|
<div class="form-group">
|
|
<label class="label">{{ translate('login', 'username', data['lang']) }}</label>
|
|
<div class="input-group">
|
|
<input type="text" class="form-control login-text-input login-input"
|
|
placeholder="{{ translate('login', 'username', data['lang']) }}" name="username" id="username"
|
|
required="true">
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="label">{{ translate('login', 'password', data['lang']) }}</label>
|
|
<div class="input-group">
|
|
<input type="password" class="form-control login-text-input login-input"
|
|
placeholder="{{ translate('login', 'password', data['lang']) }}" name="password" id="password"
|
|
required="true">
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<button class="login-input btn btn-primary submit-btn btn-block">{{ translate('login', 'login',
|
|
data['lang']) }}</button>
|
|
</div>
|
|
<fieldset id="error-field" style="color: red; text-align: center;">
|
|
</fieldset>
|
|
<div class="form-group d-flex justify-content-between">
|
|
<div class="form-check form-check-flat mt-0">
|
|
|
|
</div>
|
|
<button onclick="resetPass()" id="#resetPass" form=""
|
|
class="btn btn-outline-primary btn-sm forgot-password ">{{ translate('login', 'forgotPassword',
|
|
data['lang']) }}</button>
|
|
</div>
|
|
|
|
<div class="text-block text-center my-3">
|
|
<span class="text-small font-weight-semibold"><a href="https://craftycontrol.com/">Crafty Control</a> </span>
|
|
</div>
|
|
|
|
<div class="text-block text-center my-3">
|
|
<a href="/status" class="text-small forgot-password">{{ translate('login', 'viewStatus',
|
|
data['lang']) }}</a>
|
|
</div>
|
|
</form>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- content-wrapper ends -->
|
|
</div>
|
|
<!-- page-body-wrapper ends -->
|
|
</div>
|
|
<!-- container-scroller -->
|
|
<!-- plugins:js -->
|
|
<script src="/static/assets/vendors/js/vendor.bundle.base.js"></script>
|
|
<!-- endinject -->
|
|
<!-- inject:js -->
|
|
<script src="/static/assets/js/shared/off-canvas.js"></script>
|
|
<script src="/static/assets/js/shared/hoverable-collapse.js"></script>
|
|
<script src="/static/assets/js/shared/misc.js"></script>
|
|
<script src="/static/assets/js/shared/settings.js"></script>
|
|
<script src="/static/assets/js/shared/todolist.js"></script>
|
|
<script src="../static/assets/vendors/js/bootbox.min.js"></script>
|
|
<!-- endinject -->
|
|
<script>
|
|
$(document).ready(function () {
|
|
let login_opacity_div = document.getElementById('login_opacity');
|
|
let opacity = login_opacity_div.getAttribute('data-value');
|
|
document.getElementById('login-form-background').style.background = 'rgb(34, 36, 55, ' + (opacity / 100) + ')';
|
|
//Register Service worker for mobile app
|
|
if ('serviceWorker' in navigator) {
|
|
navigator.serviceWorker.register('/static/assets/js/shared/service-worker.js', { scope: '/' })
|
|
.then(function (registration) {
|
|
console.log('Service Worker Registered');
|
|
});
|
|
}
|
|
});
|
|
async function resetPass() {
|
|
let res = await fetch(`/api/v2/crafty/resetPass/`, {
|
|
method: 'GET',
|
|
});
|
|
let responseData = await res.json();
|
|
console.log(responseData);
|
|
bootbox.alert(responseData.data)
|
|
|
|
}
|
|
$("#login-form").on("submit", async function (e) {
|
|
e.preventDefault();
|
|
let loginForm = document.getElementById("login-form");
|
|
|
|
let formData = new FormData(loginForm);
|
|
|
|
//Create an object from the form data entries
|
|
let formDataObject = Object.fromEntries(formData.entries());
|
|
console.log(formDataObject)
|
|
let res = await fetch(`/login`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'X-XSRFToken': formDataObject._xsrf,
|
|
"Content-Type": "application/json"
|
|
},
|
|
body: JSON.stringify({
|
|
"username": formDataObject.username,
|
|
"password": formDataObject.password
|
|
}),
|
|
});
|
|
let responseData = await res.json();
|
|
if (responseData.status === "ok") {
|
|
console.log("OK")
|
|
if ($("#login-form").data("query")) {
|
|
location.href = `${$("#login-form").data("query")}`;
|
|
} else {
|
|
location.href = `/panel/dashboard`
|
|
}
|
|
} else {
|
|
$("#error-field").html(responseData.error);
|
|
}
|
|
});
|
|
</script>
|
|
<style>
|
|
.modal-content {
|
|
background-color: rgb(34, 36, 55) !important;
|
|
color: lightgray;
|
|
text-align: center;
|
|
}
|
|
</style>
|
|
</body>
|
|
|
|
</html> |