mirror/opencloud
1
0
Fork 0
mirror of https://github.com/opencloud-eu/opencloud.git synced 2026-01-23 21:19:18 -06:00
Code Issues Packages Projects Releases Wiki Activity

Clean up, add changelog and disable creation form when create is in progress

Browse Source
This commit is contained in:
Lukas Hirt
2020-09-09 16:29:07 +02:00
parent d2234c4a68
commit 361736c123
6 changed files with 113 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
changelog/unreleased/add-create-form.md Normal file
View File

@@ -0,0 +1,6 @@
Enhancement: Add create account form
We've added a form to create new users above the accounts list.
https://github.com/owncloud/product/issues/148
https://github.com/owncloud/ocis-accounts/pull/115

6
changelog/unreleased/add-delete-action.md Normal file
View File

@@ -0,0 +1,6 @@
Enhancement: Add delete accounts action
We've added an action into the actions dropdown to enable admins to delete users.
https://github.com/owncloud/product/issues/148
https://github.com/owncloud/ocis-accounts/pull/115

30
ui/components/App.vue
View File

@@ -3,7 +3,7 @@
<div class="uk-container uk-padding">
<h1 v-text="$gettext('Accounts')" />
<oc-button
v-if="numberOfSelectedAccounts < 1"
v-if="numberOfSelectedAccounts < 1 && !isAccountCreationInProgress"
id="accounts-new-account-trigger"
key="create-accounts-button"
v-text="$gettext('Create new user')"
@@ -12,7 +12,8 @@
:uk-tooltip="disabledCreateAccountBtnTooltip"
@click="setAccountCreationProgress(true)"
/>
<oc-grid v-else key="selected-accounts-info" gutter="small" class="uk-flex-middle">
<accounts-list-new-account-row v-if="isAccountCreationInProgress" @close="setAccountCreationProgress(false)" />
<oc-grid v-if="numberOfSelectedAccounts > 0" key="selected-accounts-info" gutter="small" class="uk-flex-middle">
<span v-text="selectionInfoText" />
<span>|</span>
<div>
@@ -42,11 +43,7 @@
</div>
</oc-grid>
<template v-if="isInitialized">
<accounts-list
:accounts="accounts"
:is-create-new-row-displayed="isAccountCreationInProgress"
@cancelAccountCreation="setAccountCreationProgress(false)"
/>
<accounts-list :accounts="accounts" />
</template>
<oc-loader v-else />
</div>
@@ -56,9 +53,11 @@
<script>
import { mapGetters, mapActions, mapState, mapMutations } from 'vuex'
import AccountsList from './accounts/AccountsList.vue'
import AccountsListNewAccountRow from './accounts/AccountsListNewAccountRow.vue'
export default {
name: 'App',
components: { AccountsList },
components: { AccountsList, AccountsListNewAccountRow },
data: () => ({
isAccountCreationInProgress: false
}),
@@ -81,14 +80,7 @@ export default {
},
actions () {
let actions = []
const permanentActions = [
{
id: 'accounts-actions-dropdown-action-delete',
label: this.$gettext('Delete'),
handler: this.deleteAccounts
}
]
const actions = []
const numberOfDisabledAccounts = this.selectedAccounts.filter(account => !account.accountEnabled).length
const isAnyAccountDisabled = numberOfDisabledAccounts > 0
const isAnyAccountEnabled = numberOfDisabledAccounts < this.numberOfSelectedAccounts
@@ -109,7 +101,11 @@ export default {
})
}
actions = actions.concat(permanentActions)
actions.push({
id: 'accounts-actions-dropdown-action-delete',
label: this.$gettext('Delete'),
handler: this.deleteAccounts
})
return actions
},

16
ui/components/accounts/AccountsList.vue
View File

@@ -22,7 +22,6 @@
</oc-table-row>
</oc-table-group>
<oc-table-group>
<accounts-list-new-account-row v-if="isCreateNewRowDisplayed" @cancel="emitCreationCancel" />
<accounts-list-row
v-for="account in accounts"
:key="`account-list-row-${account.id}`"
@@ -36,34 +35,23 @@
<script>
import { mapActions, mapGetters } from 'vuex'
import AccountsListRow from './AccountsListRow.vue'
import AccountsListNewAccountRow from './AccountsListNewAccountRow.vue'
export default {
name: 'AccountsList',
components: {
AccountsListRow,
AccountsListNewAccountRow
AccountsListRow
},
props: {
accounts: {
type: Array,
required: true
},
isCreateNewRowDisplayed: {
type: Boolean,
required: false,
default: false
}
},
computed: {
...mapGetters('Accounts', ['areAllAccountsSelected'])
},
methods: {
...mapActions('Accounts', ['toggleSelectionAll']),
emitCreationCancel () {
this.$emit('cancelAccountCreation')
}
...mapActions('Accounts', ['toggleSelectionAll'])
}
}
</script>

154
ui/components/accounts/AccountsListNewAccountRow.vue
View File

