<template>
  <div>
    <div v-if="enablePwa"><CCheckAppRunning /></div>
    <div class="text-center">
      <p>
        <logo></logo>
      </p>
    </div>

    <q-form ref="myForm" @submit="onSubmit" @reset="onReset">
      <div class="q-gutter-xs">
        <q-input
          ref="refUsername"
          v-model="signin.username"
          rounded
          outlined
          dense
          lazy-rules
          :label="$t('reg.username_login')"
          :rules="[
            (val) => !!val || $t('reg.err.required'),
            (val) =>
              val.length >= 4 ||
              $t('reg.err.atleast') + ' 4 ' + $t('reg.err.char'),
          ]"
        >
          <template v-slot:prepend>
            <q-icon name="person" />
          </template>
        </q-input>
        <q-input
          ref="refPassword"
          v-model="signin.password"
          :type="typePassword"
          rounded
          outlined
          dense
          debounce="500"
          @update:model-value="checkAutoCompletion"
          v-on:keyup.enter="onSubmit()"
          :label="$t('reg.password')"
          :rules="[
            (val) => !!val || $t('reg.err.required'),
            (val) =>
              val.length >= 8 ||
              $t('reg.err.atleast') + ' 8 ' + $t('reg.err.char'),
          ]"
        >
          <template v-slot:append>
            <q-btn
              v-if="!autoCompleteTriggered"
              tabindex="-1"
              :icon="
                typePassword === `password` ? `fas fa-eye-slash` : `fas fa-eye`
              "
              @click="showPassword"
            >
            </q-btn>
          </template>
          <template v-slot:prepend>
            <q-icon name="vpn_key" />
          </template>
        </q-input>

        <div style="text-align: center">
          <q-btn
            type="submit"
            rounded
            size="md"
            color="primary"
            :label="$t('login.enter')"
          >
          </q-btn>
        </div>

        <br />

        <div class="text-center" style="margin-bottom: 10px">
          <a :href="getlinkforgetpwd()" style="color: gray">{{
            $t('reg.forgetpassword')
          }}</a>
        </div>

        <div
          v-if="
            site.confpages &&
            site.confpages.enableReg &&
            showregbutt &&
            site.confpages.enableRegByBot
          "
          style="margin-top: 10px; text-align: center"
        >
          Se non sei ancora Registrato:<br />
          <q-btn
            type="a"
            rounded
            size="md"
            color="primary"
            href="/bot"
            :label="$t('reg.submit')"
          >
          </q-btn>
        </div>
        <div
          v-else-if="site.confpages && site.confpages.enableReg && showregbutt"
          style="margin-top: 10px; text-align: center"
        >
          Se non sei ancora Registrato:<br />
          <q-btn
            rounded
            size="md"
            color="primary"
            to="/registrati"
            :label="$t('reg.submit')"
          >
          </q-btn>
        </div>
      </div>
    </q-form>
  </div>
</template>

<script lang="ts" src="./CSignIn.ts">
</script>

<style lang="scss" scoped>
@import './CSignIn.scss';
</style>
