mirror of
https://github.com/Bubka/2FAuth.git
synced 2024-11-14 20:34:06 +01:00
Create form enhancement
This commit is contained in:
parent
297cad2439
commit
b731d762d7
4
resources/js/app.js
vendored
4
resources/js/app.js
vendored
@ -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)
|
||||
|
||||
|
@ -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
37
resources/sass/app.scss
vendored
@ -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;
|
||||
}
|
Loading…
Reference in New Issue
Block a user