jketreno/ketr.photos
1
0
Fork 0
Code Issues 1 Activity

Fixed user-profile so it can now change password

Browse Source 
Signed-off-by: James Ketrenos <james_git@ketrenos.com>
This commit is contained in:
James Ketr 2018-12-04 19:45:55 -08:00
parent 0e750d5931
commit 9d5d71c58d
1 changed files with 136 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

136
frontend/elements/user-profile.html Normal file
View File

@ -0,0 +1,136 @@
<!doctype html>
<html>
<head>
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/iron-icon/iron-icon.html">
<link rel="import" href="../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="../bower_components/iron-iconset/iron-iconset.html">
<link rel="import" href="../bower_components/iron-icons/image-icons.html">
<link rel="import" href="../bower_components/iron-pages/iron-pages.html">
<link rel="import" href="../bower_components/paper-button/paper-button.html">
<link rel="import" href="../bower_components/paper-spinner/paper-spinner.html">
<link rel="import" href="../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
</head>
<dom-module id="user-profile">
<template>
<style is="custom-style" include="iron-flex iron-flex-alignment iron-positioning">
:host > div {
max-width: 60ex;
margin: 1em auto;
}
.field {
width: 10ex;
}
paper-input [slot] {
cursor: pointer;
}
paper-input[type="password"] [slot] {
opacity: 0.5;
}
</style>
<div class="layout vertical">
<paper-input label="User" readonly value="[[user.displayName]]"></paper-input>
<paper-input label="Mail" readonly value="[[user.mail]]"></paper-input>
<paper-input label="Current password" type="password" value="{{currentPassword}}"><iron-icon on-tap="toggleShowPassword" slot="suffix" icon="image:remove-red-eye"></iron-icon></paper-input>
<paper-input label="New password" type="password" value="{{newPassword}}"><iron-icon on-tap="toggleShowPassword" slot="suffix" icon="image:remove-red-eye"></iron-icon></paper-input>
<paper-input label="Confirm password" type="password" value="{{confirmPassword}}"><iron-icon on-tap="toggleShowPassword" slot="suffix" icon="image:remove-red-eye"></iron-icon></paper-input>
<paper-button on-tap="submit" disabled$="[[disableSubmit(currentPassword, newPassword, confirmPassword)]]">Submit</paper-button>
</div>
</template>
<script>
"use strict";
Polymer({
is: "user-profile",
properties: {
currentPassword: {
type: String,
value: ""
},
newPassword: {
type: String,
value: ""
},
confirmPassword: {
type: String,
value: ""
},
},
observers: [
],
listeners: {
},
disableSubmit: function(currentPassword, newPassword, confirmPassword) {
if (!currentPassword || !newPassword || !confirmPassword) {
return true;
}
},
toggleShowPassword: function(event) {
var hidden = !(event.currentTarget.parentElement.getAttribute("type") == "password");
event.currentTarget.parentElement.setAttribute("type", hidden ? "password" : "text");
},
submit: function() {
var app = document.querySelector("ketr-photos");
if (this.newPassword != this.confirmPassword) {
app.$.toast.text = "Passwords do not match.";
app.$.toast.setAttribute("error", true);
app.$.toast.updateStyles();
app.$.toast.show();
return;
}
window.fetch("api/v1/users/password", function(error, xhr) {
if (error) {
app.$.toast.text = error;
app.$.toast.setAttribute("error", true);
app.$.toast.updateStyles();
app.$.toast.show();
return;
}
var response;
try {
response = JSON.parse(xhr.responseText);
} catch(___) {
app.$.toast.text = "Unable to set password.";
app.$.toast.setAttribute("error", true);
app.$.toast.updateStyles();
app.$.toast.show();
console.error("Unable to set password.");
return;
}
app.$.toast.text = "Password changed successfully.";
app.$.toast.removeAttribute("error");
app.$.toast.updateStyles();
app.$.toast.show();
app.mode = app.lastMode;
}.bind(this), {}, "PUT", { c: this.currentPassword, n: this.newPassword });
},
attached: function() {
var base = document.querySelector("base");
if (base) {
this.base = new URL(base.href).pathname.replace(/\/$/, "") + "/"; /* Make sure there is a trailing slash */
} else {
this.base = "/";
}
}
});
</script>
</dom-module>
</html>