@@ -1,53 +1,64 @@
<template>
<oc-table-row>
<oc-table-cell colspan="9">
<oc-grid gutter="small">
<label>
<oc-text-input
id="accounts-new-account-input-username"
type="text"
v-model="username"
:error-message="usernameError"
:placeholder="$gettext('Username')"
@input="checkUsername"
@keydown.enter="createAccount"
<div class="uk-flex uk-flex-top">
<oc-grid gutter="small">
<label>
<oc-text-input
id="accounts-new-account-input-username"
type="text"
v-model="username"
:error-message="usernameError"
:placeholder="$gettext('Username')"
:disabled="isInProgress"
@keydown.enter="createAccount"
/>
</label>
<label>
<oc-text-input
id="accounts-new-account-input-email"
type="email"
v-model="email"
:error-message="emailError"
:placeholder="$gettext('Email')"
:disabled="isInProgress"
@keydown.enter="createAccount"
/>
</label>
<label class="uk-margin-xsmall-right">
<oc-text-input
id="accounts-new-account-input-password"
type="password"
v-model="password"
:error-message="passwordError"
:placeholder="$gettext('Password')"
:disabled="isInProgress"
@keydown.enter="createAccount"
/>
</label>
<div>
<oc-button
v-text="$gettext('Cancel')"
@click="emitClose"
class="uk-margin-xsmall-right"
:disabled="isInProgress"
/>
<oc-button
id="accounts-new-account-button-confirm"
variation="primary"
:disabled="isInProgress"
@click="createAccount"
>
<oc-spinner
v-if="isInProgress"
key="account-creation-in-progress"
size="xsmall"
class="uk-margin-xsmall-right"
aria-hidden="true"
/>
</label>
<label>
<oc-text-input
id="accounts-new-account-input-email"
type="email"
v-model="email"
:error-message="emailError"
:placeholder="$gettext('Email')"
@input="checkEmail"
@keydown.enter="createAccount"
/>
</label>
<label>
<div class="uk-flex uk-flex-middle">
<oc-text-input
id="accounts-new-account-input-password"
:type="passwordInputType"
v-model="password"
:error-message="passwordError"
:placeholder="$gettext('Password')"
class="uk-margin-xsmall-right"
@input="checkPassword"
@keydown.enter="createAccount"
/>
<oc-button variation="raw" :aria-label="$gettext('Display password')" @click="togglePasswordVisibility">
<oc-icon name="remove_red_eye" aria-hidden="true" size="small" />
</oc-button>
</div>
</label>
<div>
<oc-button v-text="$gettext('Cancel')" @click="emitCancel" class="uk-margin-xsmall-right" />
<oc-button id="accounts-new-account-button-confirm" v-text="$gettext('Create')" variation="primary" @click="createAccount" />
</div>
</oc-grid>
</oc-table-cell>
</oc-table-row>
<span v-text="isInProgress ? $gettext('Creating') : $gettext('Create')" />
</oc-button>
</div>
</oc-grid>
</div>
</template>
<script>
@@ -66,70 +77,69 @@ export default {
emailError: '',
password: '',
passwordError: '',
passwordInputType: 'password'
isInProgress: false
}),
methods: {
...mapActions('Accounts', ['createNewAccount']),
emitCancel () {
this.$emit('cancel')
emitClose () {
this.$emit('close')
},
createAccount () {
this.checkUsername()
this.checkEmail()
this.checkPassword()
if (this.usernameError !== '' || this.emailError !== '' || this.passwordError !== '') {
if (!(this.checkUsername() & this.checkEmail() & this.checkPassword())) {
return
}
this.createNewAccount({ username: this.username, email: this.email, password: this.password })
this.emitCancel()
this.isInProgress = true
this.createNewAccount({ username: this.username, email: this.email, password: this.password }).finally(() => {
this.isInProgress = false
})
this.emitClose()
},
checkUsername () {
if (isEmpty(this.username)) {
debounce(this.usernameError = this.$gettext('Username cannot be empty'), 500)
return
return false
}
this.usernameError = ''
return true
},
checkEmail () {
if (isEmpty(this.email)) {
debounce(this.emailError = this.$gettext('Email cannot be empty'), 500)
return
return false
}
if (!isEmail(this.email)) {
debounce(this.emailError = this.$gettext('Invalid email address'), 500)
return
return false
}
this.emailError = ''
return true
},
checkPassword () {
// Later on some restrictions might be applied here
if (isEmpty(this.password)) {
debounce(this.passwordError = this.$gettext('Password cannot be empty'), 500)
return
return false
}
this.passwordError = ''
},
togglePasswordVisibility () {
this.passwordInputType === 'password'
? this.passwordInputType = 'text'
: this.passwordInputType = 'password'
return true
}
}
}
</script>
<style>
#accounts-new-account-button-confirm > span {
display: flex;
align-items: center;
}
</style>

5
ui/tests/acceptance/pageobjects/accountsPage.js
View File

@@ -76,7 +76,7 @@ module.exports = {
return this
.waitForElementVisible('@actionsDropdownTrigger')
.click('@actionsDropdownTrigger')
.click('@newAccountButtonConfirm')
.click('@deleteAction')
},
selectUsers: function (usernames) {
@@ -168,6 +168,9 @@ module.exports = {
},
accountsNewAccountTrigger: {
selector: '#accounts-new-account-trigger'
},
deleteAction: {
selector: '#accounts-actions-dropdown-action-delete'
}
}
}