From 378c37b93537b818e6e62d4f617afbb7247d64b4 Mon Sep 17 00:00:00 2001
From: Pascal Wengerter <pascal@wengerter.info>
Date: Mon, 19 Apr 2021 17:23:51 +0100
Subject: [PATCH] Update ODS in accounts extension

---
 accounts/package.json                         |  4 +-
 accounts/ui/components/App.vue                | 21 ++----
 .../accounts/AccountsBatchActions.vue         | 20 ++---
 .../ui/components/accounts/AccountsCreate.vue | 74 ++++++++-----------
 .../ui/components/accounts/AccountsList.vue   |  8 +-
 .../components/accounts/AccountsListRow.vue   |  2 +-
 ...nhancement-update-ods-in-accounts-settings |  7 ++
 7 files changed, 56 insertions(+), 80 deletions(-)
 create mode 100644 changelog/unreleased/enhancement-update-ods-in-accounts-settings

diff --git a/accounts/package.json b/accounts/package.json
index c0f252c9dd..f8de2a9681 100644
--- a/accounts/package.json
+++ b/accounts/package.json
@@ -8,7 +8,7 @@
   "author": "ownCloud GmbH <devops@owncloud.com>",
   "repository": "https://github.com/owncloud/ocis-accounts.git",
   "bugs": {
-    "url": "https://github.com/owncloud/ocis/accounts/issues",
+    "url": "https://github.com/owncloud/ocis/issues",
     "email": "support@owncloud.com"
   },
   "scripts": {
@@ -76,7 +76,7 @@
     "not dead"
   ],
   "peerDependencies": {
-    "owncloud-design-system": "^1.7.0"
+    "owncloud-design-system": "^6.0.1"
   },
   "dependencies": {
     "validator": "^13.1.1"
diff --git a/accounts/ui/components/App.vue b/accounts/ui/components/App.vue
index c3a134a6a1..e922edb1b0 100644
--- a/accounts/ui/components/App.vue
+++ b/accounts/ui/components/App.vue
@@ -1,7 +1,10 @@
 <template>
   <div>
-    <div class="uk-flex uk-flex-column uk-height-1-1" id="accounts-app">
+    <main class="uk-flex uk-flex-column uk-height-1-1" id="accounts-app">
       <template v-if="isInitialized">
+        <h1 class="oc-invisible-sr">
+          <translate>Accounts</translate>
+        </h1>
         <div class="oc-app-bar">
           <accounts-batch-actions
             v-if="isAnyAccountSelected"
@@ -23,7 +26,7 @@
         </oc-alert>
       </template>
       <oc-loader id="accounts-list-loader" v-else />
-    </div>
+    </main>
   </div>
 </template>
 
@@ -55,17 +58,3 @@ export default {
   }
 }
 </script>
-
-<style>
-/* TODO: After https://github.com/owncloud/owncloud-design-system/pull/418 gets merged
-there won't be an extra span and this won't be needed anymore */
-.accounts-selection-actions-btn > span {
-  display: flex;
-  align-items: center;
-}
-
-/* TODO: Adjust in ODS */
-.oc-dropdown-menu {
-  width: 150px;
-}
-</style>
diff --git a/accounts/ui/components/accounts/AccountsBatchActions.vue b/accounts/ui/components/accounts/AccountsBatchActions.vue
index 969249d5cf..8161b45a19 100644
--- a/accounts/ui/components/accounts/AccountsBatchActions.vue
+++ b/accounts/ui/components/accounts/AccountsBatchActions.vue
@@ -3,20 +3,20 @@
     <span v-text="selectionInfoText" />
     <span>|</span>
     <div>
-      <oc-button v-text="$gettext('Clear selection')" variation="raw" @click="RESET_ACCOUNTS_SELECTION" />
+      <oc-button v-text="$gettext('Clear selection')" appearance="raw" @click="RESET_ACCOUNTS_SELECTION" />
     </div>
     <oc-grid gutter="small" id="accounts-batch-actions">
       <div v-for="action in actions" :key="action.label">
