Merge pull request #89 from owncloud/role-select-ui

Role select ui

changelog/unreleased/select-role-in-ui.md

@@ -0,0 +1,7 @@
+Change: Add role selection to accounts UI
+
+We added a role selection dropdown for each account in the accounts UI. As a first iteration, this doesn't
+require account management permissions.
+
+https://github.com/owncloud/product/issues/103
+https://github.com/owncloud/ocis-accounts/pull/89

package.json

@@ -67,6 +67,7 @@
     "swagger-vue-generator": "^1.0.6",
     "url-search-params-polyfill": "^8.1.0",
     "vue-template-compiler": "^2.6.11",
+    "vuex": "^3.5.1",
     "xml-js": "^1.6.11"
   },
   "browserslist": [
@@ -74,7 +75,6 @@
     "not dead"
   ],
   "peerDependencies": {
-    "owncloud-design-system": "^1.7.0",
-    "vuex": "^3.5.1"
+    "owncloud-design-system": "^1.7.0"
   }
 }

ui/client/settings/index.js

@@ -0,0 +1,581 @@
+/* eslint-disable */
+import axios from 'axios'
+import qs from 'qs'
+let domain = ''
+export const getDomain = () => {
+  return domain
+}
+export const setDomain = ($domain) => {
+  domain = $domain
+}
+export const request = (method, url, body, queryParameters, form, config) => {
+  method = method.toLowerCase()
+  let keys = Object.keys(queryParameters)
+  let queryUrl = url
+  if (keys.length > 0) {
+    queryUrl = url + '?' + qs.stringify(queryParameters)
+  }
+  // let queryUrl = url+(keys.length > 0 ? '?' + (keys.map(key => key + '=' + encodeURIComponent(queryParameters[key])).join('&')) : '')
+  if (body) {
+    return axios[method](queryUrl, body, config)
+  } else if (method === 'get') {
+    return axios[method](queryUrl, config)
+  } else {
+    return axios[method](queryUrl, qs.stringify(form), config)
+  }
+}
+/*==========================================================
+ *                    
+ ==========================================================*/
+/**
+ * 
+ * request: RoleService_AssignRoleToUser
+ * url: RoleService_AssignRoleToUserURL
+ * method: RoleService_AssignRoleToUser_TYPE
+ * raw_url: RoleService_AssignRoleToUser_RAW_URL
+ * @param body - 
+ */
+export const RoleService_AssignRoleToUser = function(parameters = {}) {
+  const domain = parameters.$domain ? parameters.$domain : getDomain()
+  const config = parameters.$config
+  let path = '/api/v0/settings/assignments-add'
+  let body
+  let queryParameters = {}
+  let form = {}
+  if (parameters['body'] !== undefined) {
+    body = parameters['body']
+  }
+  if (parameters['body'] === undefined) {
+    return Promise.reject(new Error('Missing required  parameter: body'))
+  }
+  if (parameters.$queryParameters) {
+    Object.keys(parameters.$queryParameters).forEach(function(parameterName) {
+      queryParameters[parameterName] = parameters.$queryParameters[parameterName]
+    });
+  }
+  return request('post', domain + path, body, queryParameters, form, config)
+}
+export const RoleService_AssignRoleToUser_RAW_URL = function() {
+  return '/api/v0/settings/assignments-add'
+}
+export const RoleService_AssignRoleToUser_TYPE = function() {
+  return 'post'
+}
+export const RoleService_AssignRoleToUserURL = function(parameters = {}) {
+  let queryParameters = {}
+  const domain = parameters.$domain ? parameters.$domain : getDomain()
+  let path = '/api/v0/settings/assignments-add'
+  if (parameters.$queryParameters) {
+    Object.keys(parameters.$queryParameters).forEach(function(parameterName) {
+      queryParameters[parameterName] = parameters.$queryParameters[parameterName]
+    })
+  }
+  let keys = Object.keys(queryParameters)
+  return domain + path + (keys.length > 0 ? '?' + (keys.map(key => key + '=' + encodeURIComponent(queryParameters[key])).join('&')) : '')
+}
+/**
+ * 
+ * request: RoleService_ListRoleAssignments
+ * url: RoleService_ListRoleAssignmentsURL
+ * method: RoleService_ListRoleAssignments_TYPE
+ * raw_url: RoleService_ListRoleAssignments_RAW_URL
+ * @param body - 
+ */
+export const RoleService_ListRoleAssignments = function(parameters = {}) {
+  const domain = parameters.$domain ? parameters.$domain : getDomain()
+  const config = parameters.$config
+  let path = '/api/v0/settings/assignments-list'
+  let body
+  let queryParameters = {}
+  let form = {}
+  if (parameters['body'] !== undefined) {
+    body = parameters['body']
+  }
+  if (parameters['body'] === undefined) {
+    return Promise.reject(new Error('Missing required  parameter: body'))
+  }
+  if (parameters.$queryParameters) {
+    Object.keys(parameters.$queryParameters).forEach(function(parameterName) {
+      queryParameters[parameterName] = parameters.$queryParameters[parameterName]
+    });
+  }
+  return request('post', domain + path, body, queryParameters, form, config)
+}
+export const RoleService_ListRoleAssignments_RAW_URL = function() {
+  return '/api/v0/settings/assignments-list'
+}
+export const RoleService_ListRoleAssignments_TYPE = function() {
+  return 'post'
+}
+export const RoleService_ListRoleAssignmentsURL = function(parameters = {}) {
+  let queryParameters = {}
+  const domain = parameters.$domain ? parameters.$domain : getDomain()
+  let path = '/api/v0/settings/assignments-list'
+  if (parameters.$queryParameters) {
+    Object.keys(parameters.$queryParameters).forEach(function(parameterName) {
+      queryParameters[parameterName] = parameters.$queryParameters[parameterName]
+    })
+  }
+  let keys = Object.keys(queryParameters)
+  return domain + path + (keys.length > 0 ? '?' + (keys.map(key => key + '=' + encodeURIComponent(queryParameters[key])).join('&')) : '')
+}
+/**
+ * 
+ * request: RoleService_RemoveRoleFromUser
+ * url: RoleService_RemoveRoleFromUserURL
+ * method: RoleService_RemoveRoleFromUser_TYPE
+ * raw_url: RoleService_RemoveRoleFromUser_RAW_URL
+ * @param body - 
+ */
+export const RoleService_RemoveRoleFromUser = function(parameters = {}) {
+  const domain = parameters.$domain ? parameters.$domain : getDomain()
+  const config = parameters.$config
+  let path = '/api/v0/settings/assignments-remove'
+  let body
+  let queryParameters = {}
+  let form = {}
+  if (parameters['body'] !== undefined) {
+    body = parameters['body']
+  }
+  if (parameters['body'] === undefined) {
+    return Promise.reject(new Error('Missing required  parameter: body'))
+  }
+  if (parameters.$queryParameters) {
+    Object.keys(parameters.$queryParameters).forEach(function(parameterName) {
+      queryParameters[parameterName] = parameters.$queryParameters[parameterName]
+    });
+  }
+  return request('post', domain + path, body, queryParameters, form, config)
+}
+export const RoleService_RemoveRoleFromUser_RAW_URL = function() {
+  return '/api/v0/settings/assignments-remove'
+}
+export const RoleService_RemoveRoleFromUser_TYPE = function() {
+  return 'post'
+}
+export const RoleService_RemoveRoleFromUserURL = function(parameters = {}) {
+  let queryParameters = {}
+  const domain = parameters.$domain ? parameters.$domain : getDomain()
+  let path = '/api/v0/settings/assignments-remove'
+  if (parameters.$queryParameters) {
+    Object.keys(parameters.$queryParameters).forEach(function(parameterName) {
+      queryParameters[parameterName] = parameters.$queryParameters[parameterName]
+    })
+  }
+  let keys = Object.keys(queryParameters)
+  return domain + path + (keys.length > 0 ? '?' + (keys.map(key => key + '=' + encodeURIComponent(queryParameters[key])).join('&')) : '')
+}
+/**
+ * 
+ * request: BundleService_GetBundle
+ * url: BundleService_GetBundleURL
+ * method: BundleService_GetBundle_TYPE
+ * raw_url: BundleService_GetBundle_RAW_URL
+ * @param body - 
+ */
+export const BundleService_GetBundle = function(parameters = {}) {
+  const domain = parameters.$domain ? parameters.$domain : getDomain()
+  const config = parameters.$config
+  let path = '/api/v0/settings/bundle-get'
+  let body
+  let queryParameters = {}
+  let form = {}
+  if (parameters['body'] !== undefined) {
+    body = parameters['body']
+  }
+  if (parameters['body'] === undefined) {
+    return Promise.reject(new Error('Missing required  parameter: body'))
+  }
+  if (parameters.$queryParameters) {
+    Object.keys(parameters.$queryParameters).forEach(function(parameterName) {
+      queryParameters[parameterName] = parameters.$queryParameters[parameterName]
+    });
+  }
+  return request('post', domain + path, body, queryParameters, form, config)
+}
+export const BundleService_GetBundle_RAW_URL = function() {
+  return '/api/v0/settings/bundle-get'
+}
+export const BundleService_GetBundle_TYPE = function() {
+  return 'post'
+}
+export const BundleService_GetBundleURL = function(parameters = {}) {
+  let queryParameters = {}
+  const domain = parameters.$domain ? parameters.$domain : getDomain()
+  let path = '/api/v0/settings/bundle-get'
+  if (parameters.$queryParameters) {
+    Object.keys(parameters.$queryParameters).forEach(function(parameterName) {
+      queryParameters[parameterName] = parameters.$queryParameters[parameterName]
+    })
+  }
+  let keys = Object.keys(queryParameters)
+  return domain + path + (keys.length > 0 ? '?' + (keys.map(key => key + '=' + encodeURIComponent(queryParameters[key])).join('&')) : '')
+}
+/**
+ * 
+ * request: BundleService_SaveBundle
+ * url: BundleService_SaveBundleURL
+ * method: BundleService_SaveBundle_TYPE
+ * raw_url: BundleService_SaveBundle_RAW_URL
+ * @param body - 
+ */
+export const BundleService_SaveBundle = function(parameters = {}) {
+  const domain = parameters.$domain ? parameters.$domain : getDomain()
+  const config = parameters.$config
+  let path = '/api/v0/settings/bundle-save'
+  let body
+  let queryParameters = {}
+  let form = {}
+  if (parameters['body'] !== undefined) {
+    body = parameters['body']
+  }
+  if (parameters['body'] === undefined) {
+    return Promise.reject(new Error('Missing required  parameter: body'))
+  }
+  if (parameters.$queryParameters) {
+    Object.keys(parameters.$queryParameters).forEach(function(parameterName) {
+      queryParameters[parameterName] = parameters.$queryParameters[parameterName]
+    });
+  }
+  return request('post', domain + path, body, queryParameters, form, config)
+}
+export const BundleService_SaveBundle_RAW_URL = function() {
+  return '/api/v0/settings/bundle-save'
+}
+export const BundleService_SaveBundle_TYPE = function() {
+  return 'post'
+}
+export const BundleService_SaveBundleURL = function(parameters = {}) {
+  let queryParameters = {}
+  const domain = parameters.$domain ? parameters.$domain : getDomain()
+  let path = '/api/v0/settings/bundle-save'
+  if (parameters.$queryParameters) {
+    Object.keys(parameters.$queryParameters).forEach(function(parameterName) {
+      queryParameters[parameterName] = parameters.$queryParameters[parameterName]
+    })
+  }
+  let keys = Object.keys(queryParameters)
+  return domain + path + (keys.length > 0 ? '?' + (keys.map(key => key + '=' + encodeURIComponent(queryParameters[key])).join('&')) : '')
+}
+/**
+ * 
+ * request: BundleService_AddSettingToBundle
+ * url: BundleService_AddSettingToBundleURL
+ * method: BundleService_AddSettingToBundle_TYPE
+ * raw_url: BundleService_AddSettingToBundle_RAW_URL
+ * @param body - 
+ */
+export const BundleService_AddSettingToBundle = function(parameters = {}) {
+  const domain = parameters.$domain ? parameters.$domain : getDomain()
+  const config = parameters.$config
+  let path = '/api/v0/settings/bundles-add-setting'
+  let body
+  let queryParameters = {}
+  let form = {}
+  if (parameters['body'] !== undefined) {
+    body = parameters['body']
+  }
+  if (parameters['body'] === undefined) {
+    return Promise.reject(new Error('Missing required  parameter: body'))
+  }
+  if (parameters.$queryParameters) {
+    Object.keys(parameters.$queryParameters).forEach(function(parameterName) {
+      queryParameters[parameterName] = parameters.$queryParameters[parameterName]
+    });
+  }
+  return request('post', domain + path, body, queryParameters, form, config)
+}
+export const BundleService_AddSettingToBundle_RAW_URL = function() {
+  return '/api/v0/settings/bundles-add-setting'
+}
+export const BundleService_AddSettingToBundle_TYPE = function() {
+  return 'post'
+}
+export const BundleService_AddSettingToBundleURL = function(parameters = {}) {
+  let queryParameters = {}
+  const domain = parameters.$domain ? parameters.$domain : getDomain()
+  let path = '/api/v0/settings/bundles-add-setting'
+  if (parameters.$queryParameters) {
+    Object.keys(parameters.$queryParameters).forEach(function(parameterName) {
+      queryParameters[parameterName] = parameters.$queryParameters[parameterName]
+    })
+  }
+  let keys = Object.keys(queryParameters)
+  return domain + path + (keys.length > 0 ? '?' + (keys.map(key => key + '=' + encodeURIComponent(queryParameters[key])).join('&')) : '')
+}
+/**
+ * 
+ * request: BundleService_ListBundles
+ * url: BundleService_ListBundlesURL
+ * method: BundleService_ListBundles_TYPE
+ * raw_url: BundleService_ListBundles_RAW_URL
+ * @param body - 
+ */
+export const BundleService_ListBundles = function(parameters = {}) {
+  const domain = parameters.$domain ? parameters.$domain : getDomain()
+  const config = parameters.$config
+  let path = '/api/v0/settings/bundles-list'
+  let body
+  let queryParameters = {}
+  let form = {}
+  if (parameters['body'] !== undefined) {
+    body = parameters['body']
+  }
+  if (parameters['body'] === undefined) {
+    return Promise.reject(new Error('Missing required  parameter: body'))
+  }
+  if (parameters.$queryParameters) {
+    Object.keys(parameters.$queryParameters).forEach(function(parameterName) {
+      queryParameters[parameterName] = parameters.$queryParameters[parameterName]
+    });
+  }
+  return request('post', domain + path, body, queryParameters, form, config)
+}
+export const BundleService_ListBundles_RAW_URL = function() {
+  return '/api/v0/settings/bundles-list'
+}
+export const BundleService_ListBundles_TYPE = function() {
+  return 'post'
+}
+export const BundleService_ListBundlesURL = function(parameters = {}) {
+  let queryParameters = {}
+  const domain = parameters.$domain ? parameters.$domain : getDomain()
+  let path = '/api/v0/settings/bundles-list'
+  if (parameters.$queryParameters) {
+    Object.keys(parameters.$queryParameters).forEach(function(parameterName) {
+      queryParameters[parameterName] = parameters.$queryParameters[parameterName]
+    })
+  }
+  let keys = Object.keys(queryParameters)
+  return domain + path + (keys.length > 0 ? '?' + (keys.map(key => key + '=' + encodeURIComponent(queryParameters[key])).join('&')) : '')
+}
+/**
+ * 
+ * request: BundleService_RemoveSettingFromBundle
+ * url: BundleService_RemoveSettingFromBundleURL
+ * method: BundleService_RemoveSettingFromBundle_TYPE
+ * raw_url: BundleService_RemoveSettingFromBundle_RAW_URL
+ * @param body - 
+ */
+export const BundleService_RemoveSettingFromBundle = function(parameters = {}) {
+  const domain = parameters.$domain ? parameters.$domain : getDomain()
+  const config = parameters.$config
+  let path = '/api/v0/settings/bundles-remove-setting'
+  let body
+  let queryParameters = {}
+  let form = {}
+  if (parameters['body'] !== undefined) {
+    body = parameters['body']
+  }
+  if (parameters['body'] === undefined) {
+    return Promise.reject(new Error('Missing required  parameter: body'))
+  }
+  if (parameters.$queryParameters) {
+    Object.keys(parameters.$queryParameters).forEach(function(parameterName) {
+      queryParameters[parameterName] = parameters.$queryParameters[parameterName]
+    });
+  }
+  return request('post', domain + path, body, queryParameters, form, config)
+}
+export const BundleService_RemoveSettingFromBundle_RAW_URL = function() {
+  return '/api/v0/settings/bundles-remove-setting'
+}
+export const BundleService_RemoveSettingFromBundle_TYPE = function() {
+  return 'post'
+}
+export const BundleService_RemoveSettingFromBundleURL = function(parameters = {}) {
+  let queryParameters = {}
+  const domain = parameters.$domain ? parameters.$domain : getDomain()
+  let path = '/api/v0/settings/bundles-remove-setting'
+  if (parameters.$queryParameters) {
+    Object.keys(parameters.$queryParameters).forEach(function(parameterName) {
+      queryParameters[parameterName] = parameters.$queryParameters[parameterName]
+    })
+  }
+  let keys = Object.keys(queryParameters)
+  return domain + path + (keys.length > 0 ? '?' + (keys.map(key => key + '=' + encodeURIComponent(queryParameters[key])).join('&')) : '')
+}
+/**
+ * 
+ * request: RoleService_ListRoles
+ * url: RoleService_ListRolesURL
+ * method: RoleService_ListRoles_TYPE
+ * raw_url: RoleService_ListRoles_RAW_URL
+ * @param body - 
+ */
+export const RoleService_ListRoles = function(parameters = {}) {
+  const domain = parameters.$domain ? parameters.$domain : getDomain()
+  const config = parameters.$config
+  let path = '/api/v0/settings/roles-list'
+  let body
+  let queryParameters = {}
+  let form = {}
+  if (parameters['body'] !== undefined) {
+    body = parameters['body']
+  }
+  if (parameters['body'] === undefined) {
+    return Promise.reject(new Error('Missing required  parameter: body'))
+  }
+  if (parameters.$queryParameters) {
+    Object.keys(parameters.$queryParameters).forEach(function(parameterName) {
+      queryParameters[parameterName] = parameters.$queryParameters[parameterName]
+    });
+  }
+  return request('post', domain + path, body, queryParameters, form, config)
+}
+export const RoleService_ListRoles_RAW_URL = function() {
+  return '/api/v0/settings/roles-list'
+}
+export const RoleService_ListRoles_TYPE = function() {
+  return 'post'
+}
+export const RoleService_ListRolesURL = function(parameters = {}) {
+  let queryParameters = {}
+  const domain = parameters.$domain ? parameters.$domain : getDomain()
+  let path = '/api/v0/settings/roles-list'
+  if (parameters.$queryParameters) {
+    Object.keys(parameters.$queryParameters).forEach(function(parameterName) {
+      queryParameters[parameterName] = parameters.$queryParameters[parameterName]
+    })
+  }
+  let keys = Object.keys(queryParameters)
+  return domain + path + (keys.length > 0 ? '?' + (keys.map(key => key + '=' + encodeURIComponent(queryParameters[key])).join('&')) : '')
+}
+/**
+ * 
+ * request: ValueService_GetValue
+ * url: ValueService_GetValueURL
+ * method: ValueService_GetValue_TYPE
+ * raw_url: ValueService_GetValue_RAW_URL
+ * @param body - 
+ */
+export const ValueService_GetValue = function(parameters = {}) {
+  const domain = parameters.$domain ? parameters.$domain : getDomain()
+  const config = parameters.$config
+  let path = '/api/v0/settings/values-get'
+  let body
+  let queryParameters = {}
+  let form = {}
+  if (parameters['body'] !== undefined) {
+    body = parameters['body']
+  }
+  if (parameters['body'] === undefined) {
+    return Promise.reject(new Error('Missing required  parameter: body'))
+  }
+  if (parameters.$queryParameters) {
+    Object.keys(parameters.$queryParameters).forEach(function(parameterName) {
+      queryParameters[parameterName] = parameters.$queryParameters[parameterName]
+    });
+  }
+  return request('post', domain + path, body, queryParameters, form, config)
+}
+export const ValueService_GetValue_RAW_URL = function() {
+  return '/api/v0/settings/values-get'
+}
+export const ValueService_GetValue_TYPE = function() {
+  return 'post'
+}
+export const ValueService_GetValueURL = function(parameters = {}) {
+  let queryParameters = {}
+  const domain = parameters.$domain ? parameters.$domain : getDomain()
+  let path = '/api/v0/settings/values-get'
+  if (parameters.$queryParameters) {
+    Object.keys(parameters.$queryParameters).forEach(function(parameterName) {
+      queryParameters[parameterName] = parameters.$queryParameters[parameterName]
+    })
+  }
+  let keys = Object.keys(queryParameters)
+  return domain + path + (keys.length > 0 ? '?' + (keys.map(key => key + '=' + encodeURIComponent(queryParameters[key])).join('&')) : '')
+}
+/**
+ * 
+ * request: ValueService_ListValues
+ * url: ValueService_ListValuesURL
+ * method: ValueService_ListValues_TYPE
+ * raw_url: ValueService_ListValues_RAW_URL
+ * @param body - 
+ */
+export const ValueService_ListValues = function(parameters = {}) {
+  const domain = parameters.$domain ? parameters.$domain : getDomain()
+  const config = parameters.$config
+  let path = '/api/v0/settings/values-list'
+  let body
+  let queryParameters = {}
+  let form = {}
+  if (parameters['body'] !== undefined) {
+    body = parameters['body']
+  }
+  if (parameters['body'] === undefined) {
+    return Promise.reject(new Error('Missing required  parameter: body'))
+  }
+  if (parameters.$queryParameters) {
+    Object.keys(parameters.$queryParameters).forEach(function(parameterName) {
+      queryParameters[parameterName] = parameters.$queryParameters[parameterName]
+    });
+  }
+  return request('post', domain + path, body, queryParameters, form, config)
+}
+export const ValueService_ListValues_RAW_URL = function() {
+  return '/api/v0/settings/values-list'
+}
+export const ValueService_ListValues_TYPE = function() {
+  return 'post'
+}
+export const ValueService_ListValuesURL = function(parameters = {}) {
+  let queryParameters = {}
+  const domain = parameters.$domain ? parameters.$domain : getDomain()
+  let path = '/api/v0/settings/values-list'
+  if (parameters.$queryParameters) {
+    Object.keys(parameters.$queryParameters).forEach(function(parameterName) {
+      queryParameters[parameterName] = parameters.$queryParameters[parameterName]
+    })
+  }
+  let keys = Object.keys(queryParameters)
+  return domain + path + (keys.length > 0 ? '?' + (keys.map(key => key + '=' + encodeURIComponent(queryParameters[key])).join('&')) : '')
+}
+/**
+ * 
+ * request: ValueService_SaveValue
+ * url: ValueService_SaveValueURL
+ * method: ValueService_SaveValue_TYPE
+ * raw_url: ValueService_SaveValue_RAW_URL
+ * @param body - 
+ */
+export const ValueService_SaveValue = function(parameters = {}) {
+  const domain = parameters.$domain ? parameters.$domain : getDomain()
+  const config = parameters.$config
+  let path = '/api/v0/settings/values-save'
+  let body
+  let queryParameters = {}
+  let form = {}
+  if (parameters['body'] !== undefined) {
+    body = parameters['body']
+  }
+  if (parameters['body'] === undefined) {
+    return Promise.reject(new Error('Missing required  parameter: body'))
+  }
+  if (parameters.$queryParameters) {
+    Object.keys(parameters.$queryParameters).forEach(function(parameterName) {
+      queryParameters[parameterName] = parameters.$queryParameters[parameterName]
+    });
+  }
+  return request('post', domain + path, body, queryParameters, form, config)
+}
+export const ValueService_SaveValue_RAW_URL = function() {
+  return '/api/v0/settings/values-save'
+}
+export const ValueService_SaveValue_TYPE = function() {
+  return 'post'
+}
+export const ValueService_SaveValueURL = function(parameters = {}) {
+  let queryParameters = {}
+  const domain = parameters.$domain ? parameters.$domain : getDomain()
+  let path = '/api/v0/settings/values-save'
+  if (parameters.$queryParameters) {
+    Object.keys(parameters.$queryParameters).forEach(function(parameterName) {
+      queryParameters[parameterName] = parameters.$queryParameters[parameterName]
+    })
+  }
+  let keys = Object.keys(queryParameters)
+  return domain + path + (keys.length > 0 ? '?' + (keys.map(key => key + '=' + encodeURIComponent(queryParameters[key])).join('&')) : '')
+}

