survey/templates/modern/dashboard/changepwd.html
2023-03-24 13:38:03 +01:00

140 lines
6.9 KiB
HTML

{if $action == ''}
<!DOCTYPE html>
<html lang="de">
<head>
<title>JU & MI Benutzer erstellen</title>
<link rel="stylesheet" href="../jquery/jquery-ui.css">
<link rel="stylesheet" href="../jquery/jquery.timepicker.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="../bootstrap/node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="../bootstrap/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<!-- nochmals bootstrap.css mit Erweiterungen vom Dashboard -->
<link href="css/styles.css" rel="stylesheet" />
<!-- icons in nav-->
<script src="all.js" crossorigin="anonymous"></script>
<script src="../jquery/jquery-3.4.1.min.js"></script>
<link rel="stylesheet" href="../bootstrap/node_modules/bootstrap-icons/font/bootstrap-icons.css">
<style>
::-ms-reveal {
display: none;
}
button#toggle-password {
position: absolute;
top: 3px;
right: 4px;
z-index: 9;
width: 28px;
height: 30px;
background: 0;
border: 0;
}
button#toggle-password:active,
button#toggle-password:focus,
button#toggle-password:hover {
cursor: pointer;
}
button#toggle-password:focus {
outline: none !important;
}
.input-password {
padding-right: calc(1.5em + 0.75rem);
background-repeat: no-repeat;
background-position: right calc(0.375em + 0.1875rem) center;
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}
.input-password[type=text]:valid {
background-image: url("data:image/svg+xml,%3Csvg width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7.028 7.028 0 0 0-2.79.588l.77.771A5.944 5.944 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.134 13.134 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755-.165.165-.337.328-.517.486l.708.709z'/%3E%3Cpath d='M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829l.822.822zm-2.943 1.299l.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829z'/%3E%3Cpath d='M3.35 5.47c-.18.16-.353.322-.518.487A13.134 13.134 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7.029 7.029 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709z'/%3E%3Cpath fill-rule='evenodd' d='M13.646 14.354l-12-12 .708-.708 12 12-.708.708z'/%3E%3C/svg%3E") !important;
}
.input-password[type=password]:valid {
background-image: url("data:image/svg+xml,%3Csvg width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.134 13.134 0 0 0 1.66 2.043C4.12 11.332 5.88 12.5 8 12.5c2.12 0 3.879-1.168 5.168-2.457A13.134 13.134 0 0 0 14.828 8a13.133 13.133 0 0 0-1.66-2.043C11.879 4.668 10.119 3.5 8 3.5c-2.12 0-3.879 1.168-5.168 2.457A13.133 13.133 0 0 0 1.172 8z'/%3E%3Cpath fill-rule='evenodd' d='M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z'/%3E%3C/svg%3E") !important;
}
</style>
</head>
<body class="sb-nav-fixed">
<div id="navtop"></div>
{literal}
<script>
$(function(){
// im Navbar muss der toggle in der Callbackfunktion definiert werden. Sonst findet jquery getelementbyID nicht
$("#navtop").load('navtop.php', null, function(){$.getScript('js/scripts.js');});
$("#navleft").load("nav.php");
$("#footer").load("footer.php");
});
</script>
{/literal}
<div id="layoutSidenav">
<!-- Navigation left -->
<div id="navleft"></div>
<div id="layoutSidenav_content">
<main>
<!--Anwendung-->
<script src="../js/components/admin_changepwd.js"></script>
<div class="container-fluid">
<div class="card">
<div class="card-header">
<i class="fas fa-edit me-1"></i>
Passwortwechsel
</div>
<div class="card-body">
<div class="row">
<div class="row mt-0 mt-sm-4 mb-0 mb-sm-4">
<div class="col-12 col-md-4">Altes Passwort:</div>
<div class="col-12 col-md-8">
<div class="input-group">
<input type="password" id="password" class="form-control rounded-right" required>
<button id="toggle-password" type="button" class="d-none"
aria-label="Show password as plain text. Warning: this will display your password on the screen.">
</button>
</div>
</div>
</div>
<div class="row mt-0 mt-sm-4 mb-0 mb-sm-4">
<div class="col-12 col-md-4">Neues Passwort:</div>
<div class="col-12 col-md-8">
<div class="input-group">
<input type="password" id="password_new1" class="form-control rounded-right" required>
<button id="toggle-password" type="button" class="d-none"
aria-label="Show password as plain text. Warning: this will display your password on the screen.">
</button>
</div>
</div>
</div>
<div class="row mt-0 mt-sm-4 mb-0 mb-sm-4">
<div class="col-12 col-md-4">Passwortwiederholung:</div>
<div class="col-12 col-md-8">
<div class="input-group">
<input type="password" id="password_new2" class="form-control rounded-right" required>
<button id="toggle-password" type="button" class="d-none"
aria-label="Show password as plain text. Warning: this will display your password on the screen.">
</button>
</div>
</div>
</div>
</div>
<p align='center'>
<button class="col-6 btn btn-primary btn-sm mt-3" id="save" onclick="changepwd();">Speichern</button>
</p>
</div>
</div>
</div>
<div id="msg"></div>
<script src="../js/show-password-toggle.js" async></script>
</main>
<!-- footer -->
<div id="footer"></div>
</div>
</div>
</body>
</html>
{/if}