From 76e6d5183f9452b9f8061a72d393676c3a23c12d Mon Sep 17 00:00:00 2001
From: L-Nafaryus <l.nafaryus@gmail.com>
Date: Fri, 29 Mar 2024 00:13:26 +0500
Subject: [PATCH] frontend: sign up, logout, basic preferencies

---
 crates/frontend/package-lock.json             |  51 +++++++++
 crates/frontend/package.json                  |   1 +
 .../frontend/src/components/DropdownItem.vue  |   0
 .../frontend/src/components/DropdownMenu.vue  |  22 ++++
 crates/frontend/src/components/Error.vue      |   5 -
 .../frontend/src/components/error/Error.vue   |   5 +
 .../frontend/src/directives/click-outside.ts  |  14 +++
 crates/frontend/src/main.ts                   |  13 ++-
 crates/frontend/src/router.ts                 |  20 +++-
 crates/frontend/src/services/user.ts          |   8 ++
 crates/frontend/src/stores/preferencies.ts    |   5 +
 crates/frontend/src/stores/user.ts            |   5 +
 crates/frontend/src/views/Base.vue            |  68 +++++++++--
 crates/frontend/src/views/SignIn.vue          |  10 --
 crates/frontend/src/views/User.vue            |  54 ---------
 .../views/{Error.vue => admin/Settings.vue}   |   5 +-
 crates/frontend/src/views/error/NotFound.vue  |  10 ++
 .../frontend/src/views/user/Preferencies.vue  |  38 ++++++
 crates/frontend/src/views/user/Profile.vue    |  53 +++++++++
 .../Login.vue => views/user/SignIn.vue}       |  34 ++++--
 crates/frontend/src/views/user/SignUp.vue     |  61 ++++++++++
 .../src/views/user/preferencies/Account.vue   | 108 ++++++++++++++++++
 .../src/views/user/preferencies/Profile.vue   |  67 +++++++++++
 src/api/v1/errors.rs                          |  15 ++-
 src/api/v1/user.rs                            |   8 +-
 25 files changed, 571 insertions(+), 109 deletions(-)
 create mode 100644 crates/frontend/src/components/DropdownItem.vue
 create mode 100644 crates/frontend/src/components/DropdownMenu.vue
 delete mode 100644 crates/frontend/src/components/Error.vue
 create mode 100644 crates/frontend/src/components/error/Error.vue
 create mode 100644 crates/frontend/src/directives/click-outside.ts
 create mode 100644 crates/frontend/src/stores/preferencies.ts
 create mode 100644 crates/frontend/src/stores/user.ts
 delete mode 100644 crates/frontend/src/views/SignIn.vue
 delete mode 100644 crates/frontend/src/views/User.vue
 rename crates/frontend/src/views/{Error.vue => admin/Settings.vue} (61%)
 create mode 100644 crates/frontend/src/views/error/NotFound.vue
 create mode 100644 crates/frontend/src/views/user/Preferencies.vue
 create mode 100644 crates/frontend/src/views/user/Profile.vue
 rename crates/frontend/src/{components/Login.vue => views/user/SignIn.vue} (63%)
 create mode 100644 crates/frontend/src/views/user/SignUp.vue
 create mode 100644 crates/frontend/src/views/user/preferencies/Account.vue
 create mode 100644 crates/frontend/src/views/user/preferencies/Profile.vue

diff --git a/crates/frontend/package-lock.json b/crates/frontend/package-lock.json
index d2886f0..f372446 100644
--- a/crates/frontend/package-lock.json
+++ b/crates/frontend/package-lock.json
@@ -10,6 +10,7 @@
             "dependencies": {
                 "autoprefixer": "^10.4.18",
                 "axios": "^1.6.8",
+                "pinia": "^2.1.7",
                 "postcss": "^8.4.35",
                 "tailwindcss": "^3.4.1",
                 "vue": "^3.3.11",
@@ -2468,6 +2469,56 @@
                 "node": ">=0.10.0"
             }
         },
