pierre/BasicOIDC
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Can change user password

Browse Source
This commit is contained in:
Pierre HUBERT
2022-04-05 17:17:34 +02:00
parent f21e40d804
commit 83e6871997
8 changed files with 236 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
templates/settings/base_settings_page.html
View File

@ -1,69 +1,81 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{{ page_title }} - {{ app_name }}</title>
<!-- Bootstrap core CSS -->
<link href="/assets/css/bootstrap.css" rel="stylesheet" crossorigin="anonymous"/>
<link rel="stylesheet" href="/assets/css/base_settings_page.css">
<meta charset="UTF-8">
<title>{{ page_title }} - {{ app_name }}</title>
<!-- Bootstrap core CSS -->
<link href="/assets/css/bootstrap.css" rel="stylesheet" crossorigin="anonymous"/>
<link rel="stylesheet" href="/assets/css/base_settings_page.css">
</head>
<body>
<div class="d-flex flex-column flex-shrink-0 p-3 bg-light" style="width: 280px;">
<div class="d-flex flex-column flex-shrink-0 p-3 bg-light" style="width: 280px;">
<a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-dark text-decoration-none">
<span class="fs-4">{{ app_name }}</span>
<span class="fs-4">{{ app_name }}</span>
</a>
<hr>
<ul class="nav nav-pills flex-column mb-auto">
<li class="nav-item">
<a href="/settings" class="nav-link active" aria-current="page">
Account details
</a>
</li>
<li>
<a href="/settings/change_password" class="nav-link link-dark">
Change password
</a>
</li>
<hr />
{% if is_admin %}
<li>
<a href="/admin/apps" class="nav-link link-dark">
Applications
</a>
</li>
<li>
<a href="/admin/users" class="nav-link link-dark">
Users
</a>
</li>
{% endif %}
<li class="nav-item">
<a href="/settings" class="nav-link link-dark">
Account details
</a>
</li>
<li>
<a href="/settings/change_password" class="nav-link link-dark">
Change password
</a>
</li>
<hr/>
{% if is_admin %}
<li>
<a href="/admin/apps" class="nav-link link-dark">
Applications
</a>
</li>
<li>
<a href="/admin/users" class="nav-link link-dark">
Users
</a>
</li>
{% endif %}
</ul>
<hr>
<div class="dropdown">
<a href="#" class="d-flex align-items-center link-dark text-decoration-none dropdown-toggle" id="dropdownUser" data-bs-toggle="dropdown" aria-expanded="false">
<img src="/assets/img/account.png" alt="" width="32" height="32" class="rounded-circle me-2">
<strong>{{ user_name }}</strong>
</a>
<ul class="dropdown-menu text-small shadow" aria-labelledby="dropdownUser">
<li><a class="dropdown-item" href="/logout">Sign out</a></li>
</ul>
<a href="#" class="d-flex align-items-center link-dark text-decoration-none dropdown-toggle" id="dropdownUser"
data-bs-toggle="dropdown" aria-expanded="false">
<img src="/assets/img/account.png" alt="" width="32" height="32" class="rounded-circle me-2">
<strong>{{ user_name }}</strong>
</a>
<ul class="dropdown-menu text-small shadow" aria-labelledby="dropdownUser">
<li><a class="dropdown-item" href="/logout">Sign out</a></li>
</ul>
</div>
</div>
<div class="page_body" style="flex: 1">
{% if let Some(msg) = danger_message %}<div class="alert alert-danger">{{ msg }}</div>{% endif %}
{% if let Some(msg) = success_message %}<div class="alert alert-success">{{ msg }}</div>{% endif %}
</div>
<div class="page_body" style="flex: 1">
{% if let Some(msg) = danger_message %}
<div class="alert alert-danger">{{ msg }}</div>
{% endif %}
{% if let Some(msg) = success_message %}
<div class="alert alert-success">{{ msg }}</div>
{% endif %}
<h2 class="bd-title mt-0" style="margin-bottom: 40px;">{{ page_title }}</h2>
{% block content %}
TO_REPLACE
{% endblock content %}
</div>
</div>
<script src="/assets/js/bootstrap.bundle.min.js"></script>
<script>
document.querySelectorAll(".nav-link").forEach(el => {
if(el.href === location.href) el.classList.add("active");
else el.classList.remove("active")
})
</script>
</body>
</html>

57
templates/settings/change_password.html Normal file
View File

@ -0,0 +1,57 @@
{% extends "base_settings_page.html" %}
{% block content %}
<form id="change_password_form" action="/settings/change_password" method="post">
<div class="form-group">
<label for="currPassword" class="form-label mt-4">Current password</label>
<input type="password" name="old_pass" class="form-control"
id="currPassword" placeholder="Your current password" required />
</div>
<div>&nbsp;</div>
<div class="form-group">
<label for="newPassword" class="form-label mt-4">New password</label>
<input type="password" name="new_pass" class="form-control" id="newPassword"
placeholder="New password" minlength="{{ min_pwd_len }}" />
<div class="invalid-feedback" id="errNewPass"></div>
<small class="form-text text-muted">Please choose a password of at least {{ min_pwd_len }} characters.</small>
</div>
<div class="form-group">
<label for="confirmNewPassword" class="form-label mt-4">Confirm new password</label>
<input type="password" class="form-control" id="confirmNewPassword" placeholder="Confirm new password">
</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<button type="submit" class="btn btn-primary">Change password</button>
</form>
<script>
const form = document.getElementById("change_password_form");
const errPass1 = document.getElementById("errNewPass");
form.addEventListener("submit", (e) => {
e.preventDefault();
const pass1 = document.getElementById("newPassword");
const pass2 = document.getElementById("confirmNewPassword");
errPass1.innerHTML = "";
pass1.classList.remove("is-invalid");
if (pass1.value.length < {{ min_pwd_len }}) {
errPass1.innerHTML = "Your password must have at least {{ min_pwd_len }} characters!";
pass1.classList.add("is-invalid");
}
else if (pass1.value !== pass2.value) {
errPass1.innerHTML = "The password and its confirmation are not the same !";
pass1.classList.add("is-invalid");
}
else
form.submit();
})
</script>
{% endblock content %}