Merge pull request #162 from Nekoya3/feature/150-login-classLogin-Flow

MaySoMusician · web-flow · commit f8063c219ed1 · 2020-06-16T01:34:35.000+09:00
Loginから、クラス登録、クラス選択、editまで作成
diff --git a/nuxt.config.js b/nuxt.config.js
@@ -48,7 +48,7 @@ export default {
   /*
    ** Customize the progress-bar color
    */
-  loading: { color: '#fff' },
+  loading: { color: '#000000' },
   /*
    ** Global CSS
    */
diff --git a/package.json b/package.json
@@ -45,7 +45,7 @@
     "date-fns": "^2.14.0",
     "dayjs": "^1.8.26",
     "express": "^4.17.1",
-    "firebase": "7.14.6",
+    "firebase": "7.15.1",
     "firebase-admin": "^8.12.0",
     "js-cookie": "^2.2.1",
     "jwt-decode": "^2.2.0",
diff --git a/src/layouts/protected.vue b/src/layouts/protected.vue
@@ -104,7 +104,7 @@ type LocalData = {
 }
 
 export default Vue.extend({
-  // middleware: 'authenticated',
+  middleware: ['authenticated', 'checkClassData'],
   components: {
     CalendarBar,
     BaseDialog,
diff --git a/src/pages/account/login.vue b/src/pages/account/login.vue
@@ -92,8 +92,9 @@ export default Vue.extend({
         .auth()
         .signInWithEmailAndPassword(this.email, this.password)
         .then(() => {
-          vxm.user.login()
-          this.$router.push('/edit')
+          vxm.user.login().then(() => {
+            this.$router.push('/user/classlist')
+          })
         })
         .catch(() => {
           this.loading = false
diff --git a/src/pages/user/classlist.vue b/src/pages/user/classlist.vue
@@ -1,16 +1,21 @@
 <template>
   <bottom-sheet-layer title="クラス一覧" title-en="CLASS LIST" fullscreen>
     <template v-slot:LayerContents>
-      <v-list>
-        <v-radio-group v-model="selectedItem">
+      <h1 v-if="!items || items.length < 1">
+        編集可能なクラスがありません。クラスの登録を行ってください
+      </h1>
+      <v-list v-else>
+        <v-radio-group v-model="selectedClassId">
           <v-list-item
             v-for="(item, index) in items"
             :key="index"
             class="ClassList-Item"
           >
-            <v-radio :value="item.num">
+            <v-radio :value="item.classId">
               <template v-slot:label>
-                <span class="ClassList-Label">{{ item.name }}</span>
+                <span class="ClassList-Label">
+                  {{ item.schoolName }} {{ item.className }}
+                </span>
               </template>
             </v-radio>
           </v-list-item>
@@ -22,8 +27,14 @@
         theme="primary"
         text="選択クラスでログインする"
         class="ClassList-Button"
+        :is-loading="loading"
+        @click="doSelectClassLogin"
+      />
+      <action-button
+        text="クラスを登録する"
+        theme="secondary"
+        @click="$router.push('/user/registerClass')"
       />
-      <action-button theme="secondary" text="クラスを登録する" />
     </template>
   </bottom-sheet-layer>
 </template>
@@ -32,29 +43,34 @@
 import Vue from 'vue'
 import BottomSheetLayer from '@/components/BottomSheetLayer.vue'
 import ActionButton from '@/components/ActionButton.vue'
+import { vxm } from '@/store'
 
 type DataType = {
   items: Object[]
-  selectedItem: number
+  selectedClassId: string
+  loading: boolean
 }
 
 export default Vue.extend({
   components: { BottomSheetLayer, ActionButton },
   layout: 'background',
+  middleware: 'authenticated',
   data(): DataType {
     return {
-      items: [
-        { name: 'ほげほげ学校１年２組', num: 1 },
-        { name: 'ほげほげ学校１年２組', num: 2 },
-        { name: 'ほげほげ学校１年２組', num: 3 },
-        { name: 'ほげほげ学校１年２組', num: 4 },
-        { name: 'ほげほげ学校１年２組', num: 5 },
-        { name: 'ほげほげ学校１年２組', num: 6 },
-        { name: 'ほげほげ学校１年２組', num: 7 },
-        { name: 'ほげほげ学校１年２組', num: 8 },
-        { name: 'ほげほげ学校１年２組', num: 9 }
-      ],
-      selectedItem: 1
+      items: vxm.user.allowAccess,
+      selectedClassId: '',
+      loading: false
+    }
+  },
+  methods: {
+    async doSelectClassLogin() {
+      this.loading = true
+      try {
+        await vxm.classData.loadClassData(this.selectedClassId)
+        await this.$router.push('/edit')
+      } catch {
+        this.loading = false
+      }
     }
   }
 })
diff --git a/src/pages/user/registerClass.vue b/src/pages/user/registerClass.vue
@@ -1,35 +1,89 @@
 <template>
-  <bottom-sheet-layer title="クラス登録" title-en="STEP 2">
-    <template v-slot:LayerContents>
-      <dl class="RegisterClass-List">
-        <dt class="RegisterClass-ItemTitle">学校名</dt>
-        <dd>
-          <input-field label="school" placeholder="おひさま小学校" require />
-        </dd>
-        <dt class="RegisterClass-ItemTitle">クラス名</dt>
-        <dd>
-          <input-field label="class" placeholder="2年B組" require />
-          <span class="RegisterClass-ItemNote">
-            クラス名は表示されますのでご注意ください
-          </span>
-        </dd>
-      </dl>
-    </template>
-    <template v-slot:LayerFooter>
-      <action-button theme="primary" text="登録を完了する" />
-    </template>
-  </bottom-sheet-layer>
+  <div>
+    <bottom-sheet-layer title="クラス登録" title-en="STEP 2">
+      <template v-slot:LayerContents>
+        <dl class="RegisterClass-List">
+          <dt class="RegisterClass-ItemTitle">学校名</dt>
+          <dd>
+            <input-field
+              v-model="schoolName"
+              label="school"
+              placeholder="おひさま小学校"
+              require
+            />
+          </dd>
+          <dt class="RegisterClass-ItemTitle">クラス名</dt>
+          <dd>
+            <input-field
+              v-model="className"
+              label="class"
+              placeholder="2年B組"
+              require
+            />
+            <span class="RegisterClass-ItemNote">
+              クラス名は表示されますのでご注意ください
+            </span>
+          </dd>
+        </dl>
+      </template>
+      <template v-slot:LayerFooter>
+        <action-button
+          :is-disabled="disableButton"
+          :is-loading="loading"
+          text="登録を完了する"
+          theme="primary"
+          @click="doRegister"
+        />
+      </template>
+    </bottom-sheet-layer>
+    <v-snackbar v-model="error" :timeout="5000" absolute color="#C01B61" top>
+      クラスの追加に失敗しました。再度登録をお願いします。
+    </v-snackbar>
+  </div>
 </template>
 
 <script lang="ts">
 import Vue from 'vue'
 import BottomSheetLayer from '@/components/BottomSheetLayer.vue'
 import ActionButton from '@/components/ActionButton.vue'
 import InputField from '@/components/InputField.vue'
+import { vxm } from '@/store'
 
 export default Vue.extend({
   components: { BottomSheetLayer, ActionButton, InputField },
-  layout: 'background'
+  layout: 'background',
+  middleware: 'authenticated',
+  data() {
+    return {
+      schoolName: '',
+      className: '',
+      loading: false,
+      error: false
+    }
+  },
+  computed: {
+    disableButton(): boolean {
+      return !(this.schoolName && this.className)
+    }
+  },
+  methods: {
+    doRegister() {
+      this.loading = true
+      vxm.classData
+        .registerClass({
+          schoolName: this.schoolName,
+          className: this.className
+        })
+        .then(() => {
+          this.loading = false
+          this.$router.push('/user/registered')
+        })
+        .catch(() => {
+          this.error = true
+          this.loading = false
+        })
+    }
+  }
 })
 </script>
 
diff --git a/src/pages/user/registered.vue b/src/pages/user/registered.vue
@@ -6,16 +6,17 @@
           mdi-clipboard-account
         </v-icon>
         <p class="Registered-Text">あなたのクラスIDです</p>
-        <div class="Registered-Id">ほげほげほげ</div>
+        <div class="Registered-Id">{{ classId }}</div>
       </div>
     </template>
     <template v-slot:LayerFooter>
       <action-button
         theme="primary"
         text="授業を追加・編集する"
         class="Registered-Button"
+        @click="$router.push('/edit')"
       />
-      <action-button theme="secondary" text="クラスIDを共有する" />
+      <!-- <action-button theme="secondary" text="クラスIDを共有する" /> -->
     </template>
   </bottom-sheet-layer>
 </template>
@@ -24,10 +25,17 @@
 import Vue from 'vue'
 import BottomSheetLayer from '@/components/BottomSheetLayer.vue'
 import ActionButton from '@/components/ActionButton.vue'
+import { vxm } from '@/store'
 
 export default Vue.extend({
   components: { BottomSheetLayer, ActionButton },
-  layout: 'background'
+  layout: 'background',
+  middleware: 'authenticated',
+  data() {
+    return {
+      classId: vxm.classData.classId
+    }
+  }
 })
 </script>
 
diff --git a/src/store/modules/classData.ts b/src/store/modules/classData.ts
diff --git a/src/store/modules/user.ts b/src/store/modules/user.ts
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -104,7 +104,7 @@ type LocalData = {`
`104`	`104`	`}`
`105`	`105`
`106`	`106`	`export default Vue.extend({`
`107`		`- // middleware: 'authenticated',`
	`107`	`+ middleware: ['authenticated', 'checkClassData'],`
`108`	`108`	`components: {`
`109`	`109`	`CalendarBar,`
`110`	`110`	`BaseDialog,`