From 895fdb1d5775c74f7a562707f3a17c94abe50e8a Mon Sep 17 00:00:00 2001 From: Bekah Stephens Date: Tue, 6 May 2025 10:20:49 -0400 Subject: [PATCH 1/2] docs(login page): Updates images for v6. --- .../img/login-authentication-more-options.svg | 119 +++++++++++ .../img/login-authentication-multi-factor.svg | 189 ++++++++++++++++++ .../img/login-authentication-sso.svg | 129 ++++++++++++ .../login-page/img/login-caps-warning.svg | 40 ++++ .../login-page/img/login-client-errors.svg | 78 ++++++++ .../login-page/img/login-elements.svg | 180 +++++++++++++++++ .../img/login-empty-field-error.svg | 23 +++ .../login-page/img/login-general-warnings.svg | 51 +++++ .../login-page/img/login-invalid-error.svg | 22 ++ .../login-page/img/login-no-account-error.svg | 26 +++ .../login-page/img/login-server-errors.svg | 104 ++++++++++ .../components/login-page/login-page.md | 46 ++++- 12 files changed, 996 insertions(+), 11 deletions(-) create mode 100644 packages/documentation-site/patternfly-docs/content/design-guidelines/components/login-page/img/login-authentication-more-options.svg create mode 100644 packages/documentation-site/patternfly-docs/content/design-guidelines/components/login-page/img/login-authentication-multi-factor.svg create mode 100644 packages/documentation-site/patternfly-docs/content/design-guidelines/components/login-page/img/login-authentication-sso.svg create mode 100644 packages/documentation-site/patternfly-docs/content/design-guidelines/components/login-page/img/login-caps-warning.svg create mode 100644 packages/documentation-site/patternfly-docs/content/design-guidelines/components/login-page/img/login-client-errors.svg create mode 100644 packages/documentation-site/patternfly-docs/content/design-guidelines/components/login-page/img/login-elements.svg create mode 100644 packages/documentation-site/patternfly-docs/content/design-guidelines/components/login-page/img/login-empty-field-error.svg create mode 100644 packages/documentation-site/patternfly-docs/content/design-guidelines/components/login-page/img/login-general-warnings.svg create mode 100644 packages/documentation-site/patternfly-docs/content/design-guidelines/components/login-page/img/login-invalid-error.svg create mode 100644 packages/documentation-site/patternfly-docs/content/design-guidelines/components/login-page/img/login-no-account-error.svg create mode 100644 packages/documentation-site/patternfly-docs/content/design-guidelines/components/login-page/img/login-server-errors.svg diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/login-page/img/login-authentication-more-options.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/login-page/img/login-authentication-more-options.svg new file mode 100644 index 0000000000..0d9bd278ff --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/login-page/img/login-authentication-more-options.svg @@ -0,0 +1,119 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/login-page/img/login-authentication-multi-factor.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/login-page/img/login-authentication-multi-factor.svg new file mode 100644 index 0000000000..7e69ed2a3b --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/login-page/img/login-authentication-multi-factor.svg @@ -0,0 +1,189 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/login-page/img/login-authentication-sso.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/login-page/img/login-authentication-sso.svg new file mode 100644 index 0000000000..887a3e820e --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/login-page/img/login-authentication-sso.svg @@ -0,0 +1,129 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/login-page/img/login-caps-warning.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/login-page/img/login-caps-warning.svg new file mode 100644 index 0000000000..810eda2be4 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/login-page/img/login-caps-warning.svg @@ -0,0 +1,40 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/login-page/img/login-client-errors.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/login-page/img/login-client-errors.svg new file mode 100644 index 0000000000..b17ff57871 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/login-page/img/login-client-errors.svg @@ -0,0 +1,78 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/login-page/img/login-elements.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/login-page/img/login-elements.svg new file mode 100644 index 0000000000..83099ec299 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/login-page/img/login-elements.svg @@ -0,0 +1,180 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/login-page/img/login-empty-field-error.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/login-page/img/login-empty-field-error.svg new file mode 100644 index 0000000000..ec50d1e025 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/login-page/img/login-empty-field-error.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/login-page/img/login-general-warnings.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/login-page/img/login-general-warnings.svg new file mode 100644 index 0000000000..abd79f16e7 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/login-page/img/login-general-warnings.svg @@ -0,0 +1,51 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/login-page/img/login-invalid-error.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/login-page/img/login-invalid-error.svg new file mode 100644 index 0000000000..ac5ccb117d --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/login-page/img/login-invalid-error.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/login-page/img/login-no-account-error.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/login-page/img/login-no-account-error.svg new file mode 100644 index 0000000000..32c83eb6fe --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/login-page/img/login-no-account-error.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/login-page/img/login-server-errors.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/login-page/img/login-server-errors.svg new file mode 100644 index 0000000000..803b70464e --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/login-page/img/login-server-errors.svg @@ -0,0 +1,104 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/login-page/login-page.md b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/login-page/login-page.md index 4fe9b1e4a9..3700528f18 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/login-page/login-page.md +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/login-page/login-page.md @@ -3,9 +3,13 @@ id: Login page section: components --- +import '../components.css'; + ## Elements -Elements of a login page +
+![Elements of a login page.](./img/login-elements.svg) +
1. **Title:** Located at the top of the login card. The title can be the product name or any other term that makes sense for your application. If the text is longer than the space allowed, it should wrap to the next line. @@ -62,19 +66,25 @@ The multi-factor login allows a user to gain access to an application by enterin When you need more security, you can incorporate additional authentication methods into the login process. This example shows both password and verification code methods: -Example of multi factor login process +
+![Example of a multi-factor login process.](./img/login-authentication-multi-factor.svg) +
**Enabling users to select their verification method (optional):** Once a user has provided a valid password, the system hides the gray bar at the bottom of the modal and displays the link text “More verification options." Clicking the link allows users to select an alternate verification type if they can’t use the default method. Examples of additional multi-factor authentication that could be used include authentication codes, SMS codes or backup codes. -Example of additional multi-factor authentication +
+![Example of additional multi-factor authentication.](./img/login-authentication-more-options.svg) +
#### Single sign-on (SSO) Single sign-on (SSO) allows a user to log in once and access multiple applications within the same organization. This type of login supports displaying both single and multi-factor login. -Example of single sign on methods +
+![Example of single sign-on methods.](./img/login-authentication-sso.svg) +
**Additional SSO elements** @@ -102,13 +112,17 @@ Always present error states on the login screen if a login field submission resu #### Client-side errors -![Client-side-errors](./img/client_side_error.png "Client-side-errors") +
+![Example of client-side errors.](./img/login-client-errors.svg) +
Client-side validation can be performed when a field is clicked away from or loses focus. It allows you to use inline validation to present errors or issues before the login is submitted. In most cases, client-side validations are performed as inline validations for each field. Some common examples are shown below. ##### Empty field(s) -Example of empty login fields +
+![Example of empty login fields.](./img/login-empty-field-error.svg) +
An error message should be displayed below any required field that is empty once the field loses focus or an action button (Log in/Next) is clicked. Once the field is filled, the error message should disappear. The following error messages are suggested for use: @@ -120,7 +134,9 @@ An error message should be displayed below any required field that is empty once ##### Invalid characters -Example of invalid characters in login fields +
+![Example of invalid characters in login fields.](./img/login-invalid-error.svg) +
An error message should be displayed when there is an invalid character in the username. Once the field has been modified, the error message should disappear. The following error messages are suggested for use: @@ -134,7 +150,9 @@ An error message should be displayed when there is an invalid character in the u ##### Caps lock is on -Example of empty login fields +
+![Example of an empty login field with a warning.](./img/login-caps-warning.svg) +
A warning message should be displayed when caps lock is on so users avoid making a mistake when typing a case-sensitive password. The warning message should be displayed in a popover when a user clicks into the input field. Once caps lock has been turned off, the warning message should disappear. The following warning message is suggested for use: @@ -146,13 +164,17 @@ A warning message should be displayed when caps lock is on so users avoid making #### Server-side errors -![Server-side-error](./img/server-side-error.png "server-side-error") +
+![Example of server-side errors.](./img/login-server-errors.svg) +
If there are validation errors when users submit a form, the entire page is reloaded. At the same time, the password field should be cleared to provide additional security. Error messages display as inline errors below each field and/or as inline alerts below the header/description. If there are multiple messages, each message appears on its own line; spacing between fields should be enough so that the form doesn’t jump to fit the messages. ##### Account doesn’t exist/password is wrong -Example of wrong password +
+![Example of an account error.](./img/login-no-account-error.svg) +
An error message should be displayed when the user types an incorrect username or password. The most secure approach is to provide a generic message that the username or password is incorrect without specifying which is incorrect. This way, the identity of a valid user is protected. If your application doesn’t require this level of security, additional messages can be used. Once the field has been modified, the error message should disappear. The following error messages are suggested for use. @@ -167,7 +189,9 @@ An error message should be displayed when the user types an incorrect username o ##### General warning messages -Example of warning messages +
+![Example of general warning messages.](./img/login-general-warnings.svg) +
Another form of error state message is a warning message. These messages are triggered by system level events or if a user is timed out of the application. Notifications should be displayed until the user attempts a new login. These messages should be displayed above the username field. The following are examples of general error messages. From 495eab90711898aa94d6621bbdd64939081e579e Mon Sep 17 00:00:00 2001 From: Bekah Stephens Date: Fri, 9 May 2025 10:29:20 -0400 Subject: [PATCH 2/2] Fixing spacing on a few images. --- .../img/login-authentication-sso.svg | 18 +++++------ .../login-page/img/login-client-errors.svg | 13 ++------ .../login-page/img/login-elements.svg | 30 +++++++++---------- 3 files changed, 27 insertions(+), 34 deletions(-) diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/login-page/img/login-authentication-sso.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/login-page/img/login-authentication-sso.svg index 887a3e820e..81f782fff3 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/login-page/img/login-authentication-sso.svg +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/login-page/img/login-authentication-sso.svg @@ -1,6 +1,6 @@ - + - + @@ -36,7 +36,7 @@ - + @@ -68,15 +68,15 @@ - + - - - + + + - + @@ -111,7 +111,7 @@ - + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/login-page/img/login-client-errors.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/login-page/img/login-client-errors.svg index b17ff57871..af7a40b017 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/login-page/img/login-client-errors.svg +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/login-page/img/login-client-errors.svg @@ -1,9 +1,8 @@ - - + @@ -53,8 +52,8 @@ - - + + @@ -69,10 +68,4 @@ - - - - - - diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/login-page/img/login-elements.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/login-page/img/login-elements.svg index 83099ec299..21a620bfbd 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/login-page/img/login-elements.svg +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/login-page/img/login-elements.svg @@ -1,6 +1,6 @@ - + - + @@ -36,7 +36,7 @@ - + @@ -52,7 +52,7 @@ - + @@ -73,15 +73,15 @@ - + - - - - + + + + - - + + @@ -138,10 +138,10 @@ - + - - + + @@ -162,7 +162,7 @@ - +