Two Factor Recovery Codes functionality

resources/js/components/FilesView/MobileActionButton.vue

@@ -1,6 +1,9 @@
 <template>
     <button class="mobile-action-button">
         <div class="flex">
+            <refresh-cw-icon v-if="icon === 'refresh'" size="15" class="icon dark-text-theme" />
+            <download-icon v-if="icon === 'download'" size="15" class="icon dark-text-theme" />
+            <copy-icon v-if="icon === 'copy'" size="15" class="icon dark-text-theme" />
             <filter-icon v-if="icon === 'filter'" size="15" class="icon dark-text-theme" />
             <credit-card-icon v-if="icon === 'credit-card'" size="15" class="icon dark-text-theme" />
             <folder-plus-icon v-if="icon === 'folder-plus'" size="15" class="icon dark-text-theme" />
@@ -22,7 +25,7 @@
 </template>
 
 <script>
-    import { FilterIcon, DollarSignIcon, CheckIcon, XSquareIcon, CheckSquareIcon, FolderPlusIcon, ListIcon, GridIcon, TrashIcon, UserPlusIcon, PlusIcon, CreditCardIcon  } from 'vue-feather-icons'
+    import { RefreshCwIcon, DownloadIcon, CopyIcon, FilterIcon, DollarSignIcon, CheckIcon, XSquareIcon, CheckSquareIcon, FolderPlusIcon, ListIcon, GridIcon, TrashIcon, UserPlusIcon, PlusIcon, CreditCardIcon  } from 'vue-feather-icons'
     import SortingIcon from '@/components/FilesView/Icons/SortingIcon'
 
     export default {
@@ -31,17 +34,20 @@
             'icon'
         ],
         components: {
-            SortingIcon,
             CheckSquareIcon,
             DollarSignIcon,
             CreditCardIcon,
             FolderPlusIcon,
+			RefreshCwIcon,
             UserPlusIcon,
+			DownloadIcon,
+            SortingIcon,
             XSquareIcon,
             FilterIcon,
             CheckIcon,
             TrashIcon,
             PlusIcon,
+			CopyIcon,
             ListIcon,
             GridIcon,
         }

resources/js/components/Others/Notifications/ToastrWrapper.vue

@@ -46,7 +46,7 @@
         position: absolute;
         right: 30px;
         top: 30px;
