mirror of
https://github.com/Spythere/station-manager-2.0.git
synced 2026-05-03 13:38:13 +00:00
fix: alert przy braku połączenia z serwerem
This commit is contained in:
@@ -1,2 +1,2 @@
|
|||||||
VITE_API_URL="https://spythere.pl"
|
VITE_API_URL="https://spythere.pl"
|
||||||
VITE_API_URL_DEV="http://localhost:3000"
|
VITE_API_URL_DEV="http://localhost:3000"
|
||||||
+135
-131
@@ -1,131 +1,135 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="login">
|
<div class="login">
|
||||||
<div class="login-header">
|
<div class="login-header">
|
||||||
<img src="/icon-logo.svg" alt="logo" />
|
<img src="/icon-logo.svg" alt="logo" />
|
||||||
<h1>Stacjownik Station Manager</h1>
|
<h1>Stacjownik Station Manager</h1>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<form @submit="signIn">
|
<form @submit="signIn">
|
||||||
<label for="name">Nick</label>
|
<label for="name">Nick</label>
|
||||||
<br />
|
<br />
|
||||||
<input type="text" id="name" v-model="name" />
|
<input type="text" id="name" v-model="name" />
|
||||||
<br />
|
<br />
|
||||||
<label for="password">Hasło</label>
|
<label for="password">Hasło</label>
|
||||||
<br />
|
<br />
|
||||||
<input type="password" id="password" v-model="password" />
|
<input type="password" id="password" v-model="password" />
|
||||||
<br />
|
<br />
|
||||||
<button>Zaloguj</button>
|
<button>Zaloguj</button>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import axios from 'axios';
|
import axios from 'axios';
|
||||||
import { defineComponent } from 'vue';
|
import { defineComponent } from 'vue';
|
||||||
import dataMixin from '../mixins/dataMixin';
|
import dataMixin from '../mixins/dataMixin';
|
||||||
import { useStore } from '../store';
|
import { useStore } from '../store';
|
||||||
|
|
||||||
interface LoginResponse {
|
interface LoginResponse {
|
||||||
token: string;
|
token: string;
|
||||||
user: {
|
user: {
|
||||||
name: string;
|
name: string;
|
||||||
id: string;
|
id: string;
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
mixins: [dataMixin],
|
mixins: [dataMixin],
|
||||||
|
|
||||||
setup() {
|
setup() {
|
||||||
return {
|
return {
|
||||||
name: '',
|
name: '',
|
||||||
password: '',
|
password: '',
|
||||||
store: useStore(),
|
store: useStore(),
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
async signIn(e: Event) {
|
async signIn(e: Event) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
|
||||||
console.log(import.meta.env.VITE_API_URL);
|
console.log(import.meta.env.VITE_API_URL);
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const data: LoginResponse = (
|
const data: LoginResponse = (
|
||||||
await axios.post(
|
await axios.post(
|
||||||
`${this.API_URL}/auth/login`,
|
`${this.API_URL}/auth/login`,
|
||||||
{ username: this.name, password: this.password },
|
{ username: this.name, password: this.password },
|
||||||
{
|
{
|
||||||
headers: {
|
headers: {
|
||||||
'Content-Type': 'application/json',
|
'Content-Type': 'application/json',
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
).data;
|
).data;
|
||||||
|
|
||||||
this.store.isAuthorized = true;
|
this.store.isAuthorized = true;
|
||||||
this.store.token = data.token;
|
this.store.token = data.token;
|
||||||
this.store.user = data.user;
|
this.store.user = data.user;
|
||||||
|
|
||||||
window.localStorage.setItem('auth-token', this.store.token);
|
window.localStorage.setItem('auth-token', this.store.token);
|
||||||
window.localStorage.setItem('user', JSON.stringify(this.store.user));
|
window.localStorage.setItem('user', JSON.stringify(this.store.user));
|
||||||
|
|
||||||
this.loadData();
|
this.loadData();
|
||||||
this.$router.push('/');
|
this.$router.push('/');
|
||||||
} catch (e: any) {
|
} catch (e: any) {
|
||||||
const response = e.response;
|
if (!e.response || e.response.status === undefined) {
|
||||||
const status: number = response.status;
|
this.store.alertMessage = 'Wystąpił błąd podczas łączenia z serwerem!';
|
||||||
|
return;
|
||||||
if (status == 401) {
|
}
|
||||||
this.store.alertMessage = 'Nieprawidłowe dane!';
|
|
||||||
return;
|
const response = e.response;
|
||||||
}
|
const status: number = response.status;
|
||||||
|
|
||||||
this.store.alertMessage = 'Wystąpił błąd podczas łączenia z serwerem!';
|
if (status == 401) {
|
||||||
return;
|
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;
|
</script>
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
<style lang="scss" scoped>
|
||||||
|
.login {
|
||||||
flex-direction: column;
|
display: flex;
|
||||||
height: 100vh;
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
&-header {
|
|
||||||
text-align: center;
|
flex-direction: column;
|
||||||
}
|
height: 100vh;
|
||||||
}
|
|
||||||
|
&-header {
|
||||||
img {
|
text-align: center;
|
||||||
width: 8em;
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
input {
|
img {
|
||||||
font-size: 1.2rem;
|
width: 8em;
|
||||||
margin: 0.5rem 0;
|
}
|
||||||
padding: 0.25em 0.3em;
|
|
||||||
color: black;
|
input {
|
||||||
}
|
font-size: 1.2rem;
|
||||||
|
margin: 0.5rem 0;
|
||||||
h2 {
|
padding: 0.25em 0.3em;
|
||||||
text-align: center;
|
color: black;
|
||||||
}
|
}
|
||||||
|
|
||||||
label {
|
h2 {
|
||||||
text-align: left;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
button {
|
label {
|
||||||
width: 100%;
|
text-align: left;
|
||||||
margin: 1rem 0;
|
}
|
||||||
padding: 0.5rem 0;
|
|
||||||
font-size: 1rem;
|
button {
|
||||||
}
|
width: 100%;
|
||||||
</style>
|
margin: 1rem 0;
|
||||||
|
padding: 0.5rem 0;
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user