Meteor-Front/src/components/settingsmodals/_2fa.svelte

60 lines
1.7 KiB
Svelte

<script lang="ts">
let _2facode: string
let message = {error: false, message: ""}
let disabled = false
export let jwt: string;
export let qrcode: string;
$:if (!_2facode){
disabled = true
message.message = "2FA code not inputted"
message.error = true
}else{
disabled = false
message.message = ""
message.error = false
}
async function verify2fa(){
const response = await fetch("/settings/verify2fa", {
method: 'POST',
body: JSON.stringify({code: _2facode}),
headers: {
'Content-Type': 'application/json',
'Authorization': jwt,
}
})
const json = await response.json()
if (!json.error){
message.message = "2FA Enabled"
message.error = false
document.location = '/settings'
}else{
message.message = json.error
message.error = true
}
}
</script>
<div class="space-y-2 flex flex-row flex-wrap justify-center">
<h5 class="m-auto text-center w-full">Confirm 2FA</h5>
<img alt={qrcode} class="w-64" src={qrcode}/>
<div class="space-y-4 w-full">
<input type="text" bind:value={_2facode} placeholder="Input 2FA" class="input input-bordered input-primary w-full rounded-md" required>
<h5 class="!text-xs mt-6 {message.error === true ? 'text-error-600' : 'text-success-600'}">{message.message??""}</h5>
</div>
<button on:click={verify2fa} class="btn variant-filled-primary btn-base rounded-md" disabled={disabled}>
Confirm
</button>
</div>