-        z-index: 10;
+        z-index: 90;
     }
 
     @media only screen and (max-width: 690px) {

resources/js/components/Others/Popup/PopupHeader.vue

@@ -4,6 +4,7 @@
             <corner-down-right-icon v-if="icon === 'move'" size="15" class="title-icon text-theme" />
             <share-icon v-if="icon === 'share'" size="17" class="title-icon text-theme" />
             <edit2-icon v-if="icon === 'edit'" size="17" class="title-icon text-theme" />
+            <key-icon v-if="icon === 'key'" size="17" class="title-icon text-theme" />
         </div>
         <div class="label">
             <h1 class="title">{{ title }}</h1>
@@ -13,7 +14,7 @@
 </template>
 
 <script>
-    import {CornerDownRightIcon, LinkIcon, XIcon, Edit2Icon, ShareIcon} from 'vue-feather-icons'
+    import {KeyIcon, CornerDownRightIcon, LinkIcon, XIcon, Edit2Icon, ShareIcon} from 'vue-feather-icons'
     import {events} from '@/bus'
 
     export default {
@@ -26,6 +27,7 @@
             ShareIcon,
             Edit2Icon,
             LinkIcon,
+			KeyIcon,
             XIcon,
         },
         methods: {

resources/js/components/Others/TwoFactorRecoveryCodesPopup.vue

@@ -0,0 +1,215 @@
+<template>
+    <PopupWrapper name="two-factor-recovery-codes">
+        <PopupHeader :title="$t('popup_2fa.popup_codes_title')" icon="key" />
+
+        <PopupContent style="padding: 0 20px">
+
+			<div class="mobile-actions">
+				<MobileActionButton @click.native="copyCodes" icon="copy">
+					{{ $t('context_menu.copy') }}
+				</MobileActionButton>
+
+				<MobileActionButton @click.native="downloadCodes" icon="download">
+					{{ $t('context_menu.download') }}
+				</MobileActionButton>
+
+				<MobileActionButton @click.native="regenerateCodes" icon="refresh">
+					{{ $t('context_menu.codes_regenerate') }}
+				</MobileActionButton>
+			</div>
+
+			<ul v-if="! isLoading" class="codes-list">
+				<li v-for="(code, i) in codes" :key="i">{{ code }}</li>
+			</ul>
+
+			<div v-if="isLoading" class="spinner-wrapper">
+				<Spinner />
+			</div>
+
+			<textarea v-model="inputCodes" ref="codes" class="codes-output"></textarea>
+
+			<InfoBox style="margin-bottom: 0">
+				<p v-html="$t('popup_2fa.popup_codes_disclaimer')"></p>
+			</InfoBox>
+        </PopupContent>
+
+        <PopupActions>
+            <ButtonBase
+				class="popup-button"
+				@click.native="$closePopup()"
+				button-style="theme"
+			>
+                {{ $t('shared_form.button_done') }}
+            </ButtonBase>
+        </PopupActions>
+    </PopupWrapper>
+</template>
+
+<script>
+import MobileActionButton from '@/components/FilesView/MobileActionButton'
+import PopupWrapper from '@/components/Others/Popup/PopupWrapper'
+import PopupActions from '@/components/Others/Popup/PopupActions'
+import PopupContent from '@/components/Others/Popup/PopupContent'
+import PopupHeader from '@/components/Others/Popup/PopupHeader'
+import ButtonBase from '@/components/FilesView/ButtonBase'
+import InfoBox from '@/components/Others/Forms/InfoBox'
+import Spinner from '@/components/FilesView/Spinner'
+import {mapGetters} from "vuex"
+import {events} from '@/bus'
+import axios from 'axios'
+
+export default {
+	name: "TwoFactorRecoveryCodesPopup",
+	components: {
+		MobileActionButton,
+		PopupWrapper,
+		PopupActions,
+		PopupContent,
+		PopupHeader,
+		ButtonBase,
+		Spinner,
+		InfoBox,
+	},
+	data() {
+		return {
+			codes: undefined,
+			isLoading: true,
+			inputCodes: undefined,
+		}
+	},
+	computed: {
+		...mapGetters(['user']),
+	},
+	methods: {
+		copyCodes() {
+			let copyText = this.$refs.codes
+
+			copyText.select()
+
+			document.execCommand('copy')
+
+			copyText.setAttribute('type', 'hidden')
+
+			window.getSelection().removeAllRanges()
+
+			events.$emit('toaster', {
+				type: 'success',
+				message: this.$t('popup_2fa.toaster_codes_copied'),
+			})
+		},
+		downloadCodes() {
+			// Create txt content
+			let recoveryCodes = "data:x-application/xml;charset=utf-8," + escape(this.codes.join("\n"));
+
+			// Create download link
+			let downloadLink = document.createElement("a")
+
+			downloadLink.href = recoveryCodes
+			downloadLink.download = "recovery-codes.txt"
+
+			// Download .txt
+			document.body.appendChild(downloadLink);
+			downloadLink.click();
+			document.body.removeChild(downloadLink);
+		},
+		regenerateCodes() {
+			this.isLoading = true
+
+			axios.post('/user/two-factor-recovery-codes')
+				.then(() => {
+					this.getRecoveryCodes()
+
+					events.$emit('toaster', {
+						type: 'success',
+						message: this.$t('popup_2fa.toaster_codes_regenerated'),
+					})
+				})
+				.catch(() => {
+					this.$isSomethingWrong()
+				})
+				.finally(() => this.isLoading = false)
+		},
+		getRecoveryCodes() {
+			axios.get('/user/two-factor-recovery-codes')
+				.then(response => {
+					this.codes = response.data
+					this.inputCodes = response.data.join("\n")
+				})
+				.catch(() => {
+					this.$isSomethingWrong()
+				})
+				.finally(() => this.isLoading = false)
+		}
+	},
+	created() {
+		events.$on('popup:open', ({name}) => {
+			if ('two-factor-recovery-codes' === name)
+				this.getRecoveryCodes()
+		})
+
+		axios.get('/api/user/secret')
+			.then(response => {
+				console.log(response.data);
+			})
+	},
+	destroyed() {
+		events.off('popup:open')
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+    @import '@assets/vuefilemanager/_variables';
+	@import '@assets/vuefilemanager/_mixins';
+
+	.mobile-actions {
+		white-space: nowrap;
+		overflow-x: auto;
+		margin: 0 -20px;
+		padding: 10px 0 10px 20px;
+	}
+
+	.codes-list {
+		margin: 5px 0 15px;
+		padding-left: 30px;
+
+		li {
+			@include font-size(14);
+			font-weight: bold;
+			padding: 10px 0;
+			border-bottom: 1px solid $light_mode_border;
+			list-style: circle;
+
+			&:last-child {
+				border-bottom: none;
+			}
+		}
+	}
+
+	.codes-output {
+		position: absolute;
+		right: -9999px;
+	}
+
+	.spinner-wrapper {
+		height: 339px;
+		position: relative;
+
+		.spinner {
+			top: 46% !important;
+		}
+	}
+
+	@media (prefers-color-scheme: dark) {
+		.codes-list {
+
+			li {
+				border-color: $dark_mode_border_color;
+			}
+		}
+
+		.info-box, .mobile-action-button {
+			background: lighten($dark_mode_foreground, 3%);
+		}
+	}
+</style>

resources/js/components/Others/TwoFactorSetupPopup.vue

@@ -18,7 +18,9 @@
                     <div v-html="qrCode"></div>
                 </div>
 
-                <small class="input-help" v-html="$t('popup_2fa.help')"></small>
+				<InfoBox style="margin-bottom: 0">
+                	<p v-html="$t('popup_2fa.help')"></p>
+            	</InfoBox>
             </div>
         </PopupContent>
 
@@ -60,6 +62,7 @@ import PopupActions from '@/components/Others/Popup/PopupActions'
 import PopupContent from '@/components/Others/Popup/PopupContent'
 import PopupHeader from '@/components/Others/Popup/PopupHeader'
 import ButtonBase from '@/components/FilesView/ButtonBase'
+import InfoBox from '@/components/Others/Forms/InfoBox'
 import {required} from 'vee-validate/dist/rules'
 import {mapGetters} from 'vuex'
 import {events} from '@/bus'
@@ -76,12 +79,13 @@ export default {
 		PopupHeader,
 		ButtonBase,
 		required,
+		InfoBox,
 	},
 	computed: {
 		...mapGetters(['user']),
 		closeQrButtonText() {
 			return this.isConfirmedClose
-				? 'Really disappear this QR code?'
+				? this.$t('popup_2fa.disappear_qr')
 				: this.$t('shared_form.button_done')
 		},
 		closeQrButtonStyle() {
@@ -184,11 +188,6 @@ export default {
 				this.qrCode = undefined
 				this.isConfirmedClose = false
 
-				axios.get('/user/two-factor-recovery-codes')
-					.then(response => {
-						console.log(response.data);
-					})
-
 				this.$closePopup()
 			}
 		}

resources/js/views/Platform.vue

@@ -14,8 +14,6 @@
         <CreateFolderPopup />
         <RenameItemPopup />
 
-		<TwoFactorSetupPopup />
-
         <MoveItemPopup />
 
         <!--Mobile components-->
@@ -37,7 +35,6 @@
 </template>
 
 <script>
-    import TwoFactorSetupPopup from '@/components/Others/TwoFactorSetupPopup'
     import MultiSelectToolbarMobile from '@/components/FilesView/MultiSelectToolbarMobile'
     import FileSortingMobile from '@/components/FilesView/FileSortingMobile'
     import SidebarNavigation from '@/components/Sidebar/SidebarNavigation'
@@ -59,7 +56,6 @@
     export default {
         name: 'Platform',
         components: {
-            TwoFactorSetupPopup,
             MultiSelectToolbarMobile,
             CreateFolderPopup,
             FileSortingMobile,

resources/js/views/Profile.vue

@@ -1,6 +1,5 @@
 <template>
     <section id="viewport">
-
         <ContentSidebar>
 
             <!--Settings-->
@@ -34,6 +33,8 @@
                     </router-link>
                 </div>
             </ContentGroup>
+
+			<!--Subscription-->
             <ContentGroup title="Subscription" class="navigator" v-if="canShowSubscriptionSettings">
                 <div class="menu-list-wrapper vertical">
                     <router-link replace :to="{name: 'Subscription'}" class="menu-list-item link">
@@ -66,7 +67,7 @@
             </ContentGroup>
         </ContentSidebar>
 
-        <div id="single-page" v-if="user">
+        <div v-if="user" id="single-page">
             <div id="page-content" class="medium-width" v-if="! isLoading">
                 <MobileHeader :title="$t($router.currentRoute.meta.title)"/>
 
@@ -120,11 +121,16 @@
                 <Spinner></Spinner>
             </div>
         </div>
-    </section>
 
+		<!--2FA popups-->
+		<TwoFactorRecoveryCodesPopup />
+		<TwoFactorSetupPopup />
+    </section>
 </template>
 
 <script>
+	import TwoFactorRecoveryCodesPopup from '@/components/Others/TwoFactorRecoveryCodesPopup'
+	import TwoFactorSetupPopup from '@/components/Others/TwoFactorSetupPopup'
     import ContentSidebar from '@/components/Sidebar/ContentSidebar'
     import ContentGroup from '@/components/Sidebar/ContentGroup'
     import UserImageInput from '@/components/Others/UserImageInput'
@@ -147,6 +153,8 @@
     export default {
         name: 'Settings',
         components: {
+			TwoFactorRecoveryCodesPopup,
+			TwoFactorSetupPopup,
             ContentSidebar,
             CreditCardIcon,
             UserImageInput,

resources/js/views/User/Password.vue

@@ -32,43 +32,64 @@
                 </div>
             </ValidationObserver>
         </PageTabGroup>
-
         <PageTabGroup class="form block-form">
-            <FormLabel> Two Factor Authentication </FormLabel>
-
+            <FormLabel>{{ $t('2fa.settings.title') }}</FormLabel>
             <div class="block-wrapper">
-                    <div class="input-wrapper">
-                        <div class="inline-wrapper">
-                            <div class="switch-label">
-                                <label class="input-label">
-                                    Enable / Disable Two Factor Authentication
-                                </label>
-                                <small class="input-help" v-html="$t('popup_2fa.switch_info')"></small>
-                            </div>
-                            <SwitchInput @click.native.prevent.stop="open2faPopup"
-                                         class="switch"
-                                         :state="user.data.attributes.two_factor_authentication"
-                            />
-                        </div>
-                    </div>
-                </div>
+				<div class="input-wrapper">
+					<div class="inline-wrapper">
+						<div class="switch-label">
+							<label class="input-label">
+								{{ $t('popup_2fa.switch_title') }}
+							</label>
+							<small class="input-help" v-html="$t('popup_2fa.switch_info')"></small>
+						</div>
+						<SwitchInput @click.native.prevent.stop="open2faPopup"
+									 class="switch"
+									 :state="user.data.attributes.two_factor_authentication"
+						/>
+					</div>
+				</div>
+			</div>
+
+            <div v-if="user && user.data.attributes.two_factor_authentication" class="block-wrapper">
+				<div class="input-wrapper">
+					<div class="inline-wrapper button-block">
+						<div class="switch-label">
+							<label class="input-label">
+								{{ $t('popup_2fa.codes_title') }}
+							</label>
+							<small class="input-help">
+								{{ $t('popup_2fa.codes_info') }}
+							</small>
+						</div>
+						<ButtonBase
+							class="popup-button"
+							button-style="secondary"
+							@click.native="showRecoveryCodes"
+						>
+							{{ $t('popup_2fa.codes_button') }}
+						</ButtonBase>
+					</div>
+				</div>
+			</div>
         </PageTabGroup>
     </PageTab>
 </template>
 
 <script>
     import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
+
     import PageTabGroup from '@/components/Others/Layout/PageTabGroup'
     import UserImageInput from '@/components/Others/UserImageInput'
+    import SwitchInput from '@/components/Others/Forms/SwitchInput'
     import FormLabel from '@/components/Others/Forms/FormLabel'
     import MobileHeader from '@/components/Mobile/MobileHeader'
     import ButtonBase from '@/components/FilesView/ButtonBase'
     import PageTab from '@/components/Others/Layout/PageTab'
     import PageHeader from '@/components/Others/PageHeader'
     import ThemeLabel from '@/components/Others/ThemeLabel'
-    import SwitchInput from '@/components/Others/Forms/SwitchInput'
-    import {mapGetters} from 'vuex'
     import {required} from 'vee-validate/dist/rules'
+    import {mapGetters} from 'vuex'
     import {events} from '@/bus'
     import axios from 'axios'
 
@@ -142,6 +163,9 @@
             },
             open2faPopup() {
                 events.$emit('popup:open', {name: 'two-factor-authentication-confirm'})
+            },
+            showRecoveryCodes() {
+                events.$emit('popup:open', {name: 'two-factor-recovery-codes'})
             }
         }
     }
@@ -167,6 +191,17 @@
         }
     }
 
+	@media only screen and (max-width: 690px) {
+
+		.form .button-block {
+			display: block;
+
+			.popup-button {
+				margin-top: 15px;
+			}
+		}
+	}
+
     @media (prefers-color-scheme: dark) {
 
     }