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)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more