mirror of
https://github.com/Bubka/2FAuth.git
synced 2025-06-20 11:47:53 +02:00
Add ability to force the queried icons collection on the Advanced form
This commit is contained in:
parent
9e3794a956
commit
c693c840b2
@ -11,6 +11,7 @@ use App\Models\TwoFAccount;
|
|||||||
use Exception;
|
use Exception;
|
||||||
use Illuminate\Http\Request;
|
use Illuminate\Http\Request;
|
||||||
use Illuminate\Http\UploadedFile;
|
use Illuminate\Http\UploadedFile;
|
||||||
|
use Illuminate\Support\Arr;
|
||||||
|
|
||||||
class IconController extends Controller
|
class IconController extends Controller
|
||||||
{
|
{
|
||||||
@ -52,7 +53,11 @@ class IconController extends Controller
|
|||||||
{
|
{
|
||||||
$validated = $request->validated();
|
$validated = $request->validated();
|
||||||
|
|
||||||
$icon = LogoLib::driver('tfa')->getIcon($validated['service']);
|
$iconCollection = Arr::has($validated, 'iconCollection') && $validated['iconCollection']
|
||||||
|
? $validated['iconCollection']
|
||||||
|
: $request->user()->preferences['iconCollection'];
|
||||||
|
|
||||||
|
$icon = LogoLib::driver($iconCollection)->getIcon($validated['service']);
|
||||||
|
|
||||||
return $icon
|
return $icon
|
||||||
? response()->json(['filename' => $icon], 201)
|
? response()->json(['filename' => $icon], 201)
|
||||||
|
@ -25,7 +25,8 @@ class IconFetchRequest extends FormRequest
|
|||||||
public function rules()
|
public function rules()
|
||||||
{
|
{
|
||||||
return [
|
return [
|
||||||
'service' => 'string',
|
'service' => 'string',
|
||||||
|
'iconCollection' => 'nullable|string|in:tfa,selfh,dashboardicons',
|
||||||
];
|
];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
4
resources/js/services/twofaccountService.js
vendored
4
resources/js/services/twofaccountService.js
vendored
@ -23,8 +23,8 @@ export default {
|
|||||||
return apiClient.post('/twofaccounts', { uri: uri }, { ...config })
|
return apiClient.post('/twofaccounts', { uri: uri }, { ...config })
|
||||||
},
|
},
|
||||||
|
|
||||||
getLogo(service, config = {}) {
|
getLogo(service, iconCollection, config = {}) {
|
||||||
return apiClient.post('/icons/default', { service: service }, { ...config })
|
return apiClient.post('/icons/default', { service: service, iconCollection: iconCollection }, { ...config })
|
||||||
},
|
},
|
||||||
|
|
||||||
deleteIcon(icon, config = {}) {
|
deleteIcon(icon, config = {}) {
|
||||||
|
@ -37,6 +37,11 @@
|
|||||||
const iconForm = reactive(new Form({
|
const iconForm = reactive(new Form({
|
||||||
icon: null
|
icon: null
|
||||||
}))
|
}))
|
||||||
|
const iconCollections = [
|
||||||
|
{ text: 'selfh.st', value: 'selfh' },
|
||||||
|
{ text: 'dashboardicons.com', value: 'dashboardicons' },
|
||||||
|
{ text: '2fa.directory', value: 'tfa' },
|
||||||
|
]
|
||||||
const otpDisplayProps = ref({
|
const otpDisplayProps = ref({
|
||||||
otp_type: '',
|
otp_type: '',
|
||||||
account : '',
|
account : '',
|
||||||
@ -69,6 +74,7 @@
|
|||||||
const showAdvancedForm = ref(false)
|
const showAdvancedForm = ref(false)
|
||||||
const ShowTwofaccountInModal = ref(false)
|
const ShowTwofaccountInModal = ref(false)
|
||||||
const fetchingLogo = ref(false)
|
const fetchingLogo = ref(false)
|
||||||
|
const iconCollection = ref(user.preferences.iconCollection)
|
||||||
|
|
||||||
// $refs
|
// $refs
|
||||||
const iconInput = ref(null)
|
const iconInput = ref(null)
|
||||||
@ -379,7 +385,7 @@
|
|||||||
if (user.preferences.getOfficialIcons) {
|
if (user.preferences.getOfficialIcons) {
|
||||||
fetchingLogo.value = true
|
fetchingLogo.value = true
|
||||||
|
|
||||||
twofaccountService.getLogo(form.service, { returnError: true })
|
twofaccountService.getLogo(form.service, iconCollection.value, { returnError: true })
|
||||||
.then(response => {
|
.then(response => {
|
||||||
if (response.status === 201) {
|
if (response.status === 201) {
|
||||||
// clean possible already uploaded temp icon
|
// clean possible already uploaded temp icon
|
||||||
@ -486,33 +492,52 @@
|
|||||||
<FormField v-model="form.account" fieldName="account" :fieldError="form.errors.get('account')" label="twofaccounts.account" :placeholder="$t('twofaccounts.forms.account.placeholder')" />
|
<FormField v-model="form.account" fieldName="account" :fieldError="form.errors.get('account')" label="twofaccounts.account" :placeholder="$t('twofaccounts.forms.account.placeholder')" />
|
||||||
<!-- icon upload -->
|
<!-- icon upload -->
|
||||||
<label for="filUploadIcon" class="label">{{ $t('twofaccounts.icon') }}</label>
|
<label for="filUploadIcon" class="label">{{ $t('twofaccounts.icon') }}</label>
|
||||||
<div class="field is-grouped">
|
<div class="columns is-mobile mb-0">
|
||||||
<!-- Try my luck button -->
|
<div class="column">
|
||||||
<div class="control" v-if="user.preferences.getOfficialIcons">
|
<!-- try my luck -->
|
||||||
<VueButton @click="fetchLogo" :color="mode == 'dark' ? 'is-dark' : ''" :nativeType="'button'" :is-loading="fetchingLogo" :isDisabled="!form.service" aria-describedby="lgdTryMyLuck">
|
<fieldset v-if="user.preferences.getOfficialIcons" :disabled="!form.service">
|
||||||
<span class="icon is-small">
|
<div class="field is-grouped">
|
||||||
<FontAwesomeIcon :icon="['fas', 'globe']" />
|
<div class="control">
|
||||||
</span>
|
<VueButton @click="fetchLogo" :color="mode == 'dark' ? 'is-dark' : ''" :nativeType="'button'" :is-loading="fetchingLogo" aria-describedby="lgdTryMyLuck">
|
||||||
<span>{{ $t('twofaccounts.forms.i_m_lucky') }}</span>
|
<span class="icon is-small">
|
||||||
</VueButton>
|
<FontAwesomeIcon :icon="['fas', 'globe']" />
|
||||||
</div>
|
</span>
|
||||||
<!-- upload icon button -->
|
<span>{{ $t('twofaccounts.forms.i_m_lucky') }}</span>
|
||||||
<div class="control is-flex">
|
</VueButton>
|
||||||
<div role="button" tabindex="0" class="file mr-3" :class="mode == 'dark' ? 'is-dark' : 'is-white'" @keyup.enter="iconInputLabel.click()">
|
</div>
|
||||||
<label for="filUploadIcon" class="file-label" ref="iconInputLabel">
|
<div class="control">
|
||||||
<input id="filUploadIcon" tabindex="-1" class="file-input" type="file" accept="image/*" v-on:change="uploadIcon" ref="iconInput">
|
<div class="select">
|
||||||
<span class="file-cta">
|
<select name="icon-collection" v-model="iconCollection">
|
||||||
<span class="file-icon">
|
<option v-for="collection in iconCollections" :key="collection.text" :value="collection.value">
|
||||||
<FontAwesomeIcon :icon="['fas', 'upload']" />
|
{{ collection.text }}
|
||||||
</span>
|
</option>
|
||||||
<span class="file-label">{{ $t('twofaccounts.forms.choose_image') }}</span>
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</fieldset>
|
||||||
|
<div class="field is-grouped">
|
||||||
|
<!-- upload icon button -->
|
||||||
|
<div class="control is-flex">
|
||||||
|
<div role="button" tabindex="0" class="file mr-3" :class="mode == 'dark' ? 'is-dark' : 'is-white'" @keyup.enter="iconInputLabel.click()">
|
||||||
|
<label for="filUploadIcon" class="file-label" ref="iconInputLabel">
|
||||||
|
<input id="filUploadIcon" tabindex="-1" class="file-input" type="file" accept="image/*" v-on:change="uploadIcon" ref="iconInput">
|
||||||
|
<span class="file-cta">
|
||||||
|
<span class="file-icon">
|
||||||
|
<FontAwesomeIcon :icon="['fas', 'upload']" />
|
||||||
|
</span>
|
||||||
|
<span class="file-label">{{ $t('twofaccounts.forms.choose_image') }}</span>
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<span class="tag is-large" :class="mode =='dark' ? 'is-dark' : 'is-white'" v-if="tempIcon">
|
||||||
|
<img class="icon-preview" :src="$2fauth.config.subdirectory + '/storage/icons/' + tempIcon" :alt="$t('twofaccounts.icon_to_illustrate_the_account')">
|
||||||
|
<button type="button" class="clear-selection delete is-small" @click.prevent="deleteTempIcon" :aria-label="$t('twofaccounts.remove_icon')"></button>
|
||||||
</span>
|
</span>
|
||||||
</label>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<span class="tag is-large" :class="mode =='dark' ? 'is-dark' : 'is-white'" v-if="tempIcon">
|
</div>
|
||||||
<img class="icon-preview" :src="$2fauth.config.subdirectory + '/storage/icons/' + tempIcon" :alt="$t('twofaccounts.icon_to_illustrate_the_account')">
|
<div class="column is-narrow" style="width: 200px;">
|
||||||
<button type="button" class="clear-selection delete is-small" @click.prevent="deleteTempIcon" :aria-label="$t('twofaccounts.remove_icon')"></button>
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="field">
|
<div class="field">
|
||||||
|
@ -66,7 +66,7 @@ return [
|
|||||||
],
|
],
|
||||||
'choose_image' => 'Upload',
|
'choose_image' => 'Upload',
|
||||||
'i_m_lucky' => 'Try my luck',
|
'i_m_lucky' => 'Try my luck',
|
||||||
'i_m_lucky_legend' => 'The "Try my luck" button try to get the official icon of the given service. Enter actual service name without ".xyz" extension and try to avoid typo. (beta feature)',
|
'i_m_lucky_legend' => 'The "Try my luck" button tries to get a standard icon from the selected icon collection. The simpler the service value, the more likely you are to get the correct icon: Do not append any extension (like ".com"), use the exact name of the service, avoid special chars.',
|
||||||
'test' => 'Test',
|
'test' => 'Test',
|
||||||
'group' => [
|
'group' => [
|
||||||
'label' => 'Group',
|
'label' => 'Group',
|
||||||
|
Loading…
x
Reference in New Issue
Block a user