Create profile settings page

Adding a profile settings page so readonly and operator
roles are able to change their own password.

Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id

Create profile settings page

Adding a profile settings page so readonly and operator
roles are able to change their own password.

Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: Iee9536255ad47f4df4af8746c1e01da37c407f2b

show more ...

Fix truncated button icons on Safari

Removing margin offset to fix issue with button icons being
visually truncated on Safari. Removing additional redundant
code around same icon/buttons.

Signed-of

Fix truncated button icons on Safari

Removing margin offset to fix issue with button icons being
visually truncated on Safari. Removing additional redundant
code around same icon/buttons.

Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: Ie1ef89023a043a70a0126a21be57febb9afae19a

show more ...

Update toast notification

Added new toast notification types, warn and info,
and updated visual styling. All toasts will need
to be manually closed by clicking the 'X' close icon,
except a success t

Update toast notification

Added new toast notification types, warn and info,
and updated visual styling. All toasts will need
to be manually closed by clicking the 'X' close icon,
except a success toast which will be dismissed
automatically after 10 secs.

- Small updates to critical and success/on icon
- Added new colors for toast status background colors

Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: I9077109042621b2d3346b4121d6344da502b6b26

show more ...

Add tooltip styles

Adding styles to make sure the Bootstrap tooltip
directive works by adding opacity to 'in' class that
is added to the tooltip when triggered. This commit
also includes additional

Add tooltip styles

Adding styles to make sure the Bootstrap tooltip
directive works by adding opacity to 'in' class that
is added to the tooltip when triggered. This commit
also includes additional custom styles to override
defaults.
We will need these styles to implement tooltips which
are included in upcoming changes like the firmware
page redesign.

Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: I08e8f1f1762dcc24f8a803b87348a5bff25bd65b

show more ...

Clean up icons

Clean up duplicate svg icons from assets directory.
Created a statusIcon component to dynamically render
status icons instead of using background-image in
scss files.

- Moved/removed

Clean up icons

Clean up duplicate svg icons from assets directory.
Created a statusIcon component to dynamically render
status icons instead of using background-image in
scss files.

- Moved/removed on, off, critical, warning svg icons from
assets directory
- Updated background-image status icons to use <icon>
or <status-icon> directive

Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: Ic0f06d78b0861d6f60d40b2dcc0b80fd6dad2a88

show more ...

Add batch action functionality to table Component

These changes aren't currently implemented on any table.
It will be added to event logs and local user table.

- Create tableCheckbox component to h

Add batch action functionality to table Component

These changes aren't currently implemented on any table.
It will be added to event logs and local user table.

- Create tableCheckbox component to handle custom styles
and indeterminate state which needs to be set with JS
- Update tableComponent layout to allow transition for
toolbar. Updated user-accounts layout and styles to
account for these changes

Tested on Chrome, Safari, Firefox, Edge, IE

Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: Ic57a090db1ef66f9d33facfdc425db868ae8d8c6

show more ...

Create csr modal

The CSR Modal allows users to generate a CSR code. Once the user
types in the necessary information to generate the CSR code, that modal
will then render the code and the user will

Create csr modal

The CSR Modal allows users to generate a CSR code. Once the user
types in the necessary information to generate the CSR code, that modal
will then render the code and the user will be able to either copy the
code or download the code in a txt file.

Tested: loaded onto Witherspoon and able to view on certificate
management page. Click on generate csr and type in necessary
(or any additional info), then click on generate CSR. The CSR
code is then visible and is able to be copied or downloaded. In
error state in which CSR code is unable to generate, the modal
closes and an error toast message appears. FYI: Sometimes you
have to reboot system in order for csr to successfully generate.y

Signed-off-by: Mira Murali <miramurali23@gmail.com>
Change-Id: I3cca09c494357496166164b5ee8ff99250ef981d

show more ...

Add password visibility toggle

This commit will add a new password visibility toggle directive.
The new directive was added to the local user management,
user modal password input fields.

Signed-of

Add password visibility toggle

This commit will add a new password visibility toggle directive.
The new directive was added to the local user management,
user modal password input fields.

Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: I4e2baf53eec04aaff1bba26948779de6e447e3e7

