src/locales/en.json

@@ -32,7 +32,6 @@
 		"domainName": "Domain name",
 		"privateKey": "Private key",
 		"scan": "Scan",
-		"scanTitle": "Scan a QR code",
 		"addAccount": "Add account",
 		"cancel": "@:invariants.controls.cancel",
 		"error": {

src/locales/fr.json

@@ -32,7 +32,6 @@
 		"domainName": "Nom de domaine",
 		"privateKey": "Clé privée",
 		"scan": "Scanner",
-		"scanTitle": "Scanner un QR code",
 		"addAccount": "Ajouter",
 		"cancel": "@:invariants.controls.cancel",
 		"error": {

src/views/AddAccountView.vue

@@ -1,10 +1,9 @@
 <script setup>
-import { ref, reactive, computed, onMounted } from 'vue';
+import { ref, computed } from 'vue';
 import { useRouter } from 'vue-router';
 import { useStorage } from '@vueuse/core';
 import { QrcodeStream, setZXingModuleOverrides } from 'vue-qrcode-reader';
 import { sha256 } from '@noble/hashes/sha256';
-import { Modal } from 'bootstrap';
 import base32Encode from 'base32-encode';
 import ButtonGroupComponent from '../components/ButtonGroupComponent.vue';
 import LayoutComponent from '../components/LayoutComponent.vue';
@@ -17,9 +16,6 @@ const separator = ref('+');
 const domainName = ref('');
 const privateKey = ref('');
 const authorizedKeyLengths = [16, 32];
-const state = reactive({
-	QrCodeModal: null,
-});
 
 const errorMessageId = ref('');
 const separatorErrorMessageId = ref('');
@@ -107,26 +103,17 @@ setZXingModuleOverrides({
 		return prefix + path;
 	},
 });
-onMounted(() => {
-	state.QrCodeModal = new Modal('#qr-code-modal', {});
-});
 const scanQrCode = ref(false);
 const showQrCodeScanner = (data) => {
-	state.QrCodeModal.show();
 	scanQrCode.value = true;
 };
-const hideQrCodeScanner = () => {
-	scanQrCode.value = false;
-	state.QrCodeModal.hide();
-};
 const onQrCodeDetected = (result_list) => {
 	if (result_list.length >= 1) {
 		privateKey.value = result_list[0].rawValue;
-		hideQrCodeScanner();
+		scanQrCode.value = false;
 	}
 };
 const onQrCodeError = (err) => {
-	hideQrCodeScanner();
 	if (err.name === 'NotAllowedError') {
 		setErrorMessage('addAccount.error.cameraNotAllowed');
 	} else if (err.name === 'NotFoundError') {
@@ -163,11 +150,9 @@ const setErrorMessage = (messageId, messageType) => {
 	}
 	return true;
 };
-const resetFloatingErrorMessage = () => {
-	errorMessageId.value = '';
-};
 const resetErrorMessage = () => {
-	resetFloatingErrorMessage();
+	errorMessageId.value = '';
+
 	separatorErrorMessageId.value = '';
 	localPartErrorMessageId.value = '';
 	addrKeyErrorMessageId.value = '';
@@ -180,7 +165,7 @@ const resetErrorMessage = () => {
 
 		<div class="alert alert-danger alert-dismissible fade show" role="alert" v-if="errorMessageId">
 			{{ $t(errorMessageId) }}
-			<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close" @click="resetFloatingErrorMessage"></button>
+			<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close" @click="resetErrorMessage"></button>
 		</div>
 
 		<div class="mb-3">
@@ -206,19 +191,7 @@ const resetErrorMessage = () => {
 			</div>
 		</div>
 
-		<div class="modal fade" id="qr-code-modal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
-			<div class="modal-dialog">
-				<div class="modal-content">
-					<div class="modal-header">
-						<h1 class="modal-title fs-5" id="staticBackdropLabel">{{ $t("addAccount.scanTitle") }}</h1>
-						<button type="button" class="btn-close" aria-label="Close" @click="hideQrCodeScanner"></button>
-					</div>
-					<div class="modal-body">
 		<qrcode-stream v-if="scanQrCode" @detect="onQrCodeDetected" @error="onQrCodeError"></qrcode-stream>
-					</div>
-				</div>
-			</div>
-		</div>
 
 		<ButtonGroupComponent>
 			<button type="button" class="btn btn-primary" :disabled="addDisabled" @click="addAccount">{{ $t("addAccount.addAccount") }}</button>