From 361736c1237d9828d38c3eba737c3f922e4fc210 Mon Sep 17 00:00:00 2001
From: Lukas Hirt <lukashirt@mail.com>
Date: Wed, 9 Sep 2020 16:29:07 +0200
Subject: [PATCH] Clean up, add changelog and disable creation form when create
 is in progress

---
 changelog/unreleased/add-create-form.md       |   6 +
 changelog/unreleased/add-delete-action.md     |   6 +
 ui/components/App.vue                         |  30 ++--
 ui/components/accounts/AccountsList.vue       |  16 +-
 .../accounts/AccountsListNewAccountRow.vue    | 154 ++++++++++--------
 .../acceptance/pageobjects/accountsPage.js    |   5 +-
 6 files changed, 113 insertions(+), 104 deletions(-)
 create mode 100644 changelog/unreleased/add-create-form.md
 create mode 100644 changelog/unreleased/add-delete-action.md

diff --git a/changelog/unreleased/add-create-form.md b/changelog/unreleased/add-create-form.md
new file mode 100644
index 000000000..702cd4a08
--- /dev/null
+++ b/changelog/unreleased/add-create-form.md
@@ -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
diff --git a/changelog/unreleased/add-delete-action.md b/changelog/unreleased/add-delete-action.md
new file mode 100644
index 000000000..19df8aec7
--- /dev/null
+++ b/changelog/unreleased/add-delete-action.md
@@ -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
diff --git a/ui/components/App.vue b/ui/components/App.vue
index 57007e094..c7b7e67a6 100644
--- a/ui/components/App.vue
+++ b/ui/components/App.vue
@@ -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
     },
diff --git a/ui/components/accounts/AccountsList.vue b/ui/components/accounts/AccountsList.vue
index e26b06c6b..d8ef72303 100644
--- a/ui/components/accounts/AccountsList.vue
+++ b/ui/components/accounts/AccountsList.vue
@@ -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>
diff --git a/ui/components/accounts/AccountsListNewAccountRow.vue b/ui/components/accounts/AccountsListNewAccountRow.vue
index 9af732ac0..3c6fc7bec 100644
--- a/ui/components/accounts/AccountsListNewAccountRow.vue
+++ b/ui/components/accounts/AccountsListNewAccountRow.vue
@@ -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>
diff --git a/ui/tests/acceptance/pageobjects/accountsPage.js b/ui/tests/acceptance/pageobjects/accountsPage.js
index 3e91cc81c..52a7c98a3 100644
--- a/ui/tests/acceptance/pageobjects/accountsPage.js
+++ b/ui/tests/acceptance/pageobjects/accountsPage.js
@@ -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'
     }
   }
 }