komponen vue js untuk action button send OTP
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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)