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] 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 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { ref } from 'vue'
+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 emailAddress = ref('example@example.com') // TODO: get value of emailAddress
+const password = ref('')
+const confirmPassword = ref('')
+function onSignupRegister() {
+  // TODO: Implement email signup
+}
+</script>
 
 <template>
-  <div>
-    <h1>Signup Register</h1>
+  <div
+    class="flex items-center justify-center bg-background-tertiary px-8 py-6"
+    style="height: calc(100vh - 56px)"
+  >
+    <div class="max-w-3xl space-y-5 rounded-2xl bg-white px-14 py-10">
+      <div class="fontstyle-ui-title text-left">新規登録</div>
+      <div>
+        <span class="fontstyle-ui-body text-status-error">*</span>
+        <span class="fontstyle-ui-body text-text-primary">がついた項目は必須です。</span>
+      </div>
+      <div class="space-y-5 p-2.5">
+        <div class="flex gap-6">
+          <div class="w-50 text-right">
+            <span class="fontstyle-ui-body-strong text-text-primary">ユーザー名</span>
+            <span class="fontstyle-ui-body-strong text-status-error">*</span>
+          </div>
+          <div class="flex-1">
+            <PlainTextbox v-model="username" />
+            <div class="fontstyle-ui-caption-strong pt-1 text-text-secondary">
+              文字数は〇以上〇以下で、半角英数字とアンダースコアのみが使用できます。
+            </div>
+          </div>
+        </div>
+        <div class="flex gap-6">
+          <div class="w-50 text-right">
+            <span class="fontstyle-ui-body-strong text-text-primary">メールアドレス</span>
+          </div>
+          <div class="flex-1">
+            <span class="fontstyle-ui-body w-full px-1 text-text-primary">
+              {{ emailAddress }}
+            </span>
+          </div>
+        </div>
+        <div class="flex gap-6">
+          <div class="w-50 text-right">
+            <span class="fontstyle-ui-body-strong text-text-primary">パスワード</span>
+            <span class="fontstyle-ui-body-strong text-status-error">*</span>
+          </div>
+          <div class="flex-1">
+            <PasswordTextbox v-model="password" />
+            <div class="fontstyle-ui-caption-strong pt-1 text-text-secondary">
+              文字数は〇以上〇以下で、半角英数字と記号が使用できます。
+            </div>
+            <div class="fontstyle-ui-caption-strong pt-1 text-text-secondary">
+              英字、数字、記号がそれぞれ1文字以上含まれている必要があります。
+            </div>
+          </div>
+        </div>
+        <div class="flex gap-6">
+          <div class="w-50 text-right">
+            <span class="fontstyle-ui-body-strong text-text-primary">パスワード（確認）</span>
+            <span class="fontstyle-ui-body-strong text-status-error">*</span>
+          </div>
+          <div class="flex-1">
+            <PasswordTextbox v-model="confirmPassword" />
+          </div>
+        </div>
+        <div class="flex justify-center">
+          <PrimaryButton text="次へ" @click="onSignupRegister" />
+        </div>
+      </div>
+    </div>
   </div>
 </template>