ui/components/accounts/AccountsList.vue

@@ -7,36 +7,31 @@
           <oc-table-cell type="head" v-text="$gettext('Username')" />
           <oc-table-cell type="head" v-text="$gettext('Display name')" />
           <oc-table-cell type="head" v-text="$gettext('Email')" />
+          <oc-table-cell type="head" v-text="$gettext('Role')" />
           <oc-table-cell shrink type="head" class="uk-text-nowrap" v-text="$gettext('Uid number')" />
           <oc-table-cell shrink type="head" class="uk-text-nowrap" v-text="$gettext('Gid number')" />
           <oc-table-cell shrink type="head" v-text="$gettext('Enabled')" />
         </oc-table-row>
       </oc-table-group>
       <oc-table-group>
-        <oc-table-row v-for="account in accounts" :key="`account-list-row-${account.id}`">
-          <oc-table-cell>
-            <avatar :user-name="account.displayName || account.onPremisesSamAccountName" :userid="account.id" :width="35" />
-          </oc-table-cell>
-          <oc-table-cell v-text="account.onPremisesSamAccountName" />
-          <oc-table-cell v-text="account.displayName || '-'" />
-          <oc-table-cell v-text="account.mail" />
-          <oc-table-cell v-text="account.uidNumber || '-'" />
-          <oc-table-cell v-text="account.gidNumber || '-'" />
-          <oc-table-cell class="uk-text-center">
-            <oc-icon v-if="account.accountEnabled" name="ready" variation="success" :aria-label="$gettext('Account is enabled')" />
-            <oc-icon v-else name="deprecated" variation="danger" :aria-label="$gettext('Account is disabled')" />
-          </oc-table-cell>
-        </oc-table-row>
+        <accounts-list-row
+          v-for="account in accounts"
+          :key="`account-list-row-${account.id}`"
+          :account="account"
+        />
       </oc-table-group>
     </oc-table>
   </div>
 </template>
 
 <script>
