DEV Community

Cover image for Vuejs action button send OTP
Gagang
Gagang

Posted on

Vuejs action button send OTP

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>
view raw sendOTP.vue hosted with ❤ by GitHub

Top comments (0)

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay