blacklight/platypush
1
0
Fork 0
forked from platypush/platypush
Code Issues Pull requests Projects Releases Packages Wiki Activity

More improvements on the users settings panel.

Browse source
This commit is contained in:
Fabio Manganiello 2023-08-06 23:14:54 +02:00
parent d92da5fe6f
commit 6eed558342
Signed by: blacklight
GPG key ID: AD6D273C08B82EC9
1 changed files with 34 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
platypush/backend/http/webapp/src/components/panels/Settings/Users.vue
View file

@ -47,17 +47,22 @@
<DropdownItem text="Change Password" :disabled="commandRunning" icon-class="fa fa-key" <DropdownItem text="Change Password" :disabled="commandRunning" icon-class="fa fa-key"
@click="showChangePasswordModal(user)" /> @click="showChangePasswordModal(user)" />
<DropdownItem text="Delete User" :disabled="commandRunning" icon-class="fa fa-trash" <DropdownItem text="Delete User" :disabled="commandRunning" icon-class="fa fa-trash"
@click="deleteUser(user)" /> @click="$refs.deleteUserDialog.show()" />
</Dropdown> </Dropdown>
</div> </div>
</li> </li>
</ul> </ul>
<FloatingButton icon-class="fa fa-plus" text="Add User" @click="showAddUserModal" /> <FloatingButton icon-class="fa fa-plus" text="Add User" @click="showAddUserModal" />
<ConfirmDialog ref="deleteUserDialog" @input="deleteUser(selectedUser)">
Are you sure that you want to remove the user {{ selectedUser }}?
</ConfirmDialog>
</div> </div>
</template> </template>
<script> <script>
import ConfirmDialog from "@/components/elements/ConfirmDialog";
import Dropdown from "@/components/elements/Dropdown"; import Dropdown from "@/components/elements/Dropdown";
import Modal from "@/components/Modal"; import Modal from "@/components/Modal";
import Loading from "@/components/Loading"; import Loading from "@/components/Loading";
@ -67,7 +72,7 @@ import FloatingButton from "@/components/elements/FloatingButton";
export default { export default {
name: "Users", name: "Users",
components: {Dropdown, DropdownItem, FloatingButton, Loading, Modal}, components: {ConfirmDialog, Dropdown, DropdownItem, FloatingButton, Loading, Modal},
mixins: [Utils], mixins: [Utils],
props: { props: {
@ -199,13 +204,10 @@ export default {
}, },
async deleteUser(user) { async deleteUser(user) {
if (!confirm('Are you sure that you want to remove the user ' + user.username + '?'))
return
this.commandRunning = true this.commandRunning = true
try { try {
await this.request('user.delete_user', { await this.request('user.delete_user', {
username: user.username, username: user,
session_token: this.sessionToken, session_token: this.sessionToken,
}) })
} finally { } finally {
@ -213,12 +215,13 @@ export default {
} }
this.notify({ this.notify({
text: 'User ' + user.username + ' removed', text: `User ${user} removed`,
image: { image: {
iconClass: 'fas fa-check', iconClass: 'fas fa-check',
}, },
}) })
this.selectedUser = null
await this.refresh() await this.refresh()
}, },
@ -245,7 +248,7 @@ export default {
} }
</script> </script>
<style lang="scss"> <style lang="scss" scoped>
.settings-container { .settings-container {
.body { .body {
width: 100%; width: 100%;
@ -276,7 +279,10 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
padding: .75em; padding: .75em;
&:not(:last-child) {
box-shadow: $border-shadow-bottom; box-shadow: $border-shadow-bottom;
}
&:hover { &:hover {
background: $hover-bg; background: $hover-bg;
@ -309,9 +315,27 @@ export default {
box-shadow: $border-shadow-bottom; box-shadow: $border-shadow-bottom;
.user { .user {
border-radius: 0;
&:first-child {
border-radius: 1em 1em 0 0;
}
&:last-child {
border-radius: 0 0 1em 1em;
}
}
}
}
:deep(.btn) {
border-radius: 1em; border-radius: 1em;
} }
} }
:deep(.dropdown-container) {
button {
background: none !important;
} }
} }
</style> </style>