feat(web): rework users interface#1999
Conversation
With the authentication model now defined, stop enforcing the root password as a mandatory step that was hijacking the user workflow. This reverts the changes introduced in #1787 and #1821. Related to https://trello.com/c/7ewFvR0X (internal link)
Because it was actually not working and makes no sense.
For aligning items to "flex-start" to avoid inputs fields filling all the avaible width. Most probably this is a workaround and there is a better way to do it, but let's use it unitl discovering such an approach.
Now it uses simpler layout which is better to follow.
Useful for displaying a set of actions collapsed in a menu while keeping the main one visible.
Replace runtime checks with TypeScript discriminated unions to ensure that both `href` and `onClick` can't be missing, but both can still be provided. Also, explicitly declare the `children` prop as required in the type definition.
For better clarity and user experience.
While writing a test for FirstUserForm, it was found that the "Cancel" form button should be a link instead, as it navigates to another route rather than performing an action. After changing it to a link using the `component="a"` PatternFly prop, it was discovered that React Testing Library couldn't find the "Cancel" link using `getByRole`. According to https://www.w3.org/TR/html-aria/#el-area-no-href, a link without an `href` has a "generic" implicit role instead of the "link" role. This is why `getByRole` didn't work: Page.Cancel was rendering a link without the `href` attribute, but relying on the `onClick` event for navigation. This commit fixes the Page.Cancel by relying on core/Link component for producing a link instead of a button AND use `href` for navigation, making the link more semantically correct and ensuring it can be properly queried in tests. See testing-library/react-testing-library#1306
And refactor a bit the form itself by removing no longer needed code. Still pending to extract the username suggestions logic to a more generic, reusable "InputWithSuggestions" component.
To avoid it failing after change made in commit a3be42d
Which still pending a unit test but has been tested manually to check it properly mutates the root user information according with user input through the form.
Simplify the interface by reducing interactions to a single "Edit" action, leading users to a form where they can set either a password or an SSH key. This approach is more streamlined compared to using a table and popup dialogs, and aligns better with the first user section.
Which were used for setting the root user authentication methods via popup dialogs.
Just a slightly better description and a different button variant.
Added basic unit tests for handling password and SSH key. Included validation for empty password and SSH key fields. There are still a few improvements to be made, including adding more comprehensive tests to cover edge cases and updating the SSH key widget to support multiple file uploads.
Use "isWidthLimited" and "maxWidth" forms props instead of forcing the width via a CSS override.
Which also impacts the switch components. These can be revisited later if the new look&feel doesn't feel appropriate.
For both, the menu item and the page title.
Making users aware that resource is using a hashed password and allowing them to change it for a plain one instead. Wording still need improvements.
Since #then and #catch methods return promises, their order is important. This commit reverses them at FirstUserForm to prevent #then from executing when it shouldn't and keeping errors visible for users to fix before proceeding, rather than navigating away silently. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise#chained_promises
| )} | ||
| {changePassword && usingHashedPassword && ( | ||
| <Content isEditorial> | ||
| {_("Using a hashed password.")}{" "} |
There was a problem hiding this comment.
Would be nice if someone finds a better wording for this.
There was a problem hiding this comment.
I guess we could re-evaluate the wording of the whole section. But I don't feel inspired today so I suggest to merge as it is (specially since we need to build an image with all the functional changes ASAP) and think about it later.
* Additionally, group the root data in a single D-Bus property.
After backend updates, defined authentication passwords are now exposed, enabling more user-friendly forms. When editing previously created user definitions, password fields will be prefilled with their values instead of relying on switches to toggle password editing. This improvement also helps users to check their previously entered password, making the verification easier and avoiding the need to re-enter it in case of doubt.
After backend updates, defined root passwords are now exposed, enabling more user-friendly forms. When editing root authentication methods with a previously set plain password fields will be prefilled with their values instead of being empty. In addition to fixing a form issue when editing the root user with an already set plain password, this improvement also helps users to check previously entered root password insted of forcing to re-enter it in case of doubt. It also fixes the order of #then and #catch in the mutation promise, similar to the change made in the FirstUser form at 48858e7.
At IssuesDrawer component, to align it with the new name of the page.
To make it flow to the left, avoiding scrollbars appear and dissapear according to its visibility state.
|
First couple of quick notes after an ever quicker manual test:
|
Fixed at d695b6d
For completeness, IIRC is something that comes from back end side. |
This comment was marked as resolved.
This comment was marked as resolved.
Forgotten at d695b6d
This comment was marked as outdated.
This comment was marked as outdated.
This comment was marked as outdated.
This comment was marked as outdated.
ancorgs
left a comment
There was a problem hiding this comment.
LGTM. As mentioned, wording could be better at a couple of places but code-wise and functionality-wise this looks good. So let's merge.
## Problem The users API does not expose the passwords. Initially, we implemented like that for security reasons, but giving that the password is send over an authenticated HTTPS connection, we do not think it is relevant. After all, you are sending/receiving the password using the same channel. Moreover, the D-Bus API is kind of inconsistent. The "first user" is exposed as a single "object", while the root data are separate D-Bus properties. ## Solution - Make user/root passwords visible. - Drop the autologin property, as it is not wanted anymore. About the D-Bus API, this PR puts all the root information together using a `RootUser` property. Ideally, we should have a `SetRootUser` method too, but it will have to wait a bit. ## Testing - Added a new unit test - Tested manually
Pull Request Test Coverage Report for Build 13388202322Details
💛 - Coveralls |
Prepare for releasing Agama 12: * #1858 * #1887 * #1890 * #1892 * #1893 * #1894 * #1896 * #1898 * #1899 * #1900 * #1901 * #1906 * #1908 * #1909 * #1910 * #1911 * #1912 * #1914 * #1915 * #1917 * #1919 * #1920 * #1921 * #1922 * #1923 * #1924 * #1926 * #1927 * #1928 * #1929 * #1930 * #1931 * #1932 * #1933 * #1934 * #1935 * #1936 * #1937 * #1938 * #1939 * #1942 * #1943 * #1945 * #1948 * #1949 * #1952 * #1953 * #1954 * #1955 * #1957 * #1958 * #1959 * #1961 * #1963 * #1964 * #1967 * #1969 * #1970 * #1971 * #1972 * #1973 * #1974 * #1975 * #1976 * #1977 * #1979 * #1980 * #1981 * #1982 * #1984 * #1986 * #1987 * #1988 * #1990 * #1991 * #1992 * #1993 * #1995 * #1996 * #1997 * #1999 * #2000 * #2001 * #2002 * #2003 * #2004 * #2005 * #2006 * #2007 * #2008 * #2009 * #2010 * #2011 * #2012 * #2013 * #2014 * #2015 * #2016 * #2017 * #2019 * #2021 * #2022 * #2025 * #2027 * #2029 * #2030 * #2031 * #2033 * #2034 * #2035 * #2036 * #2037 * #2038 * #2039 * #2040 * #2045 * #2046 * #2050 * #2053 * #2054 * #2055 * #2056 * #2058 * #2060 * #2061 * #2062 * #2063 * #2064 * #2066 * #2067 * #2068 * #2069 * #2070 * #2071 * #2072 * #2073 * #2075 * #2076 * #2080 * #2082 * #2083
Apart from eliminating the step introduced in #1821 to force users to enter a password for root, this PR significantly revamps the interface of the Authentication page (formerly the Users page) to reduce its complexity and make interactions more intuitive.
Summarizing a lot, the key changes include improving the first user form and moving the root user authentication methods to a new form. This allows users to easily set or clear authentication methods without having to navigate complex actions. I.e., tables and most dynamic actions have been eliminated, making the page much easier to interact with and enabling users to quickly find the options they need.
However, there are still areas for improvement:
Note for reviewers
Warning
After commit c7c424c this PR needs changes done at #2005 (not merged at the time of writing).
Please jump into the branch and use the interface as part of the review process.
If interested in the details, check commits.
Related to https://trello.com/c/7ewFvR0X (internal link)