Fixed user-profile so it can now change password

Signed-off-by: James Ketrenos <james_git@ketrenos.com>
2018-12-04 19:45:55 -08:00 · 2018-12-04 19:45:55 -08:00 · 9d5d71c58d
commit 9d5d71c58d
parent 0e750d5931
1 changed files with 136 additions and 0 deletions
--- a/frontend/elements/user-profile.html
+++ b/frontend/elements/user-profile.html
@ -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>