Password changing functionality.
Signed-off-by: Armored Dragon <publicmail@armoreddragon.com>account-personalization
parent
0dd6a7fa00
commit
5b0f0121ac
GPG Key ID:
C7207ACC3382AD8B
File diff suppressed because it is too large
Load Diff
|
|
@ -120,4 +120,42 @@ input:checked + .slider:before {
|
||||||
|
|
||||||
.slider.round:before {
|
.slider.round:before {
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
dialog {
|
||||||
|
border-radius: 5px;
|
||||||
|
border: 0;
|
||||||
|
min-width: 300px;
|
||||||
|
}
|
||||||
|
dialog .title {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
dialog .entry {
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
dialog .entry input {
|
||||||
|
width: 100%;
|
||||||
|
margin: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
}
|
||||||
|
dialog .status {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
color: red;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
dialog .horizontal-button-container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
dialog .horizontal-button-container * {
|
||||||
|
flex-grow: 1;
|
||||||
|
margin: 0 0.1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
dialog::backdrop {
|
||||||
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
}
|
}
|
||||||
|
|
@ -125,3 +125,44 @@ input:checked + .slider:before {
|
||||||
.slider.round:before {
|
.slider.round:before {
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
dialog {
|
||||||
|
border-radius: 5px;
|
||||||
|
border: 0;
|
||||||
|
min-width: 300px;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.entry {
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
input {
|
||||||
|
width: 100%;
|
||||||
|
margin: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.status {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
color: red;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.horizontal-button-container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
* {
|
||||||
|
flex-grow: 1;
|
||||||
|
margin: 0 0.1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
dialog::backdrop {
|
||||||
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,43 +1,67 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="">
|
<html lang="">
|
||||||
<head>
|
<head>
|
||||||
<%- include("partials/document-head.ejs") %>
|
<%- include("partials/document-head.ejs") %>
|
||||||
<link rel="stylesheet" type="text/css" href="/css/settings.css" />
|
<link rel="stylesheet" type="text/css" href="/css/settings.css" />
|
||||||
<link rel="stylesheet" type="text/css" href="/css/generic.css" />
|
<link rel="stylesheet" type="text/css" href="/css/generic.css" />
|
||||||
<script src="/js/generic.js"></script>
|
<script src="/js/generic.js"></script>
|
||||||
<title>Yet-Another-Blog</title>
|
<title>Yet-Another-Blog</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<%- include("partials/header.ejs") %>
|
<dialog id="change-password-dialog">
|
||||||
<div class="page">
|
<div class="title">
|
||||||
<div class="page-center">
|
<span>Change Password</span>
|
||||||
<div class="header">User Settings</div>
|
</div>
|
||||||
<div class="setting-list">
|
|
||||||
<div class="setting">
|
<div class="entry">
|
||||||
<div class="title">Display Name</div>
|
<div>Current password</div>
|
||||||
<div class="value">
|
<input id="cp-current" type="password" oninput="changePasswordInputUpdate()" />
|
||||||
<input id="display_name" value="<%- profile.owner.display_name -%>" onchange="changeValue(this.id, this)" type="text" />
|
</div>
|
||||||
</div>
|
<div class="entry">
|
||||||
</div>
|
<div>New password</div>
|
||||||
<div class="setting">
|
<input id="cp-new-1" type="password" oninput="changePasswordInputUpdate()" />
|
||||||
<div class="title">Change Password</div>
|
</div>
|
||||||
<button class="button bad"><span>Open Dialog</span></button>
|
<div class="entry">
|
||||||
</div>
|
<div>Confirm password</div>
|
||||||
<div class="setting">
|
<input id="cp-new-2" type="password" oninput="changePasswordInputUpdate()" />
|
||||||
<div class="title">Change Profile Picture</div>
|
</div>
|
||||||
<div class="value">
|
<div class="status">Please enter your current password.</div>
|
||||||
<input id="profile_picture" onchange="changeValue(this.id, this)" type="file" />
|
<div class="horizontal-button-container">
|
||||||
</div>
|
<button class="button good" onclick="sendPasswordUpdate()">Accept</button>
|
||||||
</div>
|
<button id="cp-cancel" class="button bad">Cancel</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</dialog>
|
||||||
<div class="page-center">
|
|
||||||
<div class="header">Biography</div>
|
<%- include("partials/header.ejs") %>
|
||||||
<%- include("partials/richTextEditor.ejs", {text_selector: 'post-content', prefill: profile.raw_content}) %>
|
<div class="page">
|
||||||
<button class="button" onclick="updateBiography()"><span>Save Biography</span></button>
|
<div class="page-center">
|
||||||
</div>
|
<div class="header">User Settings</div>
|
||||||
</div>
|
<div class="setting-list">
|
||||||
<%- include("partials/footer.ejs") %>
|
<div class="setting">
|
||||||
</body>
|
<div class="title">Display Name</div>
|
||||||
|
<div class="value">
|
||||||
|
<input id="display_name" value="<%- profile.owner.display_name -%>" onchange="changeValue(this.id, this)" type="text" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="setting">
|
||||||
|
<div class="title">Change Password</div>
|
||||||
|
<button id="change-password-button" class="button bad"><span>Open Dialog</span></button>
|
||||||
|
</div>
|
||||||
|
<div class="setting">
|
||||||
|
<div class="title">Change Profile Picture</div>
|
||||||
|
<div class="value">
|
||||||
|
<input id="profile_picture" onchange="changeValue(this.id, this)" type="file" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="page-center">
|
||||||
|
<div class="header">Biography</div>
|
||||||
|
<%- include("partials/richTextEditor.ejs", {text_selector: 'post-content', prefill: profile.raw_content}) %>
|
||||||
|
<button class="button" onclick="updateBiography()"><span>Save Biography</span></button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<%- include("partials/footer.ejs") %>
|
||||||
|
</body>
|
||||||
</html>
|
</html>
|
||||||
<script defer src="/js/editAuthor.js"></script>
|
<script defer src="/js/editAuthor.js"></script>
|
||||||
|
|
|
||||||
|
|
@ -1,12 +1,37 @@
|
||||||
async function changeValue(setting_name, element) {
|
async function changeValue(setting_name, element) {
|
||||||
const form = {
|
const form = {
|
||||||
setting_name: setting_name,
|
setting_name: setting_name,
|
||||||
value: element.value,
|
value: element.value,
|
||||||
id: window.location.href.split("/")[4],
|
id: window.location.href.split("/")[4],
|
||||||
};
|
};
|
||||||
const response = await request(`/api/web/user`, "PATCH", form);
|
const response = await request(`/api/web/user`, "PATCH", form);
|
||||||
|
|
||||||
// TODO: On failure, notify the user
|
// TODO: On failure, notify the user
|
||||||
if (response.body.success) {
|
if (response.body.success) {
|
||||||
}
|
alert("Successfully changed password");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const change_password_dialog = qs("#change-password-dialog");
|
||||||
|
|
||||||
|
qs("#change-password-button").addEventListener("click", () => change_password_dialog.showModal());
|
||||||
|
qs("#cp-cancel").addEventListener("click", () => change_password_dialog.close());
|
||||||
|
|
||||||
|
function changePasswordInputUpdate() {
|
||||||
|
const status = qs("#change-password-dialog .status");
|
||||||
|
const current_password = qs("#cp-current");
|
||||||
|
const new_password_1 = qs("#cp-new-1");
|
||||||
|
const new_password_2 = qs("#cp-new-2");
|
||||||
|
|
||||||
|
if (current_password.value === "") return (status.innerText = "Please enter your current password.");
|
||||||
|
|
||||||
|
if (new_password_1.value !== new_password_2.value) return (status.innerText = "New password does not match.");
|
||||||
|
|
||||||
|
return (status.innerHTML = " ");
|
||||||
|
}
|
||||||
|
|
||||||
|
function sendPasswordUpdate() {
|
||||||
|
const new_password_1 = qs("#cp-new-1");
|
||||||
|
// Check fields match
|
||||||
|
// Send post update
|
||||||
|
changeValue("password", new_password_1);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue