pleno-vue/src/components/forms/auth/LoginForm.vue

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import axios from 'axios'
import {API_URL} from "@/config.js";
import { parseError, errors, clearErrors, addError, getError } from "@/components/request/HandleGlobalError.vue";
import LoadButtonWhileAwait from "@/components/request/LoadButtonWhileAwait.vue";
import { SessionUser } from "@/components/session/token/SessionUser.vue";

const customer_number = ref();
const password = ref('');
const error = ref('');
const successMessage = ref('');

const store = useStore();
const router = useRouter();

const login = async () => {
  try {
    const response = await axios.post(API_URL + '/auth/login', {
      customer_number: customer_number.value,
      password: password.value,
      g_recaptcha_response: reCAPTCHA_data.value.enabled ? grecaptcha.getResponse() : null,
    });
    // Save the token in the local storage
    localStorage.setItem('token', response.data.data.token);
    // Set the success message
    successMessage.value = "Du er nu logget ind!"
    // Wait 500ms before reloading the page to show the success message
    setTimeout(() => {
      // Reload the page to update the UI
      router.go(0);
    }, 500);
    // window.location.reload();
  } catch (e) {
    parseError(e, 'auth');
  }
};

const doNothing = () => {
  // Do nothing
};

const reCAPTCHA_data = ref({
  enabled: false,
  site_key: '',
});

const ratelimit_data = ref({
  enabled: false,
  limit: 0,
  remaining: 0,
  reset: 0,
  warning: null,
});

SessionUser.auth.reCAPTCHA.preCheck.get().then((response) => {
  console.log(response.data.data);
  reCAPTCHA_data.value = response.data.data.recaptcha;
  ratelimit_data.value = response.data.data.rate_limit;
  // If the reCAPTCHA is enabled, load the reCAPTCHA script
  if (reCAPTCHA_data.value.enabled) {
    const script = document.createElement('script');
    script.src = 'https://www.google.com/recaptcha/api.js';
    script.async = true;
    script.defer = true;
    document.head.appendChild(script);
  }
});

</script>

<template>
  <form @submit.prevent="doNothing">
    <div class="form-field">
      <label class="label">{{ $t('auth.customer_number') }}</label>
      <input type="text" v-model="customer_number" name="customer_number" />
    </div>
    <div class="form-field">
      <label class="label">{{ $t('auth.password') }}</label>
      <input type="password" v-model="password" name="password" />
    </div>
    <!-- reCaptcha, if enabled -->
    <div class="field mt-6" v-if="reCAPTCHA_data.enabled">
      <div class="control">
        <div class="g-recaptcha" :data-sitekey="reCAPTCHA_data.site_key"></div>
      </div>
    </div>
    <!-- Display the error -->
    <div class="field" v-if="getError('auth')">
      <p class="help is-danger" id="user_auth_alert_error">
        {{ getError('auth') }}
      </p>
    </div>
    <div class="field" v-if="successMessage">
      <!-- Success message for login -->
      <p class="help is-success" id="user_auth_alert_success">
        {{ successMessage }}
      </p>
    </div>
    <div class="form-field">
      <label><input type="checkbox" id="remember" name="remember">{{ $t('auth.remember_me') }}</label>
    </div>

    <router-link :to="{name: 'password-reset'}" class="" id="forgot-password-button">{{ $t('auth.forgot_password') }}</router-link>
    <LoadButtonWhileAwait :loadFunction="login" class="submit" id="login-button">{{ $t('auth.login') }}</LoadButtonWhileAwait>
    <router-link :to="{name: 'loginqr'}" class="submit">{{ $t('auth.login_with_qr_code') }}</router-link>
  </form>
</template>
<style scoped>
form{
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 400px;
  margin-bottom: 40px;
}

.form-field{
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.form-field label{
  color: #13324C;
  font-size: 16px;
  line-height: 1;
  display: flex;
  gap: 16px;
}

form input{
  border: 1.5px solid #333;
  border-radius: 8px;
  margin-top: 4px;
  font-size: 16px;
  line-height: 1;
}

form input:not([type="checkbox"]) {
  min-height: 40px;
}

.submit {
  width: 100%;
  border-radius: 30px;
  background-color: #13324C;
  border: 0;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  min-height: 43px;
}
</style>