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()
 			}
 		}