From ef72c5f129afa7bad65e123bc7473da69dfcd638 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Mon, 30 Jan 2023 15:26:36 +0100
Subject: [PATCH] =?UTF-8?q?fix:=20alert=20przy=20braku=20po=C5=82=C4=85cze?=
 =?UTF-8?q?nia=20z=20serwerem?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env                    |   2 +-
 src/views/LoginView.vue | 266 ++++++++++++++++++++--------------------
 2 files changed, 136 insertions(+), 132 deletions(-)

diff --git a/.env b/.env
index ce353c4..6d8c16e 100644
--- a/.env
+++ b/.env
@@ -1,2 +1,2 @@
-VITE_API_URL="https://spythere.pl"
+VITE_API_URL="https://spythere.pl"
 VITE_API_URL_DEV="http://localhost:3000"
\ No newline at end of file
diff --git a/src/views/LoginView.vue b/src/views/LoginView.vue
index 4713807..0b24b3e 100644
--- a/src/views/LoginView.vue
+++ b/src/views/LoginView.vue
@@ -1,131 +1,135 @@
-<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>
+<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) {
+        if (!e.response || e.response.status === undefined) {
+          this.store.alertMessage = 'Wystąpił błąd podczas łączenia z serwerem!';
+          return;
+        }
+
+        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!';
+      }
+    },
+  },
+});
+</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>