extern/2FAuth
1
0
Fork 0
mirror of https://github.com/Bubka/2FAuth.git synced 2025-05-05 14:54:39 +02:00
Code Issues Packages Projects Releases Wiki Activity

Complete Move to group feature

Browse Source
This commit is contained in:
Bubka 2020-10-28 17:51:32 +01:00
parent f16b256c0b
commit fe02bac6d6
5 changed files with 73 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
app/Http/Controllers/GroupController.php
View File

@ -111,6 +111,7 @@ public function update(Request $request, $id)
*/ */
public function associateAccounts(Request $request) public function associateAccounts(Request $request)
{ {
if( $request->input('groupId') > 0 ) {
$twofaccounts = TwoFAccount::find($request->input('accountsIds')); $twofaccounts = TwoFAccount::find($request->input('accountsIds'));
$group = Group::FindOrFail($request->input('groupId')); $group = Group::FindOrFail($request->input('groupId'));
@ -119,6 +120,16 @@ public function associateAccounts(Request $request)
return response()->json($group, 200); return response()->json($group, 200);
} }
else {
TwoFAccount::whereIn('id', $request->input('accountsIds'))
->update(['group_id' => NULL]);
return response()->json(['message' => 'moved to null'], 200);
}
}
/** /**

75
resources/js/views/Accounts.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div> <div>
<!-- Group selector --> <!-- Group switch -->
<div class="container groups" v-if="showGroupSelector"> <div class="container groups" v-if="showGroupSwitch">
<div class="columns is-centered"> <div class="columns is-centered">
<div class="column is-one-third-tablet is-one-quarter-desktop is-one-quarter-widescreen is-one-quarter-fullhd"> <div class="column is-one-third-tablet is-one-quarter-desktop is-one-quarter-widescreen is-one-quarter-fullhd">
<div class="columns is-multiline"> <div class="columns is-multiline">
@ -17,6 +17,25 @@
</div> </div>
</div> </div>
</div> </div>
<!-- Group selector -->
<div class="container groups with-heading" v-if="showGroupSelector">
<div class="columns is-centered">
<div class="column is-one-third-tablet is-one-quarter-desktop is-one-quarter-widescreen is-one-quarter-fullhd">
<div class="columns is-multiline">
<div class="column is-full" v-for="group in groups" :key="group.id">
<button class="button is-fullwidth is-dark has-text-light is-outlined" :class="{ 'is-link' : moveAccountsTo === group.id}" @click="moveAccountsTo = group.id">
<span v-if="group.id === 0">
{{ $t('groups.no_group') }}
</span>
<span v-else>
{{ group.name }}
</span>
</button>
</div>
</div>
</div>
</div>
</div>
<!-- show accounts list --> <!-- show accounts list -->
<div class="container" v-if="this.showAccounts"> <div class="container" v-if="this.showAccounts">
<!-- accounts --> <!-- accounts -->
@ -64,14 +83,14 @@
<!-- </vue-pull-refresh> --> <!-- </vue-pull-refresh> -->
</div> </div>
<!-- header --> <!-- header -->
<div class="header has-background-black-ter" v-if="this.showAccounts || this.showGroupSelector"> <div class="header has-background-black-ter" v-if="this.showAccounts || this.showGroupSwitch">
<div class="columns is-gapless is-mobile is-centered"> <div class="columns is-gapless is-mobile is-centered">
<div class="column is-three-quarters-mobile is-one-third-tablet is-one-quarter-desktop is-one-quarter-widescreen is-one-quarter-fullhd"> <div class="column is-three-quarters-mobile is-one-third-tablet is-one-quarter-desktop is-one-quarter-widescreen is-one-quarter-fullhd">
<!-- toolbar --> <!-- toolbar -->
<div class="toolbar has-text-centered" v-if="editMode"> <div class="toolbar has-text-centered" v-if="editMode">
<div class="manage-buttons tags has-addons are-medium"> <div class="manage-buttons tags has-addons are-medium">
<span class="tag is-dark">{{ selectedAccounts.length }}&nbsp;{{ $t('commons.selected') }}</span> <span class="tag is-dark">{{ selectedAccounts.length }}&nbsp;{{ $t('commons.selected') }}</span>
<a class="tag is-link" v-if="selectedAccounts.length > 0" @click="moveAccounts"> <a class="tag is-link" v-if="selectedAccounts.length > 0" @click="showGroupSelector = true">
{{ $t('commons.move') }}&nbsp;<font-awesome-icon :icon="['fas', 'layer-group']" /> {{ $t('commons.move') }}&nbsp;<font-awesome-icon :icon="['fas', 'layer-group']" />
</a> </a>
<a class="tag is-danger" v-if="selectedAccounts.length > 0" @click="destroyAccounts"> <a class="tag is-danger" v-if="selectedAccounts.length > 0" @click="destroyAccounts">
@ -89,10 +108,10 @@
</span> </span>
</div> </div>
</div> </div>
<!-- group selector --> <!-- group switch toggle -->
<div class="group-selector has-text-centered" v-if="!editMode"> <div class="is-clickable has-text-centered" v-if="!editMode">
<div class="columns" @click="toggleGroupSelector"> <div class="columns" @click="toggleGroupSwitch">
<div class="column" v-if="!showGroupSelector"> <div class="column" v-if="!showGroupSwitch">
{{ this.activeGroupName }} ({{ this.accounts.length }}) {{ this.activeGroupName }} ({{ this.accounts.length }})
<font-awesome-icon :icon="['fas', 'caret-down']" /> <font-awesome-icon :icon="['fas', 'caret-down']" />
</div> </div>
@ -111,7 +130,7 @@
<twofaccount-show ref="TwofaccountShow" ></twofaccount-show> <twofaccount-show ref="TwofaccountShow" ></twofaccount-show>
</modal> </modal>
<!-- footer --> <!-- footer -->
<vue-footer v-if="showFooter && !showGroupSelector" :showButtons="accounts.length > 0"> <vue-footer v-if="showFooter && !showGroupSwitch" :showButtons="accounts.length > 0">
<!-- New item buttons --> <!-- New item buttons -->
<p class="control" v-if="!showUploader && !editMode"> <p class="control" v-if="!showUploader && !editMode">
<a class="button is-link is-rounded is-focus" @click="showUploader = true"> <a class="button is-link is-rounded is-focus" @click="showUploader = true">
@ -141,10 +160,20 @@
</a> </a>
</p> </p>
</vue-footer> </vue-footer>
<vue-footer v-if="showFooter && showGroupSelector" :showButtons="true"> <vue-footer v-if="showFooter && showGroupSwitch" :showButtons="true">
<!-- Close Group selector button --> <!-- Close Group switch button -->
<p class="control"> <p class="control">
<a class="button is-dark is-rounded" @click="closeGroupSelector()">{{ $t('commons.close') }}</a> <a class="button is-dark is-rounded" @click="closeGroupSwitch()">{{ $t('commons.close') }}</a>
</p>
</vue-footer>
<vue-footer v-if="showFooter && showGroupSelector" :showButtons="true">
<!-- Move to selected group button -->
<p class="control">
<a class="button is-link is-rounded" @click="moveAccounts()">{{ $t('commons.move') }}</a>
</p>
<!-- Cancel button -->
<p class="control">
<a class="button is-dark is-rounded" @click="showGroupSelector = false">{{ $t('commons.cancel') }}</a>
</p> </p>
</vue-footer> </vue-footer>
</div> </div>
@ -175,8 +204,10 @@
editMode: this.InitialEditMode, editMode: this.InitialEditMode,
showUploader: false, showUploader: false,
showFooter: true, showFooter: true,
showGroupSwitch: false,
showGroupSelector: false, showGroupSelector: false,
drag: false, drag: false,
moveAccountsTo: false,
} }
}, },
@ -195,7 +226,7 @@
}, },
showAccounts() { showAccounts() {
return this.accounts.length > 0 && !this.showUploader && !this.showGroupSelector ? true : false return this.accounts.length > 0 && !this.showUploader && !this.showGroupSwitch && !this.showGroupSelector ? true : false
}, },
activeGroupName() { activeGroupName() {
@ -323,11 +354,13 @@
this.selectedAccounts.forEach(id => accountsIds.push(id)) this.selectedAccounts.forEach(id => accountsIds.push(id))
// Backend will associate all accounts with the selected group in the same move // Backend will associate all accounts with the selected group in the same move
await this.axios.patch('/api/group/accounts', {accountsIds: accountsIds, groupId: '3'} ) await this.axios.patch('/api/group/accounts', {accountsIds: accountsIds, groupId: this.moveAccountsTo} )
// we fetch the accounts again to prevent the js collection being // we fetch the accounts again to prevent the js collection being
// desynchronize from the backend php collection // desynchronize from the backend php collection
this.fetchAccounts() this.fetchAccounts()
this.fetchGroups()
this.showGroupSelector = false
}, },
@ -355,7 +388,7 @@
this.$root.appSettings.activeGroup = response.data.settings.activeGroup this.$root.appSettings.activeGroup = response.data.settings.activeGroup
this.closeGroupSelector() this.closeGroupSwitch()
}) })
.catch(error => { .catch(error => {
@ -366,21 +399,21 @@
this.fetchAccounts() this.fetchAccounts()
}, },
toggleGroupSelector: function(event) { toggleGroupSwitch: function(event) {
if (event) { if (event) {
this.showGroupSelector ? this.closeGroupSelector() : this.openGroupSelector() this.showGroupSwitch ? this.closeGroupSwitch() : this.openGroupSwitch()
} }
}, },
openGroupSelector: function(event) { openGroupSwitch: function(event) {
this.showGroupSelector = true this.showGroupSwitch = true
}, },
closeGroupSelector: function(event) { closeGroupSwitch: function(event) {
this.showGroupSelector = false this.showGroupSwitch = false
}, },
setEditModeTo(state) { setEditModeTo(state) {

2
resources/js/views/Groups.vue
View File

@ -20,7 +20,7 @@
</router-link> </router-link>
<span class="is-family-primary is-size-6 is-size-7-mobile has-text-grey">{{ group.count }} {{ $t('twofaccounts.accounts') }}</span> <span class="is-family-primary is-size-6 is-size-7-mobile has-text-grey">{{ group.count }} {{ $t('twofaccounts.accounts') }}</span>
</div> </div>
<p class="is-size-7 is-pulled-right"> <p class="is-size-7 is-pulled-right" v-if="groups.length > 0">
{{ $t('groups.deleting_group_does_not_delete_accounts')}} {{ $t('groups.deleting_group_does_not_delete_accounts')}}
</p> </p>
<!-- footer --> <!-- footer -->

4
resources/lang/en/groups.php
View File

@ -16,8 +16,9 @@
'groups' => 'Groups', 'groups' => 'Groups',
'select_accounts_to_show' => 'Select accounts to show', 'select_accounts_to_show' => 'Select accounts to show',
'manage_groups' => 'Manage groups', 'manage_groups' => 'Manage groups',
'manage_groups_legend' => 'You can create groups to manage your accounts the way you want. All your accounts remain visible in the pseudo group named \'All\', regardless of the group they belong to.', 'manage_groups_legend' => 'You can create groups to organize your accounts the way you want. All accounts remain visible in the pseudo group named \'All\', regardless of the group they belong to.',
'deleting_group_does_not_delete_accounts' => 'Deleting a group does not delete accounts', 'deleting_group_does_not_delete_accounts' => 'Deleting a group does not delete accounts',
'no_group' => 'No group',
'forms' => [ 'forms' => [
'new_group' => 'New group', 'new_group' => 'New group',
'new_name' => 'New name', 'new_name' => 'New name',
@ -26,5 +27,4 @@
'confirm' => [ 'confirm' => [
'delete' => 'Are you sure you want to delete this group?', 'delete' => 'Are you sure you want to delete this group?',
], ],
]; ];

4
resources/sass/app.scss vendored
View File

@ -51,10 +51,6 @@ a:hover {
} }
} }
.group-selector {
cursor: pointer;
}
.group-item { .group-item {
border-bottom: 1px solid hsl(0, 0%, 21%); border-bottom: 1px solid hsl(0, 0%, 21%);
padding: 0.75rem; padding: 0.75rem;