komponen vue js untuk action button send OTP
<template> | |
<div class="text-center"> | |
<!-- Tombol link untuk mengirim OTP --> | |
<div class="my-4"> | |
<a class="rounded-lg text-sm px-4 py-2 mt-5 outline outline-offset-2 outline-1 outline-primary-800 text-primary-700 hover:text-primary-900" | |
id="generateOTP" href="#" @click.prevent="sendOTP" v-if="!countdownStarted"> | |
Kirim Kode OTP | |
</a> | |
</div> | |
<!-- Penampil waktu mundur --> | |
<div id="countdown" class="block"> | |
<div class="text-xs text-gray-500" v-if="countdownStarted">{{ countdownText }}</div> | |
</div> | |
</div> | |
</template> | |
<script> | |
export default { | |
data() { | |
return { | |
phoneNumber: null, | |
countdownSeconds: 120, | |
countdownInterval: null, | |
countdownStarted: false, | |
startTime: null, | |
}; | |
}, | |
computed: { | |
countdownText() { | |
var minutes = Math.floor(this.countdownSeconds / 60); | |
var remainingSeconds = this.countdownSeconds % 60; | |
return 'Waktu Mundur: ' + minutes + ' menit ' + remainingSeconds + ' detik'; | |
} | |
}, | |
methods: { | |
sendOTP() { | |
console.log('Mengirim kode OTP ke nomor handphone:', this.phoneNumber); | |
var apiUrl = 'https://www.atthala-v3.test/akses/kirim-otp/' + encodeURIComponent(this.phoneNumber); | |
fetch(apiUrl, { | |
mode: 'cors', | |
headers: { | |
'Access-Control-Allow-Origin': '*' | |
} | |
}) | |
.then(response => { | |
if (response.ok) { | |
return response.json(); | |
} else { | |
throw new Error('Gagal mengirim OTP'); | |
} | |
}) | |
.then(data => { | |
console.log('Respons dari server:', data); | |
this.startCountdown(); | |
}) | |
.catch(error => { | |
console.error('Terjadi kesalahan:', error); | |
}); | |
}, | |
startCountdown() { | |
this.countdownStarted = true; | |
this.startTime = new Date().getTime(); | |
this.countdownInterval = setInterval(() => { | |
if (this.countdownSeconds > 0) { | |
this.countdownSeconds--; | |
localStorage.setItem('startTime', this.countdownSeconds.toString()); | |
} else { | |
clearInterval(this.countdownInterval); | |
this.countdownStarted = false; | |
} | |
}, 1000); | |
} | |
}, | |
created() { | |
const pathSegments = window.location.pathname.split('/'); | |
const phoneIndex = pathSegments.indexOf('akses'); | |
if (phoneIndex !== -1 && pathSegments[phoneIndex + 1] && /^\d+$/.test(pathSegments[phoneIndex + 1])) { | |
this.phoneNumber = pathSegments[phoneIndex + 1]; | |
} else { | |
console.error('Nomor handphone tidak valid atau tidak ditemukan dalam path URL.'); | |
} | |
// Mengambil waktu mulai dari sesi storage | |
const storedStartTime = localStorage.getItem('startTime'); | |
if (storedStartTime) { | |
const elapsedTime = new Date().getTime() - parseInt(storedStartTime); | |
const remainingSeconds = Math.max(0, this.countdownSeconds - Math.floor(elapsedTime / 1000)); | |
if (remainingSeconds > 0) { | |
this.countdownSeconds = remainingSeconds; | |
this.countdownStarted = true; | |
this.startCountdown(); | |
} else { | |
// Jika waktu hitung mundur sudah habis, bersihkan sesi storage | |
localStorage.removeItem('startTime'); | |
} | |
} | |
}, | |
beforeMount() { | |
// mengecek apakah ada data startTime di localStorage saat halaman direfresh | |
const storedStartTime = localStorage.getItem('startTime'); | |
if (storedStartTime) { | |
// jika ada, set kembali nilai startTime | |
this.startTime = parseInt(storedStartTime); | |
this.countdownStarted = true; | |
} | |
}, | |
beforeDestroy() { | |
// Menyimpan waktu mulai ke sesi storage saat komponen dihancurkan | |
localStorage.setItem('startTime', this.startTime.toString()); | |
} | |
}; | |
</script> | |
<style> | |
</style> |
Top comments (0)