Skip to content

Commit

Permalink
updated
Browse files Browse the repository at this point in the history
  • Loading branch information
@Vishwas1
Vishwas1 committed Sep 6, 2024
1 parent 94db205 commit 61daf14
Show file tree
Hide file tree
Showing 4 changed files with 98 additions and 93 deletions.
4 changes: 2 additions & 2 deletions src/App.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,8 +94,8 @@
</b-nav-item>
<b-nav-item v-if="parseAuthToken.isTwoFactorEnabled == false">
<button class="btn btn-outline-secondary" type="button" @click="$router.push('mfa')">
<span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
<button class="btn btn-link" type="button" @click="$router.push('mfa')" style="color: grey">
<span class="spinner-grow spinner-grow-sm text-danger" role="status" aria-hidden="true"></span>
<span class="visually-hidden"> Setup MFA</span>
</button>
</b-nav-item>
Expand Down
21 changes: 1 addition & 20 deletions src/components/login/mfa/MFA.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,17 +17,10 @@ export default {
computed: {
...mapGetters('mainStore', ['getAuthToken']),
isTwoFactorEnabled() {
// const authToken = this.getAuthToken;
const payload = localStorage.getItem('user') //this.parseJwt({ token: authToken });
const payload = localStorage.getItem('user')
if (payload) {
return JSON.parse(payload)
}
// if (payload) {
// this.setAuthenticatorType = payload.authenticatorType
// if (payload.isTwoFactorAuthenticated) {
// return payload.isTwoFactorAuthenticated
// }
// }
return {};
}
},
Expand All @@ -46,18 +39,6 @@ export default {
},
methods: {
...mapMutations('mainStore', 'setSelectedAppId'),
parseJwt: (payload) => {
const { token } = payload;
if (!token) throw new Error('JWT token must be provided')
var base64Url = token.split('.')[1];
var base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
var jsonPayload = decodeURIComponent(window.atob(base64).split('').map(function (c) {
return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
}).join(''));
return JSON.parse(jsonPayload);
},
}
}
Expand Down
104 changes: 50 additions & 54 deletions src/components/login/mfa/SetupMfa.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,65 +3,61 @@
<div>
<load-ing :active.sync="isLoading" :can-cancel="true" :is-full-page="true"></load-ing>

<h3>Setup Authenticator as an MFA method</h3>
<div class="card" style="width: 50%;">
<div class="card-body">
<ul>
<li class="mb-4">
<div>
<label><strong>STEP ONE</strong></label>
<h3>Setup Authenticator as a MFA method</h3>
<div class="card " style="width: 50%;">
<ul class="list-group">
<li class="list-group-item">
<div>
<label><strong>STEP ONE</strong></label>
</div>
<div>
Download/Use any authenticator application like Google Authenticator or Okta Authenticator
on your mobile device.
</div>
<div>
<div class="form-group">
<select class="custom-select" id="selectService" v-model="authenticationMethod"
v-on:change="onSelectedAuthenticatorMethod()">
<option value="" selected disabled>Authenticator App</option>
<option v-for="method in authenticationMethodsList" :value="method.value"
:key="method.name">{{
method.name.toUpperCase() }}
</option>
</select>
</div>
<div>
Download/Use any authenticator application like Google Authenticator or Okta Authenticator
on your mobile device.
</div>
<div>
<div class="form-group">
<select class="custom-select" id="selectService" v-model="authenticationMethod"
v-on:change="onSelectedAuthenticatorMethod()">
<option value="" selected disabled>Authenticator App</option>
<option v-for="method in authenticationMethodsList" :value="method.value"
:key="method.name">{{
method.name.toUpperCase() }}
</option>
</select>
</div>
</div>
</li>
</div>
</li>
<li class="list-group-item" v-if="qrCodeDataUrl">
<div>
<label><strong>STEP TWO</strong></label>
</div>
<div>
On your mobile device tap the "+" icon then select "Scan QR Code" to scan the QR code
below
</div>
<div class="m-1">
<div class="p-3">
<img :src="qrCodeDataUrl" style="border-radius: 10px; border: 1px solid grey;">

