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