extern/2FAuth
1
0
Fork 0
mirror of https://github.com/Bubka/2FAuth.git synced 2024-11-22 16:23:18 +01:00
Code Issues Packages Projects Releases Wiki Activity

Enhance information given to users when camera permission is denied

Browse Source
This commit is contained in:
Bubka 2023-11-24 10:33:09 +01:00
parent 177d518666
commit 74bb228483
6 changed files with 76 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
package-lock.json generated
View File

@ -7,6 +7,7 @@
"devDependencies": {
"@fortawesome/fontawesome-svg-core": "^6.4.2",
"@fortawesome/free-brands-svg-icons": "^6.4.2",
"@fortawesome/free-regular-svg-icons": "^6.4.2",
"@fortawesome/free-solid-svg-icons": "^6.4.2",
"@fortawesome/vue-fontawesome": "^3.0.3",
"@kyvg/vue3-notification": "^3.0.2",
@ -439,6 +440,19 @@
"node": ">=6"
}
},
"node_modules/@fortawesome/free-regular-svg-icons": {
"version": "6.4.2",
"resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.4.2.tgz",
"integrity": "sha512-0+sIUWnkgTVVXVAPQmW4vxb9ZTHv0WstOa3rBx9iPxrrrDH6bNLsDYuwXF9b6fGm+iR7DKQvQshUH/FJm3ed9Q==",
"dev": true,
"hasInstallScript": true,
"dependencies": {
"@fortawesome/fontawesome-common-types": "6.4.2"
},
"engines": {
"node": ">=6"
}
},
"node_modules/@fortawesome/free-solid-svg-icons": {
"version": "6.4.2",
"resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.4.2.tgz",

1
package.json
View File

@ -8,6 +8,7 @@
"devDependencies": {
"@fortawesome/fontawesome-svg-core": "^6.4.2",
"@fortawesome/free-brands-svg-icons": "^6.4.2",
"@fortawesome/free-regular-svg-icons": "^6.4.2",
"@fortawesome/free-solid-svg-icons": "^6.4.2",
"@fortawesome/vue-fontawesome": "^3.0.3",
"@kyvg/vue3-notification": "^3.0.2",

24
resources/js_vue3/assets/app.scss vendored
View File

@ -1321,4 +1321,28 @@ footer.main .field.is-grouped {
}
:root[data-theme="dark"] .card-footer-item:not(:last-child) {
border-right: 1px solid $grey-darker;
}
.addressbar {
padding: 6px;
border: 1px solid $grey-light;
background-color: $white;
border-radius: $radius;
position: relative;
}
:root[data-theme="dark"] .addressbar {
background-color: $black-bis;
border: none;
}
.circled::before {
display: block;
content: "";
position: absolute;
border-radius: 50%;
border: 2px solid $danger;
left: 25px;
top: 4px;
width: 29px;
height: 29px;
}

11
resources/js_vue3/icons.js vendored
View File

@ -43,9 +43,14 @@ import {
faCircleNotch,
faCircleCheck,
faTriangleExclamation,
faFileLines
faFileLines,
faVideoSlash,
} from '@fortawesome/free-solid-svg-icons'
import {
faStar
} from '@fortawesome/free-regular-svg-icons'
import {
faGithubAlt
} from '@fortawesome/free-brands-svg-icons'
@ -93,7 +98,9 @@ library.add(
faCircleNotch,
faCircleCheck,
faTriangleExclamation,
faFileLines
faFileLines,
faVideoSlash,
faStar,
);
export default FontAwesomeIcon

29
resources/js_vue3/views/twofaccounts/Capture.vue
View File

@ -123,13 +123,36 @@
<section class="section">
<div class="columns is-centered">
<div class="column is-three-quarters">
<div class="modal-slot box has-text-centered is-shadowless">
<div class="modal-slot has-text-centered is-shadowless">
<div v-if="errorPhrase">
<p class="block is-size-5">{{ $t('twofaccounts.stream.live_scan_cant_start') }}</p>
<UseColorMode v-slot="{ mode }">
<p class="block" :class="{'has-text-light': mode == 'dark'}">{{ $t('twofaccounts.stream.' + errorPhrase + '.reason') }}</p>
</UseColorMode>
<p class="is-size-7">{{ $t('twofaccounts.stream.' + errorPhrase + '.solution') }}</p>
<div v-if="errorPhrase == 'need_grant_permission'" >
<p class="is-size-7 mb-3">{{ $t('twofaccounts.stream.need_grant_permission.solution') }}</p>
<p class="is-size-7 mb-3">{{ $t('twofaccounts.stream.need_grant_permission.click_camera_icon') }}</p>
<div class="addressbar columns is-mobile is-gapless">
<div class="column is-narrow has-text-left circled">
<FontAwesomeIcon :icon="['fas', 'lock']" class="ml-1" size="xs" />
<FontAwesomeIcon :icon="['fas', 'video-slash']" class="ml-3" size="xs" />
</div>
<div class="column has-text-left ml-3">
http://my.2fauth.app/...
</div>
<div class="column is-narrow has-text-right">
<FontAwesomeIcon :icon="['far', 'star']" class="mr-1" />
</div>
</div>
<!-- <div class="addressbar">
<FontAwesomeIcon :icon="['fas', 'video-slash']" class="mr-3 ml-2" size="xs" />
<span class="circled">http://my.2fauth.app/...</span>
<FontAwesomeIcon :icon="['far', 'star']" class="mr-3" size="xs" />
</div> -->
</div>
<p v-else class="is-size-7">{{ $t('twofaccounts.stream.' + errorPhrase + '.solution') }}</p>
</div>
<UseColorMode v-else v-slot="{ mode }">
<span class="is-size-4" :class="mode == 'dark' ? 'has-text-light':'has-text-grey-dark'">
@ -171,4 +194,4 @@
<ButtonBackCloseCancel action="cancel" :isCapture="true" :useLinkTag="false" @canceled="exitStream()" />
</div>
</div>
</template>
</template>

3
resources/lang/en/twofaccounts.php
View File

@ -101,7 +101,8 @@
'live_scan_cant_start' => 'Live scan can\'t start :(',
'need_grant_permission' => [
'reason' => '2FAuth does not have permission to access your camera',
'solution' => 'You need to grant permission to use your device camera. If you already denied and your browser do not prompt you again, please refers to the browser documentation to find out how to grant permission.'
'solution' => 'You need to grant permission to use your device camera. If you already denied and your browser do not prompt you again, please refers to the browser documentation to find out how to grant permission.',
'click_camera_icon' => 'It is usually done by clicking on a slashed camera icon in or next to the browser\'s address bar',
],
'not_readable' => [
'reason' => 'Fail to load scanner',