bremen_short_url/BackEnd/Login.html

193 lines
7.8 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">
<!-- End Required meta tags -->
<title>不來梅短網址管理系統</title>
<!-- BEGIN BASE JS -->
<script src="assets/vendor/jquery/jquery.min.js"></script>
<script src="assets/vendor/jquery.cookie/jquery.cookie.js"></script>
<script src="assets/javascript/sha256.js"></script>
<script src="assets/vendor/bootstrap/js/popper.min.js"></script>
<script src="assets/vendor/bootstrap/js/bootstrap.min.js"></script>
<!-- END BASE JS -->
<!-- Favicons -->
<link rel="apple-touch-icon" sizes="144x144" href="assets/apple-touch-icon.png">
<link rel="shortcut icon" href="assets/favicon.ico">
<meta name="theme-color" content="#3063A0"><!-- Google font -->
<link href="https://fonts.googleapis.com/css?family=Fira+Sans:400,500,600" rel="stylesheet"><!-- End Google font -->
<!-- BEGIN PLUGINS STYLES -->
<link rel="stylesheet" href="assets/vendor/fontawesome/css/all.css"><!-- END PLUGINS STYLES -->
<!-- BEGIN THEME STYLES -->
<link rel="stylesheet" href="assets/stylesheets/theme.min.css" data-skin="default">
<link rel="stylesheet" href="assets/stylesheets/theme-dark.min.css" data-skin="dark">
<link rel="stylesheet" href="assets/stylesheets/custom.css"><!-- Disable unused skin immediately -->
<script>
var skin = localStorage.getItem('skin') || 'default';
var unusedLink = document.querySelector('link[data-skin]:not([data-skin="' + skin + '"])');
unusedLink.setAttribute('rel', '');
unusedLink.setAttribute('disabled', true);
</script><!-- END THEME STYLES -->
<script>
(function ($, document) {
if ($.cookie) {
$.cookieKey = function (CookieName, KeyName, Value, Options) {
var reg = new RegExp("(?:([^=]+)=([^&]*)&?)", "ig"),
match = null,
matches = [];
var cookieVal = $.cookie(CookieName);
while (match = reg.exec(cookieVal)) {
if (KeyName.toLowerCase() == match[1].toLowerCase()) {
if (Value) { //we are updating, collect all values
matches.push([match[1], Value]);
}
else {
return match[2]; //we are getting, sub key found just return it
}
}
else if (Value) { //we are updating, collect all values
matches.push([match[1], match[2]]);
}
}
if (Value) { //we are updating, update values
updatedValue = "",
sep = "";
for (i = 0; i < matches; i++) {
updatedValue += sep + matches[i][0] + "=" + matches[i][1];
sep = "&"
}
$.cookie(CookieName, updatedValue, Options);
}
else return null;//we are getting, value not found
}
}
})(jQuery, document);
$(document).ready(function () {
if ($.cookie("id") != null) {
$("#inputUser").val($.cookieKey("id", "id"));
}
if ($.cookie("token") != null) {
location.href = "projects-management.aspx";
}
});
function login() {
var rem = "N";
if ($("#remember-me").prop("checked")) {
rem = "Y";
}
var formData = {
id: $("#inputUser").val(),
pwd: sha256_digest($("#inputPassword").val()),
rem: rem
}
$.ajax({
url: "api/signin.ashx",
type: "POST",
data: formData,
success: function (data, textStatus, jqXHR) {
if (data.ret == "yes") {
location.href = "projects-management.aspx";
} else {
alert(data.message);
}
},
error: function (jqXHR, textStatus, errorThrown) {
alert('网絡或伺服器发生错误,请稍后重试!');
}
});
return false;
}
</script>
</head>
<body>
<!-- .auth -->
<main class="auth">
<header id="auth-header" class="auth-header" style="background-image: url(assets/images/illustration/img-1.png);">
<h1>
<img src="assets/images/bremen_white_2.png" alt="" height="100">
<span class="sr-only">Sign In</span>
</h1>
</header>
<!-- form -->
<form class="auth-form" onsubmit="return login();">
<!-- .form-group -->
<div class="text-center">
<div style="font-size:25px; font-weight:bold;">短網址管理系統</div>
<div style="font-size:14.6px;">Short URL Management</div>
<br />
</div>
<!-- /.form-group -->
<!-- .form-group -->
<div class="form-group">
<div class="form-label-group">
<input type="text" id="inputUser" class="form-control" placeholder="E白板帳號" required="" autofocus="">
<label for="inputUser">E白板帳號</label>
</div>
</div>
<!-- /.form-group -->
<!-- .form-group -->
<div class="form-group">
<div class="form-label-group">
<input type="password" id="inputPassword" class="form-control" placeholder="E白板密碼" required="">
<label for="inputPassword">E白板密碼</label>
</div>
</div>
<!-- /.form-group -->
<!-- .form-group -->
<div class="form-group">
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign In</button>
</div>
<!-- /.form-group -->
<!-- .form-group -->
<div class="form-group text-center">
<div class="custom-control custom-control-inline custom-checkbox">
<input type="checkbox" class="custom-control-input" id="remember-me">
<label class="custom-control-label" for="remember-me">保持登入狀態</label>
</div>
</div>
<!-- /.form-group -->
<!-- recovery links -->
<div class="text-center pt-3">
<a href="https://prm.bremennetwork.tw/auth-recovery-password.html" class="link">忘記密碼?</a>
</div>
<!-- /recovery links -->
</form>
<!-- /.auth-form -->
</main>
<!-- /.auth -->
<!-- BEGIN PLUGINS JS -->
<script src="assets/vendor/particles.js/particles.min.js"></script>
<script>
/**
* Keep in mind that your scripts may not always be executed after the theme is completely ready,
* you might need to observe the `theme:load` event to make sure your scripts are executed after the theme is ready.
*/
$(document).on('theme:init', () => {
/* particlesJS.load(@dom-id, @path-json, @callback (optional)); */
particlesJS.load('auth-header', 'assets/javascript/pages/particles.json');
});
</script> <!-- END PLUGINS JS -->
<!-- BEGIN THEME JS -->
<script src="assets/javascript/theme.min.js"></script> <!-- END THEME JS -->
</body>
</html>