+        "node_modules/pinia": {
+            "version": "2.1.7",
+            "resolved": "https://registry.npmjs.org/pinia/-/pinia-2.1.7.tgz",
+            "integrity": "sha512-+C2AHFtcFqjPih0zpYuvof37SFxMQ7OEG2zV9jRI12i9BOy3YQVAHwdKtyyc8pDcDyIc33WCIsZaCFWU7WWxGQ==",
+            "dependencies": {
+                "@vue/devtools-api": "^6.5.0",
+                "vue-demi": ">=0.14.5"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/posva"
+            },
+            "peerDependencies": {
+                "@vue/composition-api": "^1.4.0",
+                "typescript": ">=4.4.4",
+                "vue": "^2.6.14 || ^3.3.0"
+            },
+            "peerDependenciesMeta": {
+                "@vue/composition-api": {
+                    "optional": true
+                },
+                "typescript": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/pinia/node_modules/vue-demi": {
+            "version": "0.14.7",
+            "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.7.tgz",
+            "integrity": "sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==",
+            "hasInstallScript": true,
+            "bin": {
+                "vue-demi-fix": "bin/vue-demi-fix.js",
+                "vue-demi-switch": "bin/vue-demi-switch.js"
+            },
+            "engines": {
+                "node": ">=12"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/antfu"
+            },
+            "peerDependencies": {
+                "@vue/composition-api": "^1.0.0-rc.1",
+                "vue": "^3.0.0-0 || ^2.6.0"
+            },
+            "peerDependenciesMeta": {
+                "@vue/composition-api": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/pirates": {
             "version": "4.0.6",
             "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.6.tgz",
diff --git a/crates/frontend/package.json b/crates/frontend/package.json
index d7f387d..24e1970 100644
--- a/crates/frontend/package.json
+++ b/crates/frontend/package.json
@@ -13,6 +13,7 @@
     "dependencies": {
         "autoprefixer": "^10.4.18",
         "axios": "^1.6.8",
+        "pinia": "^2.1.7",
         "postcss": "^8.4.35",
         "tailwindcss": "^3.4.1",
         "vue": "^3.3.11",
diff --git a/crates/frontend/src/components/DropdownItem.vue b/crates/frontend/src/components/DropdownItem.vue
new file mode 100644
index 0000000..e69de29
diff --git a/crates/frontend/src/components/DropdownMenu.vue b/crates/frontend/src/components/DropdownMenu.vue
new file mode 100644
index 0000000..06dcfac
--- /dev/null
+++ b/crates/frontend/src/components/DropdownMenu.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { ref } from "vue";
+
+const active = ref<bool>(false);
+
+function activate() {
+    active.value = !active.value;
+}
+
+function deactivate() {
+    active.value = false;
+}
+</script>
+
+<template>
+    <div @click="activate" v-click-outside="deactivate">
+        <slot name="button"></slot>
+        <div v-if="active">
+            <slot name="content"></slot>
+        </div>
+    </div>
+</template>
diff --git a/crates/frontend/src/components/Error.vue b/crates/frontend/src/components/Error.vue
deleted file mode 100644
index 730c1af..0000000
--- a/crates/frontend/src/components/Error.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-    <h1>
-        <slot></slot>
-    </h1>
-</template>
diff --git a/crates/frontend/src/components/error/Error.vue b/crates/frontend/src/components/error/Error.vue
new file mode 100644
index 0000000..f5c1daf
--- /dev/null
+++ b/crates/frontend/src/components/error/Error.vue
@@ -0,0 +1,5 @@
+<template>
+    <h1 class="text-center pt-3 pb-3 bg-orange-900 rounded border border-orange-700">
+        <slot></slot>
+    </h1>
+</template>
diff --git a/crates/frontend/src/directives/click-outside.ts b/crates/frontend/src/directives/click-outside.ts
new file mode 100644
index 0000000..355621d
--- /dev/null
+++ b/crates/frontend/src/directives/click-outside.ts
@@ -0,0 +1,14 @@
+export const click_outside = {
+    beforeMount: function(element: any, binding: any) {
+        element.clickOutsideEvent = function(event: any) {
+            if (!(element == event.target || element.contains(event.target))) {
+                binding.value(event);
+            }
+        };
+
+        document.body.addEventListener("click", element.clickOutsideEvent);
+    },
+    unmounted: function(element: any) {
+        document.body.removeEventListener("click", element.clickOutsideEvent);
+    }
+}
diff --git a/crates/frontend/src/main.ts b/crates/frontend/src/main.ts
index 46e69d3..6f56389 100644
--- a/crates/frontend/src/main.ts
+++ b/crates/frontend/src/main.ts
@@ -1,10 +1,15 @@
-import { createApp } from 'vue';
-import App from '@/App.vue';
-import router from '@/router';
+import App from "@/App.vue";
 
-import '@/assets/style.css';
+import { createApp } from "vue";
+import { createPinia } from "pinia";
+
+import router from "@/router";
+import { click_outside } from "@/directives/click-outside";
+import "@/assets/style.css";
 
 createApp(App)
+    .use(createPinia())
     .use(router)
+    .directive("click-outside", click_outside)
     .mount('#app');
 
diff --git a/crates/frontend/src/router.ts b/crates/frontend/src/router.ts
index 28b11c5..87534a0 100644
--- a/crates/frontend/src/router.ts
+++ b/crates/frontend/src/router.ts
@@ -3,10 +3,22 @@ import { createRouter, createWebHistory } from "vue-router";
 const router = createRouter({
     history: createWebHistory(),
     routes: [
-        { path: "/", component: () => import("@/views/Home.vue") },
-        { path: "/user/login", component: () => import("@/views/SignIn.vue") },
-        { path: "/:user", name: "User", component: () => import("@/views/User.vue") },
-        { path: "/:pathMatch(.*)*", component: () => import("@/views/Error.vue") }
+        { path: "/", name: "Home", component: () => import("@/views/Home.vue") },
+
+        { path: "/user/login", name: "SignIn", component: () => import("@/views/user/SignIn.vue") },
+        { path: "/user/register", name: "SignUp", component: () => import("@/views/user/SignUp.vue") },
+        {
+            path: "/user/preferencies", name: "Preferencies", redirect: { name: "Preferencies-Profile" }, component: () => import("@/views/user/Preferencies.vue"), children: [
+                { path: "profile", name: "Preferencies-Profile", component: () => import("@/views/user/preferencies/Profile.vue") },
+                { path: "account", name: "Preferencies-Account", component: () => import("@/views/user/preferencies/Account.vue") },
+            ]
+        },
+
+        { path: "/:user", name: "Profile", component: () => import("@/views/user/Profile.vue") },
+
+        { path: "/admin/settings", name: "Settings", component: () => import("@/views/admin/Settings.vue") },
+
+        { path: "/:pathMatch(.*)*", name: "NotFound", component: () => import("@/views/error/NotFound.vue") }
     ]
 });
 
diff --git a/crates/frontend/src/services/user.ts b/crates/frontend/src/services/user.ts
index 03d3351..e76a79e 100644
--- a/crates/frontend/src/services/user.ts
+++ b/crates/frontend/src/services/user.ts
@@ -1,10 +1,18 @@
 import api_client from "@/api-client";
 
 class User {
+    async register(login: string, email: string, password: string): Promise<JSON> {
+        return await api_client.post("/user/register", JSON.stringify({ login: login, email: email, password: password }));
+    }
+
     async login(email: string, password: string): Promise<JSON> {
         return await api_client.post("/user/login", JSON.stringify({ email: email, password: password }));
     }
 
+    async logout(): Promise<JSON> {
+        return await api_client.get("/user/logout");
+    }
+
     async get(login: any): Promise<JSON> {
         return await api_client.get(`/user/${login}`);
     }
diff --git a/crates/frontend/src/stores/preferencies.ts b/crates/frontend/src/stores/preferencies.ts
new file mode 100644
index 0000000..bd60a69
--- /dev/null
+++ b/crates/frontend/src/stores/preferencies.ts
@@ -0,0 +1,5 @@
+import { defineStore } from "pinia";
+
+export const usePreferenciesStore = defineStore("preferencies", {
+    state: () => ({ current_tab: null }),
+});
diff --git a/crates/frontend/src/stores/user.ts b/crates/frontend/src/stores/user.ts
new file mode 100644
index 0000000..2877855
--- /dev/null
+++ b/crates/frontend/src/stores/user.ts
@@ -0,0 +1,5 @@
+import { defineStore } from "pinia";
+
+export const useUserStore = defineStore("user", {
+    state: () => ({ login: null }),
+});
diff --git a/crates/frontend/src/views/Base.vue b/crates/frontend/src/views/Base.vue
index 8967a7f..84224bb 100644
--- a/crates/frontend/src/views/Base.vue
+++ b/crates/frontend/src/views/Base.vue
@@ -1,10 +1,17 @@
 <script setup lang="ts">
-import Meerkat from '@/components/icons/Meerkat.vue';
-import NavBar from '@/components/NavBar.vue';
+import Meerkat from "@/components/icons/Meerkat.vue";
+import NavBar from "@/components/NavBar.vue";
+import DropdownMenu from "@/components/DropdownMenu.vue";
+
+import { ref, onMounted } from "vue";
+
+import router from "@/router";
 import User from "@/services/user";
-import { ref, onMounted } from 'vue';
+import { useUserStore } from "@/stores/user";
 
 const user = ref(null);
+const userStore = useUserStore();
+const error = ref<string>(null);
 
 onMounted(async () => {
     await User.current()
@@ -13,13 +20,31 @@ onMounted(async () => {
                 return Promise.reject(response.data && response.data.message || response.status);
             };
             if (response.data.hasOwnProperty("user")) {
-                user.value = response.data.user;
+                userStore.login = response.data.user.login;
             };
         })
+        .catch(e => {
+            console.log(`${e.name}[${e.code}]: ${e.message}`);
+        });
+});
+
+async function user_logout() {
+    await User.logout()
+        .then(async response => {
+            error.value = null;
+
+            if (response.status != 200) {
+                return Promise.reject(response.data && response.data.message || response.status);
+            };
+
+            userStore.login = null;
+            router.push({ path: "/" });
+        })
         .catch(e => {
             console.error("Error occured:", e);
         });
-});
+}
+
 </script>
 
 <template>
@@ -29,10 +54,35 @@ onMounted(async () => {
                 <Meerkat />
             </template>
             <template #right>
-                <RouterLink v-if="user" class="flex min-w-9 min-h-9 pt-1 pb-1 pl-3 pr-3 rounded hover:bg-zinc-600"
-                    :to="{ name: 'User', params: { user: user.login } }">{{ user.name }}</RouterLink>
-                <RouterLink v-if="!user" class="flex min-w-9 min-h-9 pt-1 pb-1 pl-3 pr-3 rounded hover:bg-zinc-600"
-                    to="/user/login">
+                <DropdownMenu v-if="userStore.login">
+                    <template #button>
+                        <span
+                            class="flex min-w-9 min-h-9 pt-1 pb-1 pl-3 pr-3 rounded hover:bg-zinc-600 cursor-pointer">{{
+                    userStore.login }}</span>
+                    </template>
+                    <template #content>
+                        <div
+                            class="absolute flex flex-col left-auto right-0 mt-4 bg-zinc-700 border rounded border-zinc-500 mr-3">
+                            <RouterLink :to="{ name: 'Profile', params: { user: userStore.login } }"
+                                class="flex min-w-7 pl-5 pr-5 pt-1 pb-1 hover:bg-zinc-600">
+                                Profile</RouterLink>
+                            <RouterLink :to="{ name: 'Preferencies' }"
+                                class="flex min-w-7 pl-5 pr-5 pt-1 pb-1 hover:bg-zinc-600">
+                                Preferencies</RouterLink>
+                            <div class="border-t border-zinc-500 ml-0 mr-0"></div>
+                            <RouterLink :to="{ name: 'Settings' }"
+                                class="flex min-w-7 pl-5 pr-5 pt-1 pb-1 hover:bg-zinc-600">
+                                Settings</RouterLink>
+                            <div class="border-t border-zinc-500 ml-0 mr-0"></div>
+                            <div @click="user_logout"
+                                class="flex min-w-7 pl-5 pr-5 pt-1 pb-1 hover:bg-zinc-600 cursor-pointer">
+                                Sign Out</div>
+                        </div>
+                    </template>
+                </DropdownMenu>
+
+                <RouterLink v-if="!userStore.login"
+                    class="flex min-w-9 min-h-9 pt-1 pb-1 pl-3 pr-3 rounded hover:bg-zinc-600" to="/user/login">
                     Sign In</RouterLink>
             </template>
         </NavBar>
diff --git a/crates/frontend/src/views/SignIn.vue b/crates/frontend/src/views/SignIn.vue
deleted file mode 100644
index cce5bcb..0000000
--- a/crates/frontend/src/views/SignIn.vue
+++ /dev/null
@@ -1,10 +0,0 @@
-<script setup lang="ts">
-import Base from '@/views/Base.vue';
-import Login from '@/components/Login.vue';
-</script>
-
-<template>
-    <Base>
-    <Login />
-    </Base>
-</template>
diff --git a/crates/frontend/src/views/User.vue b/crates/frontend/src/views/User.vue
deleted file mode 100644
index 35d8a7b..0000000
--- a/crates/frontend/src/views/User.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<script setup lang="ts">
-import Base from '@/views/Base.vue';
-import Error from "@/components/Error.vue";
-import { ref, onMounted, watch } from 'vue';
-import { onBeforeRouteUpdate, useRoute } from 'vue-router'
-import User from "@/services/user";
-
-const route = useRoute();
-const name = ref(null);
-const error = ref(null);
-
-onMounted(async () => {
-    await User.get(route.params.user)
-        .then(async response => {
-            if (response.status != 200) {
-                return Promise.reject(response.data && response.data.message || response.status);
-            };
-            if (response.data.hasOwnProperty("user")) {
-                name.value = response.data.user.name;
-            } else {
-                error.value = "404 Not Found";
-            };
-        })
-        .catch(e => {
-            console.error("Error occured:", e);
-        });
-});
-
-watch(() => route.params.user, async (to, from) => {
-    await User.get(route.params.user)
-        .then(async response => {
-            if (response.status != 200) {
-                return Promise.reject(response.data && response.data.message || response.status);
-            };
-            if (response.data.hasOwnProperty("user")) {
-                name.value = response.data.user.name;
-            } else {
-                error.value = "404 Not Found";
-            };
-        })
-        .catch(e => {
-            console.error("Error occured:", e);
-        });
-});
-</script>
-
-<template>
-    <Base>
-    <div v-if="error">
-        <Error>{{ error }}</Error>
-    </div>
-    <p v-else>{{ name }}</p>
-    </Base>
-</template>
diff --git a/crates/frontend/src/views/Error.vue b/crates/frontend/src/views/admin/Settings.vue
similarity index 61%
rename from crates/frontend/src/views/Error.vue
rename to crates/frontend/src/views/admin/Settings.vue
index c6e218b..21c131e 100644
--- a/crates/frontend/src/views/Error.vue
+++ b/crates/frontend/src/views/admin/Settings.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import Base from "@/views/Base.vue";
-import Error from "@/components/Error.vue";
 </script>
 
 <template>
     <Base>
-    <Error>Not Found</Error>
+    <div>
+
+    </div>
     </Base>
 </template>
diff --git a/crates/frontend/src/views/error/NotFound.vue b/crates/frontend/src/views/error/NotFound.vue
new file mode 100644
index 0000000..78f9921
--- /dev/null
+++ b/crates/frontend/src/views/error/NotFound.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import Base from "@/views/Base.vue";
+import Error from "@/components/error/Error.vue";
+</script>
+
+<template>
+    <Base>
+    <Error>404 Not Found</Error>
+    </Base>
+</template>
diff --git a/crates/frontend/src/views/user/Preferencies.vue b/crates/frontend/src/views/user/Preferencies.vue
new file mode 100644
index 0000000..072da86
--- /dev/null
+++ b/crates/frontend/src/views/user/Preferencies.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import Base from "@/views/Base.vue";
+
+import { ref, onMounted, watch, getCurrentInstance } from "vue";
+
+import { usePreferenciesStore } from "@/stores/preferencies.ts";
+
+const preferenciesStore = usePreferenciesStore();
+
+</script>
+
+<template>
+    <Base>
+    <div class="flex gap-4 mt-4 ml-auto mr-auto content ">
+        <Router-View />
+        <div>
+            <div class="border rounded border-zinc-500 flex-col w-64">
+                <h1 class="pl-5 pr-5 pt-2 pb-2">User Preferencies</h1>
+                <RouterLink :to="{ name: 'Preferencies-Profile' }"
+                    :class="{ 'bg-zinc-600': preferenciesStore.current_tab === 0 }"
+                    class="flex min-w-7 pl-5 pr-5 pt-2 pb-2 hover:bg-zinc-600 border-t border-zinc-500">
+                    Profile</RouterLink>
+                <RouterLink :to="{ name: 'Preferencies-Account' }"
+                    :class="{ 'bg-zinc-600': preferenciesStore.current_tab === 1 }"
+                    class="flex min-w-7 pl-5 pr-5 pt-2 pb-2 hover:bg-zinc-600 border-t border-zinc-500">
+                    Account</RouterLink>
+            </div>
+        </div>
+    </div>
+    </Base>
+</template>
+
+<style>
+.content {
+    width: 1280px;
+    max-width: calc(100% - 64px);
+}
+</style>
diff --git a/crates/frontend/src/views/user/Profile.vue b/crates/frontend/src/views/user/Profile.vue
new file mode 100644
index 0000000..a305f1d
--- /dev/null
+++ b/crates/frontend/src/views/user/Profile.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import Base from "@/views/Base.vue";
+import Error from "@/components/error/Error.vue";
+
+import { ref, onMounted, watch, getCurrentInstance } from "vue";
+import { onBeforeRouteUpdate, useRoute } from "vue-router"
+
+import User from "@/services/user";
+import { useUserStore } from "@/stores/user";
+
+const route = useRoute();
+const name = ref<string>(null);
+const userStore = useUserStore();
+const error = ref<string>(null);
+
+async function user_profile(login: string) {
+    await User.get(login)
+        .then(async response => {
+            error.value = null;
+
+            if (response.status != 200) {
+                return Promise.reject(response.data && response.data.message || response.status);
+            };
+
+            if (response.data.hasOwnProperty("user")) {
+                name.value = response.data.user.name;
+            } else {
+                error.value = "404 Not Found";
+            };
+
+        })
+        .catch(e => {
+            console.error("Error occured:", e);
+        });
+};
+
+onMounted(async () => {
+    await user_profile(route.params.user);
+});
+
+watch(route, async (to, from) => {
+    await user_profile(to.params.user);
+});
+</script>
+
+<template>
+    <Base>
+    <div class="ml-auto mr-auto w-1/2 pt-5 pb-5">
+        <Error v-if="error">{{ error }}</Error>
+        <p v-else>{{ name }}</p>
+    </div>
+    </Base>
+</template>
diff --git a/crates/frontend/src/components/Login.vue b/crates/frontend/src/views/user/SignIn.vue
similarity index 63%
rename from crates/frontend/src/components/Login.vue
rename to crates/frontend/src/views/user/SignIn.vue
index f99387a..a45b819 100644
--- a/crates/frontend/src/components/Login.vue
+++ b/crates/frontend/src/views/user/SignIn.vue
@@ -1,11 +1,18 @@
 <script setup lang="ts">
+import Base from "@/views/Base.vue";
+import Error from "@/components/error/Error.vue";
+
 import { ref } from "vue";
+
 import router from "@/router";
 import User from "@/services/user";
+import { useUserStore } from "@/stores/user";
 
 const email = defineModel("email");
 const password = defineModel("password");
-const errorMessage = ref(null);
+
+const error = ref(null);
+const userStore = useUserStore();
 
 async function login() {
     await User.login(email.value, password.value)
@@ -14,17 +21,18 @@ async function login() {
                 return Promise.reject(response.data && response.data.message || response.status);
             }
 
-            const login = response.data.user.login;
-            router.push({ path: `/${login}` });
+            userStore.login = response.data.user.login;
+            router.push({ path: `/${userStore.login}` });
         })
-        .catch(error => {
-            errorMessage.value = error;
-            console.error(error);
+        .catch(e => {
+            error.value = e;
+            console.log(`${e.name}[${e.code}]: ${e.message}`);
         });
 };
 </script>
 
 <template>
+    <Base>
     <div class="ml-auto mr-auto w-1/2 pt-5 pb-5">
         <h4 class="text-center pt-5 pb-5 border-b border-zinc-500">Sign In</h4>
         <form @submit.prevent class="m-auto pt-5 pb-5">
@@ -40,11 +48,17 @@ async function login() {
             </div>
             <div class="mb-5 ml-auto mr-auto">
                 <label class="text-right w-64 inline-block mr-5"></label>
-                <button @click="login" class="rounded bg-zinc-500 hover:bg-zinc-400 pb-2 pt-2 pl-5 pr-5">Sign
-                    In</button>
+                <div class="flex justify-between items-center w-1/2 m-auto">
+                    <button @click="login" class="rounded bg-zinc-500 hover:bg-zinc-400 pb-2 pt-2 pl-5 pr-5">Sign
+                        In</button>
+                    <p>or</p>
+                    <button @click="$router.push('/user/register')"
+                        class="rounded bg-zinc-500 hover:bg-zinc-400 pb-2 pt-2 pl-5 pr-5">Sign
+                        Up</button>
+                </div>
             </div>
         </form>
-        <p v-if="errorMessage" class="text-center pt-3 pb-3 bg-orange-900 rounded border border-orange-700">{{
-                    errorMessage }}</p>
+        <Error v-if="error">{{ error }}</Error>
     </div>
+    </Base>
 </template>
diff --git a/crates/frontend/src/views/user/SignUp.vue b/crates/frontend/src/views/user/SignUp.vue
new file mode 100644
index 0000000..0586683
--- /dev/null
+++ b/crates/frontend/src/views/user/SignUp.vue
@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import Base from "@/views/Base.vue";
+import Error from "@/components/error/Error.vue";
+
+import { ref } from "vue";
+
+import router from "@/router";
+import User from "@/services/user";
+
+const login = defineModel("login");
+const email = defineModel("email");
+const password = defineModel("password");
+
+const error = ref(null);
+
+async function register() {
+    await User.register(login.value, email.value, password.value)
+        .then(async response => {
+            if (response.status != 200) {
+                return Promise.reject(response.data && response.data.message || response.status);
+            }
+
+            router.push({ path: "/user/login" });
+        })
+        .catch(e => {
+            error.value = e;
+            console.log(`${e.name}[${e.code}]: ${e.message}`);
+        });
+};
+</script>
+
+<template>
+    <Base>
+    <div class="ml-auto mr-auto w-1/2 pt-5 pb-5">
+        <h4 class="text-center pt-5 pb-5 border-b border-zinc-500">Sign Up</h4>
+        <form @submit.prevent class="m-auto pt-5 pb-5">
+            <div class="mb-5 ml-auto mr-auto">
+                <label for="login" class="text-right w-64 inline-block mr-5">Login</label>
+                <input v-model="login" type="" placeholder="" name="login" required
+                    class="w-1/2 bg-zinc-800 pl-3 pr-3 pt-2 pb-2 outline-none rounded border border-zinc-500 hover:border-zinc-400 focus:border-green-800">
+            </div>
+            <div class="mb-5 ml-auto mr-auto">
+                <label for="email" class="text-right w-64 inline-block mr-5">Email Address</label>
+                <input v-model="email" type="email" placeholder="" name="email" required
+                    class="w-1/2 bg-zinc-800 pl-3 pr-3 pt-2 pb-2 outline-none rounded border border-zinc-500 hover:border-zinc-400 focus:border-green-800">
+            </div>
+            <div class="mb-5 ml-auto mr-auto">
+                <label for="password" class="text-right w-64 inline-block mr-5">Password</label>
+                <input v-model="password" placeholder="" type="password" name="password" required
+                    class="w-1/2 bg-zinc-800 pl-3 pr-3 pt-2 pb-2 outline-none rounded border border-zinc-500 hover:border-zinc-400 focus:border-green-800">
+            </div>
+            <div class="mb-5 ml-auto mr-auto">
+                <label class="text-right w-64 inline-block mr-5"></label>
+                <button @click="register" class="rounded bg-zinc-500 hover:bg-zinc-400 pb-2 pt-2 pl-5 pr-5">Sign
+                    Up</button>
+            </div>
+        </form>
+        <Error v-if="error">{{ error }}</Error>
+    </div>
+    </Base>
+</template>
diff --git a/crates/frontend/src/views/user/preferencies/Account.vue b/crates/frontend/src/views/user/preferencies/Account.vue
new file mode 100644
index 0000000..fec525a
--- /dev/null
+++ b/crates/frontend/src/views/user/preferencies/Account.vue
@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import Base from "@/views/Base.vue";
+
+import { ref, onMounted, watch, getCurrentInstance } from "vue";
+
+import router from "@/router";
+import User from "@/services/user";
+import { useUserStore } from "@/stores/user";
+import { usePreferenciesStore } from "@/stores/preferencies.ts";
+
+const password = defineModel("password");
+const new_password = defineModel("new-password");
+const confirm_new_password = defineModel("confirm-new-password");
+
+const email = defineModel("email");
+const new_email = defineModel("new-email");
+
+const confirm_password = defineModel("confirm-password");
+
+const error = ref(null);
+const userStore = useUserStore();
+const preferenciesStore = usePreferenciesStore();
+
+onMounted(async () => {
+    preferenciesStore.current_tab = 1;
+
+    !userStore.login ? router.push({ name: "SignIn" }) : await User.current()
+        .then(async response => {
+            error.value = null;
+
+            if (response.status != 200) {
+                return Promise.reject(response.data && response.data.message || response.status);
+            };
+
+            email.value = response.data.user.email;
+        })
+        .catch(e => {
+            error.value = e;
+            console.log(`${e.name}[${e.code}]: ${e.message}`);
+        });
+});
+</script>
+
+<template>
+    <div class="flex flex-col gap-4 ml-auto mr-auto w-full">
+        <div class="border rounded border-zinc-500 w-full flex-col">
+            <h1 class="pl-5 pr-5 pt-2 pb-2">Password</h1>
+            <div class="border-t border-zinc-500 p-5">
+                <form @submit.prevent class="">
+                    <div>
+                        <label class="block mb-2" for="password">Current password</label>
+                        <input v-model="password" name="password" type="password"
+                            class="w-full bg-zinc-800 pl-3 pr-3 pt-2 pb-2 mb-4 outline-none rounded border border-zinc-500 hover:border-zinc-400 focus:border-green-800">
+                    </div>
+                    <div>
+                        <label class="block mb-2" for="new-password">New password</label>
+                        <input v-model="new_password" name="new-password" type="password"
+                            class="w-full bg-zinc-800 pl-3 pr-3 pt-2 pb-2 mb-4 outline-none rounded border border-zinc-500 hover:border-zinc-400 focus:border-green-800">
+                    </div>
+                    <div>
+                        <label class="block mb-2" for="confirm-new-password">Confirm new password</label>
+                        <input v-model="confirm_new_password" name="confirm-new-password" type="password"
+                            class="w-full bg-zinc-800 pl-3 pr-3 pt-2 pb-2 mb-4 outline-none rounded border border-zinc-500 hover:border-zinc-400 focus:border-green-800">
+                    </div>
+                    <div class="border-t border-zinc-500 ml-0 mr-0 mt-3 mb-3"></div>
+                    <button class="rounded bg-zinc-500 hover:bg-zinc-400 pb-2 pt-2 pl-5 pr-5 ml-auto mr-0 block">Update
+                        password</button>
+                </form>
+            </div>
+        </div>
+
+        <div class="border rounded border-zinc-500 w-full flex-col">
+            <h1 class="pl-5 pr-5 pt-2 pb-2">Email</h1>
+            <div class="border-t border-zinc-500 p-5">
+                <form @submit.prevent class="">
+                    <div>
+                        <label class="block mb-2" for="email">Email</label>
+                        <strong class="block w-full mb-4">{{ email }}</strong>
+                    </div>
+                    <div>
+                        <label class="block mb-2" for="new-email">New email</label>
+                        <input v-model="new_email" name="new-email" type="email"
+                            class="w-full bg-zinc-800 pl-3 pr-3 pt-2 pb-2 mb-4 outline-none rounded border border-zinc-500 hover:border-zinc-400 focus:border-green-800">
+                    </div>
+                    <div class="border-t border-zinc-500 ml-0 mr-0 mt-3 mb-3"></div>
+                    <button class="rounded bg-zinc-500 hover:bg-zinc-400 pb-2 pt-2 pl-5 pr-5 ml-auto mr-0 block">Update
+                        email</button>
+                </form>
+            </div>
+        </div>
+
+        <div class="border rounded border-red-500 w-full flex-col">
+            <h1 class="pl-5 pr-5 pt-2 pb-2">Delete account</h1>
+            <div class="border-t border-red-500 p-5">
+                <form @submit.prevent class="">
+                    <div>
+                        <label class="block mb-2" for="confirm-password">Password</label>
+                        <input v-model="confirm_password" name="confirm-password" type="password"
+                            class="w-full bg-zinc-800 pl-3 pr-3 pt-2 pb-2 mb-4 outline-none rounded border border-zinc-500 hover:border-zinc-400 focus:border-green-800">
+                    </div>
+                    <div class="border-t border-zinc-500 ml-0 mr-0 mt-3 mb-3"></div>
+                    <button
+                        class="rounded bg-red-500 hover:bg-red-400 pb-2 pt-2 pl-5 pr-5 ml-auto mr-0 block">Confirm</button>
+                </form>
+            </div>
+        </div>
+    </div>
+</template>
diff --git a/crates/frontend/src/views/user/preferencies/Profile.vue b/crates/frontend/src/views/user/preferencies/Profile.vue
new file mode 100644
index 0000000..9214e37
--- /dev/null
+++ b/crates/frontend/src/views/user/preferencies/Profile.vue
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import Base from "@/views/Base.vue";
+
+import { ref, onMounted, watch, getCurrentInstance } from "vue";
+
+import router from "@/router";
+import User from "@/services/user";
+import { useUserStore } from "@/stores/user";
+import { usePreferenciesStore } from "@/stores/preferencies.ts";
+
+const login = defineModel("login");
+const name = defineModel("name");
+const email = defineModel("email");
+
+const error = ref(null);
+const userStore = useUserStore();
+const preferenciesStore = usePreferenciesStore();
+
+onMounted(async () => {
+    preferenciesStore.current_tab = 0;
+
+    !userStore.login ? router.push({ name: "SignIn" }) : await User.current()
+        .then(async response => {
+            error.value = null;
+
+            if (response.status != 200) {
+                return Promise.reject(response.data && response.data.message || response.status);
+            };
+
+            login.value = response.data.user.login;
+            name.value = response.data.user.name;
+            email.value = response.data.user.email;
+        })
+        .catch(e => {
+            error.value = e;
+            console.log(`${e.name}[${e.code}]: ${e.message}`);
+        })
+});
+</script>
+
+<template>
+    <div class="border rounded border-zinc-500 w-full flex-col">
+        <h1 class="pl-5 pr-5 pt-2 pb-2">Profile Info</h1>
+        <div class="border-t border-zinc-500 p-5">
+            <form @submit.prevent class="">
+                <div>
+                    <label class="block mb-2" for="login">Login</label>
+                    <input v-model="login" name="login"
+                        class="w-full bg-zinc-800 pl-3 pr-3 pt-2 pb-2 mb-4 outline-none rounded border border-zinc-500 hover:border-zinc-400 focus:border-green-800">
+                </div>
+                <div>
+                    <label class="block mb-2" for="name">Username</label>
+                    <input v-model="name" name="name"
+                        class="w-full bg-zinc-800 pl-3 pr-3 pt-2 pb-2 mb-4 outline-none rounded border border-zinc-500 hover:border-zinc-400 focus:border-green-800">
+                </div>
+                <div>
+                    <label class="block mb-2 " for="email">Email</label>
+                    <input v-model="email" email="email" disabled
+                        class="w-full bg-zinc-800 pl-3 pr-3 pt-2 pb-2 mb-4 outline-none rounded border border-zinc-500 hover:border-zinc-400 focus:border-green-800">
+                </div>
+                <div class="border-t border-zinc-500 ml-0 mr-0 mt-3 mb-3"></div>
+                <button
+                    class="rounded bg-zinc-500 hover:bg-zinc-400 pb-2 pt-2 pl-5 pr-5 ml-auto mr-0 block">Update</button>
+            </form>
+        </div>
+    </div>
+</template>
diff --git a/src/api/v1/errors.rs b/src/api/v1/errors.rs
index bc90e36..dcc1dff 100644
--- a/src/api/v1/errors.rs
+++ b/src/api/v1/errors.rs
@@ -15,7 +15,7 @@ pub enum AuthError<E> {
 impl<E: std::error::Error> IntoResponse for AuthError<E> {
     fn into_response(self) -> axum::response::Response {
         let (status, message) = match self {
-            Self::InternalError(e) => (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()),
+            Self::InternalError(e) => (StatusCode::INTERNAL_SERVER_ERROR, format!("Internal Error: {}", e.to_string())),
             Self::InternalE => (StatusCode::INTERNAL_SERVER_ERROR, "Internal E".to_string()),
             Self::MissingCredentials => {
                 (StatusCode::BAD_REQUEST, "Missing credentials".to_string())
@@ -28,11 +28,14 @@ impl<E: std::error::Error> IntoResponse for AuthError<E> {
             Self::MissingUser => (StatusCode::UNAUTHORIZED, "User not exists".to_string()),
         };
 
-        Json(json!({
-            "status": status.to_string(),
-            "message": message
-        }))
-        .into_response()
+        (
+            status,
+            Json(json!({
+                "status": status.to_string(),
+                "message": message
+            })),
+        )
+            .into_response()
     }
 }
 
diff --git a/src/api/v1/user.rs b/src/api/v1/user.rs
index 567177d..1a1c5f9 100644
--- a/src/api/v1/user.rs
+++ b/src/api/v1/user.rs
@@ -22,9 +22,7 @@ use super::token::TokenClaims;
 pub struct RegisterUser {
     pub login: String,
     pub password: String,
-    pub name: String,
     pub email: String,
-    pub is_admin: bool,
 }
 
 #[derive(serde::Serialize)]
@@ -65,11 +63,11 @@ pub async fn register(
 ) -> Result<impl IntoResponse, AuthError<impl std::error::Error>> {
     let user = User::register(
         &state.database,
-        body.login,
+        body.login.to_owned(),
         body.password,
-        body.name,
+        body.login, //body.name,
         body.email,
-        body.is_admin,
+        false, //body.is_admin,
     )
     .await
     .map_err(AuthError::InternalError)?;