TueIT_App/components/LoginForm.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">
    </div>
  </form>
</template>

<script setup>
// import { useRouter } from 'vue-router';
import { ref, onBeforeUnmount, onMounted } 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 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)
      setItem('logged-in-user-darkMode', response.data.darkModeBool)
      store.commit('setLocalStorageChanged');
      store.commit('setModeChanged');
      store.commit('setModeQuickAccessChanged');
      store.commit('setModeDashboardChanged');
      store.commit('setModeNavbarChanged');
      store.commit('setModeLayoutChanged');
    } 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 = '';
  }
}

function getItem(item) {
  if (process.client) {
    return localStorage.getItem(item)
  } else {
    return undefined
  }
}

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",
}
</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>