Password changing functionality.
Signed-off-by: Armored Dragon <publicmail@armoreddragon.com>account-personalization
parent
0dd6a7fa00
commit
5b0f0121ac
File diff suppressed because it is too large
Load Diff
|
@ -121,3 +121,41 @@ input:checked + .slider:before {
|
|||
.slider.round:before {
|
||||
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 {
|
||||
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>
|
||||
<html lang="">
|
||||
<head>
|
||||
<%- include("partials/document-head.ejs") %>
|
||||
<link rel="stylesheet" type="text/css" href="/css/settings.css" />
|
||||
<link rel="stylesheet" type="text/css" href="/css/generic.css" />
|
||||
<script src="/js/generic.js"></script>
|
||||
<title>Yet-Another-Blog</title>
|
||||
</head>
|
||||
<body>
|
||||
<%- include("partials/header.ejs") %>
|
||||
<div class="page">
|
||||
<div class="page-center">
|
||||
<div class="header">User Settings</div>
|
||||
<div class="setting-list">
|
||||
<div class="setting">
|
||||
<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 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>
|
||||
<head>
|
||||
<%- include("partials/document-head.ejs") %>
|
||||
<link rel="stylesheet" type="text/css" href="/css/settings.css" />
|
||||
<link rel="stylesheet" type="text/css" href="/css/generic.css" />
|
||||
<script src="/js/generic.js"></script>
|
||||
<title>Yet-Another-Blog</title>
|
||||
</head>
|
||||
<body>
|
||||
<dialog id="change-password-dialog">
|
||||
<div class="title">
|
||||
<span>Change Password</span>
|
||||
</div>
|
||||
|
||||
<div class="entry">
|
||||
<div>Current password</div>
|
||||
<input id="cp-current" type="password" oninput="changePasswordInputUpdate()" />
|
||||
</div>
|
||||
<div class="entry">
|
||||
<div>New password</div>
|
||||
<input id="cp-new-1" type="password" oninput="changePasswordInputUpdate()" />
|
||||
</div>
|
||||
<div class="entry">
|
||||
<div>Confirm password</div>
|
||||
<input id="cp-new-2" type="password" oninput="changePasswordInputUpdate()" />
|
||||
</div>
|
||||
<div class="status">Please enter your current password.</div>
|
||||
<div class="horizontal-button-container">
|
||||
<button class="button good" onclick="sendPasswordUpdate()">Accept</button>
|
||||
<button id="cp-cancel" class="button bad">Cancel</button>
|
||||
</div>
|
||||
</dialog>
|
||||
|
||||
<%- include("partials/header.ejs") %>
|
||||
<div class="page">
|
||||
<div class="page-center">
|
||||
<div class="header">User Settings</div>
|
||||
<div class="setting-list">
|
||||
<div class="setting">
|
||||
<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>
|
||||
<script defer src="/js/editAuthor.js"></script>
|
||||
|
|
|
@ -1,12 +1,37 @@
|
|||
async function changeValue(setting_name, element) {
|
||||
const form = {
|
||||
setting_name: setting_name,
|
||||
value: element.value,
|
||||
id: window.location.href.split("/")[4],
|
||||
};
|
||||
const response = await request(`/api/web/user`, "PATCH", form);
|
||||
const form = {
|
||||
setting_name: setting_name,
|
||||
value: element.value,
|
||||
id: window.location.href.split("/")[4],
|
||||
};
|
||||
const response = await request(`/api/web/user`, "PATCH", form);
|
||||
|
||||
// TODO: On failure, notify the user
|
||||
if (response.body.success) {
|
||||
}
|
||||
// TODO: On failure, notify the user
|
||||
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