github.com/benoitkugler/goacve@v0.0.0-20201217100549-151ce6e55dc8/server/frontend/bv/src/pages/admin/passwords/FormPassword.vue (about) 1 <template> 2 <b-card :title="title"> 3 <b-row> 4 <b-col> 5 <b-form-group label="Site ou service"> 6 <b-form-input v-model="innerPassword.provenance"></b-form-input> 7 </b-form-group> 8 </b-col> 9 </b-row> 10 <b-row> 11 <b-col> 12 <b-form-group label="Identifiant"> 13 <b-form-input v-model="innerPassword.loggin"></b-form-input> 14 </b-form-group> 15 </b-col> 16 <b-col> 17 <b-form-group label="Mot de passe"> 18 <b-form-input v-model="innerPassword.password"></b-form-input> 19 </b-form-group> 20 </b-col> 21 </b-row> 22 <b-row> 23 <b-col> 24 <b-form-group label="Description"> 25 <b-form-textarea 26 v-model="innerPassword.description" 27 ></b-form-textarea> 28 </b-form-group> 29 </b-col> 30 </b-row> 31 <b-row> 32 <b-col class="text-right"> 33 <b-button 34 @click="$emit('done', isCreateMode, innerPassword)" 35 :variant="isCreateMode ? 'success' : 'secondary'" 36 > 37 {{ btnLabel }} 38 </b-button> 39 </b-col> 40 </b-row> 41 </b-card> 42 </template> 43 44 <script lang="ts"> 45 import Vue from "vue"; 46 import Component from "vue-class-component"; 47 import { PublicPassword } from "./types"; 48 import { Watch } from "vue-property-decorator"; 49 50 const FormPasswordProps = Vue.extend({ 51 props: { 52 password: Object as () => PublicPassword | null 53 } 54 }); 55 56 function defaultPassword(): PublicPassword { 57 return { password: "", id: -1, provenance: "", description: "", loggin: "" }; 58 } 59 60 @Component({}) 61 export default class FormPassword extends FormPasswordProps { 62 innerPassword: PublicPassword = this.duplique(); 63 64 @Watch("password", { deep: true }) 65 p() { 66 this.innerPassword = this.duplique(); 67 } 68 69 duplique() { 70 const pa: PublicPassword = 71 this.password == null ? defaultPassword() : this.password; 72 return JSON.parse(JSON.stringify(pa)); 73 } 74 75 get isCreateMode() { 76 return this.password == null; 77 } 78 79 get title() { 80 return this.isCreateMode 81 ? "Ajouter un mot de passe" 82 : "Modifier le mot de passe"; 83 } 84 85 get btnLabel() { 86 return this.isCreateMode ? "Créer" : "Modifier"; 87 } 88 } 89 </script> 90 91 <style scoped></style>