mirror of
https://github.com/Spythere/station-manager-2.0.git
synced 2026-05-03 05:28: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"
|
||||
+135
-131
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user