show more ...

Update local user table to new design

This commit will introduce a reusable data table component.
By creating a reusable component, we can ensure tables in the
GUI will look consistent and common ta

Update local user table to new design

This commit will introduce a reusable data table component.
By creating a reusable component, we can ensure tables in the
GUI will look consistent and common table actions (sort, select row)
are shared.

- Created new components directory to store shared components
- Add password-confirmation directive
- Remove some error handling from API utils so it can be
handled in the UI

TODO:
- Add show/hide toggle to password fields
- Enhance table component with icons
- Manual user unlock
- Batch table actions
- Role table

Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: I03c95874d2942a2450a5da2f1d2a8bb895aa1746

show more ...

Update toggle component

- Adds text to indicate the current state of the toggle button to meet
accessibility guidelines
- Update size, color, and focus of toggle component to fix
DAP violations

Update toggle component

- Adds text to indicate the current state of the toggle button to meet
accessibility guidelines
- Update size, color, and focus of toggle component to fix
DAP violations
- Add page, section, and list-pair layout patterns established
on the power usage page to begin a pattern for consistent
page layout
- Add form__field and form__actions to help with form layout
consistency.

Tested: Verified toggle functions in the GUI and tested with screen reader. Passes DAP.

Signed-off-by: Dixsie Wolmers <dixsiew@gmail.com>
Change-Id: Iaa8646b1179cc307971065c455f4b9448095d1ec

show more ...

Clean up color values

This update will clean up slight color variations in the
code base by creating and using Sass color variables
instead of hex values. Available colors are defined in
colors.scss

Clean up color values

This update will clean up slight color variations in the
code base by creating and using Sass color variables
instead of hex values. Available colors are defined in
colors.scss. Any usage of CSS color properties should
refer to the mapped color variables in colors.scss.

- Removed tags.scss file since tag components no longer used

Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: I045030a158469e59d07a9fa8cd8aa9f125f0d383

show more ...

Create certificate management page

Displays certificates and the ability to add up to one
of each type of certificate (as limited by the backend
implementation). HTTPS certificate and LDAP client ce

Create certificate management page

Displays certificates and the ability to add up to one
of each type of certificate (as limited by the backend
implementation). HTTPS certificate and LDAP client cert
are implemented in this commit, with the ability to add
more types as needed by adding them to the constants.js
CERTIFICATE_TYPES array.

Also provides the ability to replace a certificate once
it is added.

Resolves openbmc/phosphor-webui#43

Tested: loaded onto a witherspoon and able to view and
replace both the HTTPS certificate and the
LDAP certificate. GUI only allows to upload an
LDAP certificate if one doesn't already exist.
The GUI limits the user to one file per type as
expected at this time and provides the
appropriate validation messages. Alert messages
appear above the table if the certificate is
expired or within 30 days of expiring.

Change-Id: I345267280ecd3cb257e9304886cde9ebb69b1240
Signed-off-by: beccabroek <beccabroek@gmail.com>
Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>

show more ...

Consolidate button styles

This patchset will create consistent button styling according
to the styleguide and remove redundant button styles by creating
reusable button classes.

This patchset also

Consolidate button styles

This patchset will create consistent button styling according
to the styleguide and remove redundant button styles by creating
reusable button classes.

This patchset also implements a consistent strategy for including
icon assets. Currently, svg icons are imported as CSS background
images or inlined into the markup. Inlining an svg is preferred,
especially when used with buttons or links so the colors can
be easily changed for different states (hover, focus, disabled)
without having to request variants.
The icon provider allows us to inline svgs without cluttering
the markup. Webpack config was adjusted to use svg-inline-loader
when resolving svgs that are used by the icon provider directive.

- All svgs were optimized to remove unncessary information.
- Removed unused svg color variants
- Moved icons used by icon provider to separate directory to
avoid Webpack parsing the files twice
- Small changes to navigation icons

Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: I1ca214b74fc502e6b6e760cfee88b48110237c43

show more ...

Add remote logging server