-        <oc-alert v-if="isConfirmationInProgress[action.id]" :variation="action.confirmation.variation || 'default'" noClose class="uk-flex uk-flex-middle tmp-alert-fixes">
+        <div v-if="isConfirmationInProgress[action.id]" :variation="action.confirmation.variation || 'primary'" noClose class="uk-flex uk-flex-middle tmp-alert-fixes">
           <span>{{ action.confirmation.message }}</span>
-          <oc-button size="small" :id="action.confirmation.cancel.id" @click="action.confirmation.cancel.handler" :variation="action.confirmation.cancel.variation || 'default'">
+          <oc-button :id="action.confirmation.cancel.id" @click="action.confirmation.cancel.handler" :variation="action.confirmation.cancel.variation || 'passive'">
             {{ action.confirmation.cancel.label }}
           </oc-button>
-          <oc-button size="small" :id="action.confirmation.confirm.id" @click="action.confirmation.confirm.handler" :variation="action.confirmation.confirm.variation || 'default'">
+          <oc-button :id="action.confirmation.confirm.id" @click="action.confirmation.confirm.handler" :variation="action.confirmation.confirm.variation || 'primary'">
             {{ action.confirmation.confirm.label }}
           </oc-button>
-        </oc-alert>
-        <oc-button v-else :id="action.id" @click="action.handler" :variation="action.variation || 'default'" :icon="action.icon">
+        </div>
+        <oc-button v-else :id="action.id" @click="action.handler" :variation="action.variation || 'primary'" :icon="action.icon">
           {{ action.label }}
         </oc-button>
       </div>
