add login

src/App.vue

@@ -1,12 +1,17 @@
 <script setup lang="ts">
 import { RouterView } from 'vue-router'
-import { NMessageProvider } from 'naive-ui'
+import { NConfigProvider, NMessageProvider } from 'naive-ui'
+import { darkTheme } from 'naive-ui'
 </script>
 
 <template>
-  <n-message-provider>
-    <RouterView />
-  </n-message-provider>
+  <n-config-provider :theme="darkTheme">
+
+    <n-message-provider>
+      <RouterView />
+    </n-message-provider>
+
+  </n-config-provider>
 </template>
 
 <style scoped></style>

src/assets/main.css

@@ -19,8 +19,6 @@
   }
 
   #app {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
     padding: 0 2rem;
   }
 }

src/components/LoginPage.vue

@@ -1,7 +1,105 @@
 <template>
-  Login page
+  <n-card style="margin-bottom: 16px" class="sign-card">
+    <n-tabs type="line" animated>
+
+      <n-tab-pane name="signin" tab="Вход">
+        <n-space vertical>
+          <div class="form-label">Почта</div>
+          <n-auto-complete v-model:value="email" :input-props="{
+            autocomplete: 'disabled',
+          }" :options="options" placeholder="detective@mail.ru" clearable />
+          <div class="form-label">Пароль</div>
+          <n-input v-model:value="password" type="password" placeholder="********" />
+          <div class="form-button-wrapper">
+            <div class="form-label">
+              <n-button @click="signin" :disabled="email.length == 0 || password.length == 0">Вход</n-button>
+            </div>
+          </div>
+        </n-space>
+      </n-tab-pane>
+
+      <n-tab-pane name="signup" tab="Регистрация">
+        <n-space vertical>
+          <div class="form-label">Позывной</div>
+          <n-input v-model:value="username" type="text" placeholder="Шерлок" />
+          <div class="form-label">Почта</div>
+          <n-auto-complete v-model:value="email" :input-props="{
+            autocomplete: 'disabled',
+          }" :options="options" placeholder="detective@mail.ru" clearable />
+          <div class="form-label">
+            <n-checkbox v-model:checked="approval">
+              Я согласен с
+              <a href="/user-agreement" target="_blank" class="docs-link">пользовательским соглашением</a><br>
+              и
+              <a href="/privacy-policy" target="_blank" class="docs-link">соглашением о персональных данных</a>
+            </n-checkbox>
+          </div>
+          <div class="form-button-wrapper">
+            <div class="form-label">
+              <n-button @click="signup"
+                :disabled="username.length == 0 || password.length == 0 || !approval">Регистрация</n-button>
+            </div>
+          </div>
+        </n-space>
+      </n-tab-pane>
+
+    </n-tabs>
+  </n-card>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { computed, ref } from 'vue'
 
-<style scoped></style>
+import { NCard, NTabs, NTabPane, NCheckbox, NButton, NSpace, NInput, NAutoComplete } from 'naive-ui'
+
+const username = ref('')
+const email = ref('')
+const password = ref('')
+const approval = ref(false)
+
+
+const options = computed(() => {
+  return ['@mail.ru', '@yandex.ru', '@gmail.com'].map((suffix) => {
+    const prefix = email.value.split('@')[0]
+    return {
+      label: prefix + suffix,
+      value: prefix + suffix
+    }
+  })
+})
+
+function signin() {
+  console.log(email.value)
+  console.log(password.value)
+}
+
+function signup() {
+  console.log(username.value)
+  console.log(email.value)
+  console.log(approval.value)
+}
+</script>
+
+<style scoped>
+.sign-card {
+  width: 380px;
+  background-color: rgb(29, 29, 29);
+}
+
+.form-label {
+  margin-top: 10px;
+}
+
+.form-button-wrapper {
+  display: flex;
+  justify-content: center;
+}
+
+.docs-link {
+  color: #45aa89;
+}
+
+.docs-link:hover {
+  color: #63e2b7;
+}
+</style>

src/views/HomeView.vue

@@ -111,10 +111,15 @@ const goToLogin = () => {
 }
 
 @media (min-width: 1024px) {
+  .font-text {
+    position: relative;
+    left: -150px;
+  }
+
   .content-text {
     position: relative;
     top: 100px;
-    right: -500px;
+    right: -350px;
   }
 }
 </style>