Remote logging enables the user to configure a remote
server to stream out local logs. This feature will be
available on the Event Log page. The user can add a
remote serve

Add remote logging server

Remote logging enables the user to configure a remote
server to stream out local logs. This feature will be
available on the Event Log page. The user can add a
remote server, edit/change an existing server
configuration and remove/disable the remote server.

Resolves openbmc/phosphor-webui#68

Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: I8284cbdbdaaf85f5c95f237efc72290c66904b40

show more ...

Change button styles from rounded to straight corners

This will create more visual consistency between the components
in the GUI since there are elements, such as text fields and
dropdowns that are

Change button styles from rounded to straight corners

This will create more visual consistency between the components
in the GUI since there are elements, such as text fields and
dropdowns that are styled with straight corners.

- Removes border radius from buttons
- Removes some redundant styles
- Adds input types that aren't currently inheriting
defined styles

Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: I6ff1bde91e2e57df01484dd20003925cd914ffa2

show more ...

Add .ng-leave and .ng-enter rulesets for page transition

Adding ngAnimation dependency created added animation to pages during
route or location changes. Added transitions to create an elegant
trans

Add .ng-leave and .ng-enter rulesets for page transition

Adding ngAnimation dependency created added animation to pages during
route or location changes. Added transitions to create an elegant
transition.

Tested: I navigated to every page including logging in
and out in Chrome, Firefox and Safari to assure all
browsers handle the transition consistently.

Resolves openbmc/phosphor-webui#86

Signed-off-by: Derick Montague <derick.montague@ibm.com>
Change-Id: I14fa1bd790e80f977b7a0ccceccc3eb20ce33ae6

show more ...

Virtual media page

Adds page to manage virtual media devices. User selects file
and pushes 'start' button to establish websocket connection.
nbdServerService added to provide ability for user to nav

Virtual media page

Adds page to manage virtual media devices. User selects file
and pushes 'start' button to establish websocket connection.
nbdServerService added to provide ability for user to navigate
away from the page and return with the ability to see the current
active sessions.

Currently only supports 1 Virtual Media device.

Resolves openbmc/phosphor-webui#40

Tested: uploaded ubuntu image file, started the connection and
mounted virtual media device from host console. Able to see Ubuntu
image file. Also uploaded file and navigated away from the page,
checking that the websocket remained open and was sending /
recieving messages. Finally, tested that when connection
was stopped, 'USB disconnect' log was present in host console.

Change-Id: Ia3155d27cbcfef94c2753dde1303a151e08847cc
Signed-off-by: beccabroek <beccabroek@gmail.com>
Signed-off-by: Gunnar Mills <gmills@us.ibm.com>
Signed-off-by: Derick Montague <derick.montague@ibm.com>

show more ...

Fix system overview edit hostname form validation

- Add pattern for no spaces
- Fix character count
- Prepopulate hostname in input field
- Show error for invalid input
- Improve form accessibility

Fix system overview edit hostname form validation

- Add pattern for no spaces
- Fix character count
- Prepopulate hostname in input field
- Show error for invalid input
- Improve form accessibility
- Correct global disabled primary button style

Resolves openbmc/phosphor-webui#71

Signed-off-by: Dixsie Wolmers <dixsiew@gmail.com>
Change-Id: Ia0601ac7c52229d0606dc5b13397b468fa81426d

show more ...

Add dropdown caret to time owner dropdown on Date and Time Settings

- Use background-image strategy to add caret to dropdowns
- Standardize implementation by including mixin to dropdown__button
cl

Add dropdown caret to time owner dropdown on Date and Time Settings

- Use background-image strategy to add caret to dropdowns
- Standardize implementation by including mixin to dropdown__button
class and removing styled pseudo element

Resolves ibm-openbmc/dev#478

Tested: Running locally on Chrome only. Ran into network request
errors for newly added svg assets when mounting overlay

Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: I714c2515282676f368eafb2560177d2935680e23

show more ...

Resolve accessibility isssues

- Remove unecessary aria-roles
- Associate label elements with form elements
- Remove extraneous markup on Network settings page
- Update generic markup to use definiti

