mirror of
https://github.com/Bubka/2FAuth.git
synced 2025-06-19 11:26:48 +02:00
Set the uploader as a vue component with qrcode-reader as default
This commit is contained in:
parent
f36c902692
commit
9f398933ea
@ -5,6 +5,7 @@ namespace App\Http\Controllers;
|
||||
use Zxing\QrReader;
|
||||
use OTPHP\TOTP;
|
||||
use OTPHP\Factory;
|
||||
use App\Classes\Options;
|
||||
use Assert\AssertionFailedException;
|
||||
use Illuminate\Http\File;
|
||||
use Illuminate\Http\Request;
|
||||
@ -21,19 +22,30 @@ class QrCodecontroller extends Controller
|
||||
public function decode(Request $request)
|
||||
{
|
||||
|
||||
// input validation
|
||||
$this->validate($request, [
|
||||
'qrcode' => 'required|image',
|
||||
]);
|
||||
if(Options::get('useBasicQrcodeReader')) {
|
||||
|
||||
// qrcode analysis
|
||||
$path = $request->file('qrcode')->store('qrcodes');
|
||||
$qrcode = new QrReader(storage_path('app/' . $path));
|
||||
// input validation
|
||||
$this->validate($request, [
|
||||
'qrcode' => 'required|image',
|
||||
]);
|
||||
|
||||
$uri = urldecode($qrcode->text());
|
||||
// qrcode analysis
|
||||
$path = $request->file('qrcode')->store('qrcodes');
|
||||
$qrcode = new QrReader(storage_path('app/' . $path));
|
||||
|
||||
// delete uploaded file
|
||||
Storage::delete($path);
|
||||
$uri = urldecode($qrcode->text());
|
||||
|
||||
// delete uploaded file
|
||||
Storage::delete($path);
|
||||
}
|
||||
else {
|
||||
|
||||
$this->validate($request, [
|
||||
'uri' => 'required|string',
|
||||
]);
|
||||
|
||||
$uri = $request->uri;
|
||||
}
|
||||
|
||||
// return the OTP object
|
||||
try {
|
||||
|
218
resources/js/components/QuickUploader.vue
Normal file
218
resources/js/components/QuickUploader.vue
Normal file
@ -0,0 +1,218 @@
|
||||
<template>
|
||||
<div id="quick-uploader">
|
||||
<!-- static landing UI -->
|
||||
<div v-show="!(showStream && canStream)" class="container has-text-centered">
|
||||
<div class="columns quick-uploader">
|
||||
<!-- trailer phrase that invite to add an account -->
|
||||
<div class="column is-full quick-uploader-header" :class="{ 'is-invisible' : !showTrailer }">
|
||||
{{ $t('twofaccounts.no_account_here') }}<br>
|
||||
{{ $t('twofaccounts.add_first_account') }}
|
||||
</div>
|
||||
<!-- add button -->
|
||||
<div class="column is-full quick-uploader-button" >
|
||||
<div class="quick-uploader-centerer">
|
||||
<!-- scan button that launch camera stream -->
|
||||
<label v-if="canStream" class="button is-link is-medium is-rounded is-focused" @click="enableStream()">
|
||||
{{ $t('twofaccounts.forms.scan_qrcode') }}
|
||||
</label>
|
||||
<!-- or classic input field -->
|
||||
<form v-else @submit.prevent="createAccount" @keydown="form.onKeydown($event)">
|
||||
<label :class="{'is-loading' : form.isBusy}" class="button is-link is-medium is-rounded is-focused">
|
||||
<input v-if="$root.appSettings.useBasicQrcodeReader" class="file-input" type="file" accept="image/*" v-on:change="uploadQrcode" ref="qrcodeInput">
|
||||
<qrcode-capture v-else @decode="uploadQrcode" class="file-input" ref="qrcodeInput" />
|
||||
{{ $t('twofaccounts.forms.use_qrcode.val') }}
|
||||
</label>
|
||||
<field-error :form="form" field="qrcode" />
|
||||
<field-error :form="form" field="uri" />
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Fallback link to classic form -->
|
||||
<div class="column is-full quick-uploader-footer">
|
||||
<router-link :to="{ name: 'create' }" class="is-link">{{ $t('twofaccounts.use_full_form') }}</router-link>
|
||||
</div>
|
||||
<div v-if="showError" class="column is-full quick-uploader-footer">
|
||||
<notification :message="errorText" :isDeletable="false" type="is-danger" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- camera stream fullscreen scanner -->
|
||||
<div v-show="showStream && canStream">
|
||||
<div class="fullscreen-alert has-text-centered">
|
||||
<span class="is-size-4 has-text-light">
|
||||
<font-awesome-icon :icon="['fas', 'spinner']" size="2x" spin />
|
||||
</span>
|
||||
</div>
|
||||
<div class="fullscreen-streamer">
|
||||
<qrcode-stream @decode="uploadQrcode" @init="onStreamerInit" :camera="camera" />
|
||||
</div>
|
||||
<div class="fullscreen-footer">
|
||||
<!-- Cancel button -->
|
||||
<label class="button is-large is-warning is-rounded" @click="disableStream()">
|
||||
{{ $t('commons.cancel') }}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import Form from './Form'
|
||||
|
||||
export default {
|
||||
name: 'QuickUploader',
|
||||
|
||||
data(){
|
||||
return {
|
||||
form: new Form({
|
||||
qrcode: null,
|
||||
uri: '',
|
||||
}),
|
||||
errorName: '',
|
||||
errorText: '',
|
||||
showStream: false,
|
||||
canStream: true,
|
||||
camera: 'auto',
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
|
||||
debugMode: function() {
|
||||
return process.env.NODE_ENV
|
||||
},
|
||||
|
||||
showError: function() {
|
||||
return this.debugMode == 'development' && this.errorName == 'NotAllowedError'
|
||||
},
|
||||
},
|
||||
|
||||
props: {
|
||||
showTrailer: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
|
||||
directStreaming: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
},
|
||||
|
||||
created() {
|
||||
if( this.$root.appSettings.useBasicQrcodeReader ) {
|
||||
// User has set the basic QR code reader so we disable the modern one
|
||||
this.canStream = this.showStream = false
|
||||
}
|
||||
else {
|
||||
if( this.directStreaming ) {
|
||||
this.enableStream()
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
beforeDestroy() {
|
||||
this.form.clear()
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
async enableStream() {
|
||||
|
||||
this.$parent.$emit('initStreaming')
|
||||
|
||||
this.camera = 'auto'
|
||||
this.showStream = true
|
||||
|
||||
console.log('stream enabled')
|
||||
},
|
||||
|
||||
async disableStream() {
|
||||
|
||||
this.camera = 'off'
|
||||
this.showStream = false
|
||||
|
||||
this.$parent.$emit('stopStreaming')
|
||||
},
|
||||
|
||||
async onStreamerInit (promise) {
|
||||
|
||||
this.errorText = ''
|
||||
this.errorName = ''
|
||||
|
||||
try {
|
||||
await promise
|
||||
}
|
||||
catch (error) {
|
||||
|
||||
this.errorName = error.name
|
||||
|
||||
if (error.name === 'NotAllowedError') {
|
||||
this.errorText = this.$t('twofaccounts.stream.need_grant_permission')
|
||||
|
||||
} else if (error.name === 'NotReadableError') {
|
||||
this.errorText = this.$t('twofaccounts.stream.not_readable')
|
||||
|
||||
} else if (error.name === 'NotFoundError') {
|
||||
this.errorText = this.$t('twofaccounts.stream.no_cam_on_device')
|
||||
|
||||
} else if (error.name === 'NotSupportedError' || error.name === 'InsecureContextError') {
|
||||
this.errorText = this.$t('twofaccounts.stream.secured_context_required')
|
||||
|
||||
} else if (error.name === 'OverconstrainedError') {
|
||||
this.errorText = this.$t('twofaccounts.stream.camera_not_suitable')
|
||||
|
||||
} else if (error.name === 'StreamApiNotSupportedError') {
|
||||
this.errorText = this.$t('twofaccounts.stream.stream_api_not_supported')
|
||||
}
|
||||
}
|
||||
|
||||
this.setUploader()
|
||||
},
|
||||
|
||||
setUploader() {
|
||||
|
||||
if( this.errorName ) {
|
||||
this.canStream = false
|
||||
console.log(this.errorText)
|
||||
}
|
||||
|
||||
if( !this.errorName && !this.showStream ) {
|
||||
this.camera = 'off'
|
||||
}
|
||||
|
||||
if( this.canStream && this.showStream) {
|
||||
this.$parent.$emit('startStreaming')
|
||||
}
|
||||
},
|
||||
|
||||
async uploadQrcode(event) {
|
||||
|
||||
var response
|
||||
|
||||
if(this.$root.appSettings.useBasicQrcodeReader) {
|
||||
let imgdata = new FormData();
|
||||
imgdata.append('qrcode', this.$refs.qrcodeInput.files[0]);
|
||||
|
||||
response = await this.form.upload('/api/qrcode/decode', imgdata)
|
||||
}
|
||||
else {
|
||||
// We post the decoded URI instead of an image to decode
|
||||
this.form.uri = event
|
||||
|
||||
if( !this.form.uri ) {
|
||||
return false
|
||||
}
|
||||
|
||||
response = await this.form.post('/api/qrcode/decode')
|
||||
}
|
||||
|
||||
this.$router.push({ name: 'create', params: { qrAccount: response.data } });
|
||||
|
||||
},
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
</script>
|
@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- show accounts list -->
|
||||
<div class="container" v-if="this.showAccounts">
|
||||
<!-- header -->
|
||||
<div class="columns is-gapless is-mobile is-centered">
|
||||
@ -32,8 +33,8 @@
|
||||
readyLabel: '',
|
||||
loadingLabel: 'refreshing'
|
||||
}" > -->
|
||||
<draggable v-model="filteredAccounts" @start="drag = true" @end="saveOrder" ghost-class="ghost" handle=".tfa-dots" animation="200" class="accounts columns is-multiline is-centered">
|
||||
<transition-group type="transition" :name="!drag ? 'flip-list' : null">
|
||||
<draggable v-model="filteredAccounts" @start="drag = true" @end="saveOrder" ghost-class="ghost" handle=".tfa-dots" animation="200" class="accounts">
|
||||
<transition-group class="columns is-multiline is-centered" type="transition" :name="!drag ? 'flip-list' : null">
|
||||
<div class="tfa column is-narrow has-text-white" v-for="account in filteredAccounts" :key="account.id">
|
||||
<div class="tfa-container">
|
||||
<transition name="slideCheckbox">
|
||||
@ -69,42 +70,17 @@
|
||||
</draggable>
|
||||
<!-- </vue-pull-refresh> -->
|
||||
</div>
|
||||
<!-- No account -->
|
||||
<div class="container has-text-centered" v-show="showQuickForm">
|
||||
<div class="columns is-mobile" :class="{ 'is-invisible' : this.accounts.length > 0}">
|
||||
<div class="column quickform-header">
|
||||
{{ $t('twofaccounts.no_account_here') }}<br>
|
||||
{{ $t('twofaccounts.add_first_account') }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<form @submit.prevent="createAccount" @keydown="form.onKeydown($event)">
|
||||
<div class="columns is-mobile no-account is-vcentered">
|
||||
<div class="column has-text-centered">
|
||||
<label :class="{'is-loading' : form.isBusy}" class="button is-link is-medium is-rounded is-focused">
|
||||
<input class="file-input" type="file" accept="image/*" v-on:change="uploadQrcode" ref="qrcodeInput">
|
||||
{{ $t('twofaccounts.forms.use_qrcode.val') }}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<field-error :form="form" field="qrcode" />
|
||||
</form>
|
||||
</div>
|
||||
<div class="columns is-mobile">
|
||||
<div class="column quickform-footer">
|
||||
<router-link :to="{ name: 'create' }" class="is-link">{{ $t('twofaccounts.use_full_form') }}</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Show uploader (because no account) -->
|
||||
<quick-uploader v-if="showUploader" :directStreaming="accounts.length > 0" :showTrailer="accounts.length === 0" ref="QuickUploader"></quick-uploader>
|
||||
<!-- modal -->
|
||||
<modal v-model="ShowTwofaccountInModal">
|
||||
<modal v-model="showTwofaccountInModal">
|
||||
<twofaccount-show ref="TwofaccountShow" ></twofaccount-show>
|
||||
</modal>
|
||||
<!-- footer -->
|
||||
<vue-footer :showButtons="this.accounts.length > 0">
|
||||
<vue-footer v-if="showFooter" :showButtons="accounts.length > 0">
|
||||
<!-- New item buttons -->
|
||||
<p class="control" v-if="!showQuickForm && !editMode">
|
||||
<a class="button is-link is-rounded is-focus" @click="showQuickForm = true">
|
||||
<p class="control" v-if="!showUploader && !editMode">
|
||||
<a class="button is-link is-rounded is-focus" @click="showUploader = true">
|
||||
<span>{{ $t('twofaccounts.new') }}</span>
|
||||
<span class="icon is-small">
|
||||
<font-awesome-icon :icon="['fas', 'qrcode']" />
|
||||
@ -112,11 +88,11 @@
|
||||
</a>
|
||||
</p>
|
||||
<!-- Manage button -->
|
||||
<p class="control" v-if="!showQuickForm && !editMode">
|
||||
<p class="control" v-if="!showUploader && !editMode">
|
||||
<a class="button is-dark is-rounded" @click="setEditModeTo(true)">{{ $t('twofaccounts.manage') }}</a>
|
||||
</p>
|
||||
<!-- Done button -->
|
||||
<p class="control" v-if="!showQuickForm && editMode">
|
||||
<p class="control" v-if="!showUploader && editMode">
|
||||
<a class="button is-success is-rounded" @click="setEditModeTo(false)">
|
||||
<span>{{ $t('twofaccounts.done') }}</span>
|
||||
<span class="icon is-small">
|
||||
@ -125,8 +101,8 @@
|
||||
</a>
|
||||
</p>
|
||||
<!-- Cancel QuickFormButton -->
|
||||
<p class="control" v-if="showQuickForm">
|
||||
<a class="button is-dark is-rounded" @click="cancelQuickForm">
|
||||
<p class="control" v-if="showUploader && showFooter">
|
||||
<a class="button is-dark is-rounded" @click="showUploader = false">
|
||||
{{ $t('commons.cancel') }}
|
||||
</a>
|
||||
</p>
|
||||
@ -139,22 +115,21 @@
|
||||
|
||||
import Modal from '../components/Modal'
|
||||
import TwofaccountShow from '../components/TwofaccountShow'
|
||||
import Form from './../components/Form'
|
||||
import vuePullRefresh from 'vue-pull-refresh';
|
||||
import QuickUploader from './../components/QuickUploader'
|
||||
// import vuePullRefresh from 'vue-pull-refresh';
|
||||
import draggable from 'vuedraggable'
|
||||
|
||||
|
||||
export default {
|
||||
data(){
|
||||
return {
|
||||
accounts : [],
|
||||
selectedAccounts: [],
|
||||
ShowTwofaccountInModal : false,
|
||||
showTwofaccountInModal : false,
|
||||
search: '',
|
||||
editMode: this.InitialEditMode,
|
||||
showQuickForm: false,
|
||||
form: new Form({
|
||||
qrcode: null
|
||||
}),
|
||||
showUploader: false,
|
||||
showFooter: true,
|
||||
drag: false,
|
||||
}
|
||||
},
|
||||
@ -174,13 +149,14 @@
|
||||
},
|
||||
|
||||
showAccounts() {
|
||||
return this.accounts.length > 0 && !this.showQuickForm ? true : false
|
||||
return this.accounts.length > 0 && !this.showUploader ? true : false
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
props: ['InitialEditMode'],
|
||||
|
||||
created() {
|
||||
mounted() {
|
||||
|
||||
this.fetchAccounts()
|
||||
|
||||
@ -190,39 +166,30 @@
|
||||
this.$refs.TwofaccountShow.clearOTP()
|
||||
});
|
||||
|
||||
// hide Footer when stream is on
|
||||
this.$on('initStreaming', function() {
|
||||
// this.showFooter = this.accounts.length > 0 ? false : true
|
||||
this.showFooter = false
|
||||
});
|
||||
|
||||
this.$on('stopStreaming', function() {
|
||||
|
||||
this.showUploader = this.accounts.length > 0 ? false : true
|
||||
this.showFooter = true
|
||||
});
|
||||
|
||||
},
|
||||
|
||||
components: {
|
||||
Modal,
|
||||
TwofaccountShow,
|
||||
'vue-pull-refresh': vuePullRefresh,
|
||||
// 'vue-pull-refresh': vuePullRefresh,
|
||||
QuickUploader,
|
||||
draggable,
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
onRefresh() {
|
||||
var that = this
|
||||
|
||||
return new Promise(function (resolve, reject) {
|
||||
setTimeout(function () {
|
||||
that.fetchAccounts()
|
||||
resolve();
|
||||
}, 1000);
|
||||
});
|
||||
},
|
||||
|
||||
async uploadQrcode(event) {
|
||||
|
||||
let imgdata = new FormData();
|
||||
imgdata.append('qrcode', this.$refs.qrcodeInput.files[0]);
|
||||
|
||||
const { data } = await this.form.upload('/api/qrcode/decode', imgdata)
|
||||
|
||||
this.$router.push({ name: 'create', params: { qrAccount: data } });
|
||||
|
||||
},
|
||||
|
||||
fetchAccounts() {
|
||||
this.accounts = []
|
||||
this.selectedAccounts = []
|
||||
@ -237,7 +204,7 @@
|
||||
})
|
||||
})
|
||||
|
||||
this.showQuickForm = response.data.length === 0 ? true: false
|
||||
this.showUploader = response.data.length === 0 ? true : false
|
||||
})
|
||||
},
|
||||
|
||||
@ -263,7 +230,7 @@
|
||||
this.axios.patch('/api/twofaccounts/reorder', {orderedIds: this.accounts.map(a => a.id)})
|
||||
},
|
||||
|
||||
deleteAccount: function (id) {
|
||||
deleteAccount(id) {
|
||||
if(confirm(this.$t('twofaccounts.confirm.delete'))) {
|
||||
this.axios.delete('/api/twofaccounts/' + id)
|
||||
|
||||
@ -299,10 +266,6 @@
|
||||
this.$parent.showToolbar = state
|
||||
},
|
||||
|
||||
cancelQuickForm() {
|
||||
this.form.clear()
|
||||
this.showQuickForm = false
|
||||
}
|
||||
},
|
||||
|
||||
beforeRouteEnter (to, from, next) {
|
||||
|
51
resources/sass/app.scss
vendored
51
resources/sass/app.scss
vendored
@ -167,6 +167,30 @@ a:hover {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.fullscreen-streamer {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.fullscreen-alert {
|
||||
position: fixed;
|
||||
top: 25vh;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.fullscreen-footer {
|
||||
position: fixed;
|
||||
top: calc(100vh - 8rem );
|
||||
left: 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.has-ellipsis {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
@ -320,27 +344,38 @@ footer .field.is-grouped {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.quickform-header {
|
||||
height: 20vh;
|
||||
padding-top: 2rem;
|
||||
.quick-uploader {
|
||||
flex-direction: column
|
||||
}
|
||||
|
||||
.quickform-footer {
|
||||
padding-top: 3rem;
|
||||
.quick-uploader-header {
|
||||
padding-top: 7vh;
|
||||
padding-bottom: 7vh;
|
||||
}
|
||||
|
||||
.preview {
|
||||
margin-top: 20vh;
|
||||
}
|
||||
|
||||
.no-account {
|
||||
.quick-uploader-button {
|
||||
height: 256px;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.no-account::before {
|
||||
.quick-uploader-centerer {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
height: 256px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.quick-uploader-button::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
opacity: 0.05;
|
||||
|
Loading…
x
Reference in New Issue
Block a user