mgr/dashboard: Carbonize the Change Password Form

[afreen23]

Fixes https://tracker.ceph.com/issues/73193

• using carbon based stylings, typography and components
• used grid layout for form arrangement
• breadcrumb is slightly off, which needs to be fixed by applying grid layout to the app shell

Also have set the global form css for heading, form items, button as per carbon default:

These are defined in _forms.scss.

.form-heading {
  h3 {
    @include type.type-style('heading-03');
  }
  display: block;
  margin-bottom: var(--cds-spacing-08);
}

.form-item {
 ...
  margin-bottom: var(--cds-spacing-07);
}

.form-button {
  margin-top: var(--cds-spacing-09);
}

Before:

Screencast.From.2025-10-21.22-42-08.mp4

After:

Screencast.From.2025-11-24.14-36-24.mp4

Contribution Guidelines

• To sign and title your commits, please refer to Submitting Patches to Ceph.

• If you are submitting a fix for a stable branch (e.g. "quincy"), please refer to Submitting Patches to Ceph - Backports for the proper workflow.

• When filling out the below checklist, you may click boxes directly in the GitHub web UI. When entering or editing the entire PR message in the GitHub web UI editor, you may also select a checklist item by adding an x between the brackets: [x]. Spaces and capitalization matter when checking off items this way.

Checklist

• Tracker (select at least one)
  • References tracker ticket
  • Very recent bug; references commit where it was introduced
  • New feature (ticket optional)
  • Doc update (no ticket needed)
  • Code cleanup (no ticket needed)
• Component impact
  • Affects Dashboard, opened tracker ticket
  • Affects Orchestrator, opened tracker ticket
  • No impact that needs to be tracked
• Documentation (select at least one)
  • Updates relevant documentation
  • No doc update is appropriate
• Tests (select at least one)
  • Includes unit test(s)
  • Includes integration test(s)
  • Includes bug reproducer
  • No tests

Show available Jenkins commands

• jenkins test classic perf Jenkins Job | Jenkins Job Definition
• jenkins test crimson perf Jenkins Job | Jenkins Job Definition
• jenkins test signed Jenkins Job | Jenkins Job Definition
• jenkins test make check Jenkins Job | Jenkins Job Definition
• jenkins test make check arm64 Jenkins Job | Jenkins Job Definition
• jenkins test submodules Jenkins Job | Jenkins Job Definition
• jenkins test dashboard Jenkins Job | Jenkins Job Definition
• jenkins test dashboard cephadm Jenkins Job | Jenkins Job Definition
• jenkins test api Jenkins Job | Jenkins Job Definition
• jenkins test docs ReadTheDocs | Github Workflow Definition
• jenkins test ceph-volume all Jenkins Jobs | Jenkins Jobs Definition
• jenkins test windows Jenkins Job | Jenkins Job Definition
• jenkins test rook e2e Jenkins Job | Jenkins Job Definition

You must only issue one Jenkins command per-comment. Jenkins does not understand
comments with more than one command.

[aaSharma14]

Tested, works fine!

[dnyanee1997]

Thanks @Afreen, Based on my observation, whenever we click directly on Submit, the field will highlight with an error (red color). It seems to be missing in your PR.
Screencast From 2025-10-22 17-07-11.webm

[dnyanee1997]

Before:

After:

[afreen23]

Thanks @Afreen, Based on my observation, whenever we click directly on Submit, the field will highlight with an error (red color). It seems to be missing in your PR. Screencast From 2025-10-22 17-07-11.webm

Yes, thats what was the bootstrap behavior.
Now its carbonized, so you dont see that, carbon dont have such borders.
Thanks

[afreen23]

make check tests failing all over.

Recent update: added autofocus for first input field, so that focus comes to first input field once page loads

[afreen23]

jenkins test make check

[afreen23]

jenkins test make check arm64

[afreen23]

jenkins test make check

[afreen23]

jenkins test make check arm64

[afreen23]

jenkins test make check arm64

[afreen23]

jenkins test make check arm64

[nizamial09]

Now its carbonized, so you dont see that, carbon dont have such borders.

it does though in all our other forms and also in the design.

The missing thing is [invalid] attribute for the <input> element

[nizamial09]

Looks good, thanks @afreen23.

is it just me or is the spacing between navigation sidebar and the page content sort of decreased? or is it the carbon standard? i couldn't find a proper guideline on it.

[dnyanee1997]

LGTM @afreen23
Thanks!

[afreen23]

jenkins test dashboard

[afreen23]

jenkins test dashboard cephadm