Migracja projektu na Vite

src/views/LoginView.vue

@@ -0,0 +1,131 @@
+<template>
+  <div class="login">
+    <div class="login-header">
+      <img src="/icon-logo.svg" alt="logo" />
+      <h1>Stacjownik Station Manager</h1>
+    </div>
+
+    <form @submit="signIn">
+      <label for="name">Nick</label>
+      <br />
+      <input type="text" id="name" v-model="name" />
+      <br />
+      <label for="password">Hasło</label>
+      <br />
+      <input type="password" id="password" v-model="password" />
+      <br />
+      <button>Zaloguj</button>
+    </form>
+  </div>
+</template>
+
+<script lang="ts">
+import axios from 'axios';
+import { defineComponent } from 'vue';
+import dataMixin from '../mixins/dataMixin';
+import { useStore } from '../store';
+
+interface LoginResponse {
+  token: string;
+  user: {
+    name: string;
+    id: string;
+  };
+}
+
+export default defineComponent({
+  mixins: [dataMixin],
+
+  setup() {
+    return {
+      name: '',
+      password: '',
+      store: useStore(),
+    };
+  },
+
+  methods: {
+    async signIn(e: Event) {
+      e.preventDefault();
+
+      console.log(import.meta.env.VITE_API_URL);
+
+      try {
+        const data: LoginResponse = (
+          await axios.post(
+            `${this.API_URL}/auth/login`,
+            { username: this.name, password: this.password },
+            {
+              headers: {
+                'Content-Type': 'application/json',
+              },
+            }
+          )
+        ).data;
+
+        this.store.isAuthorized = true;
+        this.store.token = data.token;
+        this.store.user = data.user;
+
+        window.localStorage.setItem('auth-token', this.store.token);
+        window.localStorage.setItem('user', JSON.stringify(this.store.user));
+
+        this.loadData();
+        this.$router.push('/');
+      } catch (e: any) {
+        const response = e.response;
+        const status: number = response.status;
+
+        if (status == 401) {
+          this.store.alertMessage = 'Nieprawidłowe dane!';
+          return;
+        }
+
+        this.store.alertMessage = 'Wystąpił błąd podczas łączenia z serwerem!';
+        return;
+      }
+    },
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.login {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  flex-direction: column;
+  height: 100vh;
+
+  &-header {
+    text-align: center;
+  }
+}
+
+img {
+  width: 8em;
+}
+
+input {
+  font-size: 1.2rem;
+  margin: 0.5rem 0;
+  padding: 0.25em 0.3em;
+  color: black;
+}
+
+h2 {
+  text-align: center;
+}
+
+label {
+  text-align: left;
+}
+
+button {
+  width: 100%;
+  margin: 1rem 0;
+  padding: 0.5rem 0;
+  font-size: 1rem;
+}
+</style>