ユーザー招待ページ

package.json

@@ -10,6 +10,7 @@
   "dependencies": {
     "ajv": "^5.5.2",
     "axios": "^0.18.0",
+    "bulma": "^0.7.4",
     "vue": "^2.6.10",
     "vue-router": "^3.0.1",
     "vuex": "^3.0.1",

src/api/invitation/index.js

@@ -0,0 +1,13 @@
+import api from '@/api';
+import getHeader from '@/api/utils/get-header';
+
+export default {
+  async listInvitations(sessionID) {
+    const res = (await api.client.get('/admin/invitations', getHeader(sessionID))).data.invitations;
+    return res;
+  },
+  async createInvitation(sessionID, email) {
+    const res = (await api.client.post('/admin/invitations', { email }, getHeader(sessionID))).data.invitations;
+    return res;
+  },
+};

src/router.js

@@ -79,6 +79,12 @@ const router = new Router({
       name: 'profile',
       component: () => import(/* webpackChunkName: "profile" */ './views/memberIntroduction/Profile.vue'),
     },
+    {
+      path: '/admin/invitations',
+      name: 'invitation',
+      component: () => import(/* webpackChunkName: "invitation" */ './views/admin/Invitation.vue'),
+      meta: { requiresAdmin: true },
+    },
   ],
 });
 
@@ -101,11 +107,24 @@ router.beforeEach(async (to, from, next) => {
     console.error(e);
     store.commit('session/clearSessionID');
   }
+
+  if (to.matched.some(record => record.meta.requiresAdmin) && !store.getters['user/isAdmin']) {
+    store.commit('criticalError/createError', {
+      response: {
+        status: 404,
+        data: {
+          message: 'Page not Found',
+        },
+      },
+    });
+    return;
+  }
   if (to.matched.some(record => record.meta.requiresAuth) && !store.getters['session/loggedIn']) {
     next({ path: '/login', query: { redirect: to.fullPath } });
-  } else {
-    next();
+    return;
   }
+
+  next();
 });
 
 export default router;

src/store/index.js

@@ -10,6 +10,7 @@ import achievement from './modules/achievement';
 import emailConfirmations from './modules/emailConfirmations';
 import memberIntroduction from './modules/memberIntroduction';
 import editUser from './modules/editUser';
+import invitation from './modules/invitation';
 
 Vue.use(Vuex);
 
@@ -25,6 +26,7 @@ export default new Vuex.Store({
     emailConfirmations,
     memberIntroduction,
     editUser,
+    invitation,
   },
   plugins: [
     createPersistedState({

src/store/modules/invitation/index.js

@@ -0,0 +1,42 @@
+import invitationClient from '@/api/invitation';
+
+export default {
+  namespaced: true,
+  state: {
+    invitations: null,
+    invitationError: null,
+  },
+  /* eslint-disable no-param-reassign */
+  mutations: {
+    setInvitations(state, invitations) {
+      state.invitations = invitations;
+    },
+    clearInvitationError(state) {
+      state.invitationError = null;
+    },
+    setInvitationError(state, error) {
+      state.invitationError = error;
+    },
+  },
+  /* eslint-enable no-param-reassign */
+  actions: {
+    async listInvitations({ commit }, sessionID) {
+      try {
+        commit('setInvitations', await invitationClient.listInvitations(sessionID));
+      } catch (e) {
+        commit('criticalError/createError', e, { root: true });
+      }
+    },
+    async invite({ commit, dispatch }, { sessionID, rawEmails }) {
+      commit('clearInvitationError');
+      const emails = rawEmails.split(/\r\n|\n/).map(email => email.trim()).filter(email => email);
+      try {
+        await Promise.all(emails.map(email => invitationClient.createInvitation(sessionID, email)));
+      } catch (e) {
+        commit('setInvitationError', e);
+      }
+
+      dispatch('listInvitations', sessionID);
+    },
+  },
+};

src/store/modules/user/index.js

@@ -50,4 +50,9 @@ export default {
       }
     },
   },
+  getters: {
+    isAdmin(state) {
+      return state.userData && state.userData.authority === 'ADMIN';
+    },
+  },
 };

src/views/admin/Invitation.vue

@@ -0,0 +1,77 @@
+<template>
+  <div class="container">
+    <section class="section">
+      <h1 class="title">部員の招待</h1>
+      <div>
+        <form v-on:submit.prevent="onInvite">
+          <div class="field">
+            <label class="label">メールアドレス</label>
+            <div class="control">
+              <textarea
+                class="textarea"
+                :placeholder="'[email protected]\[email protected]\[email protected]\n...'"
+                v-model="emails"
+              ></textarea>
+            </div>
+          </div>
+          <div class="control">
+            <button type="submit" class="button">招待</button>
+          </div>
+          <ErrorMessage :error="invitationError"/>
+        </form>
+      </div>
+    </section>
+    <section class="section">
+      <h1 class="title">招待されたメールアドレス</h1>
+      <table class="table">
+        <thead>
+          <tr>
+            <th>ID</th>
+            <th>メールアドレス</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="invitation in invitations" :key="invitation.invitation_id">
+            <th>{{ invitation.invitation_id }}</th>
+            <td>{{ invitation.email }}</td>
+          </tr>
+        </tbody>
+      </table>
+    </section>
+  </div>
+</template>
+
+<script>
+import 'bulma/css/bulma.css';
+import { mapState, mapActions } from 'vuex';
+import ErrorMessage from '@/components/ErrorMessage.vue';
+
+export default {
+  name: 'invitation',
+  components: {
+    ErrorMessage,
+  },
+  data() {
+    return {
+      emails: null,
+    };
+  },
+  created() {
+    this.listInvitations(this.sessionID);
+  },
+  computed: {
+    ...mapState('invitation', ['invitations', 'invitationError']),
+    ...mapState('session', ['sessionID']),
+  },
+  methods: {
+    ...mapActions('invitation', ['listInvitations', 'invite']),
+    onInvite() {
+      this.invite({ sessionID: this.sessionID, rawEmails: this.emails });
+      this.emails = null;
+    },
+  },
+};
+</script>
+
+<style>
+</style>