@@ -78,6 +78,7 @@ export default {
         id: idDeleteAction,
         label: this.$gettext('Delete'),
         icon: 'delete',
+        variation: 'danger',
         handler: () => this.showConfirmationRequest(idDeleteAction),
         confirmation: {
           variation: 'danger',
@@ -89,7 +90,6 @@ export default {
           cancel: {
             id: 'accounts-batch-action-delete-cancel',
             label: this.$gettext('Cancel'),
-            variation: 'secondary',
             handler: () => this.hideConfirmationRequest(idDeleteAction)
           },
           confirm: {
@@ -119,13 +119,9 @@ export default {
 
 <style lang="scss" scoped>
 .tmp-alert-fixes {
-  padding: 4px 11px 5px !important;
-  border-radius: 3px !important;
-  background-color: #fff !important;
-  border: 1px solid rgb(224, 0, 0) !important;
   color: rgb(224, 0, 0) !important;
 
-  font-size: 1.1rem !important;
+  font-size: 1.125rem !important;
   font-weight: 600 !important;
   line-height: 1.4 !important;
 }
diff --git a/accounts/ui/components/accounts/AccountsCreate.vue b/accounts/ui/components/accounts/AccountsCreate.vue
index c239a6d746..c7732ffa2a 100644
--- a/accounts/ui/components/accounts/AccountsCreate.vue
+++ b/accounts/ui/components/accounts/AccountsCreate.vue
@@ -1,50 +1,45 @@
 <template>
   <div>
     <oc-grid v-if="isFormInProgress" gutter="small">
-      <label>
-        <oc-text-input
-          id="accounts-new-account-input-username"
-          type="text"
-          v-model="formData.username"
-          :error-message="formValidation.usernameError"
-          :placeholder="$gettext('Username')"
-          :disabled="isRequestInProgress"
-          @keydown.enter="createAccount"
-        />
-      </label>
-      <label>
-        <oc-text-input
-          id="accounts-new-account-input-email"
-          type="email"
-          v-model="formData.email"
-          :error-message="formValidation.emailError"
-          :placeholder="$gettext('Email')"
-          :disabled="isRequestInProgress"
-          @keydown.enter="createAccount"
-        />
-      </label>
-      <label>
-        <oc-text-input
-          id="accounts-new-account-input-password"
-          type="password"
-          v-model="formData.password"
-          :error-message="formValidation.passwordError"
-          :placeholder="$gettext('Password')"
-          :disabled="isRequestInProgress"
-          @keydown.enter="createAccount"
-        />
-      </label>
-      <div>
+      <oc-text-input
+        id="accounts-new-account-input-username"
+        type="text"
+        v-model="formData.username"
+        :error-message="formValidation.usernameError"
+        :label="$gettext('Username')"
+        :disabled="isRequestInProgress"
+        @keydown.enter="createAccount"
+      />
+      <oc-text-input
+        id="accounts-new-account-input-email"
+        type="email"
+        v-model="formData.email"
+        :error-message="formValidation.emailError"
+        :label="$gettext('Email')"
+        :disabled="isRequestInProgress"
+        @keydown.enter="createAccount"
+      />
+      <oc-text-input
+        id="accounts-new-account-input-password"
+        type="password"
+        v-model="formData.password"
+        :error-message="formValidation.passwordError"
+        :label="$gettext('Password')"
+        :disabled="isRequestInProgress"
+        @keydown.enter="createAccount"
+      />
+      <div class="uk-flex">
         <oc-button
+          class="oc-mr-s oc-mb-s"
           v-text="$gettext('Cancel')"
           @click="cancelForm"
           :disabled="isRequestInProgress"
         />
-      </div>
-      <div>
         <oc-button
           id="accounts-new-account-button-confirm"
+          class="oc-mr-s oc-mb-s"
           variation="primary"
+          appearance="filled"
           :disabled="isRequestInProgress"
           @click="createAccount"
           gap-size="small"
@@ -66,6 +61,7 @@
           id="accounts-new-account-trigger"
           key="create-accounts-button"
           variation="primary"
+          appearance="filled"
           gap-size="small"
           @click="setFormInProgress(true)"
         >
@@ -194,9 +190,3 @@ export default {
   align-items: center;
 }
 </style>
-<style scoped>
-.border-ods-tmp-fix {
-  /* TODO: somehow the primary button receives a 2px border-width. remove it until we fix it in ODS. */
-  border-width: 0 !important;
-}
-</style>
diff --git a/accounts/ui/components/accounts/AccountsList.vue b/accounts/ui/components/accounts/AccountsList.vue
index c5bf5e9152..33ed3836dc 100644
--- a/accounts/ui/components/accounts/AccountsList.vue
+++ b/accounts/ui/components/accounts/AccountsList.vue
@@ -2,7 +2,7 @@
   <div>
     <oc-table-simple id="accounts-user-list">
       <oc-thead>
-        <oc-tr class="fix-table-header">
+        <oc-tr>
           <oc-th shrink type="head" align-h="center">
             <oc-checkbox
               class="oc-ml-s"
@@ -58,9 +58,3 @@ export default {
   }
 }
 </script>
-
-<style scoped>
-.fix-table-header > th {
-  text-transform: none;
-}
-</style>
diff --git a/accounts/ui/components/accounts/AccountsListRow.vue b/accounts/ui/components/accounts/AccountsListRow.vue
index aa431ebb8c..8d836f8dbd 100644
--- a/accounts/ui/components/accounts/AccountsListRow.vue
+++ b/accounts/ui/components/accounts/AccountsListRow.vue
@@ -18,7 +18,7 @@
     <oc-td v-text="account.displayName || '-'" />
     <oc-td v-text="account.mail" />
     <oc-td>
-      <oc-button :id="`accounts-roles-select-trigger-${account.id}`" class="accounts-roles-select-trigger" variation="raw">
+      <oc-button :id="`accounts-roles-select-trigger-${account.id}`" class="accounts-roles-select-trigger" appearance="outline">
         <span class="uk-flex uk-flex-middle accounts-roles-current-role">
           {{ currentRole ? currentRole.displayName : $gettext('Select role') }}
           <oc-icon name="expand_more" aria-hidden="true" />
diff --git a/changelog/unreleased/enhancement-update-ods-in-accounts-settings b/changelog/unreleased/enhancement-update-ods-in-accounts-settings
new file mode 100644
index 0000000000..5b867c5460
--- /dev/null
+++ b/changelog/unreleased/enhancement-update-ods-in-accounts-settings
@@ -0,0 +1,7 @@
+Enhancement: Update ODS in accounts & settings extension
+
+The accounts and settings extensions were updated to reflect the 
+latest changes in the ownCloud design system. In addition, a couple of 
+quick wins in terms of accessibility are included.
+
+https://github.com/owncloud/ocis/pull/1934