<li class="mb-4" v-if="qrCodeDataUrl">
<div>
<label><strong>STEP TWO</strong></label>
</div>
<div>
On your mobile device tap the "+" icon then select "Scan QR Code" to scan the QR code below
</div>
<div class="m-1">
<div class="p-3">
<img :src="qrCodeDataUrl" style="border-radius: 10px; border: 1px solid grey;">

</div>

</div>
</li>


<li class="mb-4" v-if="qrCodeDataUrl">
<div>
<label><strong>STEP THREE</strong></label>
</div>
<div>
Once the QR code has been scanned, enter the 6-digit code generated by the application.
</div>
<div class="m-1">
<div class="px-2 mx-1">
<PIN inputType="number" @pinTakenEvent="pinTakenEventHandler"></PIN>
</div>
<small v-if="error" style="color:red">{{ error }}</small>
</div>
</li>
<li class="list-group-item" v-if="qrCodeDataUrl">
<div>
<label><strong>STEP THREE</strong></label>
</div>
<div>
Once the QR code has been scanned, enter the 6-digit code generated by the application.
</div>
<div class="m-1">
<div class="px-2 mx-1">
<PIN inputType="number" @pinTakenEvent="pinTakenEventHandler"></PIN>
</div>
</li>
</ul>
</div>
<small v-if="error" style="color:red">{{ error }}</small>
</div>
</li>
</ul>
</div>
<div class="mt-2">
<button type="button" class="btn btn-light" @click="skip()">Skip</button>
Expand Down
62 changes: 45 additions & 17 deletions src/views/SettingConfig.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,29 +3,43 @@
<div>
<b-card no-body v-if="isFeatureImplemented">
<b-tabs card>
<!-- <b-tab active>
<b-tab active>
<template #title>
<b-icon icon="person-square" aria-hidden="true" small></b-icon><strong> Profile</strong>
</template>
<b-card no-body>
<b-tabs card vertical justified small>
<b-tab active>
<template #title>
<b-card no-body>
<b-tabs card vertical justified small>
<!-- <b-tab active>
<template #title>
<i class="fa fa-user-circle" aria-hidden="true"></i>
General
</template>
<MyProfile />
</b-tab>
<b-tab>
<template #title>
<i class="fa fa-lock" aria-hidden="true"></i> Multi Factor
<MyProfile />
</b-tab> -->
<b-tab>
<template #title>
<b-icon icon="shield-shaded"></b-icon> Multi Factor
Authentication (MFA)
</template>
<p></p>
</b-tab>
</b-tabs>
</b-card>
</b-tab> -->
<SetupMFA v-if="!isTwoFactorEnabled.isTwoFactorEnabled" />
<div v-else>
<h3>MFA Enabled <b-icon icon="shield-shaded"></b-icon> </h3>
<ul class="list-group">
<li class="list-group-item">
<span>
Type: {{ isTwoFactorEnabled.authenticators[0].type }}
</span>
<span style="float:right">
<!-- <button class="btn btn-danger btn-sm" @click="deleteMFA()"
title="Delete MFA"><i class="fa fa-trash"></i></button> -->
</span>
</li>
</ul>
</div>
</b-tab>
</b-tabs>
</b-card>
</b-tab>
<b-tab active>
<template #title>
<b-icon icon="sliders" aria-hidden="true" small></b-icon><strong> Members &
Expand Down Expand Up @@ -69,7 +83,10 @@
import TeamMembers from '../components/teams/TeamMembers.vue';
import MyInvitions from '../components/teams/MyInvitions.vue'
import AdminTeams from '../components/teams/AdminTeams.vue';
import { mapMutations } from "vuex";
import { mapMutations, mapGetters } from "vuex";
// import MfaPage from '../components/login/mfa/MFA.vue'
import SetupMFA from '../components/login/mfa/SetupMfa.vue';
// import MyProfile from '../components/teams/MyProfile.vue'
export default {
Expand All @@ -78,7 +95,18 @@ export default {
TeamMembers,
AdminTeams,
MyInvitions,
// MyProfile
SetupMFA
// MyProfile,
},
computed: {
...mapGetters('mainStore', ['getAuthToken']),
isTwoFactorEnabled() {
const payload = localStorage.getItem('user')
if (payload) {
return JSON.parse(payload)
}
return {};
}
},
data() {
return {
Expand Down

0 comments on commit 61daf14

Please sign in to comment.