hafifierahman
215 lines
11 KiB
Vue
215 lines
11 KiB
Vue
<template>
|
|
<div>
|
|
<ul class="flex hidden rounded-lg divide-x divide-gray-200 shadow sm:flex dark:divide-gray-700 mb-4">
|
|
<li class="w-full">
|
|
<button id="profile" type="button"
|
|
:class="{'bg-gray-300 text-gray-900 hover:bg-gray-300': this.showprofile}"
|
|
class="inline-block relative py-4 px-4 w-full text-sm font-medium text-center text-gray-500 rounded-l-lg focus:z-20 active hover:bg-gray-50 dark:bg-gray-700 dark:text-white"
|
|
aria-current="page" @click="TabsAndPills($event)">Profil Pengguna</button>
|
|
</li>
|
|
<li class="w-full">
|
|
<button id="password" type="button"
|
|
:class="{'bg-gray-300 text-gray-900 hover:bg-gray-300': this.showpassword}"
|
|
class="inline-block relative py-4 px-4 w-full text-sm font-medium text-center text-gray-500 hover:text-gray-700 hover:bg-gray-50 focus:z-20 dark:text-gray-400 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700 dark:text-white"
|
|
@click="TabsAndPills($event)">Katalaluan</button>
|
|
</li>
|
|
</ul>
|
|
<div id="tabs-1" v-if="showprofile">
|
|
|
|
<form class="mx-auto my-16 bg-white p-4 rounded">
|
|
<div class="grid grid-cols-2">
|
|
<div class="mb-4 p-2">
|
|
<label for="name" class="block text-gray-700 text-sm font-bold mb-2">Name</label>
|
|
<input type="text" id="name" disabled :value="user.name"
|
|
class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" />
|
|
</div>
|
|
<div class="mb-4 p-2">
|
|
<label for="email" class="block text-gray-700 text-sm font-bold mb-2">Email</label>
|
|
<input type="email" id="email" disabled :value="user.email"
|
|
class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" />
|
|
</div>
|
|
</div>
|
|
<div class="grid grid-cols-2">
|
|
<div class="mb-4 p-2">
|
|
<label for="no_kp" class="block text-gray-700 text-sm font-bold mb-2">No KP</label>
|
|
<input type="text" id="no_kp" disabled :value="user.no_kp"
|
|
class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" />
|
|
</div>
|
|
<div class="mb-4 p-2">
|
|
<label for="no_telefon" class="block text-gray-700 text-sm font-bold mb-2">No Telefon</label>
|
|
<input type="tel" id="no_telefon" disabled :value="user.no_telefon"
|
|
class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" />
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div id="tabs-2" v-if="showpassword">
|
|
<form class="max-w-md mx-auto my-16 bg-white p-4 rounded" @submit.prevent="submit" novalidate>
|
|
<div class="mb-4">
|
|
<label for="currentpass" class="block text-gray-700 text-sm font-bold mb-2">Katalaluan Lama</label>
|
|
<input type="password"
|
|
:class="{ 'border border-red-500 focus:border-red-500': $v.currentPassword.$error }"
|
|
v-model.trim="$v.currentPassword.$model" id="currentpass"
|
|
class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" />
|
|
<span class="text-red-500 text-xs italic" v-if="!$v.currentPassword.required">Kata laluan
|
|
diperlukan</span>
|
|
</div>
|
|
<div class="mb-4">
|
|
<label for="newpass" class="block text-gray-700 text-sm font-bold mb-2">Katalaluan Baru</label>
|
|
<input type="password"
|
|
:class="{ 'border border-red-500 focus:border-red-500': $v.newPassword.$error }"
|
|
v-model.trim="$v.newPassword.$model"
|
|
class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" />
|
|
<div>
|
|
<span class="text-red-500 text-xs italic" v-if="!$v.newPassword.required">Kata laluan
|
|
diperlukan</span>
|
|
<span class="text-red-500 text-xs italic" v-if="newPassword && !$v.newPassword.valid">Katalaluan
|
|
harus sekurang-kurangnya mengandungi Satu Huruf Besar, Satu Huruf Kecil, Satu Nombor dan
|
|
Satu Special Character </span>
|
|
<span class="text-red-500 text-xs italic"
|
|
v-if="newPassword && $v.newPassword.valid && !$v.newPassword.minLength">Katalaluan mestilah
|
|
sekurang-kurangnya 9 aksara</span>
|
|
<span class="text-red-500 text-xs italic"
|
|
v-if="newPassword && !$v.newPassword.maxLength">Katalaluan mestilah maksimum 19
|
|
aksara</span>
|
|
</div>
|
|
</div>
|
|
<div class="mb-4">
|
|
<label for="confirmpass" class="block text-gray-700 text-sm font-bold mb-2">Sahkan Katalaluan Baru
|
|
</label>
|
|
<input type="password"
|
|
:class="{ 'border border-red-500 focus:border-red-500': $v.confirmPassword.$error }"
|
|
v-model.trim="$v.confirmPassword.$model" id="confirmpass"
|
|
class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" />
|
|
<div>
|
|
<span class="text-red-500 text-xs italic" v-if="!$v.confirmPassword.required">Pengesahan
|
|
Katalaluan diperlukan</span>
|
|
<span class="text-red-500 text-xs italic"
|
|
v-if="confirmPassword && !$v.confirmPassword.sameAsPassword">Katalaluan dan Sahkan
|
|
Katalaluan haruslah sama</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center justify-between">
|
|
<span class="invisible">arrahn</span>
|
|
<button type="submit" :disabled="this.isDisabled"
|
|
:class="this.isDisabled ? 'bg-blue-200' : 'bg-blue-500 hover:bg-blue-700'"
|
|
class=" text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
|
|
<span>Tukar</span>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import {
|
|
assertExpressionStatement
|
|
} from '@babel/types';
|
|
import {
|
|
required,
|
|
minLength,
|
|
between,
|
|
maxLength,
|
|
sameAs
|
|
} from 'vuelidate/lib/validators'
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
showprofile: true,
|
|
showpassword: false,
|
|
submitStatus: '',
|
|
user: this.$attrs.user,
|
|
newPassword: "",
|
|
currentPassword: "",
|
|
confirmPassword: "",
|
|
submitted: false,
|
|
}
|
|
},
|
|
created() {
|
|
this.submitted = true;
|
|
return this.$v.$touch();
|
|
},
|
|
computed: {
|
|
isDisabled() {
|
|
return this.$v.$invalid;
|
|
},
|
|
},
|
|
methods: {
|
|
TabsAndPills: function (event) {
|
|
let targetId = event.currentTarget.id
|
|
|
|
event.preventDefault()
|
|
if (targetId === 'profile' && this.showprofile === false) {
|
|
this.showprofile = true
|
|
this.showpassword = false
|
|
}
|
|
|
|
if (targetId === 'password' && this.showpassword === false) {
|
|
this.showprofile = false
|
|
this.showpassword = true
|
|
}
|
|
},
|
|
submit: function () {
|
|
this.submitted = true;
|
|
this.$v.$touch();
|
|
if (this.$v.$invalid) {
|
|
this.$toast.warning('Masukkan data dalam kotak yang disediakan.')
|
|
return false;
|
|
} else {
|
|
let self = this
|
|
|
|
return this.axios.post('/api/changepass', {
|
|
current_password: this.currentPassword,
|
|
new_password: this.newPassword,
|
|
email: this.user.email
|
|
}).then((response) => {
|
|
if(response.data == 'success'){
|
|
self.$toast.success('Kemaskini Katalaluan berjaya.')
|
|
}
|
|
|
|
}).catch(function (error) {
|
|
if (error.response) {
|
|
// console.log(error.response.data);
|
|
// console.log(error.response.status);
|
|
// console.log(error.response.headers);
|
|
if(error.response.status == 401){
|
|
// console.log('tidak sama la');
|
|
self.$toast.error('Masukkan katalaluan yang betul.')
|
|
}
|
|
} else if (error.request) {
|
|
// console.log(error.request);
|
|
} else {
|
|
// console.log('Error', error.message);
|
|
}
|
|
// console.log(error.config);
|
|
});
|
|
alert("Form Valid");
|
|
}
|
|
}
|
|
},
|
|
validations: {
|
|
newPassword: {
|
|
required,
|
|
valid: function (value) {
|
|
const containsUppercase = /[A-Z]/.test(value)
|
|
const containsLowercase = /[a-z]/.test(value)
|
|
const containsNumber = /[0-9]/.test(value)
|
|
const containsSpecial = /[#?!@$%^&*-]/.test(value)
|
|
return containsUppercase && containsLowercase && containsNumber && containsSpecial
|
|
},
|
|
minLength: minLength(9),
|
|
maxLength: maxLength(19),
|
|
},
|
|
currentPassword: {
|
|
required
|
|
},
|
|
confirmPassword: {
|
|
required,
|
|
sameAsPassword: sameAs("newPassword")
|
|
},
|
|
}
|
|
}
|
|
|
|
</script>
|