-import Avatar from './Avatar.vue'
+import AccountsListRow from './AccountsListRow.vue'
+
 export default {
   name: 'AccountsList',
-  components: { Avatar },
+  components: {
+    AccountsListRow
+  },
   props: {
     accounts: {
       type: Array,

ui/components/accounts/AccountsListRow.vue

@@ -0,0 +1,135 @@
+<template>
+  <oc-table-row>
+    <oc-table-cell>
+      <avatar :user-name="account.displayName || account.onPremisesSamAccountName" :userid="account.id" :width="35" />
+    </oc-table-cell>
+    <oc-table-cell v-text="account.onPremisesSamAccountName" />
+    <oc-table-cell v-text="account.displayName || '-'" />
+    <oc-table-cell v-text="account.mail" />
+    <oc-table-cell>
+      <oc-button :id="`accounts-roles-select-trigger-${account.id}`" class="accounts-roles-select-trigger" variation="raw">
+        <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" />
+        </span>
+      </oc-button>
+      <oc-drop
+        :drop-id="`accounts-roles-select-dropdown-${account.id}`"
+        :toggle="`#accounts-roles-select-trigger-${account.id}`"
+        mode="click"
+        close-on-click
+        :options="{ delayHide: 0 }"
+      >
+        <ul class="uk-list">
+          <li v-for="role in roles" :key="role.id">
+            <label class="accounts-roles-dropdown-role">
+              <input
+                type="radio"
+                class="oc-radiobutton"
+                v-model="currentRole"
+                :value="role"
+                @change="changeRole(role.id)"
+              />
+              {{ role.displayName }}
+            </label>
+          </li>
+        </ul>
+      </oc-drop>
+    </oc-table-cell>
+    <oc-table-cell v-text="account.uidNumber || '-'" />
+    <oc-table-cell v-text="account.gidNumber || '-'" />
+    <oc-table-cell class="uk-text-center">
+      <oc-icon v-if="account.accountEnabled" name="ready" variation="success" :aria-label="$gettext('Account is enabled')" />
+      <oc-icon v-else name="deprecated" variation="danger" :aria-label="$gettext('Account is disabled')" />
+    </oc-table-cell>
+  </oc-table-row>
+</template>
+
+<script>
+import { mapGetters, mapState, mapActions } from 'vuex'
+import { isObjectEmpty } from '../../helpers/utils'
+import { injectAuthToken } from '../../helpers/auth'
+// eslint-disable-next-line camelcase
+import { RoleService_AssignRoleToUser, RoleService_ListRoleAssignments } from '../../client/settings'
+import Avatar from './Avatar.vue'
+
+export default {
+  name: 'AccountsListRow',
+
+  components: { Avatar },
+
+  props: {
+    account: {
+      type: Object,
+      required: true
+    }
+  },
+
+  data () {
+    return {
+      currentRole: null
+    }
+  },
+
+  computed: {
+    ...mapGetters(['user', 'configuration']),
+    ...mapState('Accounts', ['roles'])
+  },
+
+  created () {
+    this.getUsersCurrentRole()
+  },
+
+  methods: {
+    ...mapActions(['showMessage']),
+
+    async changeRole (roleId) {
+      injectAuthToken(this.user.token)
+
+      const response = await RoleService_AssignRoleToUser({
+        $domain: this.configuration.server,
+        body: {
+          account_uuid: this.account.id,
+          role_id: roleId
+        }
+      })
+
+      if (response.status === 201) {
+        const roleId = response.data.assignment.roleId
+        this.currentRole = this.roles.find(role => {
+          return role.id === roleId
+        })
+      } else {
+        this.showMessage({
+          title: this.$gettext('Failed to change role.'),
+          desc: response.statusText,
+          status: 'danger'
+        })
+      }
+    },
+
+    async getUsersCurrentRole () {
+      injectAuthToken(this.user.token)
+
+      const response = await RoleService_ListRoleAssignments({
+        $domain: this.configuration.server,
+        body: {
+          account_uuid: this.account.id
+        }
+      })
+
+      if (response.status === 201) {
+        const assignedRole = response.data
+
+        if (isObjectEmpty(assignedRole)) {
+          return
+        }
+
+        this.currentRole = this.roles.find(role => {
+          return role.id === assignedRole.assignments[0].roleId
+        })
+      }
+    }
+  }
+}
+</script>

ui/helpers/auth.js

@@ -0,0 +1,12 @@
+import axios from 'axios'
+
+export function injectAuthToken (token) {
+  axios.interceptors.request.use(config => {
+    if (typeof config.headers.Authorization === 'undefined') {
+      if (token) {
+        config.headers.Authorization = `Bearer ${token}`
+      }
+    }
+    return config
+  })
+}

ui/helpers/utils.js

@@ -0,0 +1,8 @@
+/**
+ * Asserts wheter the given object is empty
+ * @param {Object} obj Object to be checked
+ * @returns {Boolean}
+ */
+export function isObjectEmpty (obj) {
+  return Object.keys(obj).length === 0 && obj.constructor === Object
+}

ui/store/index.js

@@ -1,13 +1,14 @@
-import {
-  // eslint-disable-next-line camelcase
-  AccountsService_ListAccounts
-} from '../client/accounts'
-import axios from 'axios'
+/* eslint-disable camelcase */
+import { AccountsService_ListAccounts } from '../client/accounts'
+import { RoleService_ListRoles } from '../client/settings'
+/* eslint-enable camelcase */
+import { injectAuthToken } from '../helpers/auth'
 
 const state = {
   config: null,
   initialized: false,
-  accounts: {}
+  accounts: {},
+  roles: null
 }
 
 const getters = {
@@ -32,6 +33,9 @@ const mutations = {
   },
   SET_ACCOUNTS (state, accounts) {
     state.accounts = accounts
+  },
+  SET_ROLES (state, roles) {
+    state.roles = roles
   }
 }
 
@@ -42,11 +46,12 @@ const actions = {
 
   async initialize ({ commit, dispatch }) {
     await dispatch('fetchAccounts')
+    await dispatch('fetchRoles')
     commit('SET_INITIALIZED', true)
   },
 
   async fetchAccounts ({ commit, dispatch, rootGetters }) {
-    injectAuthToken(rootGetters)
+    injectAuthToken(rootGetters.user.token)
     const response = await AccountsService_ListAccounts({
       $domain: rootGetters.configuration.server,
       body: {}
@@ -61,6 +66,29 @@ const actions = {
         status: 'danger'
       }, { root: true })
     }
+  },
+
+  async fetchRoles ({ commit, dispatch, rootGetters }) {
+    injectAuthToken(rootGetters.user.token)
+
+    const response = await RoleService_ListRoles({
+      $domain: rootGetters.configuration.server,
+      body: {
+        accountUuid: 'me'
+      }
+    })
+
+    if (response.status === 201) {
+      const roles = response.data.bundles
+
+      commit('SET_ROLES', roles || [])
+    } else {
+      dispatch('showMessage', {
+        title: 'Failed to fetch roles.',
+        desc: response.statusText,
+        status: 'danger'
+      }, { root: true })
+    }
   }
 }
 
@@ -71,15 +99,3 @@ export default {
   actions,
   mutations
 }
-
-function injectAuthToken (rootGetters) {
-  axios.interceptors.request.use(config => {
-    if (typeof config.headers.Authorization === 'undefined') {
-      const token = rootGetters.user.token
-      if (token) {
-        config.headers.Authorization = `Bearer ${token}`
-      }
-    }
-    return config
-  })
-}

ui/tests/acceptance/features/accounts.feature

@@ -10,4 +10,12 @@ Feature: Accounts
 		And user "reva" should be displayed in the accounts list on the WebUI
 		And user "richard" should be displayed in the accounts list on the WebUI
 
-
+	Scenario: change users role
+		Given user "user1" has been created with default attributes
+		And user "user1" has logged in using the webUI
+		When the user browses to the accounts page
+		Then user "einstein" should be displayed in the accounts list on the WebUI
+		When the user changes the role of user "einstein" to "Admin" using the WebUI
+		Then the displayed role of user "einstein" should be "Admin" on the WebUI
+		When the user reloads the current page of the webUI
+		Then the displayed role of user "einstein" should be "Admin" on the WebUI

ui/tests/acceptance/pageobjects/accountsPage.js

@@ -21,6 +21,25 @@ module.exports = {
           user = result
         })
       return user.value
+    },
+
+    selectRole: function (username, role) {
+      const roleSelector =
+        util.format(this.elements.rowByUsername.selector, username) +
+        util.format(this.elements.roleInRolesDropdown.selector, role)
+
+      return this
+        .click('@rolesDropdownTrigger')
+        .waitForElementVisible(roleSelector)
+        .click(roleSelector)
+    },
+
+    checkUsersRole: function (username, role) {
+      const roleSelector =
+        util.format(this.elements.rowByUsername.selector, username) +
+        util.format(this.elements.currentRole.selector, role)
+
+      return this.useXpath().expect.element(roleSelector).to.be.visible
     }
   },
 
