From 9d2f2be6eefac8b4838ba275c5faca50aa2abb2d Mon Sep 17 00:00:00 2001
From: mfnefd <danilabal1119@gmail.com>
Date: Tue, 3 Dec 2024 04:02:35 +0400
Subject: [PATCH] =?UTF-8?q?add:=20=D1=81=D1=82=D1=80=D0=B0=D0=BD=D0=B8?=
 =?UTF-8?q?=D1=86=D0=B0=20=D1=80=D0=B5=D0=B3=D0=B8=D1=81=D1=82=D1=80=D0=B0?=
 =?UTF-8?q?=D1=86=D0=B8=D0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 front/components.d.ts                 |  1 +
 front/src/App.vue                     |  2 +-
 front/src/components/main/Header.vue  |  4 +-
 front/src/components/pages/Login.vue  |  2 +-
 front/src/components/pages/SignUp.vue | 86 +++++++++++++++++++++++++++
 front/src/router.ts                   |  5 ++
 6 files changed, 96 insertions(+), 4 deletions(-)

diff --git a/front/components.d.ts b/front/components.d.ts
index 783e5ec..f648f6c 100644
--- a/front/components.d.ts
+++ b/front/components.d.ts
@@ -12,6 +12,7 @@ declare module 'vue' {
     AForm: typeof import('ant-design-vue/es')['Form']
     AFormItem: typeof import('ant-design-vue/es')['FormItem']
     AInput: typeof import('ant-design-vue/es')['Input']
+    AInputNumber: typeof import('ant-design-vue/es')['InputNumber']
     AInputPassword: typeof import('ant-design-vue/es')['InputPassword']
     ALayout: typeof import('ant-design-vue/es')['Layout']
     ALayoutContent: typeof import('ant-design-vue/es')['LayoutContent']
diff --git a/front/src/App.vue b/front/src/App.vue
index 53041e8..bf3d117 100644
--- a/front/src/App.vue
+++ b/front/src/App.vue
@@ -16,6 +16,6 @@ main {
     display: flex;
     justify-content: center;
     align-items: center;
-    height: 100vh;
+    height: 80vh;
 }
 </style>
\ No newline at end of file
diff --git a/front/src/components/main/Header.vue b/front/src/components/main/Header.vue
index 04f4380..e614b8b 100644
--- a/front/src/components/main/Header.vue
+++ b/front/src/components/main/Header.vue
@@ -31,7 +31,7 @@ function logout() {
                 name="logout" 
                 @click="logout()" 
                 danger
-                style="margin-left: 10px"
+                style="margin-left: 30px"
             >
                 Выйти
             </a-button>
@@ -52,7 +52,7 @@ function logout() {
     justify-content: left;
 }
 .base-nav a {
-    margin-left: 10px;
+    margin-left: 30px;
 }
 
 </style>
diff --git a/front/src/components/pages/Login.vue b/front/src/components/pages/Login.vue
index 905b60a..b8eab92 100644
--- a/front/src/components/pages/Login.vue
+++ b/front/src/components/pages/Login.vue
@@ -34,7 +34,7 @@
                 Войти
             </a-button>
             Или
-            <RouterLink to="/register">зарегестрироваться</RouterLink>
+            <RouterLink :to="{ name: 'signup' }">создать аккаунт</RouterLink>
         </a-form-item>
     </a-form>
 </template>
diff --git a/front/src/components/pages/SignUp.vue b/front/src/components/pages/SignUp.vue
index e69de29..4adbbc8 100644
--- a/front/src/components/pages/SignUp.vue
+++ b/front/src/components/pages/SignUp.vue
@@ -0,0 +1,86 @@
+<template>
+    <a-form
+        :model="formState"
+        name="signup"
+        class="signup-form"
+        @finish="onFinish"
+        @finishFailed="onFinishFailed"
+    >
+        <a-form-item
+            label="Логин"
+            name="name"
+            :rules="[{ required: true, message: 'Пожалуйста, введите свой логин' }]"
+        >
+            <a-input v-model:value="formState.name">
+                <template #prefix>
+                    <UserOutlined class="site-form-item-icon" />
+                </template>
+            </a-input>
+        </a-form-item>
+
+        <a-form-item
+            label="Пароль"
+            name="password"
+            :rules="[{ required: true, message: 'Пароль тоже нужен!' }]"
+        >
+            <a-input-password v-model:value="formState.password">
+                <template #prefix>
+                    <LockOutlined class="site-form-item-icon" />
+                </template>
+            </a-input-password>
+        </a-form-item>
+
+        <a-form-item
+            label="Баланс"
+            name="balance"
+            :rules="[{ required: true, message: 'Пожалуйста, введите свой баланс' }]"
+        >
+            <a-input-number prefix="₽" v-model:value="formState.balance" />
+        </a-form-item>
+
+        <a-form-item>
+            <a-button :disabled="disabled" type="primary" html-type="submit" class="signup-form-button">
+                Создать
+            </a-button>
+            Или
+            <RouterLink :to="{ name: 'login' }">войти в свой аккаунт</RouterLink>
+        </a-form-item>
+    </a-form>
+</template>
+<script lang="ts" setup>
+import { reactive, computed, inject } from 'vue';
+import { UserOutlined, LockOutlined } from '@ant-design/icons-vue';
+import { UserDto } from '../../core/api/data-contracts';
+import { RouterLink } from 'vue-router';
+import { AuthService } from '../../core/services/auth-service';
+import router from '../../router';
+
+const formState = reactive<UserDto>({
+    name: '',
+    password: '',
+    balance: 0
+});
+const authService = inject(typeof(AuthService)) as AuthService;
+
+// Логика формы
+const onFinish = async (values: any) => {
+    console.log('Success:', values);
+    await authService.register(formState);
+    router.push({ name: 'home' });
+};
+const onFinishFailed = (errorInfo: any) => {
+    console.log('Failed:', errorInfo);
+};
+const disabled = computed(() => {
+    return !(formState.name && formState.password && formState.balance);
+});
+</script>
+<style scoped>
+.signup-form {
+    max-width: 300px;
+}
+
+.signup-form-button {
+    width: 100%;
+}
+</style>
\ No newline at end of file
diff --git a/front/src/router.ts b/front/src/router.ts
index 435c0d0..5da31ed 100644
--- a/front/src/router.ts
+++ b/front/src/router.ts
@@ -12,6 +12,11 @@ export default createRouter({
             path: '/login',
             name: 'login',
             component: () => import('./components/pages/Login.vue'),
+        },
+        {
+            path: '/signup',
+            name: 'signup',
+            component: () => import('./components/pages/SignUp.vue'),
         }
     ],
 })