Salt and hash passwords

ui/change-password-component.ts

@@ -0,0 +1,116 @@
+import { VnodeDOM, ClosureComponent, Component } from "mithril";
+import * as notifications from "./notifications";
+import { changePassword } from "./store";
+import { m } from "./components";
+
+const component: ClosureComponent = (): Component => {
+  return {
+    view: vnode => {
+      const onPasswordChange = vnode.attrs["onPasswordChange"];
+      const enforceAuth = !vnode.attrs["noAuth"];
+      const username = vnode.attrs["username"];
+
+      if (username) vnode.state["username"] = username;
+
+      const form = [
+        m(
+          "p",
+          m("label", { for: "username" }, "Username"),
+          m("input", {
+            name: "username",
+            type: "text",
+            value: vnode.state["username"],
+            disabled: !!username,
+            oninput: m.withAttr("value", v => (vnode.state["username"] = v)),
+            oncreate: _vnode => {
+              (_vnode.dom as HTMLSelectElement).focus();
+            }
+          })
+        )
+      ];
+
+      let fields = {
+        newPassword: "New password",
+        confirmPassword: "Confirm password"
+      };
+      if (enforceAuth)
+        fields = Object.assign({ authPassword: "Your password" }, fields);
+
+      for (const [f, l] of Object.entries(fields)) {
+        form.push(
+          m(
+            "p",
+            m("label", { for: f }, l),
+            m("input", {
+              name: f,
+              type: "password",
+              value: vnode.state[f],
+              oninput: m.withAttr("value", v => (vnode.state[f] = v))
+            })
+          )
+        );
+      }
+
+      const submit = m(
+        "button.primary",
+        {
+          type: "submit"
+        },
+        "Change password"
+      ) as VnodeDOM;
+
+      form.push(m(".actions-bar", submit));
+
+      const children = [
+        m("h1", "Change password"),
+        m(
+          "form",
+          {
+            onsubmit: e => {
+              e.redraw = false;
+              e.preventDefault();
+              if (
+                !vnode.state["username"] ||
+                !vnode.state["newPassword"] ||
+                (enforceAuth && !vnode.state["authPassword"])
+              ) {
+                notifications.push("error", "Please fill all fields");
+              } else if (
+                vnode.state["newPassword"] !== vnode.state["confirmPassword"]
+              ) {
+                notifications.push(
+                  "error",
+                  "Password confirm doesn't match new password"
+                );
+              } else {
+                (submit.dom as HTMLFormElement).disabled = true;
+                changePassword(
+                  vnode.state["username"],
+                  vnode.state["newPassword"],
+                  vnode.state["authPassword"]
+                )
+                  .then(() => {
+                    notifications.push(
+                      "success",
+                      "Password updated successfully"
+                    );
+                    if (onPasswordChange) onPasswordChange();
+                    (submit.dom as HTMLFormElement).disabled = false;
+                  })
+                  .catch(err => {
+                    notifications.push("error", err.message);
+                    (submit.dom as HTMLFormElement).disabled = false;
+                  });
+              }
+            }
+          },
+          form
+        )
+      ];
+
+      return m("div.put-form", children);
+    }
+  };
+};
+
+export default component;