extern/2FAuth
1
0
Fork 0
mirror of https://github.com/Bubka/2FAuth.git synced 2025-04-13 12:08:32 +02: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
View File

@ -11,10 +11,10 @@ import Create from './views/Create'
import Edit from './views/Edit' import Edit from './views/Edit'
import { library } from '@fortawesome/fontawesome-svg-core' 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' 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) Vue.component('font-awesome-icon', FontAwesomeIcon)

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

@ -6,13 +6,13 @@
<form @submit.prevent="createAccount"> <form @submit.prevent="createAccount">
<div class="field"> <div class="field">
<div class="file is-dark is-boxed"> <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"> <input class="file-input" type="file" accept="image/*" v-on:change="uploadQrcode" ref="qrcodeInput">
<span class="file-cta"> <span class="file-cta">
<span class="file-icon"> <span class="file-icon">
<font-awesome-icon :icon="['fas', 'qrcode']" size="lg" /> <font-awesome-icon :icon="['fas', 'qrcode']" size="lg" />
</span> </span>
<span class="file-label">Upload a qrcode</span> <span class="file-label">Use a qrcode</span>
</span> </span>
</label> </label>
</div> </div>
@ -20,19 +20,35 @@
<div class="field"> <div class="field">
<label class="label">Service</label> <label class="label">Service</label>
<div class="control"> <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> </div>
<div class="field"> <div class="field">
<label class="label">Account</label> <label class="label">Account</label>
<div class="control"> <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> </div>
<div class="field"> <div class="field" style="margin-bottom: 0.5rem;">
<label class="label">Uri</label> <label class="label">TOTP Uri</label>
<div class="control"> </div>
<input class="input" type="text" placeholder="Uri" v-model="twofaccount.uri" /> <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> </div>
<div class="field"> <div class="field">
@ -47,19 +63,18 @@
<span class="file-label">Choose an image…</span> <span class="file-label">Choose an image…</span>
</span> </span>
</label> </label>
</div> <span class="tag is-black is-large" v-if="twofaccount.icon.length > 0">
</div> <img class="icon-preview" :src="twofaccount.icon" >
<div class="field"> <button class="delete is-small"></button>
<div class="control"> </span>
<input class="input" type="text" placeholder="Icon" v-model="twofaccount.icon" />
</div> </div>
</div> </div>
<div class="field is-grouped"> <div class="field is-grouped">
<div class="control"> <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>
<div class="control"> <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>
</div> </div>
</form> </form>
@ -77,7 +92,8 @@
'account' : '', 'account' : '',
'uri' : '', 'uri' : '',
'icon' : '' 'icon' : ''
} },
uriIsLocked: true
} }
}, },

37
resources/sass/app.scss
View File

@ -76,6 +76,30 @@ nav.level {
color: hsl(0, 0%, 71%); 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 { .label {
color: hsl(0, 0%, 48%); color: hsl(0, 0%, 48%);
} }
@ -100,4 +124,17 @@ footer .field.is-grouped {
.bg { .bg {
opacity: 0.05; opacity: 0.05;
}
.file .tag {
margin-left: 0.75rem;
}
.icon-preview {
height: 24px;
width: 24px;
}
.field.is-grouped:last-child {
padding-top: 0.75rem;
} }