ifms-pti/web/src/components/ReplacePasswordForm.vue

<template>
  <v-card :loading="loading" flat outlined class="light-shadow">
    <v-card-title class="font-weight-light mb-1">
      Alterar senha de {{ studentsOnly ? 'estudante' : 'usuário' }}
    </v-card-title>
    <v-divider />
    <v-card-text>
      <UserSelect v-model="username" :students="studentsOnly" />

      <NewPasswordFields v-model="newPassword" :suggestion="suggestion" />

      <v-btn text color="info" @click="generatePassword"
        ><v-icon left>mdi-refresh</v-icon>Gerar</v-btn
      >
      <v-btn :disabled="!username" text color="info" @click="defaultPassword"
        ><v-icon left>mdi-account-outline</v-icon> Padrão</v-btn
      >

      <v-alert color="error" :value="!!errors.length" icon="mdi-alert-circle">
        <p v-for="(error, index) in errors" :key="index">{{ error }}</p>
      </v-alert>
    </v-card-text>
    <v-divider />
    <v-card-actions>
      <v-spacer />
      <v-btn text large :to="{ name: 'home' }" exact>Cancelar</v-btn>
      <v-btn
        :disabled="!username || !newPassword"
        color="primary"
        large
        @click="$emit('submit', { username, newPassword })"
      >
        Trocar a senha
      </v-btn>
    </v-card-actions>
  </v-card>
</template>

<script>
import UserSelect from './UserSelect'
import NewPasswordFields from './NewPasswordFields'

export default {
  name: 'ReplacePasswordForm',

  components: {
    NewPasswordFields,
    UserSelect
  },
  props: {
    studentsOnly: {
      type: Boolean,
      default: false
    },
    loading: {
      type: Boolean,
      default: false
    },
    errors: {
      type: Array,
      default: () => []
    }
  },
  data: () => ({
    username: null,
    newPassword: '',
    suggestion: ''
  }),
  methods: {
    generatePassword() {
      this.suggestion = Math.random().toString(36).slice(-10)
    },

    defaultPassword() {
      this.suggestion = `ifms.${this.username}`
    }
  }
}
</script>

<style scoped></style>