Merge pull request #73 from traP-jp/signup

新規登録関連画面の実装

.env.development

@@ -0,0 +1 @@
+VITE_API_BASE_URL = http://localhost:4010

env.d.ts

@@ -1 +1,9 @@
 /// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_API_BASE_URL: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}

package.json

@@ -17,6 +17,7 @@
   "dependencies": {
     "@types/eslint__js": "^8.42.3",
     "eslint-config-prettier": "^9.1.0",
+    "jwt-decode": "^4.0.0",
     "validator": "^13.12.0",
     "vue": "^3.5.6",
     "vue-router": "^4.3.3"
@@ -25,6 +26,7 @@
     "@eslint/js": "^9.11.0",
     "@rushstack/eslint-patch": "^1.8.0",
     "@tsconfig/node20": "^20.1.4",
+    "@types/jwt-decode": "^2.2.1",
     "@types/node": "^20.14.5",
     "@types/validator": "^13.12.2",
     "@vitejs/plugin-vue": "^5.1.3",

src/assets/main.css

@@ -64,7 +64,16 @@
   line-height: 1rem;
 }
 
-.fontstyle-ui-caption {
+.fontstyle-ui-caption-link {
+  @apply font-primary;
+  font-size: 0.75rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 1rem;
+  text-decoration: underline;
+}
+
+.fontstyle-ui-caption-strong {
   @apply font-primary;
   font-size: 0.75rem;
   font-style: normal;

src/components/Controls/OAuthButton.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { useRouter } from 'vue-router'
+
+const {
+  disabled = false,
+  app,
+  mode
+} = defineProps<{
+  disabled?: boolean
+  app: string
+  mode: 'signup' | 'login'
+}>()
+
+const router = useRouter()
+
+async function onOAuthClick() {
+  try {
+    if (mode === 'signup') {
+      if (app === 'Github') {
+        const response = await fetch(`${import.meta.env.VITE_API_BASE_URL}/github-oauth2/params`)
+        if (response.status === 200) {
+          const responseJson = await response.json()
+          alert(responseJson.url)
+          router.push(responseJson.url)
+        } else if (response.status === 500) {
+          const responseJson = await response.json()
+          alert('Internal Server Error: ' + responseJson.message)
+        } else {
+          alert(response.status)
+        }
+      }
+      if (app === 'Google') {
+        const response = await fetch(`${import.meta.env.VITE_API_BASE_URL}/google-oauth2/params`)
+        if (response.status === 200) {
+          const responseJson = await response.json()
+          router.push(responseJson.url)
+        } else if (response.status === 500) {
+          const responseJson = await response.json()
+          alert('Internal Server Error: ' + responseJson.message)
+        } else {
+          alert(response.status)
+        }
+      }
+      if (app === 'traQ') {
+        router.push('/_oauth/login?redirect=/') // TODO: Redirect to the correct URL
+      }
+    }
+  } catch (error) {
+    console.error('OAuth Error:', error)
+    alert('OAuth Error:' + error)
+  }
+}
+</script>
+
+<template>
+  <button
+    :disabled="disabled"
+    class="fontstyle-ui-control-strong inline-block space-x-2.5 rounded-lg border border-border-secondary px-3 py-2 text-text-primary enabled:hover:bg-background-secondary disabled:opacity-50"
+    @click="onOAuthClick"
+  >
+    <span v-if="app === 'Github'" class="inline-block align-middle"
+      ><img src="" class="size-5"
+    /></span>
+    <span v-if="app === 'Google'" class="inline-block align-middle"
+      ><img src="" class="size-5"
+    /></span>
+    <span v-if="app === 'traQ'" class="inline-block align-middle"
+      ><img src="" class="size-5"
+    /></span>
+    <span class="inline-block align-middle">{{ app }} で新規登録</span>
+  </button>
+</template>
+
+<style scoped></style>

src/utils/validator.ts

@@ -0,0 +1,11 @@
+export const usernameValidator = (username: string): boolean => {
+  return /^[A-Za-z0-9_]{5,10}$/.test(username)
+}
+
+export const passwordValidator = (password: string): boolean => {
+  const hasLetter = /[A-Za-z]/.test(password);
+  const hasNumber = /[0-9]/.test(password);
+  const hasSpecialChar = /[!@#$%^&*()_+\-={}[\]:;"'<>,.?/]/.test(password);
+  const isValid = /^[A-Za-z0-9!@#$%^&*()_+\-={}[\]:;"'<>,.?/]{10,64}$/.test(password);
+  return hasLetter && hasNumber && hasSpecialChar && isValid;
+}

src/views/SignupAfterMailView.vue

@@ -1,8 +1,37 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { useRouter } from 'vue-router';
+import BorderedButton from '@/components/Controls/BorderedButton.vue'
+import PrimaryButton from '@/components/Controls/PrimaryButton.vue'
+
+const router = useRouter()
+
+function onClose() {
+  router.push('/')
+}
+function onResendEmail() {
+  router.push('/signup')
+}
+</script>
 
 <template>
-  <div>
-    <h1>Signup After Mail</h1>
+  <div
+    class="flex items-center justify-center bg-background-tertiary px-8 py-6"
+    style="height: calc(100vh - 56px)"
+  >
+    <div class="max-w-xl space-y-5 rounded-2xl bg-white px-14 py-10">
+      <div class="fontstyle-ui-title text-left">確認メールを送信しました</div>
+      <div class="fontstyle-ui-body text-left text-text-secondary">
+        60分以内に、メールに記載されたリンクから登録フォームにアクセスしてください。
+      </div>
+      <div class="flex gap-3">
+        <div class="flex-1">
+          <PrimaryButton text="この画面を閉じる" class="w-full" @click="onClose" />
+        </div>
+        <div class="flex-1">
+          <BorderedButton text="メールを再送信する" class="w-full" @click="onResendEmail" />
+        </div>
+      </div>
+    </div>
   </div>
 </template>