Improve login form

src/app/ui/src/component/input.js

@@ -0,0 +1,25 @@
+// eslint-disable-next-line no-unused-vars
+import m from "mithril";
+
+var View = () => {
+  return {
+    view: (vnode) => (
+      <div class="field">
+        <label class="label">{vnode.attrs.label}</label>
+        <div class="control">
+          <input
+            name={vnode.attrs.name}
+            type={vnode.attrs.type || "text"}
+            class="input"
+            data-cy={vnode.attrs.name}
+            required={vnode.attrs.required}
+            oninput={vnode.attrs.oninput}
+            value={vnode.attrs.value}
+          ></input>
+        </div>
+      </div>
+    ),
+  };
+};
+
+export default View;

src/app/ui/src/store/userlogin.js

@@ -3,44 +3,35 @@ import Submit from "@/module/submit";
 import Flash from "@/component/flash";
 import CookieStore from "@/module/cookiestore";
 
-var UserLogin = {
-  user: {
-    email: "",
-    password: "",
-  },
-  clear: () => {
-    UserLogin.user = {};
-  },
-  login: () => {
+var UserLogin = (e, user) => {
+  let login = () => {
     return m.request({
       method: "POST",
       url: "/api/v1/login",
-      body: UserLogin.user,
+      body: user,
     });
-  },
-  submit: function (e) {
-    Submit.start(e);
+  };
 
-    UserLogin.login()
-      .then((data) => {
-        UserLogin.clear();
-        Submit.finish();
+  Submit.start(e);
 
-        const auth = {
-          accessToken: data.token,
-          loggedIn: true,
-        };
+  return login()
+    .then((data) => {
+      Submit.finish();
 
-        CookieStore.save(auth);
+      const auth = {
+        accessToken: data.token,
+        loggedIn: true,
+      };
+      CookieStore.save(auth);
 
-        Flash.success("Login successful.");
-        m.route.set("/");
-      })
-      .catch((err) => {
-        Submit.finish();
-        Flash.warning(err.response.message);
-      });
-  },
+      Flash.success("Login successful.");
+      m.route.set("/");
+    })
+    .catch((err) => {
+      Submit.finish();
+      Flash.warning(err.response.message);
+      throw err;
+    });
 };
 
 export default UserLogin;

src/app/ui/src/view/login.js

@@ -1,16 +1,32 @@
 import m from "mithril";
 import UserLogin from "@/store/userlogin";
+import Input from "@/component/input";
 
 var data = {
   title: "Login",
   subtitle: "Enter your login information below.",
 };
 
+var clear = (vnode) => {
+  vnode.state.user = {};
+};
+
 var Page = {
-  onremove: () => {
-    UserLogin.clear();
+  oninit: (vnode) => {
+    clear(vnode);
+
+    // Prefill the fields.
+    if (vnode.attrs.email) {
+      vnode.state.user.email = vnode.attrs.email;
+    }
+    if (vnode.attrs.password) {
+      vnode.state.user.password = vnode.attrs.password;
+    }
+  },
+  onremove: (vnode) => {
+    clear(vnode);
   },
-  view: () => (
+  view: (vnode) => (
     <main>
       <div>
         <section class="section">
@@ -20,42 +36,36 @@ var Page = {
           </div>
 
           <div class="container" style="margin-top: 1em;">
-            <form name="login" onsubmit={UserLogin.submit}>
-              <div class="field">
-                <label class="label">Email</label>
-                <div class="control">
-                  <input
-                    label="Email"
-                    name="email"
-                    type="text"
-                    class="input"
-                    data-cy="email"
-                    required
-                    oninput={(e) => {
-                      UserLogin.user.email = e.target.value;
-                    }}
-                    value={UserLogin.user.email}
-                  ></input>
-                </div>
-              </div>
+            <form
+              name="login"
+              onsubmit={(e) => {
+                UserLogin(e, vnode.state.user)
+                  .then(() => {
+                    clear(vnode);
+                  })
+                  .catch(() => {});
+              }}
+            >
+              <Input
+                label="Email"
+                name="email"
+                required="true"
+                oninput={(e) => {
+                  vnode.state.user.email = e.target.value;
+                }}
+                value={vnode.state.user.email}
+              />
 
-              <div class="field">
-                <label class="label">Password</label>
-                <div class="control">
-                  <input
-                    label="Password"
-                    name="password"
-                    type="password"
-                    class="input"
-                    data-cy="password"
-                    required
-                    oninput={(e) => {
-                      UserLogin.user.password = e.target.value;
-                    }}
-                    value={UserLogin.user.password}
-                  ></input>
-                </div>
-              </div>
+              <Input
+                label="Password"
+                name="password"
+                required="true"
+                oninput={(e) => {
+                  vnode.state.user.password = e.target.value;
+                }}
+                value={vnode.state.user.password}
+                type="password"
+              />
 
               <div class="field is-grouped">
                 <p class="control">
@@ -74,7 +84,7 @@ var Page = {
                     type="button"
                     class="button is-light"
                     onclick={() => {
-                      UserLogin.clear();
+                      clear(vnode);
                     }}
                   >
                     Clear

src/app/ui/src/view/login.stories.js

@@ -1,8 +1,9 @@
 // eslint-disable-next-line no-unused-vars
 import m from "mithril";
-import { withKnobs } from "@storybook/addon-knobs";
+import { withKnobs, select, text } from "@storybook/addon-knobs";
 import { withA11y } from "@storybook/addon-a11y";
 import LoginPage from "@/view/login";
+import Flash from "@/component/flash";
 import MockRequest from "@/component/mockrequest";
 import "~/style/main.scss";
 
@@ -14,7 +15,32 @@ export default {
 
 export const login = () => ({
   oninit: () => {
-    MockRequest.ok({}, true);
+    let s = select(
+      "Operation",
+      {
+        LoginSuccessful: "opt1",
+        LoginIncorrect: "opt2",
+      },
+      "opt1"
+    );
+    switch (s) {
+      case "opt1":
+        MockRequest.ok({});
+        break;
+      case "opt2":
+        MockRequest.badRequest("Login information does not match.");
+        break;
+      default:
+        MockRequest.badRequest("There is a problem with the storybook.");
+    }
   },
-  view: () => <LoginPage />,
+  view: () => (
+    <main>
+      <LoginPage
+        email={text("Email", "jsmith@example.com")}
+        password={text("Password", "password")}
+      />
+      <Flash />
+    </main>
+  ),
 });

src/app/ui/src/view/register.stories.js

@@ -25,7 +25,7 @@ export const register = () => ({
     );
     switch (s) {
       case "opt1":
-        MockRequest.success({});
+        MockRequest.ok({});
         break;
       case "opt2":
         MockRequest.badRequest("The user already exists.");
@@ -34,7 +34,6 @@ export const register = () => ({
         MockRequest.badRequest("There is a problem with the storybook.");
     }
   },
-
   view: () => (
     <main>
       <RegisterPage