feat: /membership にユーザーの状態選択およびログイン・メールアドレス認証のプロトタイプを実装

Author: reiroop

src/composable/parseRouteQuery.ts

@@ -0,0 +1,9 @@
+import type { LocationQueryValue } from 'vue-router'
+
+export const parseRouteQuery = (query: LocationQueryValue | LocationQueryValue[]) => {
+  if (Array.isArray(query)) {
+    return query.filter((v): v is string => typeof v === 'string')
+  } else {
+    return typeof query === 'string' ? [query] : ['']
+  }
+}

src/pages/login/LoginPage.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { parseRouteQuery } from '@/composable/parseRouteQuery'
+import { useRoute } from 'vue-router'
+
+const route = useRoute()
+const redirectParams = parseRouteQuery(route.query.redirect)
+</script>
+
+<template>
+  <RouterLink :to="redirectParams[0]"> ログインする </RouterLink>
+</template>

src/pages/membership/MemberShipPageUserTypeSelect.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import MemberShipPageUserTypeSelectorButton from './MemberShipPageUserTypeSelectorButton.vue'
+</script>
+
+<template>
+  <div class="flex gap-2">
+    <MemberShipPageUserTypeSelectorButton userType="new">
+      新規入部
+    </MemberShipPageUserTypeSelectorButton>
+    <MemberShipPageUserTypeSelectorButton userType="rejoin">
+      再入部
+    </MemberShipPageUserTypeSelectorButton>
+    <MemberShipPageUserTypeSelectorButton userType="active">
+      継続所属
+    </MemberShipPageUserTypeSelectorButton>
+  </div>
+</template>

src/pages/membership/MemberShipPageUserTypeSelector.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { useRoute, useRouter } from 'vue-router'
+import type { UserType } from './types/userType'
+
+const { userType } = defineProps<{ userType: UserType }>()
+
+const route = useRoute()
+const router = useRouter()
+const replaceUserTypeQuery = (userType: UserType) => {
+  const newQuery = { ...route.query, user_type: userType }
+  router.replace({ query: newQuery })
+}
+</script>
+
+<template>
+  <button @click="replaceUserTypeQuery(userType)">
+    <slot></slot>
+  </button>
+</template>

src/pages/membership/MemberShipPageUserTypeSelectorButton.vue

@@ -1,14 +1,38 @@
 <script setup lang="ts">
+import { computed, ref } from 'vue'
 import { useRoute } from 'vue-router'
 
-import MemberShipPageUserTypeSelect from './MemberShipPageUserTypeSelect.vue'
+import MemberShipPageVerifyEmailLink from '@/pages/membership/MembershipPageVerifyEmailLink.vue'
+import MemberShipPageUserTypeSelector from './MemberShipPageUserTypeSelector.vue'
+import MembershipPageLoginLink from './MembershipPageLoginLink.vue'
 
 const route = useRoute()
+
+const isLoggedIn = ref(false)
+const hasIsctAddress = ref(false)
+const hasCustomerObjectOnTraqId = ref(false)
+const isUserTypeActive = computed(() => route.query.user_type === 'active')
 </script>
 
 <template>
   <div class="flex flex-col gap-2">
-    <MemberShipPageUserTypeSelect />
-    <div>route.query.user_type: {{ route.query.user_type }}</div>
+    <div v-if="isLoggedIn">
+      <div v-if="!hasCustomerObjectOnTraqId && !hasIsctAddress">
+        isct アドレスの認証が必要です
+        <MemberShipPageVerifyEmailLink />
+      </div>
+      <div v-else>請求書情報入力へ</div>
+    </div>
+    <div v-else>
+      <MemberShipPageUserTypeSelector />
+      <div v-if="isUserTypeActive">
+        ログインが必要です
+        <MembershipPageLoginLink />
+      </div>
+      <div v-else-if="!hasIsctAddress">
+        isct アドレスの認証が必要です <MemberShipPageVerifyEmailLink />
+      </div>
+      <div v-else>請求書情報入力へ</div>
+    </div>
   </div>
 </template>

src/pages/membership/MembershipPage.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { useRoute } from 'vue-router'
+
+const route = useRoute()
+const getLoginPageURL = {
+  path: '/login',
+  query: { redirect: route.fullPath },
+}
+</script>
+
+<template>
+  <RouterLink :to="getLoginPageURL">ログインへ</RouterLink>
+</template>

src/pages/membership/MembershipPageLoginLink.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { useRoute } from 'vue-router'
+
+const route = useRoute()
+const getVerifyEmailPageURL = {
+  path: '/verify-email',
+  query: { redirect: route.fullPath },
+}
+</script>
+
+<template>
+  <RouterLink :to="getVerifyEmailPageURL">isct アドレスの認証へ</RouterLink>
+</template>

src/pages/membership/MembershipPageVerifyEmailLink.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { parseRouteQuery } from '@/composable/parseRouteQuery'
+import { useRoute } from 'vue-router'
+
+const route = useRoute()
+const redirectParams = parseRouteQuery(route.query.redirect)
+</script>
+
+<template>
+  <RouterLink :to="redirectParams[0]"> isct アドレスを認証する </RouterLink>
+</template>

src/pages/verify-email/VerifyEmailPage.vue

@@ -17,6 +17,16 @@ const router = createRouter({
       // which is lazy-loaded when the route is visited.
       component: () => import('@/pages/membership/MembershipPage.vue'),
     },
+    {
+      path: '/verify-email',
+      name: 'verify-email',
+      component: () => import('@/pages/verify-email/VerifyEmailPage.vue'),
+    },
+    {
+      path: '/login',
+      name: 'login',
+      component: () => import('@/pages/login/LoginPage.vue'),
+    },
   ],
 })