Disable button based on user role

[Divya.Krishnamurthy]

Hello,
Is there any way we can disable the Replace firmware button as shown in the screenshot based on user Role?

Version: 1016.0.264

[Tristan_Bastian]

Hi Divya,

there is no default functionality as part of the Cumulocity Web SDK that would allow this.

However, you should be able to solve this via CSS. After the user logs in, you would check his roles and depending on these roles you would add another global stylesheet that would disable this button.

As the button would only be disabled/hidden via CSS, this might not actually prevent a user from re-enabling it via e.g. the browsers developer tools. To also prevent this you could intercept the request for creating the replace firmware operation, if required. This could actually be a bit of an overkill as the user would still be able to create that operation by directly accessing the REST API, so probably disabling via CSS would be sufficient.

Regards,
Tristan

[Divya.Krishnamurthy]

@Tristan_Bastian, Thanks a lot for the response.

[sandeep.viswanatha (Sandeep V)]

@Tristan_Bastian Can you share us any example implementation for this approach?

[Tristan_Bastian]

Hi @sandeep.viswanatha

You could do this via e.g. a service which could look like this:

import { DOCUMENT } from '@angular/common';
import { Inject, Injectable } from '@angular/core';
import { UserService } from '@c8y/client';
import { AppStateService } from '@c8y/ngx-components';
import { filter, first, map } from 'rxjs/operators';

@Injectable({ providedIn: 'root' })
export class StylesheetService {
  private readonly roleToCheck = 'ROLE_ALARM_ADMIN';
  private readonly cssToAdd = `
    .btn-primary {
      background-color: red !important;
    }
  `;

  constructor(
    @Inject(DOCUMENT) private document: Document,
    private appState: AppStateService,
    private userService: UserService
  ) {
    this.appState.currentUser
      .pipe(
        // ensure user is logged in
        filter(user => !!user),
        // check user permissions
        map(user => this.userService.hasRole(user, this.roleToCheck)),
        // only if role is not present go on
        filter(hasPermission => !hasPermission),
        // only need to add this once
        first()
      )
      .subscribe(() => {
        const styleTag = this.document.createElement('style');
        styleTag.setAttribute('type', 'text/css');
        styleTag.appendChild(document.createTextNode(this.cssToAdd));
        document.head.appendChild(styleTag);
      });
  }
}

You would have to adjust the roleToCheck and cssToAdd attributes according to your requirements.
To instantiate the service on application startup, you could inject it via dependency injection in the constructor of one of your modules.

Regards,
Tristan

[sandeep.viswanatha (Sandeep V)]

Thank you for sharing the sample code snippet @Tristan_Bastian, this implementation is very helpful