360 lines
8.7 KiB
Vue
360 lines
8.7 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="text" id="password-input" placeholder="*******">
|
|
<input type="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="show-password-toggle" value="Show">
|
|
</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 } from 'vue';
|
|
import Axios from '../axios.config.js';
|
|
import clientsideConfig from '../clientsideConfig.js';
|
|
|
|
const router = useRouter();
|
|
const darkMode = ref(true);
|
|
const isError = ref(false);
|
|
const errorMsg = ref('');
|
|
|
|
const handleLogin = async () => {
|
|
isError.value = false;
|
|
errorMsg.value = '';
|
|
|
|
const username = document.getElementById('username-input').value;
|
|
const password = document.getElementById('password-input').value;
|
|
|
|
const requestBody = {
|
|
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')
|
|
} catch (err) {
|
|
// handle the error
|
|
console.log(err.response.statusText)
|
|
isError.value = true;
|
|
errorMsg.value = err.response.statusText;
|
|
}
|
|
}
|
|
|
|
const testFunctionSignup = async () => {
|
|
isError.value = false;
|
|
errorMsg.value = '';
|
|
|
|
const username = 'franzzzzzrtg'
|
|
const password = '112345678'
|
|
const password_repeat = '112345678'
|
|
const fullName = 'hallo'
|
|
const email = 'test.sdj@web.de'
|
|
const phonenumber = '015736283729'
|
|
const address = 'Strasse'
|
|
const city = 'tuebingen'
|
|
const postcode = '72121'
|
|
const adminBool = false
|
|
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;
|
|
}
|
|
}
|
|
</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;
|
|
}
|
|
|
|
.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] {
|
|
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> |