New interface to generate/modify Private/Public key for SIDP Users only #1689

[anatol-sialitski]

No description provided.

[alansemenov]

UI

1. PublicKeysGrid should not be shown when it's empty.
2. PublicKeysGrid should be inside the input view with the "Add key" button, otherwise it sits too tight to the "Change password" button above.
3. The "Authentication" section started to look messy, with password and public keys together. Maybe we can separate them with different labels (like Roles and Groups in the Roles & Groups section below)?
4. If we have "Public Keys" as the label inside input view then we won't need another label (which you made bold). Also change button caption to simply say "Add"

Here's my proposal:

[alansemenov]

Use a different style for the header element, to be able to apply different styling to the header row.

[alansemenov]

This needs some refactoring:

• Add separate methods that create a regular cell and a header cell:

private createCell(html: string, role?: string): DivEl {
    return this.createDivEl('public-keys-cell', role || 'cell', html);
}

private createHeaderCell(html: string): DivEl {
    return this.createCell(html, 'columnheader');
}

• Create separate methods for creating a header and a regular row:

private createHeader(): DivEl {
      const header = this.createDivEl('public-keys-header', 'gridheader');
      header.appendChild(this.createHeaderCell(i18n('field.userKeys.grid.kid.column')));
      header.appendChild(this.createHeaderCell(i18n('field.userKeys.grid.label.column')));
      header.appendChild(this.createHeaderCell(i18n('field.userKeys.grid.creationTime.column')));
      header.appendChild(this.createHeaderCell(i18n('field.userKeys.grid.actions.column')));

      return header;
}

private createDataRow(publicKey: PublicKey): DivEl {
      const row = this.createDivEl('public-keys-row', 'rowgroup');
      row.appendChild(this.createCell(publicKey.getKid()));
      row.appendChild(this.createCell(publicKey.getLabel()));

      const creationTime = new Date(Date.parse(publicKey.getCreationTime()));
      row.appendChild(this.createCell(DateHelper.formatDateTime(creationTime)));

      return row;
}

• Change your code to call these new methods when needed.

[alansemenov]

Move this CSS class to a private static property

private static GRID_CSS_STYLE = 'public-keys-grid';

then use it as a prefix for class names of other UI elements:

this.getEl().addClass(PublicKeysGrid.GRID_CSS_STYLE);
...
this.createDivEl(`${PublicKeysGrid.GRID_CSS_STYLE}-header`, 'gridheader');
....
this.createDivEl(`${PublicKeysGrid.GRID_CSS_STYLE}-header-cell`, 'headercell');
etc

[alansemenov]

In this dialog:

• Change header to "New Public Key" (I don't think you can add several here? otherwise the UI should look completely different)
• Change caption of the main action button to "Generate"
• There should be a hint/helptext under the field which explains format of the expected value. I tried to enter random values and it never worked for me - the dialog just closed without anything happening. There was an error message in the browser console (which user will never see).
• There should be a validation in this form which validates entered value and gives an error message without closing the dialog.