463 lines
11 KiB
Vue
463 lines
11 KiB
Vue
<template>
|
|
<form :class="['login-form', darkMode ? 'form-darkmode' : 'form-lightmode']">
|
|
<div class="title-field">
|
|
<span class="title-icon" id="logo-icon">
|
|
<img loading="lazy" srcSet="../favicon-gelb-rot-32x32.png" />
|
|
</span>
|
|
<pre :class="['title', darkMode ? 'title-darkmode' : 'title-lightmode']">Login</pre>
|
|
</div>
|
|
<div class="login-field">
|
|
<div class="form-field" id="username-field">
|
|
<label for="username-input" id="username-label">
|
|
<span :class="['icon', darkMode ? 'icon-darkmode' : 'icon-lightmode']" id="username-icon">
|
|
<img loading="lazy" src="/icons/Mail-Icon.svg" />
|
|
</span>
|
|
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Username:</div>
|
|
</label>
|
|
<div :class="['input-field', darkMode ? 'input-darkmode' : 'input-lightmode']">
|
|
<input type="text" id="username-input" placeholder="user@example.com">
|
|
</div>
|
|
</div>
|
|
<div class="form-field" id="password-field">
|
|
<label for="password-input" id="password-label">
|
|
<span :class="['icon', darkMode ? 'icon-darkmode' : 'icon-lightmode']" id="password-icon">
|
|
<img loading="lazy" src="/icons/Lock-Icon.svg" />
|
|
</span>
|
|
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Password:</div>
|
|
</label>
|
|
<div :class="['input-field', darkMode ? 'input-darkmode' : 'input-lightmode']">
|
|
<input :type="showPassword ? 'text' : 'password'" id="password-input" placeholder="*******">
|
|
<input v-if="!showPassword" type="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']"
|
|
id="show-password-toggle" value="Show" @click="togglePasswordVisibility">
|
|
<input v-if="showPassword" type="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']"
|
|
id="show-password-toggle" value="Hide" @click="togglePasswordVisibility">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-if="isError" class="form-field-error-msg" id="password-field">
|
|
<label>
|
|
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']"> {{ errorMsg }} </div>
|
|
</label>
|
|
</div>
|
|
<div class="buttons">
|
|
<input type="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="login-button" value="Login"
|
|
@click="handleLogin">
|
|
<!-- <input type="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="signup-button" value="Signup" @click="testFunctionSignup"> -->
|
|
</div>
|
|
</form>
|
|
</template>
|
|
|
|
<script setup>
|
|
// import { useRouter } from 'vue-router';
|
|
import { ref, onBeforeUnmount } from 'vue';
|
|
import Axios from '../axios.config.js';
|
|
import clientsideConfig from '../clientsideConfig.js';
|
|
import { useStore } from 'vuex';
|
|
|
|
const store = useStore();
|
|
|
|
const { signIn } = useAuth()
|
|
// const router = useRouter();
|
|
const darkMode = ref(true);
|
|
const isError = ref(false);
|
|
const showPassword = ref(false);
|
|
const errorMsg = ref('');
|
|
|
|
function setItem(item, value) {
|
|
if (process.client) {
|
|
localStorage.setItem(item, value)
|
|
return true
|
|
} else {
|
|
return false
|
|
}
|
|
}
|
|
|
|
const togglePasswordVisibility = () => {
|
|
showPassword.value = !showPassword.value;
|
|
}
|
|
|
|
const handleLogin = async () => {
|
|
isError.value = false;
|
|
errorMsg.value = '';
|
|
|
|
const username = document.getElementById('username-input').value;
|
|
const password = document.getElementById('password-input').value;
|
|
|
|
//const requestBody = {
|
|
const credentials = {
|
|
username: username,
|
|
password: password,
|
|
}
|
|
|
|
try {
|
|
/*let res = await Axios.post(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/login`, requestBody);
|
|
|
|
const sessionToken = useCookie('token', {maxAge: 604800, sameSite: true});
|
|
sessionToken.value = res.data.token;
|
|
Axios.defaults.headers.common['Authorization'] = `${username}`;
|
|
const userToken = useCookie('user', {maxAge: 604800, sameSite: true});
|
|
userToken.value = username;
|
|
// something to do with the res?
|
|
console.log(sessionToken)
|
|
console.log(res.data.message)
|
|
|
|
// sucessfully logged in
|
|
router.push('/home')*/
|
|
let resBody = await signIn(credentials, { callbackUrl: '/home' })
|
|
try {
|
|
const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/login`);
|
|
setItem('logged-in-bool', true);
|
|
setItem('logged-in-user-id', response.data.id)
|
|
setItem('logged-in-user-username', response.data.username)
|
|
setItem('logged-in-user-registered', response.data.registered)
|
|
setItem('logged-in-user-lastLogin', response.data.lastLogin)
|
|
setItem('logged-in-user-fullName', response.data.fullName)
|
|
setItem('logged-in-user-email', response.data.email)
|
|
setItem('logged-in-user-phonenumber', response.data.phonenumber)
|
|
setItem('logged-in-user-address', response.data.address)
|
|
setItem('logged-in-user-city', response.data.city)
|
|
setItem('logged-in-user-postcode', response.data.postcode)
|
|
setItem('logged-in-user-adminBool', response.data.adminBool)
|
|
setItem('logged-in-user-technicianBool', response.data.technicianBool)
|
|
setItem('logged-in-user-readerBool', response.data.readerBool)
|
|
setTimeout(() => {
|
|
}, 500);
|
|
store.commit('setLocalStorageChanged');
|
|
} catch (err) {
|
|
console.log(err.response.statusText);
|
|
}
|
|
} catch (err) {
|
|
// handle the error
|
|
isError.value = true;
|
|
errorMsg.value = 'Username or password is incorrect.';
|
|
document.getElementById('password-input').value = '';
|
|
}
|
|
}
|
|
|
|
// const testFunctionSignup = async () => {
|
|
// isError.value = false;
|
|
// errorMsg.value = '';
|
|
|
|
// const username = 'adm_tueit'
|
|
// const password = 'SvF=?bfEx7_hV,cMEu4m'
|
|
// const password_repeat = 'SvF=?bfEx7_hV,cMEu4m'
|
|
// const fullName = 'administrator'
|
|
// const email = 'support@tueit.de'
|
|
// const phonenumber = ''
|
|
// const address = ''
|
|
// const city = ''
|
|
// const postcode = ''
|
|
// const adminBool = true
|
|
// const technician1Bool = false
|
|
// const technician2Bool = false
|
|
// const technicianMonitoringBool = false
|
|
// const merchantBool = false
|
|
// const internBool = true
|
|
|
|
// const requestBody = {
|
|
// username: username,
|
|
// password: password,
|
|
// password_repeat: password_repeat,
|
|
// fullName: fullName,
|
|
// email: email,
|
|
// phonenumber: phonenumber,
|
|
// address: address,
|
|
// city: city,
|
|
// postcode: postcode,
|
|
// adminBool: adminBool,
|
|
// technician1Bool: technician1Bool,
|
|
// technician2Bool: technician2Bool,
|
|
// technicianMonitoringBool: technicianMonitoringBool,
|
|
// merchantBool: merchantBool,
|
|
// internBool: internBool,
|
|
// }
|
|
|
|
// try {
|
|
|
|
// let res = await Axios.post(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/signup`, requestBody);
|
|
|
|
// // something to do with the res?
|
|
// // console.log(res)
|
|
|
|
// } catch (err) {
|
|
// // handle the error
|
|
// console.log(err.response.statusText)
|
|
// isError.value = true;
|
|
// errorMsg.value = err.response.statusText;
|
|
// }
|
|
// }
|
|
|
|
onMounted(() => {
|
|
document.addEventListener('keyup', handleKeyUp);
|
|
document.getElementById('username-input').value = '';
|
|
document.getElementById('password-input').value = '';
|
|
});
|
|
|
|
onBeforeUnmount(() => {
|
|
document.removeEventListener('keyup', handleKeyUp);
|
|
});
|
|
|
|
const handleKeyUp = (event) => {
|
|
if (event.key === 'Enter') {
|
|
handleLogin();
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<script>
|
|
export default {
|
|
name: "LoginForm",
|
|
data() {
|
|
return {
|
|
// isError: false,
|
|
// errorMsg: '',
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
|
|
.login-form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 31.25rem;
|
|
min-height: 33rem;
|
|
height: fit-content;
|
|
border-radius: 0.625rem;
|
|
padding: 2.5rem 1.875rem;
|
|
gap: 1.875rem;
|
|
}
|
|
|
|
.form-darkmode {
|
|
border: 0.0625rem solid #000;
|
|
background-color: #2c2c2c;
|
|
}
|
|
|
|
.form-lightmode {
|
|
border: 0.0625rem solid #8e8e8e;
|
|
background-color: #fff;
|
|
}
|
|
|
|
|
|
.title-field {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 1.25rem;
|
|
}
|
|
|
|
.title-icon {
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 3.125rem;
|
|
height: 3.125rem;
|
|
}
|
|
|
|
.title-icon>img {
|
|
width: 3.125rem;
|
|
height: 3.125rem;
|
|
object-fit: contain;
|
|
object-position: center;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#show-password-toggle:hover {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.title {
|
|
margin: 0;
|
|
letter-spacing: 0.05rem;
|
|
white-space: nowrap;
|
|
font: 400 1.875rem/1.875rem Overpass, sans-serif;
|
|
}
|
|
|
|
.title-darkmode {
|
|
color: #ffffff;
|
|
}
|
|
|
|
.title-lightmode {
|
|
color: #000000;
|
|
}
|
|
|
|
|
|
|
|
.login-field {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0.625rem 1.25rem;
|
|
gap: 1.25rem;
|
|
}
|
|
|
|
|
|
.form-field {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
width: 25rem;
|
|
height: 5rem;
|
|
padding: 0.625rem;
|
|
gap: 0.625rem;
|
|
}
|
|
|
|
label {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: flex-start;
|
|
width: fit-content;
|
|
height: 1.875rem;
|
|
gap: 0.625rem;
|
|
}
|
|
|
|
.icon {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 1.875rem;
|
|
height: 1.875rem;
|
|
}
|
|
|
|
.icon>img {
|
|
object-fit: contain;
|
|
object-position: center;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#username-icon>img {
|
|
width: auto;
|
|
height: 0.9375rem;
|
|
}
|
|
|
|
#password-icon>img {
|
|
width: 0.9375rem;
|
|
height: auto;
|
|
}
|
|
|
|
.icon-darkmode>img {
|
|
filter: invert(100%);
|
|
}
|
|
|
|
.icon-lightmode>img {
|
|
filter: invert(0%);
|
|
}
|
|
|
|
.label {
|
|
letter-spacing: 0.02rem;
|
|
font: 400 0.9375rem/1.875rem Overpass, sans-serif;
|
|
}
|
|
|
|
.label-darkmode {
|
|
color: #ffffff;
|
|
}
|
|
|
|
.label-lightmode {
|
|
color: #000000;
|
|
}
|
|
|
|
.input-field {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: stretch;
|
|
align-self: stretch;
|
|
width: 100%;
|
|
height: 1.875rem;
|
|
border-radius: 0.3125rem;
|
|
padding: 0.1875rem 0.625rem;
|
|
box-shadow: 0.0625rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.25) inset;
|
|
}
|
|
|
|
.input-darkmode {
|
|
background-color: #212121;
|
|
}
|
|
|
|
.input-lightmode {
|
|
background-color: #EBEBEB;
|
|
}
|
|
|
|
input[type=text],
|
|
input[type=password] {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: #00000000;
|
|
border: none;
|
|
color: #8e8e8e;
|
|
letter-spacing: 0.01rem;
|
|
white-space: nowrap;
|
|
font: 100 0.75rem/1.25rem Overpass, sans-serif;
|
|
}
|
|
|
|
#show-password-toggle {
|
|
width: fit-content;
|
|
height: auto;
|
|
align-self: flex-end;
|
|
padding: 0;
|
|
border-radius: 0;
|
|
background-color: #00000000;
|
|
background: none;
|
|
border: none;
|
|
letter-spacing: 0.01rem;
|
|
white-space: nowrap;
|
|
font: 300 0.75rem/1.25rem Overpass, sans-serif;
|
|
}
|
|
|
|
|
|
|
|
.form-field-error-msg {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
width: 25rem;
|
|
height: 3rem;
|
|
gap: 0.4rem;
|
|
}
|
|
|
|
|
|
|
|
.buttons {
|
|
display: flex;
|
|
flex-direction: row;
|
|
height: fit-content;
|
|
width: 100%;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0.625rem 0.625rem 0;
|
|
gap: 2.5rem;
|
|
}
|
|
|
|
|
|
input[type=button] {
|
|
width: 9.375rem;
|
|
height: 3.125rem;
|
|
padding: 0.625rem;
|
|
border-radius: 0.625rem;
|
|
align-self: center;
|
|
border: none;
|
|
background: linear-gradient(93deg, #ff0f00 3.67%, #ffe608 100%);
|
|
letter-spacing: 0.02rem;
|
|
white-space: nowrap;
|
|
font: 600 1.125rem/1.875rem Overpass, sans-serif;
|
|
}
|
|
|
|
.button-darkmode {
|
|
color: #ffffff;
|
|
}
|
|
|
|
.button-lightmode {
|
|
color: #000000;
|
|
}
|
|
</style> |