<script>
import {fetchGet, fetchPost} from "@/utilities/fetch.js";
import QRCode from "qrcode";
import {DashboardConfigurationStore} from "@/stores/DashboardConfigurationStore.js";
import LocaleText from "@/components/text/localeText.vue";

export default {
	name: "totp",
	components: {LocaleText},
	async setup(){
		const store = DashboardConfigurationStore();
		let l = ""
		await fetchGet("/api/Welcome_GetTotpLink", {}, (res => {
			if (res.status) l = res.data;
		}));
		return {l, store}
	},
	mounted() {
		if (this.l) {
			QRCode.toCanvas(document.getElementById('qrcode'), this.l, function (error) {})
		}
	},
	data(){
		return {
			totp: "",
			totpInvalidMessage: "",
			verified: false
		}
	},
	methods: {
		validateTotp(){
			
		}	
	},
	watch: {
		totp(newVal){
			const input = document.querySelector("#totp");
			input.classList.remove("is-invalid", "is-valid")
			if (newVal.length === 6){
				console.log(newVal)
				if (/[0-9]{6}/.test(newVal)){
					fetchPost("/api/Welcome_VerifyTotpLink", {
						totp: newVal
					}, (res) => {
						if (res.status){
							this.verified = true;
							input.classList.add("is-valid");
							this.$emit("verified")
						}else{
							input.classList.add("is-invalid")
							this.totpInvalidMessage = "TOTP does not match."
						}
					})
				}else{
					input.classList.add("is-invalid");
					this.totpInvalidMessage = "TOTP can only contain numbers"
				}
			}
		}
	}
}
</script>

<template>
	<div class="container-fluid login-container-fluid d-flex main pt-5 overflow-scroll"
	     :data-bs-theme="this.store.Configuration.server.wgdashboard_theme">
		<div class="m-auto text-body" style="width: 500px">
			<div  class="d-flex flex-column">
				<div>
					<h1 class="dashboardLogo display-4">
						<LocaleText t="Multi-Factor Authentication (MFA)"></LocaleText>
					</h1>
					<p class="mb-2"><small class="text-muted">
						<LocaleText t="1. Please scan the following QR Code to generate TOTP with your choice of authenticator"></LocaleText>
					</small></p>
					<canvas id="qrcode" class="rounded-3 mb-2"></canvas>
					<div class="p-3 bg-body-secondary rounded-3 border mb-3">
						<p class="text-muted mb-0">
							<small>
								<LocaleText t="Or you can click the link below:"></LocaleText>
							</small>
						</p><a :href="this.l"><code style="line-break: anywhere">{{this.l}}</code></a>
					</div>
					<label for="totp" class="mb-2">
						<small class="text-muted">
							<LocaleText t="2. Enter the TOTP generated by your authenticator to verify"></LocaleText>
						</small>
					</label>
					<div class="form-group mb-2">
						<input class="form-control text-center totp"
						       id="totp" maxlength="6" type="text" inputmode="numeric" autocomplete="one-time-code"
						       v-model="this.totp"
						       :disabled="this.verified"
						>
						<div class="invalid-feedback">
							<LocaleText :t="this.totpInvalidMessage"></LocaleText>
						</div>
						<div class="valid-feedback">
							<LocaleText t="TOTP verified!"></LocaleText>
						</div>
					</div>
				</div>
				<hr>
				<div class="d-flex gap-3 mt-5 flex-column">
					<RouterLink
						to="/"
						v-if="!this.verified"
						class="btn bg-secondary-subtle text-secondary-emphasis 
							rounded-3
							flex-grow-1 btn-lg border-1 border-secondary-subtle shadow d-flex">
						<LocaleText t="I don't need MFA"></LocaleText>
						<i class="bi bi-chevron-right ms-auto"></i>
					</RouterLink>
					<RouterLink
						to="/"
						v-else class="btn btn-dark btn-lg d-flex btn-brand shadow align-items-center flex-grow-1 rounded-3">
						<LocaleText t="Complete"></LocaleText>
						<i class="bi bi-chevron-right ms-auto"></i>
					</RouterLink>
				</div>
			</div>
		</div>
	</div>
	
	
</template>

<style scoped>
	
</style>