From 60252d0dd6fb07ba559ef7fa512e8c122e0ddb82 Mon Sep 17 00:00:00 2001 From: Eraxyso <130852025+Eraxyso@users.noreply.github.com> Date: Thu, 12 Dec 2024 12:42:52 +0000 Subject: [PATCH 01/11] feat: implement SignupView --- src/assets/main.css | 9 ++++++ src/components/Controls/OAuthButton.vue | 31 +++++++++++++++++++ src/views/SignupView.vue | 40 +++++++++++++++++++++++-- 3 files changed, 77 insertions(+), 3 deletions(-) create mode 100644 src/components/Controls/OAuthButton.vue diff --git a/src/assets/main.css b/src/assets/main.css index e349ba2..2f4ed4b 100644 --- a/src/assets/main.css +++ b/src/assets/main.css @@ -64,6 +64,15 @@ line-height: 1rem; } +.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 { @apply font-primary; font-size: 0.75rem; diff --git a/src/components/Controls/OAuthButton.vue b/src/components/Controls/OAuthButton.vue new file mode 100644 index 0000000..48ec7a3 --- /dev/null +++ b/src/components/Controls/OAuthButton.vue @@ -0,0 +1,31 @@ + + + + + diff --git a/src/views/SignupView.vue b/src/views/SignupView.vue index aeaf190..439ec89 100644 --- a/src/views/SignupView.vue +++ b/src/views/SignupView.vue @@ -1,8 +1,42 @@ - + From 729fde15dddd601bf1fa6f2ed37832885b4b1904 Mon Sep 17 00:00:00 2001 From: Eraxyso <130852025+Eraxyso@users.noreply.github.com> Date: Thu, 12 Dec 2024 13:23:43 +0000 Subject: [PATCH 02/11] feat: implement SignupAfterMailView --- src/views/SignupAfterMailView.vue | 32 ++++++++++++++++++++++++++++--- 1 file changed, 29 insertions(+), 3 deletions(-) diff --git a/src/views/SignupAfterMailView.vue b/src/views/SignupAfterMailView.vue index d091e29..d7cc5d7 100644 --- a/src/views/SignupAfterMailView.vue +++ b/src/views/SignupAfterMailView.vue @@ -1,8 +1,34 @@ - + From aa8d3a7af9df4b01f757bd4ac79e2cdc626c61c1 Mon Sep 17 00:00:00 2001 From: Eraxyso <130852025+Eraxyso@users.noreply.github.com> Date: Thu, 12 Dec 2024 14:26:25 +0000 Subject: [PATCH 03/11] feat: implement SignupRegisterView --- src/assets/main.css | 2 +- src/views/SignupRegisterView.vue | 79 ++++++++++++++++++++++++++++++-- 2 files changed, 77 insertions(+), 4 deletions(-) diff --git a/src/assets/main.css b/src/assets/main.css index 2f4ed4b..5634a6e 100644 --- a/src/assets/main.css +++ b/src/assets/main.css @@ -73,7 +73,7 @@ text-decoration: underline; } -.fontstyle-ui-caption { +.fontstyle-ui-caption-strong { @apply font-primary; font-size: 0.75rem; font-style: normal; diff --git a/src/views/SignupRegisterView.vue b/src/views/SignupRegisterView.vue index 3387b0c..6ab2520 100644 --- a/src/views/SignupRegisterView.vue +++ b/src/views/SignupRegisterView.vue @@ -1,8 +1,81 @@ - + From 824fc4fbd7a1984f6ec4f6be07c9f5e566ee44d2 Mon Sep 17 00:00:00 2001 From: Eraxyso <130852025+Eraxyso@users.noreply.github.com> Date: Sat, 14 Dec 2024 17:23:09 +0000 Subject: [PATCH 04/11] feat: add the logical processing for signup-related pages --- .env.development | 1 + env.d.ts | 8 ++++ package-lock.json | 18 ++++++++ package.json | 2 + src/components/Controls/OAuthButton.vue | 61 +++++++++++++++++++++++-- src/views/SignupAfterMailView.vue | 7 ++- src/views/SignupRegisterView.vue | 57 +++++++++++++++++++++-- src/views/SignupView.vue | 25 +++++++++- vite.config.ts | 3 +- 9 files changed, 169 insertions(+), 13 deletions(-) create mode 100644 .env.development diff --git a/.env.development b/.env.development new file mode 100644 index 0000000..1d0b57f --- /dev/null +++ b/.env.development @@ -0,0 +1 @@ +VITE_API_BASE_URL = http://localhost:4010 \ No newline at end of file diff --git a/env.d.ts b/env.d.ts index 11f02fe..84087a9 100644 --- a/env.d.ts +++ b/env.d.ts @@ -1 +1,9 @@ /// + +interface ImportMetaEnv { + readonly VITE_API_BASE_URL: string; +} + +interface ImportMeta { + readonly env: ImportMetaEnv; +} \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index cd291e0..d951b8a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,6 +10,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" @@ -18,6 +19,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", @@ -1019,6 +1021,13 @@ "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==", "license": "MIT" }, + "node_modules/@types/jwt-decode": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/@types/jwt-decode/-/jwt-decode-2.2.1.tgz", + "integrity": "sha512-aWw2YTtAdT7CskFyxEX2K21/zSDStuf/ikI3yBqmwpwJF0pS+/IX5DWv+1UFffZIbruP6cnT9/LAJV1gFwAT1A==", + "dev": true, + "license": "MIT" + }, "node_modules/@types/node": { "version": "20.14.9", "resolved": "https://registry.npmjs.org/@types/node/-/node-20.14.9.tgz", @@ -2713,6 +2722,15 @@ "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz", "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==" }, + "node_modules/jwt-decode": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-4.0.0.tgz", + "integrity": "sha512-+KJGIyHgkGuIq3IEBNftfhW/LfWhXUIY6OmyVWjliu5KH1y0fw7VQ8YndE2O4qZdMSd9SqbnC8GOcZEy0Om7sA==", + "license": "MIT", + "engines": { + "node": ">=18" + } + }, "node_modules/keyv": { "version": "4.5.4", "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz", diff --git a/package.json b/package.json index f6812ec..bba0f6d 100644 --- a/package.json +++ b/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", diff --git a/src/components/Controls/OAuthButton.vue b/src/components/Controls/OAuthButton.vue index 48ec7a3..eb3583a 100644 --- a/src/components/Controls/OAuthButton.vue +++ b/src/components/Controls/OAuthButton.vue @@ -1,11 +1,66 @@ diff --git a/src/views/SignupAfterMailView.vue b/src/views/SignupAfterMailView.vue index d7cc5d7..3d9df78 100644 --- a/src/views/SignupAfterMailView.vue +++ b/src/views/SignupAfterMailView.vue @@ -1,12 +1,15 @@ diff --git a/src/views/SignupRegisterView.vue b/src/views/SignupRegisterView.vue index 6ab2520..3377f6b 100644 --- a/src/views/SignupRegisterView.vue +++ b/src/views/SignupRegisterView.vue @@ -1,15 +1,59 @@ @@ -68,7 +112,10 @@ function onSignupRegister() { *
- +
diff --git a/src/views/SignupView.vue b/src/views/SignupView.vue index 439ec89..1d2f837 100644 --- a/src/views/SignupView.vue +++ b/src/views/SignupView.vue @@ -1,12 +1,33 @@ diff --git a/vite.config.ts b/vite.config.ts index 5c45e1d..030a165 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,6 +1,7 @@ import { fileURLToPath, URL } from 'node:url' -import { defineConfig } from 'vite' +import { defineConfig, loadEnv } from 'vite'; + import vue from '@vitejs/plugin-vue' // https://vitejs.dev/config/ From c4451727e8f8b39cfa7f9fc20edfb1620f54d446 Mon Sep 17 00:00:00 2001 From: Eraxyso <130852025+Eraxyso@users.noreply.github.com> Date: Sun, 15 Dec 2024 07:28:28 +0000 Subject: [PATCH 05/11] fix: resolve some review comments --- src/utils/validator.ts | 7 ++++ src/views/SignupRegisterView.vue | 62 +++++++++++++++++++++++++------- src/views/SignupView.vue | 4 +-- 3 files changed, 59 insertions(+), 14 deletions(-) create mode 100644 src/utils/validator.ts diff --git a/src/utils/validator.ts b/src/utils/validator.ts new file mode 100644 index 0000000..d10d192 --- /dev/null +++ b/src/utils/validator.ts @@ -0,0 +1,7 @@ +export const usernameVlidator = (username:string): boolean => { + return /^[A-Za-z_]{5, 10}$/.test(username) +} + +export const passwordValidator = (password:string): boolean => { + return /^[A-Za-z_]{5, 10}$/.test(password) // TODO: 使える記号や文字数を確認する +} \ No newline at end of file diff --git a/src/views/SignupRegisterView.vue b/src/views/SignupRegisterView.vue index 3377f6b..754a2bf 100644 --- a/src/views/SignupRegisterView.vue +++ b/src/views/SignupRegisterView.vue @@ -2,13 +2,16 @@ import { ref, onMounted } from 'vue' import { useRouter } from 'vue-router' import { jwtDecode } from 'jwt-decode' +import { usernameVlidator, passwordValidator } from '@/utils/validator' import PasswordTextbox from '@/components/Controls/Textbox/PasswordTextbox.vue' import PlainTextbox from '@/components/Controls/Textbox/PlainTextbox.vue' import PrimaryButton from '@/components/Controls/PrimaryButton.vue' const username = ref('') +const usernameErrorMessage = ref('') const emailAddress = ref('') const password = ref('') +const passwordErrorMessage = ref('') const confirmPassword = ref('') const confirmPasswordErrorMessage = ref('') @@ -29,8 +32,38 @@ const router = useRouter() async function onSignupRegister() { try { - if (password.value !== confirmPassword.value) { + let error = false + // check user name + if (!username.value) { + usernameErrorMessage.value = 'ユーザー名を入力してください' + error = true + } else if (!usernameVlidator(username.value)) { + usernameErrorMessage.value = '無効なユーザー名' + error = true + } else { + usernameErrorMessage.value = '' + } + // check password + if (!password.value) { + passwordErrorMessage.value = 'パスワードを入力してください' + error = true + } else if (!passwordValidator(username.value)) { + passwordErrorMessage.value = '無効なユーザー名' + error = true + } else { + passwordErrorMessage.value = '' + } + // check confirm password + if (!confirmPassword.value) { + confirmPasswordErrorMessage.value = 'パスワード（確認）を入力してください' + error = true + } else if (password.value !== confirmPassword.value) { confirmPasswordErrorMessage.value = 'パスワードが一致しません' + error = true + } else { + confirmPasswordErrorMessage.value = '' + } + if (error) { return } const token = new URLSearchParams(window.location.search).get('token') @@ -68,16 +101,16 @@ async function onSignupRegister() { * がついた項目は必須です。
-
+
-
+
+
- -
- 文字数は〇以上〇以下で、半角英数字とアンダースコアのみが使用できます。 + +
+ 文字数は5以上10以下で、半角英数字とアンダースコアのみが使用できます。
@@ -92,12 +125,16 @@ async function onSignupRegister() {
-
+
+
- +
文字数は〇以上〇以下で、半角英数字と記号が使用できます。
@@ -107,12 +144,13 @@ async function onSignupRegister() {
-
+
+
diff --git a/src/views/SignupView.vue b/src/views/SignupView.vue index 1d2f837..ece8e42 100644 --- a/src/views/SignupView.vue +++ b/src/views/SignupView.vue @@ -40,14 +40,14 @@ async function onEmailSignup() {
新規登録
-
+
-
+
メールアドレスで新規登録
From bde51ced133cea56f71d239f47ae2e01d1bafcf7 Mon Sep 17 00:00:00 2001 From: Eraxyso <130852025+Eraxyso@users.noreply.github.com> Date: Sun, 15 Dec 2024 18:04:43 +0000 Subject: [PATCH 06/11] fix: fix some typos and resolve issue with spaces in the regular expression causing validator failure --- src/utils/validator.ts | 6 +++--- src/views/SignupRegisterView.vue | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/utils/validator.ts b/src/utils/validator.ts index d10d192..dafb27c 100644 --- a/src/utils/validator.ts +++ b/src/utils/validator.ts @@ -1,7 +1,7 @@ -export const usernameVlidator = (username:string): boolean => { - return /^[A-Za-z_]{5, 10}$/.test(username) +export const usernameValidator = (username:string): boolean => { + return /^[A-Za-z_]{5,10}$/.test(username) } export const passwordValidator = (password:string): boolean => { - return /^[A-Za-z_]{5, 10}$/.test(password) // TODO: 使える記号や文字数を確認する + return /^[A-Za-z_]{5,10}$/.test(password) // TODO: 使える記号や文字数を確認する } \ No newline at end of file diff --git a/src/views/SignupRegisterView.vue b/src/views/SignupRegisterView.vue index 754a2bf..ab137ef 100644 --- a/src/views/SignupRegisterView.vue +++ b/src/views/SignupRegisterView.vue @@ -2,7 +2,7 @@ import { ref, onMounted } from 'vue' import { useRouter } from 'vue-router' import { jwtDecode } from 'jwt-decode' -import { usernameVlidator, passwordValidator } from '@/utils/validator' +import { usernameValidator, passwordValidator } from '@/utils/validator' import PasswordTextbox from '@/components/Controls/Textbox/PasswordTextbox.vue' import PlainTextbox from '@/components/Controls/Textbox/PlainTextbox.vue' import PrimaryButton from '@/components/Controls/PrimaryButton.vue' @@ -37,7 +37,7 @@ async function onSignupRegister() { if (!username.value) { usernameErrorMessage.value = 'ユーザー名を入力してください' error = true - } else if (!usernameVlidator(username.value)) { + } else if (!usernameValidator(username.value)) { usernameErrorMessage.value = '無効なユーザー名' error = true } else { @@ -48,7 +48,7 @@ async function onSignupRegister() { passwordErrorMessage.value = 'パスワードを入力してください' error = true } else if (!passwordValidator(username.value)) { - passwordErrorMessage.value = '無効なユーザー名' + passwordErrorMessage.value = '無効なパスワード' error = true } else { passwordErrorMessage.value = '' From 85e673c86a5a23e4128789ee79830ef6e25d9536 Mon Sep 17 00:00:00 2001 From: Eraxyso <130852025+Eraxyso@users.noreply.github.com> Date: Mon, 16 Dec 2024 08:25:55 +0000 Subject: [PATCH 07/11] fix: correct password validation that incorrectly detected the username --- src/views/SignupRegisterView.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/views/SignupRegisterView.vue b/src/views/SignupRegisterView.vue index ab137ef..27ee361 100644 --- a/src/views/SignupRegisterView.vue +++ b/src/views/SignupRegisterView.vue @@ -47,7 +47,7 @@ async function onSignupRegister() { if (!password.value) { passwordErrorMessage.value = 'パスワードを入力してください' error = true - } else if (!passwordValidator(username.value)) { + } else if (!passwordValidator(password.value)) { passwordErrorMessage.value = '無効なパスワード' error = true } else { From eb9b9ed462fd4bf47473e4febbf8e1b8134622c7 Mon Sep 17 00:00:00 2001 From: Eraxyso <130852025+Eraxyso@users.noreply.github.com> Date: Mon, 16 Dec 2024 08:44:24 +0000 Subject: [PATCH 08/11] fix: enhance username and password validation logic --- src/utils/validator.ts | 12 ++++++++---- src/views/SignupRegisterView.vue | 2 +- 2 files changed, 9 insertions(+), 5 deletions(-) diff --git a/src/utils/validator.ts b/src/utils/validator.ts index dafb27c..ca2008a 100644 --- a/src/utils/validator.ts +++ b/src/utils/validator.ts @@ -1,7 +1,11 @@ -export const usernameValidator = (username:string): boolean => { - return /^[A-Za-z_]{5,10}$/.test(username) +export const usernameValidator = (username: string): boolean => { + return /^[A-Za-z0-9_]{5,10}$/.test(username) } -export const passwordValidator = (password:string): boolean => { - return /^[A-Za-z_]{5,10}$/.test(password) // TODO: 使える記号や文字数を確認する +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; } \ No newline at end of file diff --git a/src/views/SignupRegisterView.vue b/src/views/SignupRegisterView.vue index 27ee361..f52ae3f 100644 --- a/src/views/SignupRegisterView.vue +++ b/src/views/SignupRegisterView.vue @@ -136,7 +136,7 @@ async function onSignupRegister() { :error-message="passwordErrorMessage" />
- 文字数は〇以上〇以下で、半角英数字と記号が使用できます。 + 文字数は10以上64以下で、半角英数字と記号が使用できます。
英字、数字、記号がそれぞれ1文字以上含まれている必要があります。 From bc2c2b490ac05c09ff1477e6ac8f950e28607a4a Mon Sep 17 00:00:00 2001 From: Eraxyso <130852025+Eraxyso@users.noreply.github.com> Date: Mon, 16 Dec 2024 09:19:01 +0000 Subject: [PATCH 09/11] fix: change the OAuth process of traQ --- src/components/Controls/OAuthButton.vue | 20 ++++---------------- 1 file changed, 4 insertions(+), 16 deletions(-) diff --git a/src/components/Controls/OAuthButton.vue b/src/components/Controls/OAuthButton.vue index eb3583a..a16c0bd 100644 --- a/src/components/Controls/OAuthButton.vue +++ b/src/components/Controls/OAuthButton.vue @@ -18,15 +18,14 @@ async function onOAuthClick() { if (mode === 'signup') { if (app === 'Github') { const response = await fetch(`${import.meta.env.VITE_API_BASE_URL}/github-oauth2/params`) - if (response.status === 200) { + 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 { + } else { alert(response.status) } } @@ -38,23 +37,12 @@ async function onOAuthClick() { } else if (response.status === 500) { const responseJson = await response.json() alert('Internal Server Error: ' + responseJson.message) - } - else { + } else { alert(response.status) } } if (app === 'traQ') { - const response = await fetch(`${import.meta.env.VITE_API_BASE_URL}/traq-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) - } + router.push('/_oauth/login?redirect=/') // TODO: Redirect to the correct URL } } } catch (error) { From bd036e52551266a5db4963338a73377a2446b7d8 Mon Sep 17 00:00:00 2001 From: Eraxyso <130852025+Eraxyso@users.noreply.github.com> Date: Mon, 16 Dec 2024 09:20:06 +0000 Subject: [PATCH 10/11] fix: change some gird layouts back to flex --- src/views/SignupRegisterView.vue | 2 +- src/views/SignupView.vue | 8 ++------ 2 files changed, 3 insertions(+), 7 deletions(-) diff --git a/src/views/SignupRegisterView.vue b/src/views/SignupRegisterView.vue index f52ae3f..24e830a 100644 --- a/src/views/SignupRegisterView.vue +++ b/src/views/SignupRegisterView.vue @@ -101,7 +101,7 @@ async function onSignupRegister() { * がついた項目は必須です。
-
+