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

<script setup>
import { ref } from 'vue'
import { useI18n } from 'vue-i18n'
import { parseError, getError } from "@/components/request/HandleGlobalError.vue";
import LoadButtonWhileAwait from "@/components/request/LoadButtonWhileAwait.vue";
import { SessionUser } from "@/components/session/token/SessionUser.vue";

const { t } = useI18n();

// Login method selection
const loginMethod = ref('phone'); // 'phone' or 'username'

// Phone login fields
const phone_country_code = ref(45);
const phone = ref('');

// Username login fields
const username = ref('');

// Password (common)
const password = ref('');

const login = async () => {
  try {
    let credentials = { password: password.value };
    
    if (loginMethod.value === 'phone') {
      credentials.phone_country_code = parseInt(phone_country_code.value);
      credentials.phone = parseInt(phone.value);
    } else {
      credentials.username = username.value;
    }
    
    await SessionUser.auth.authenticateSubuser(credentials);
    // Redirect happens automatically in authenticateSubuser via window.location.reload()
  } catch (e) {
    // Error is already parsed in authenticateSubuser
    console.error(e);
  }
};

const doNothing = () => {
  // Prevent form submission
};
</script>

<template>
  <form @submit.prevent="doNothing">
    <!-- Login method selector -->
    <div class="form-field">
      <label class="label">{{ t('auth.login_with') }}</label>
      <div class="login-method-selector">
        <button 
          type="button" 
          class="method-btn" 
          :class="{ active: loginMethod === 'phone' }"
          @click="loginMethod = 'phone'"
        >
          {{ t('auth.phone') }}
        </button>
        <button 
          type="button" 
          class="method-btn" 
          :class="{ active: loginMethod === 'username' }"
          @click="loginMethod = 'username'"
        >
          {{ t('auth.username') }}
        </button>
      </div>
    </div>

    <!-- Phone login fields -->
    <template v-if="loginMethod === 'phone'">
      <div class="form-field">
        <label class="label">{{ t('auth.country_code') }}</label>
        <input type="number" v-model="phone_country_code" placeholder="45" min="1" max="999" />
      </div>
      <div class="form-field">
        <label class="label">{{ t('auth.phone_number') }}</label>
        <input type="tel" v-model="phone" placeholder="12345678" />
      </div>
    </template>

    <!-- Username login fields -->
    <template v-else>
      <div class="form-field">
        <label class="label">{{ t('auth.username') }}</label>
        <input type="text" v-model="username" :placeholder="t('auth.your_username')" />
      </div>
    </template>

    <!-- Password field -->
    <div class="form-field">
      <label class="label">{{ t('auth.password') }}</label>
      <input type="password" v-model="password" />
    </div>

    <!-- Display the error -->
    <div class="field" v-if="getError('auth')">
      <p class="help is-danger">
        {{ getError('auth') }}
      </p>
    </div>

    <LoadButtonWhileAwait :loadFunction="login" class="submit" id="subuser-login-button">
      {{ t('auth.login') }}
    </LoadButtonWhileAwait>
    
    <router-link :to="{name: 'login'}" class="link">{{ t('auth.login_as_customer') }}</router-link>
  </form>
</template>

<style scoped>
form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 400px;
  margin-bottom: 40px;
  width: 100%;
}

.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;
  padding: 8px 12px;
}

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

.login-method-selector {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.method-btn {
  flex: 1;
  padding: 10px 16px;
  border: 1.5px solid #333;
  border-radius: 8px;
  background: #fff;
  color: #13324C;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.method-btn:hover {
  background: #f5f5f5;
}

.method-btn.active {
  background: #13324C;
  color: #fff;
  border-color: #13324C;
}

.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;
  margin-top: 10px;
  cursor: pointer;
}

.submit:hover {
  background-color: #1a4263;
}

.link {
  text-align: center;
  color: #13324C;
  text-decoration: underline;
}

.help.is-danger {
  color: #f14668;
  font-size: 14px;
}
</style>