370 lines
8.1 KiB
Vue
370 lines
8.1 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 ? 'pre-darkmode' : 'pre-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>
|
|
<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="login-button" value="Signup"
|
|
@click="testFunctionSignup">
|
|
</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);
|
|
|
|
// something to do with the res?
|
|
console.log(res.data)
|
|
|
|
// sucessfully logged in
|
|
router.push('/')
|
|
} 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 = 'maria'
|
|
const password = 'maria123'
|
|
const password_repeat = 'maria123'
|
|
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.data)
|
|
|
|
} catch (err) {
|
|
// handle the error
|
|
// console.log(err)
|
|
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;
|
|
height: 33rem;
|
|
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: 5%;
|
|
white-space: nowrap;
|
|
font: 400 1.875rem/1.875rem Overpass, sans-serif;
|
|
}
|
|
|
|
.pre-darkmode,
|
|
.title-darkmode {
|
|
color: #fff;
|
|
}
|
|
|
|
.pre-lightmode,
|
|
.title-lightmode {
|
|
color: #000;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.form-field-error-msg {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
width: 25rem;
|
|
height: 3rem;
|
|
gap: 0.4rem;
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
.icon-darkmode>img {
|
|
filter: invert(100%);
|
|
}
|
|
|
|
.icon-lightmode>img {
|
|
filter: invert(0%);
|
|
}
|
|
|
|
#username-icon>img {
|
|
width: auto;
|
|
height: 0.9375rem;
|
|
}
|
|
|
|
#password-icon>img {
|
|
width: 0.9375rem;
|
|
height: auto;
|
|
}
|
|
|
|
.label {
|
|
letter-spacing: 2%;
|
|
font: 400 0.9375rem/1.875rem Overpass, sans-serif;
|
|
}
|
|
|
|
.label-darkmode {
|
|
color: #fff;
|
|
}
|
|
|
|
.label-lightmode {
|
|
color: #000;
|
|
}
|
|
|
|
.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: 5%;
|
|
white-space: nowrap;
|
|
font: 100 0.75rem/1.25rem Overpass, sans-serif;
|
|
}
|
|
|
|
input[type=button] {
|
|
width: fit-content;
|
|
align-self: flex-end;
|
|
background-color: #00000000;
|
|
border: none;
|
|
letter-spacing: 5%;
|
|
white-space: nowrap;
|
|
font: 300 0.75rem/1.25rem Overpass, sans-serif;
|
|
}
|
|
|
|
.button-darkmode {
|
|
color: #fff;
|
|
}
|
|
|
|
.button-lightmode {
|
|
color: #000;
|
|
}
|
|
|
|
#login-button {
|
|
width: 13.75rem;
|
|
height: 4.375rem;
|
|
padding: 0.625rem;
|
|
border-radius: 0.625rem;
|
|
align-self: center;
|
|
border: none;
|
|
color: #000;
|
|
background: linear-gradient(93deg, #ff0f00 3.67%, #ffe608 100%);
|
|
letter-spacing: 2%;
|
|
white-space: nowrap;
|
|
font: 600 1.25rem/1.875rem Overpass, sans-serif;
|
|
}
|
|
</style> |