<template>
  <v-form v-model="valid">
    <v-text-field
      v-model="username"
      label="Username"
      outlined
      dark
      filled
      dense
      counter="30"
      :rules="[
        required('Username'),
        minLength('Username', 2),
        maxLength('Username', 30),
      ]"
      v-on:keyup.enter="submitFunc(params)"
    ></v-text-field>
    <v-text-field
      v-model="password"
      label="Password"
      :append-icon="showPass ? 'mdi-eye' : 'mdi-eye-off'"
      @click:append="showPass = !showPass"
      outlined
      dense
      dark
      filled
      counter="true"
      :type="showPass ? 'text' : 'password'"
      :rules="[required('Password'), minLength('Password', 8)]"
      v-on:keyup.enter="submitFunc(params)"
    ></v-text-field>
    <div class="text-center">
      <v-btn
        class="signin-btn"
        rounded
        color="white"
        :disabled="!valid"
        @click="submitFunc(params)"
      >
        {{ buttonText }}
      </v-btn>
    </div>
  </v-form>
</template>

<script>
import validations from "@/utils/validations";
export default {
  name: "UserAuthForm",
  data: () => ({
    valid: false,
    username: "",
    password: null,
    showPass: false,
    ...validations,
  }),
  props: [
    "submitFunc",
    "successMessage",
    "errorMessage",
    "success",
    "error",
    "buttonText",
  ],
  computed: {
    params() {
      return {
        username: this.username,
        password: this.password,
      };
    },
  },
};
</script>