137 lines
4.1 KiB
HTML
137 lines
4.1 KiB
HTML
<!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>
|