Merge pull request #65 from ProgrammingLab/kp-user-registration

ユーザー登録

Author: Fukusan64

src/api/user/index.js

@@ -6,4 +6,16 @@ export default {
     const userData = (await api.client.get('/user', getHeader(sessionID))).data;
     return userData;
   },
+  // eslint-disable-next-line camelcase
+  async registerUser(name, full_name, password, registration_token) {
+    const ret = (await api.client.post('/users', {
+      name, full_name, password, registeration_token: registration_token,
+    })).data;
+    return ret;
+  },
+
+  async verifyRegistrationToken(token) {
+    const ret = (await api.client.get(`/invitations/${token}`)).data;
+    return ret;
+  },
 };

src/router.js

@@ -43,6 +43,11 @@ const router = new Router({
       // which is lazy-loaded when the route is visited.
       component: () => import(/* webpackChunkName: "oauthConsent" */ './views/oauth/Consent.vue'),
     },
+    {
+      path: '/registration/:token',
+      name: 'registration',
+      component: () => import(/* webpackChunkName: "registration" */ './views/Registration.vue'),
+    },
   ],
 });
 

src/store/modules/user/index.js

@@ -4,17 +4,50 @@ export default {
   namespaced: true,
   state: {
     userData: null,
+    registrationError: null,
+    tokenVerificationError: null,
   },
   /* eslint-disable no-param-reassign */
   mutations: {
     setUser(state, user) {
       state.userData = user;
     },
+    setRegistrationError(state, error) {
+      state.registrationError = error;
+    },
+    clearRegistrationError(state) {
+      state.registrationError = null;
+    },
+    setTokenVerificationError(state, error) {
+      state.tokenVerificationError = error;
+    },
+    clearTokenVerificationError(state) {
+      state.tokenVerificationError = null;
+    },
   },
   /* eslint-enable no-param-reassign */
   actions: {
     async getUser({ commit }, sessionID) {
       commit('setUser', await userClient.getUser(sessionID));
     },
+    async verifyRegistrationToken({ commit }, token) {
+      commit('clearTokenVerificationError');
+      try {
+        await userClient.verifyRegistrationToken(token);
+      } catch (e) {
+        commit('setTokenVerificationError', e);
+      }
+    },
+    async register({ commit }, {
+      // eslint-disable-next-line camelcase
+      name, full_name, password, registration_token,
+    }) {
+      commit('clearRegistrationError');
+      try {
+        await userClient.registerUser(name, full_name, password, registration_token);
+      } catch (e) {
+        commit('setRegistrationError', e);
+      }
+    },
   },
 };

src/views/Registration.vue

@@ -0,0 +1,133 @@
+<template>
+  <div class="container">
+    <div class="box">
+      <form v-on:submit.prevent='onRegister'>
+        <label for="username">User Name</label>
+        <input required type="text" id="username" v-model="name">
+        <label for="full_name">Full Name</label>
+        <input required type="text" id="full_name" v-model="full_name">
+        <label for="password">Password</label>
+        <input required type="password" id="password" v-model="password">
+        <label for="password_confirm">Confirm Password</label>
+        <input required type="password" id="password_confirm" v-model="password_confirm">
+        <div class="errorMessage" v-if="passwordConfirmationError">パスワードが一致しません</div>
+        <button type="submit">Register</button>
+        <ErrorMessage :error="registrationError"/>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapMutations, mapActions, mapState } from 'vuex';
+import ErrorMessage from '@/components/ErrorMessage.vue';
+
+export default {
+  name: 'registration',
+  components: {
+    ErrorMessage,
+  },
+  data() {
+    return {
+      name: '',
+      full_name: '',
+      password: '',
+      password_confirm: '',
+      passwordConfirmationError: false,
+      registration_token: '',
+    };
+  },
+  computed: {
+    ...mapState('user', [
+      'tokenVerificationError',
+      'registrationError',
+    ]),
+    ...mapState('session', [
+      'loginError',
+    ]),
+  },
+  async created() {
+    this.registration_token = this.$route.params.token;
+    await this.verifyRegistrationToken(this.registration_token);
+    if (this.tokenVerificationError) {
+      this.createError({
+        number: this.tokenVerificationError.response.status,
+        message: this.tokenVerificationError.response.data.message,
+      });
+    }
+  },
+  methods: {
+    ...mapMutations('criticalError', [
+      'createError',
+    ]),
+    ...mapActions('user', [
+      'verifyRegistrationToken',
+      'register',
+    ]),
+    ...mapActions('session', [
+      'login',
+    ]),
+    async onRegister() {
+      this.passwordConfirmationError = false;
+      if (this.password !== this.password_confirm) {
+        this.passwordConfirmationError = true;
+        return;
+      }
+      await this.register({
+        name: this.name,
+        full_name: this.full_name,
+        password: this.password,
+        registration_token: this.registration_token,
+      });
+      if (!this.registrationError) {
+        await this.login({ name: this.name, password: this.password });
+        if (this.loginError) {
+          this.$router.push({ name: 'login' });
+        } else {
+          this.$router.push({ name: 'home' });
+        }
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+  .container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    height: 100%;
+  }
+
+  .box {
+    margin: 0 2em;
+  }
+
+  input[type="text"], input[type="password"] {
+    width: 100%;
+    padding: 10px;
+    border-width: 0 0 2px;
+    margin-bottom: 20px;
+  }
+
+  button[type="submit"] {
+    background-color: transparent;
+    border: none;
+    cursor: pointer;
+    outline: none;
+    padding: 0;
+    appearance: none;
+    display: inline-block;
+    padding: 0.5em 1em;
+    text-decoration: none;
+    background: #668ad8;
+    color: #FFF;
+    border-radius: 3px;
+  }
+
+  .errorMessage {
+    color: red;
+  }
+</style>