Merge remote-tracking branch 'origin/2fa'

# Conflicts: # .php-cs-fixer.cache # config/language-translations.php # public/mix-manifest.json # resources/js/views/Auth/SignIn.vue # webpack.mix.js
2026-04-18 08:12:15 +00:00 · 2021-07-17 20:25:30 +02:00
parent cdd99f66b7 a438f8fb99
commit 460b95e6de
18 changed files with 1035 additions and 110 deletions
--- a/resources/js/components/FilesView/MobileActionButton.vue
+++ b/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,
        }
--- a/resources/js/components/Others/Notifications/ToastrWrapper.vue
+++ b/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) {
--- a/resources/js/components/Others/Popup/PopupHeader.vue
+++ b/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: {
--- a/resources/js/components/Others/ShareEditPopup.vue
+++ b/resources/js/components/Others/ShareEditPopup.vue
@@ -152,11 +152,11 @@
                    return this.$t('popup_share_edit.go_back')
            },
            destroyButtonStyle() {
-                    if(! this.sendToRecipientsMenu)
-                        return this.isConfirmedDestroy ? 'danger-solid' : 'secondary'
+				if(! this.sendToRecipientsMenu)
+					return this.isConfirmedDestroy ? 'danger-solid' : 'secondary'

-                    if(this.sendToRecipientsMenu)
-                        return 'secondary'
+				if(this.sendToRecipientsMenu)
+					return 'secondary'
            },
            secondButtonText(){
                if(! this.sendToRecipientsMenu)
--- a/resources/js/components/Others/TwoFactorRecoveryCodesPopup.vue
+++ b/resources/js/components/Others/TwoFactorRecoveryCodesPopup.vue
@@ -0,0 +1,207 @@
+<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()
+			copyText.setSelectionRange(0, 99999)
+
+			document.execCommand('copy')
+
+			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()
+		})
+	},
+	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>
--- a/resources/js/components/Others/TwoFactorSetupPopup.vue
+++ b/resources/js/components/Others/TwoFactorSetupPopup.vue
@@ -0,0 +1,211 @@
+<template>
+    <PopupWrapper name="two-factor-authentication-confirm">
+
+        <PopupHeader :title="$t('popup_2fa.title')" icon="edit" />
+
+        <PopupContent>
+             <ValidationObserver @submit.prevent="confirmPassword" v-if="! qrCode" ref="passwordForm" v-slot="{ invalid }" tag="form" class="form-wrapper">
+
+                <ValidationProvider tag="div" mode="passive" class="input-wrapper password" name="Password" rules="required" v-slot="{ errors }">
+                    <label class="input-label"> {{ $t('popup_2fa.input_label') }}:</label>
+                    <input v-model="password" :class="{'is-error': errors[0]}" type="password" ref="input" class="focus-border-theme" :placeholder="$t('page_sign_in.placeholder_password')">
+                    <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                </ValidationProvider>
+            </ValidationObserver>
+
+            <div v-if="qrCode" class="qr-code-wrapper">
+                <div class="qr-code">
+                    <div v-html="qrCode"></div>
+                </div>
+
+				<InfoBox style="margin-bottom: 0">
+                	<p v-html="$t('popup_2fa.help')"></p>
+            	</InfoBox>
+            </div>
+        </PopupContent>
+
+        <PopupActions v-if="! qrCode">
+            <ButtonBase
+				class="popup-button"
+				@click.native="$closePopup()"
+				button-style="secondary"
+			>
+                {{ $t('global.cancel') }}
+            </ButtonBase>
+            <ButtonBase
+				class="popup-button"
+				@click.native="confirmPassword"
+				button-style="theme"
+				:loading="isLoading"
+				:disabled="isLoading"
+			>
+               {{ $t('popup_2fa.confirm_button') }}
+            </ButtonBase>
+        </PopupActions>
+
+        <PopupActions v-if="qrCode">
+            <ButtonBase
+				class="popup-button"
+				@click.native="closeQrCodePopup"
+				:button-style="closeQrButtonStyle"
+			>
+                {{ closeQrButtonText }}
+            </ButtonBase>
+        </PopupActions>
+    </PopupWrapper>
+</template>
+
+<script>
+import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
+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 {required} from 'vee-validate/dist/rules'
+import {mapGetters} from 'vuex'
+import {events} from '@/bus'
+import axios from 'axios'
+
+export default {
+	name: "TwoFactorSetupPopup",
+	components: {
+		ValidationProvider,
+		ValidationObserver,
+		PopupWrapper,
+		PopupActions,
+		PopupContent,
+		PopupHeader,
+		ButtonBase,
+		required,
+		InfoBox,
+	},
+	computed: {
+		...mapGetters(['user']),
+		closeQrButtonText() {
+			return this.isConfirmedClose
+				? this.$t('popup_2fa.disappear_qr')
+				: this.$t('shared_form.button_done')
+		},
+		closeQrButtonStyle() {
+			return this.isConfirmedClose
+				? 'danger'
+				: 'theme'
+		},
+	},
+	data() {
+		return {
+			isLoading: false,
+			password: '',
+			qrCode: '',
+			isConfirmedClose: false,
+		}
+	},
+	methods: {
+		confirmPassword() {
+
+			this.isLoading = true
+
+			axios
+				.post('/user/confirm-password', {
+					password: this.password
+				})
+				.then(() => {
+
+					if (!this.user.data.attributes.two_factor_authentication) {
+
+						this.enable()
+					} else {
+
+						this.disable()
+					}
+				})
+				.catch(error => {
+
+					if (error.response.status == 422) {
+
+						this.$refs.passwordForm.setErrors({
+							'Password': this.$t('validation_errors.incorrect_password')
+						});
+					}
+				})
+				.finally(() => {
+					this.isLoading = false
+					this.password = undefined
+				})
+		},
+		enable() {
+			axios
+				.post('/user/two-factor-authentication')
+				.then(() => {
+
+					this.$store.commit('CHANGE_TWO_FACTOR_AUTHENTICATION_STATE', true)
+
+					this.getQrCode()
+				})
+				.catch(() => {
+					this.$isSomethingWrong()
+				})
+		},
+		disable() {
+			axios
+				.delete('/user/two-factor-authentication')
+				.then(() => {
+					this.$store.commit('CHANGE_TWO_FACTOR_AUTHENTICATION_STATE', false)
+				})
+				.catch(() => {
+					this.$isSomethingWrong()
+				})
+				.finally(() => {
+					events.$emit('toaster', {
+						type: 'success',
+						message: this.$t('popup_2fa.toaster_disabled'),
+					})
+
+					this.$closePopup()
+				})
+		},
+		getQrCode() {
+			axios
+				.get('/user/two-factor-qr-code')
+				.then(response => {
+					this.qrCode = response.data.svg
+				})
+				.catch(() => {
+					this.$isSomethingWrong()
+				})
+		},
+		closeQrCodePopup() {
+			if (!this.isConfirmedClose) {
+				this.isConfirmedClose = true
+			} else {
+				events.$emit('toaster', {
+					type: 'success',
+					message: this.$t('popup_2fa.toaster_enabled'),
+				})
+
+				this.qrCode = undefined
+				this.isConfirmedClose = false
+
+				this.$closePopup()
+			}
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+@import "@assets/vuefilemanager/_inapp-forms.scss";
+@import '@assets/vuefilemanager/_forms';
+
+.qr-code-wrapper {
+	padding: 0 20px;
+
+	.qr-code {
+		display: flex;
+		justify-content: center;
+		margin: 20px 0;
+	}
+}
+</style>