@@ -36,6 +55,22 @@ module.exports = {
     userInAccountsList: {
       selector: '//table//td[text()="%s"]',
       locateStrategy: 'xpath'
+    },
+    rowByUsername: {
+      selector: '//table//td[text()="%s"]/ancestor::tr',
+      locateStrategy: 'xpath'
+    },
+    currentRole: {
+      selector: '//span[contains(@class, "accounts-roles-current-role") and normalize-space()="%s"]',
+      locateStrategy: 'xpath'
+    },
+    roleInRolesDropdown: {
+      selector: '//label[contains(@class, "accounts-roles-dropdown-role") and normalize-space()="%s"]',
+      locateStrategy: 'xpath'
+    },
+    rolesDropdownTrigger: {
+      selector: '//button[contains(@class, "accounts-roles-select-trigger")]',
+      locateStrategy: 'xpath'
     }
   }
 }

ui/tests/acceptance/stepDefinitions/accountsContext.js

@@ -11,3 +11,11 @@ Then('user {string} should be displayed in the accounts list on the WebUI', asyn
   const userListed = await client.page.accountsPage().isUserListed(username)
   return assert.strictEqual(userListed, username)
 })
+
+When('the user changes the role of user {string} to {string} using the WebUI', function (username, role) {
+  return client.page.accountsPage().selectRole(username, role)
+})
+
+Then('the displayed role of user {string} should be {string} on the WebUI', function (username, role) {
+  return client.page.accountsPage().checkUsersRole(username, role)
+})

yarn.lock

@@ -6418,6 +6418,11 @@ vue-template-es2015-compiler@^1.9.0:
   resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825"
   integrity sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==
 
+vuex@^3.5.1:
+  version "3.5.1"
+  resolved "https://registry.yarnpkg.com/vuex/-/vuex-3.5.1.tgz#f1b8dcea649bc25254cf4f4358081dbf5da18b3d"
+  integrity sha512-w7oJzmHQs0FM9LXodfskhw9wgKBiaB+totOdb8sNzbTB2KDCEEwEs29NzBZFh/lmEK1t5tDmM1vtsO7ubG1DFw==
+
 wcwidth@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/wcwidth/-/wcwidth-1.0.1.tgz#f0b0dcf915bc5ff1528afadb2c0e17b532da2fe8"