add: страница регистрации

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']

front/src/App.vue

@@ -16,6 +16,6 @@ main {
     display: flex;
     justify-content: center;
     align-items: center;
-    height: 100vh;
+    height: 80vh;
 }
 </style>

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>

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>

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>

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