Merge pull request #159 from codeforjapan/feature/147-make-user-register-flow

SignUp メール登録まで

Author: MaySoMusician

src/middleware/authenticated.ts

@@ -3,7 +3,7 @@ import { vxm } from '@/store'
 
 const authenticated: Middleware = async ({ redirect }) => {
   if (!vxm.user.isAuthenticated) {
-    redirect('/account/login')
+    redirect('/user/login')
   }
 }
 

src/pages/account/signup.vue

@@ -0,0 +1,96 @@
+<template>
+  <div class="MainPage">
+    <div class="Logo-outer">
+      <prj-logo class="Logo" />
+    </div>
+    <div class="PolicyText-outer">
+      <p>
+        一般社団法人コード・フォー・ジャパン（以下、「弊団体」といいます）は、個人情報に関する法令を遵守し、個人情報の適切な取り扱いを実現致します。
+      </p>
+      <p>
+        なお、弊団体が、参加者等（弊団体が運営するイベントやWebページ等への参加者や訪問者をいいます。以下同じ。）から取得した個人情報は、本プライバシーポリシーに従って管理され、参加者等は、弊団体が提供する各種イベントやWebページ（以下、総称して「弊社イベント等」という）を利用する際には、本プライバシーポリシーに定める内容を理解し、これに同意した上で利用するものとします。
+      </p>
+    </div>
+    <label class="Checkbox-label">
+      利用規約に同意します
+      <input
+        v-model="toggle"
+        type="checkbox"
+        value="check"
+        class="Checkbox-original"
+      />
+      <v-icon v-if="isCheck" color="#0071C2">mdi-check-box-outline</v-icon>
+      <v-icon v-else color="#0071C2">mdi-checkbox-blank-outline</v-icon>
+    </label>
+    <action-button
+      :is-disabled="!isCheck"
+      class="Button"
+      theme="primary"
+      text="利用を開始する"
+      @click="doClassLogin"
+    />
+    <action-button
+      class="Button"
+      theme="border"
+      text="同意しない"
+      @click="$router.push('/')"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+import PrjLogo from '~/assets/svgs/prj_logo.svg'
+import ActionButton from '~/components/ActionButton.vue'
+
+export default Vue.extend({
+  components: { PrjLogo, ActionButton },
+  layout: 'simple',
+  data() {
+    return {
+      toggle: []
+    }
+  },
+  computed: {
+    isCheck(): boolean {
+      return this.toggle.some(value => {
+        return value === 'check'
+      })
+    }
+  },
+  methods: {
+    doClassLogin(): void {}
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.MainPage {
+  background-color: $color-white;
+  border-radius: 14px;
+  padding: 16px;
+}
+.Logo-outer {
+  display: flex;
+  justify-content: center;
+}
+.Logo {
+  width: 115px;
+}
+.PolicyText-outer {
+  background-color: $color-back-gray;
+  border-radius: 14px;
+  padding: 16px;
+}
+.Checkbox-label {
+  display: flex;
+  justify-content: center;
+  margin: 24px 0;
+}
+.Checkbox-original {
+  display: none;
+}
+.Button {
+  margin-bottom: 16px;
+}
+</style>

src/pages/classes/terms.vue

@@ -37,14 +37,14 @@
           <action-button
             text="ユーザー登録する"
             class="registerButton"
-            @click="$router.push('/terms')"
+            @click="$router.push('/user/terms')"
           />
 
           <action-button
             text="ログインする"
             class="loginButton"
             theme="secondary"
-            @click="$router.push('/account/login')"
+            @click="$router.push('/user/login')"
           />
           <v-footer color="#004170" padless>
             <v-row justify="center" no-gutters>

src/pages/index.vue

@@ -63,7 +63,7 @@ import BottomSheetLayer from '@/components/BottomSheetLayer.vue'
 import ActionButton from '@/components/ActionButton.vue'
 import InputField from '@/components/InputField.vue'
 import firebase from '@/plugins/firebase'
-import { vxm } from '~/store'
+import { vxm } from '@/store'
 
 export default Vue.extend({
   components: { BottomSheetLayer, ActionButton, InputField },