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

Create form enhancement

Browse Source
This commit is contained in:
Bubka 2020-01-08 14:56:31 +01:00
parent 297cad2439
commit b731d762d7
3 changed files with 71 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
resources/js/app.js vendored
View File

@ -11,10 +11,10 @@ import Create from './views/Create'
import Edit from './views/Edit'
import { library } from '@fortawesome/fontawesome-svg-core'
import { faPlus, faQrcode, faImage, faTrash, faEdit, faCheck } from '@fortawesome/free-solid-svg-icons'
import { faPlus, faQrcode, faImage, faTrash, faEdit, faCheck, faLock, faLockOpen } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
library.add(faPlus, faQrcode, faImage, faTrash, faEdit, faCheck);
library.add(faPlus, faQrcode, faImage, faTrash, faEdit, faCheck, faLock, faLockOpen);
Vue.component('font-awesome-icon', FontAwesomeIcon)

48
resources/js/views/Create.vue
View File

@ -6,13 +6,13 @@
<form @submit.prevent="createAccount">
<div class="field">
<div class="file is-dark is-boxed">
<label class="file-label">
<label class="file-label" title="Use a QR code to fill the form magically">
<input class="file-input" type="file" accept="image/*" v-on:change="uploadQrcode" ref="qrcodeInput">
<span class="file-cta">
<span class="file-icon">
<font-awesome-icon :icon="['fas', 'qrcode']" size="lg" />
</span>
<span class="file-label">Upload a qrcode</span>
<span class="file-label">Use a qrcode</span>
</span>
</label>
</div>
@ -20,19 +20,35 @@
<div class="field">
<label class="label">Service</label>
<div class="control">
<input class="input" type="text" placeholder="Service" v-model="twofaccount.service" required autofocus />
<input class="input" type="text" placeholder="example.com" v-model="twofaccount.service" required autofocus />
</div>
</div>
<div class="field">
<label class="label">Account</label>
<div class="control">
<input class="input" type="text" placeholder="Email" v-model="twofaccount.account" />
<input class="input" type="text" placeholder="John DOE" v-model="twofaccount.account" />
</div>
</div>
<div class="field">
<label class="label">Uri</label>
<div class="control">
<input class="input" type="text" placeholder="Uri" v-model="twofaccount.uri" />
<div class="field" style="margin-bottom: 0.5rem;">
<label class="label">TOTP Uri</label>
</div>
<div class="field has-addons">
<div class="control is-expanded">
<input class="input" type="text" placeholder="otpauth://totp/..." v-model="twofaccount.uri" :disabled="uriIsLocked" />
</div>
<div class="control" v-if="uriIsLocked">
<a class="button is-dark field-lock" @click="uriIsLocked = false" title="Unlock it (at your own risk)">
<span class="icon">
<font-awesome-icon :icon="['fas', 'lock']" />
</span>
</a>
</div>
<div class="control" v-else>
<a class="button is-dark field-unlock" @click="uriIsLocked = true" title="Lock it">
<span class="icon has-text-danger">
<font-awesome-icon :icon="['fas', 'lock-open']" />
</span>
</a>
</div>
</div>
<div class="field">
@ -47,19 +63,18 @@
<span class="file-label">Choose an image…</span>
</span>
</label>
</div>
</div>
<div class="field">
<div class="control">
<input class="input" type="text" placeholder="Icon" v-model="twofaccount.icon" />
<span class="tag is-black is-large" v-if="twofaccount.icon.length > 0">
<img class="icon-preview" :src="twofaccount.icon" >
<button class="delete is-small"></button>
</span>
</div>
</div>
<div class="field is-grouped">
<div class="control">
<router-link :to="{ name: 'accounts', params: { InitialEditMode: false } }" class="button is-light">Cancel</router-link>
<button type="submit" class="button is-link">Create</button>
</div>
<div class="control">
<button type="submit" class="button is-link">Create</button>
<router-link :to="{ name: 'accounts', params: { InitialEditMode: false } }" class="button is-text">Cancel</router-link>
</div>
</div>
</form>
@ -77,7 +92,8 @@
'account' : '',
'uri' : '',
'icon' : ''
}
},
uriIsLocked: true
}
},

37
resources/sass/app.scss vendored
View File

@ -76,6 +76,30 @@ nav.level {
color: hsl(0, 0%, 71%);
}
.select select::placeholder, .textarea::placeholder, .input::placeholder {
color: hsl(0, 0%, 48%);
}
.select select[disabled], [disabled].textarea, [disabled].input, fieldset[disabled] .select select, .select fieldset[disabled] select, fieldset[disabled] .textarea, fieldset[disabled] .input {
background-color: hsl(0, 0%, 10%);
border-color: hsl(0, 0%, 21%);
box-shadow: none;
color: hsl(0, 0%, 21%);
}
.select select[disabled]::placeholder, [disabled].textarea::placeholder, [disabled].input::placeholder, fieldset[disabled] .select select::placeholder, .select fieldset[disabled] select::placeholder, fieldset[disabled] .textarea::placeholder, fieldset[disabled] .input::placeholder {
color: hsl(0, 0%, 21%);
}
.button.is-dark.field-lock, .button.is-dark.field-unlock {
color: hsl(0, 0%, 48%);
}
.button.is-dark.field-unlock {
border-color: hsl(0, 0%, 29%);
border-left: none;
}
.label {
color: hsl(0, 0%, 48%);
}
@ -100,4 +124,17 @@ footer .field.is-grouped {
.bg {
opacity: 0.05;
}
.file .tag {
margin-left: 0.75rem;
}
.icon-preview {
height: 24px;
width: 24px;
}
.field.is-grouped:last-child {
padding-top: 0.75rem;
}