feat: membershipページを作成

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/MemberShipPageUserTypeSelector.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/MemberShipPageUserTypeSelectorButton.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/MembershipPage.vue

@@ -1,5 +1,83 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { useRoute } from 'vue-router'
+
+import MemberShipPageVerifyEmailLink from '@/pages/membership/MembershipPageVerifyEmailLink.vue'
+import MemberShipPageUserTypeSelector from './MemberShipPageUserTypeSelector.vue'
+import MembershipPageInputText from './MembershipPageInputText.vue'
+import MembershipPageLoginLink from './MembershipPageLoginLink.vue'
+
+const route = useRoute()
+
+const isUserTypeNew = computed(() => route.query.user_type === 'new')
+const isUserTypeRejoin = computed(() => route.query.user_type === 'rejoin')
+const isUserTypeActive = computed(() => route.query.user_type === 'active')
+const isUserTypeQueryValid = computed(
+  () => isUserTypeNew.value || isUserTypeRejoin.value || isUserTypeActive.value,
+)
+
+const isLoggedIn = ref(false)
+const hasVerifiedMailAddress = ref(true)
+const hasCustomerObjectOnTraqId = ref(false)
+const shouldShowUserTypeSelector = computed(() => !isLoggedIn.value)
+const needUserTypeSelect = computed(() => !isLoggedIn.value && !isUserTypeQueryValid.value)
+const needMailAddressInput = computed(
+  () =>
+    (isLoggedIn.value && !hasCustomerObjectOnTraqId.value && !hasVerifiedMailAddress.value) ||
+    (!isLoggedIn.value &&
+      (isUserTypeNew.value || isUserTypeRejoin.value) &&
+      !hasVerifiedMailAddress.value),
+)
+const needLogin = computed(() => isUserTypeActive.value && !isLoggedIn.value)
+
+const hasCustomerObjectOnMailAddress = ref(false)
+const hasTraQIdOnCustomerObject = ref(false)
+const hasCustomerObject = computed(
+  () => hasCustomerObjectOnMailAddress.value || hasCustomerObjectOnTraqId.value,
+)
+const canShowInvoiceForm = computed(
+  () =>
+    (isLoggedIn.value && (hasCustomerObjectOnTraqId.value || hasVerifiedMailAddress.value)) ||
+    (!isLoggedIn.value &&
+      (isUserTypeNew.value || isUserTypeRejoin.value) &&
+      hasVerifiedMailAddress.value),
+)
+const needTraqIdInput = computed(
+  () =>
+    isUserTypeRejoin.value &&
+    (!hasCustomerObjectOnMailAddress.value || !hasTraQIdOnCustomerObject.value),
+)
+const traqIdInput = ref('')
+const needNameInput = computed(() => !hasCustomerObject.value)
+const nameInput = ref('')
+const hasValidTraqId = computed(() => !needTraqIdInput.value || traqIdInput.value.length > 0)
+const hasName = computed(() => !needNameInput.value || nameInput.value.length > 0)
+const canShowInvoiceInfoConfirm = computed(
+  () => needNameInput.value && hasValidTraqId.value && hasName.value,
+)
+</script>
+
 <template>
-  <div>
-    <h1>This is an membership page</h1>
+  <div class="flex flex-col gap-2">
+    <div v-if="shouldShowUserTypeSelector">
+      <MemberShipPageUserTypeSelector />
+    </div>
+    <div v-if="needUserTypeSelect">新規入部、再入部、継続所属のいずれかを選択してください</div>
+    <div v-if="needMailAddressInput" class="flex flex-col gap-2">
+      isct アドレスの認証が必要です <MemberShipPageVerifyEmailLink />
+    </div>
+    <div v-if="needLogin" class="flex flex-col gap-2">
+      ログインが必要です
+      <MembershipPageLoginLink />
+    </div>
+    <div v-if="canShowInvoiceForm && needTraqIdInput" class="flex flex-col gap-2">
+      traQ ID を入力してください
+      <MembershipPageInputText v-model="traqIdInput" />
+    </div>
+    <div v-if="canShowInvoiceForm && needNameInput" class="flex flex-col gap-2">
+      名前を入力してください
+      <MembershipPageInputText v-model="nameInput" />
+    </div>
+    <div v-if="canShowInvoiceInfoConfirm">請求書発行のための情報を確認してください</div>
   </div>
 </template>

src/pages/membership/MembershipPageInputText.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { onMounted, useTemplateRef } from 'vue'
+
+const model = defineModel<string>({ required: true })
+const { autoFocus, className, required, placeholder } = withDefaults(
+  defineProps<{
+    autoFocus?: boolean
+    className?: string
+    required?: boolean
+    placeholder?: string
+  }>(),
+  {
+    autoFocus: false,
+    className: 'rounded border px-1',
+    required: false,
+    placeholder: '',
+  },
+)
+const inputRef = useTemplateRef('input-ref')
+
+onMounted(() => {
+  if (autoFocus) {
+    inputRef.value?.focus()
+  }
+})
+</script>
+
+<template>
+  <input
+    ref="input-ref"
+    :class="className"
+    :placeholder="placeholder"
+    :required="required"
+    v-model="model"
+  />
+</template>

src/pages/membership/MembershipPageLoginLink.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/MembershipPageVerifyEmailLink.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/types/userType.ts

@@ -0,0 +1 @@
+export type UserType = 'new' | 'rejoin' | 'active'

src/pages/verify-email/VerifyEmailPage.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/router/index.ts

@@ -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'),
+    },
   ],
 })