Feature: Add register function for UI

pinry-spa/src/components/PHeader.vue

@@ -21,7 +21,7 @@
               BookmarkLet
             </a>
             <div
-              v-show="user.loggedIn"
+              v-if="user.loggedIn"
               class="navbar-item has-dropdown is-hoverable">
               <a class="navbar-link">
                 Create
@@ -40,7 +40,7 @@
               </div>
             </div>
             <div
-              v-show="user.loggedIn"
+              v-if="user.loggedIn"
               class="navbar-item has-dropdown is-hoverable">
               <a class="navbar-link">
                 My Collections
@@ -76,6 +76,7 @@
             <div class="navbar-item">
               <div class="buttons">
                 <a
+                  @click="signUp"
                   v-show="!user.loggedIn"
                   class="button is-primary">
                   <strong>Sign up</strong>
@@ -104,6 +105,7 @@
 <script>
 import api from './api';
 import LoginForm from './LoginForm.vue';
+import SignUpForm from './SignUpForm.vue';
 
 export default {
   name: 'p-header',
@@ -121,7 +123,10 @@ export default {
       this.active = !this.active;
     },
     onLoginSucceed() {
-      this.initializeUser();
+      this.initializeUser(true);
+    },
+    onSignUpSucceed() {
+      this.initializeUser(true);
     },
     logOut() {
       api.User.logOut().then(
@@ -140,9 +145,19 @@ export default {
         },
       });
     },
-    initializeUser() {
+    signUp() {
+      this.$buefy.modal.open({
+        parent: this,
+        component: SignUpForm,
+        hasModalCard: true,
+        events: {
+          'signup.succeed': this.onSignUpSucceed,
+        },
+      });
+    },
+    initializeUser(force = false) {
       const self = this;
-      api.User.fetchUserInfo().then(
+      api.User.fetchUserInfo(force).then(
         (user) => {
           if (user === null) {
             self.user.loggedIn = false;

pinry-spa/src/components/SignUpForm.vue

@@ -0,0 +1,142 @@
+<template>
+  <div class="signup-modal">
+    <form action="">
+      <div class="modal-card" style="width: auto">
+        <header class="modal-card-head">
+          <p class="modal-card-title">Sign Up</p>
+        </header>
+        <section class="modal-card-body">
+          <b-field label="Username"
+                   :type="username.type"
+                   :message="username.error">
+            <b-input
+              type="string"
+              v-model="username.value"
+              placeholder="Your Username"
+              maxlength="30"
+              required>
+            </b-input>
+          </b-field>
+
+          <b-field label="Email"
+                   :type="email.type"
+                   :message="email.error">
+            <b-input
+              type="email"
+              v-model="email.value"
+              password-reveal
+              placeholder="Your email"
+              required>
+            </b-input>
+          </b-field>
+          <b-field label="Password"
+                   :type="password.type"
+                   :message="password.error">
+            <b-input
+              type="password"
+              v-model="password.value"
+              password-reveal
+              placeholder="Your password"
+              required>
+            </b-input>
+          </b-field>
+          <b-field label="Password repeat"
+                   :type="password_repeat.type"
+                   :message="password_repeat.error">
+            <b-input
+              type="password"
+              v-model="password_repeat.value"
+              password-reveal
+              placeholder="Your password again"
+              required>
+            </b-input>
+          </b-field>
+        </section>
+        <footer class="modal-card-foot">
+          <button class="button" type="button" @click="$parent.close()">Close</button>
+          <button
+            @click="doRegister"
+            class="button is-primary">Register</button>
+        </footer>
+      </div>
+    </form>
+  </div>
+</template>
+
+<script>
+import api from './api';
+
+export default {
+  name: 'SignUpForm',
+  data() {
+    return {
+      username: {
+        value: null,
+        error: null,
+        type: null,
+      },
+      email: {
+        value: null,
+        error: null,
+        type: null,
+      },
+      password: {
+        value: null,
+        error: null,
+        type: null,
+      },
+      password_repeat: {
+        value: null,
+        error: null,
+        type: null,
+      },
+    };
+  },
+  methods: {
+    resetStatus() {
+      this.resetField('username');
+      this.resetField('email');
+      this.resetField('password');
+      this.resetField('password_repeat');
+    },
+    resetField(fieldName) {
+      this[fieldName].type = 'is-info';
+      this[fieldName].error = null;
+    },
+    markFieldAsDanger(fieldName, errorMsg) {
+      this[fieldName].error = errorMsg;
+      this[fieldName].type = 'is-danger';
+    },
+    doRegister() {
+      this.resetStatus();
+      const self = this;
+      const promise = api.User.signUp(
+        self.username.value,
+        self.email.value,
+        self.password.value,
+        self.password_repeat.value,
+      );
+      promise.then(
+        (user) => {
+          self.$emit('signup.succeed', user);
+          self.$parent.close();
+        },
+        (resp) => {
+          Object.entries(resp.data).forEach(
+            (errorTuple) => {
+              const [key, error] = errorTuple;
+              let msg;
+              if (Array.isArray(error)) {
+                [msg] = error;
+              } else {
+                msg = error;
+              }
+              this.markFieldAsDanger(key, msg);
+            },
+          );
+        },
+      );
+    },
+  },
+};
+</script>

pinry-spa/src/components/api.js

@@ -62,6 +62,34 @@ function fetchBoardForUser(username) {
 
 const User = {
   storageKey: 'pinry.user',
+  signUp(username, email, password, passwordRepeat) {
+    const url = `${API_PREFIX}profile/users/`;
+    return new Promise(
+      (resolve, reject) => {
+        const p = axios.post(
+          url,
+          {
+            username,
+            email,
+            password,
+            password_repeat: passwordRepeat,
+          },
+        );
+        p.then(
+          (resp) => {
+            if (resp.status !== 201) {
+              reject(resp);
+            }
+            resolve(resp.data);
+          },
+          (error) => {
+            console.log('Failed to sign up due to unexpected error:', error);
+            reject(error.response);
+          },
+        );
+      },
+    );
+  },
   logIn(username, password) {
     const url = `${API_PREFIX}profile/login/`;
     return new Promise(
@@ -101,15 +129,17 @@ const User = {
       },
     );
   },
-  fetchUserInfo() {
+  fetchUserInfo(force = false) {
     /* returns null if user not logged in */
     const self = this;
+    if (!force) {
       const userInfo = storage.get(self.storageKey);
       if (userInfo !== null) {
         return new Promise(
           resolve => resolve(userInfo),
         );
       }
+    }
     const url = `${API_PREFIX}/profile/users/`;
     return new Promise(
       (resolve) => {