Resolve accessibility isssues

- Remove unecessary aria-roles
- Associate label elements with form elements
- Remove extraneous markup on Network settings page
- Update generic markup to use definition list when appropriate
- Add aria-labels and aria-expanded to accordion triggers

Tested: Accessibility issues tested in using Lighthouse in Chrome
Developer tools Audit section and Dequeue Axe extension. Manually tested clicking on labels
set focus on the form elements. Visually tested of the Network
Settings page in Chrome, Firefox, and Safari to verify layout changes.

Resolves openbmc/phosphor-webui#76

Signed-off-by: Derick Montague <derick.montague@ibm.com>
Change-Id: Ib974c623e9d3b74e74e1f374c21e8191732ec26a

show more ...

Update hex values to meet WCAG AA Guidelines for color contrast

- Change #3C6DF0 to #2D60E5
- Change #E62325 to #DA1416

Tested: I spot tested the Server Overview, the
Event log and

Update hex values to meet WCAG AA Guidelines for color contrast

- Change #3C6DF0 to #2D60E5
- Change #E62325 to #DA1416

Tested: I spot tested the Server Overview, the
Event log and System logs pages to verify color changes and overall
validate the update does not negatively impact the visual integrity
of the app.

Resolves openbmc/phosphor-webui#70

Signed-off-by: Derick Montague <derick.montague@ibm.com>
Change-Id: I2315527a98937176b3e3a2a2118e1798fa4c9e5d

show more ...

Secondary button text color

Changes color of secondary button text to be more readable.

Resolves openbmc/phosphor-webui#66

Change-Id: I3d7622a3556139a8c984590bcc8db5c34cefc73e
Signed-off-by: becca

Secondary button text color

Changes color of secondary button text to be more readable.

Resolves openbmc/phosphor-webui#66

Change-Id: I3d7622a3556139a8c984590bcc8db5c34cefc73e
Signed-off-by: beccabroek <beccabroek@gmail.com>

show more ...

Clean up headers

Updates headers to match style guide and makes them consistent
throughout pages in the GUI. Removes instances where a header
element existed and a different header style was being a

Clean up headers

Updates headers to match style guide and makes them consistent
throughout pages in the GUI. Removes instances where a header
element existed and a different header style was being applied.
For example, <h2 class="h4">

Tested: Ran GUI locally and verified that headers look consistent
and have the appropriate sizing while using Chrome, Firefox and
Safari.

Change-Id: I187136298ed2bfd36c40c2b80d5a4f20947cbe56
Signed-off-by: beccabroek <beccabroek@gmail.com>

show more ...

Fix login and overview pages in Safari

Bootstrap 4 columns in Safari are not working as expected,
causing issues with the layout on the login and overview
pages. Small CSS change resolves issue, see

Fix login and overview pages in Safari

Bootstrap 4 columns in Safari are not working as expected,
causing issues with the layout on the login and overview
pages. Small CSS change resolves issue, see
https://github.com/twbs/bootstrap/issues/24219

Tested: Layout appears to be fixed using Safari. No pages
are affected visually by the change when using Chrome or
Firefox.

Change-Id: I79bf6ef3734703e4f610ee7f95b75625538761c2
Signed-off-by: beccabroek <beccabroek@gmail.com>

show more ...

Form validation on login page

Using ngMessages, adds form validation to login page. Also creates a
directive, hasError, to be used to validate form field by passing
in a boolean. This is a proposed

Form validation on login page

Using ngMessages, adds form validation to login page. Also creates a
directive, hasError, to be used to validate form field by passing
in a boolean. This is a proposed pattern to be used moving forward,
as form validation is added to additional pages.

Validation error messages are shown on $touched and on submit.
Unreachable Server and Invalid username and password error messages
remain until input is no longer $pristine after form submission.

In addition, this removes unneeded and unused css styling

Resolves openbmc/phosphor-webui#47

Change-Id: I7a067af67ac74d4cf2977d10f66445720ecae9eb
Signed-off-by: beccabroek <beccabroek@gmail.com>

show more ...