two fa almost complete

This commit is contained in:
2023-07-13 09:58:43 +02:00
parent 399726d563
commit 9f5d5a3be3
11 changed files with 293 additions and 52 deletions

View File

@@ -54,15 +54,18 @@
}
};
fetch( localStorage.getItem( 'url' ) + '/user/login', fetchOptions ).then( res => {
res.text().then( text => {
console.log( text );
if ( text === 'ok' ) {
res.json().then( json => {
if ( json.status === 'ok' ) {
this.userStore.setUserAuth( true );
this.$router.push( sessionStorage.getItem( 'redirect' ) ? sessionStorage.getItem( 'redirect' ) : '/account' );
sessionStorage.removeItem( 'redirect' );
} else if ( text === '2fa' ) {
} else if ( json.status === '2fa' ) {
this.userStore.setUser2fa( true );
this.$router.push( '/twoFactors' );
} else if ( json.status === '2fa+' ) {
this.userStore.setUser2fa( true );
sessionStorage.setItem( '2faCode', json.code );
this.$router.push( '/twoFactors' );
} else {
this.$refs.notification.createNotification( 'The credentials you provided do not match our records.', 5, 'error', 'normal' );
}

View File

@@ -1,6 +1,64 @@
<template>
<div id="2fa">
<h1>Two Factor Authentication</h1>
<div id="twoFA">
<h1>Two-Factor Authentication</h1>
<p>We have sent you an email containing a link for Authentication.</p>
<div class="code-container" v-if="code != ''">
<p>Open the link in the email and enter this code:</p>
<div class="code">
<div class="code-sub" id="code-part1">{{ code[1] }}</div>
<div class="code-sub" id="code-part2">{{ code[2] }}</div>
</div>
</div>
</div>
</template>
</template>
<script>
export default {
name: 'twoFA',
data () {
return {
code: { '1': '', '2': '' }
}
},
created () {
let code = sessionStorage.getItem( '2faCode' ) ? sessionStorage.getItem( '2faCode' ) : '';
this.code = { '1': code.slice( 0, 3 ), '2': code.substring( 3 ) };
},
}
</script>
<style scoped>
#twoFA, .code-container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.code-container {
width: fit-content;
padding: 5% 8%;
border: var( --primary-color ) solid 2px;
border-radius: 10px;
margin-top: 3%;
background-color: var( --popup-color );
}
.code {
background-color: var( --hover-color );
padding: 7% 10%;
margin-bottom: 0;
width: fit-content;
border-radius: 10px;
font-size: 200%;
font-family: monospace;
display: block;
}
.code-sub {
display: inline-block;
}
#code-part2 {
margin-left: 7px;
}
</style>