Leahnaya/website
1
0
Fork 0
mirror of https://github.com/PretendoNetwork/website.git synced 2026-09-08 08:56:39 -05:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

editable user info frontend, pretty sure all frontend is now done.

Browse Source
This commit is contained in:
mrjvs
2019-01-13 16:29:50 +01:00
parent 73d5fbd2df
commit c305e3b455
5 changed files with 67 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
assets/css/pretendo-common.css
View File

@@ -362,6 +362,9 @@ input[type="text"], input[type="password"], textarea {
box-sizing: border-box;
resize: none;
}
input[type="text"].inline, input[type="password"].inline, textarea.inline {
width: auto;
}
label {
font-size: 1em;

25
assets/css/pretendo-pnid.css
View File

@@ -22,6 +22,31 @@ body footer .content {
max-width: 100vw;
padding: 3rem 4rem;
}
.infoContainer.hide {
display: none;
}
.infoList {
display: block;
padding: 1em 0;
font-weight: bold;
color: #000;
margin: 0;
}
.infoList span {
font-weight: normal;
display: inline-block;
color: #707070;
width: 6em;
}
.infoList + .infoList {
border-top: 1px solid #afafaf;
}
.infoContainer .btn {
margin-top: 1em;
}
.link-margin {
margin: 0 1em;
}
/* aside navigation */
nav.userNav {

18
assets/js/api.js
View File

@@ -40,6 +40,24 @@ function login() {
}
}
function editInfo() {
var xhr = postAjax('/api/v1/editaccount', {
email: document.getElementById('email_input').value,
username: document.getElementById('username_input').value
});
xhr.onload = function () {
if (xhr.responseText.charAt(0) !== "{") {
return showErrorPopup('Whoops, something went wrong. Try again later.');
}
response = JSON.parse(xhr.responseText);
if (response.success === true) {
location.pathname = '/pnid/dashboard';
} else if (response.errors) {
showErrorPopup(response.errors);
}
}
}
function passwordForgot() {
var xhr = postAjax('/api/v1/passwordforgot', {
email: document.getElementById('email_input').value

4
assets/js/pnid.js Normal file
View File

@@ -0,0 +1,4 @@
function toggleEditInfo() {
document.getElementById('userInfo').classList.toggle('hide');
document.getElementById('editInfo').classList.toggle('hide');
}

18
views/dashboard.hbs
View File

@@ -6,15 +6,31 @@
<link rel="stylesheet" href="/assets/css/pretendo-pnid.css">
<!-- scripts -->
<script src="/assets/js/api.js"></script>
<script src="/assets/js/pnid.js"></script>
</head>
<body class="flex">
{{> nav-default }}
<div id="email_verification_popup" class="email_popup{{#if_eq user.email_validated true}} hide{{/if_eq}}"><p>{{ locale.verify_email_popup.text }}</p><span><button class="btn-alt small">{{ locale.verify_email_popup.change_button_text }}</button> <button class="btn small" onclick="email_resend();">{{ locale.verify_email_popup.repeat_button_text }}</button></span></div>
<div id="email_verification_popup" class="email_popup{{#if_eq user.user.email_validated true}} hide{{/if_eq}}"><p>{{ locale.verify_email_popup.text }}</p><span><button class="btn-alt small" onclick="toggleEditInfo();">{{ locale.verify_email_popup.change_button_text }}</button> <button class="btn small" onclick="email_resend();">{{ locale.verify_email_popup.repeat_button_text }}</button></span></div>
<div class="contentWrapper userPage">
{{> nav-dashboard }}
<section class="contentCard">
<p class="txt-highlight">{{ locale.dashboard.account.caption }}</p>
<h1 class="txt-title small">{{ locale.dashboard.account.title }}</h1>
<div class="infoContainer" id="userInfo">
<p class="infoList"><span>Username:</span> {{ user.user.pnid.username }}</p>
<p class="infoList"><span>Email:</span> {{ user.user.email }}</p>
<button class="btn small btn-alt" onclick="toggleEditInfo();">Edit</button>
</div>
<div class="infoContainer hide" id="editInfo">
<div id="errorBox" class="error hide"></div>
<p class="infoList"><span>Username:</span>
<input type="text" class="inline" name="username_input" id="username_input" value="{{ user.user.pnid.username }}">
</p>
<p class="infoList"><span>Email:</span>
<input type="text" class="inline" name="email_input" id="email_input" value="{{ user.user.email }}">
</p>
<button class="btn small" onclick="editInfo();">Save</button><a href="#" class="link-margin" onclick="toggleEditInfo();">Cancel</a>
</div>
</section>
</div>
{{> footer-default }}