Adapted first user form to be shown in a page instead of a popup (#1306)

## Description Adapted FirstUserForm to be shown in a Page instead of a Popup ## Screenshots ![Screenshot from 2024-06-11 12-21-07](https://github.com/openSUSE/agama/assets/7056681/dc402681-e698-40c3-a938-492cc3d7b1f8) ![Screenshot from 2024-06-11 12-21-11](https://github.com/openSUSE/agama/assets/7056681/78fca4fa-8ab8-4a40-b3df-e40e2041e350) ![Screenshot from 2024-06-11 12-21-24](https://github.com/openSUSE/agama/assets/7056681/6fb569dd-47f7-449c-b80a-5f66de4eebe5) ![Screenshot from 2024-06-11 12-21-27](https://github.com/openSUSE/agama/assets/7056681/b7704704-25cb-4a25-b400-9c07cce271ed) ![Screenshot from 2024-06-11 12-21-33](https://github.com/openSUSE/agama/assets/7056681/99fb712b-a20d-4377-a095-0abdf973ec40) ![Screenshot from 2024-06-11 12-21-57](https://github.com/openSUSE/agama/assets/7056681/6c60f228-9dd3-49ac-a4a9-d69ea7875189)
agama-project · Jun 11, 2024 · 82edb2d · 82edb2d
2 parents c5bf27d + 2f11032
commit 82edb2d
Show file tree

Hide file tree

Showing 5 changed files with 138 additions and 74 deletions.
diff --git a/web/src/components/users/FirstUser.jsx b/web/src/components/users/FirstUser.jsx
@@ -20,7 +20,7 @@
  */
 
 import React, { useState, useEffect, useRef } from "react";
-import { Link } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 
 import { _ } from "~/i18n";
 import { useCancellablePromise } from "~/utils";
@@ -40,7 +40,7 @@ import {
 
 import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 
-import { RowActions, PasswordAndConfirmationInput, Popup, If } from '~/components/core';
+import { RowActions, PasswordAndConfirmationInput, Popup, If, ButtonLink } from '~/components/core';
 
 import { suggestUsernames } from '~/components/users/utils';
 
@@ -53,7 +53,7 @@ const UserNotDefined = ({ actionCb }) => {
  {_("Please, be aware that a user must be defined before installing the system to be able to log into it.")}
  </strong>
  </div>
- <Link to="first">{_("Define a user now")}</Link>
+ <ButtonLink to="first" isPrimary>{_("Define a user now")}</ButtonLink>
  </div>
  );
 };
@@ -205,11 +205,12 @@ export default function FirstUser() {
 
  const isUserDefined = user?.userName && user?.userName !== "";
  const showErrors = () => ((errors || []).length > 0);
+ const navigate = useNavigate();
 
  const actions = [
  {
  title: _("Edit"),
- onClick: (e) => openForm(e, EDIT_MODE)
+ onClick: () => navigate('/users/first/edit')
  },
  {
  title: _("Discard"),

diff --git a/web/src/components/users/FirstUser.test.jsx b/web/src/components/users/FirstUser.test.jsx
@@ -44,9 +44,9 @@ let onUsersChangeFn = jest.fn();
 const openUserForm = async () => {
  const { user } = installerRender(<FirstUser />);
  await screen.findByText("No user defined yet.");
- const button = await screen.findByRole("button", { name: "Define a user now" });
+ const button = await screen.findByText("Define a user now");
  await user.click(button);
- const dialog = await screen.findByRole("dialog");
+ const dialog = await screen.findByLabelText("Username");
 
  return { user, dialog };
 };
@@ -68,10 +68,10 @@ beforeEach(() => {
 it.skip("allows defining a new user", async () => {
  const { user } = installerRender(<FirstUser />);
  await screen.findByText("No user defined yet.");
- const button = await screen.findByRole("button", { name: "Define a user now" });
+ const button = await screen.findByText("Define a user now");
  await user.click(button);
 
- const dialog = await screen.findByRole("dialog");
+ const dialog = await screen.findByRole("form");
 
  const fullNameInput = within(dialog).getByLabelText("Full name");
  await user.type(fullNameInput, "Jane Doe");
@@ -103,7 +103,7 @@ it.skip("allows defining a new user", async () => {
 
 it.skip("doest not allow to confirm the settings if the user name and the password are not provided", async () => {
  const { user } = installerRender(<FirstUser />);
- const button = await screen.findByRole("button", { name: "Define a user now" });
+ const button = await screen.findByText("Define a user now");
  await user.click(button);
 
  const dialog = await screen.findByRole("dialog");

diff --git a/web/src/components/users/FirstUserForm.jsx b/web/src/components/users/FirstUserForm.jsx
@@ -33,7 +33,12 @@ import {
  Menu,
  MenuContent,
  MenuList,
- MenuItem
+ MenuItem,
+ Card,
+ Grid,
+ GridItem,
+ Stack,
+ Switch
 } from "@patternfly/react-core";
 
 import { Loading } from "~/components/layout";
@@ -79,17 +84,20 @@ export default function FirstUserForm() {
  const [insideDropDown, setInsideDropDown] = useState(false);
  const [focusedIndex, setFocusedIndex] = useState(-1);
  const [suggestions, setSuggestions] = useState([]);
+ const [changePassword, setChangePassword] = useState(true);
  const usernameInputRef = useRef();
  const navigate = useNavigate();
  const passwordRef = useRef();
 
  useEffect(() => {
  cancellablePromise(client.users.getUser()).then(userValues => {
+ const editing = userValues.userName !== "";
  setState({
  load: true,
  user: userValues,
- isEditing: userValues.username !== ""
+ isEditing: editing
  });
+ setChangePassword(!editing);
  });
  }, [client.users, cancellablePromise]);
 
@@ -123,8 +131,9 @@ export default function FirstUserForm() {
  return user;
  }, user);
 
- // Preserve current password value if the user was not editing it.
- if (state.isEditing && user.password === "") delete user.password;
+ if (!changePassword) {
+ delete user.password;
+ }
  delete user.passwordConfirmation;
  user.autologin = !!user.autologin;
 
@@ -191,68 +200,94 @@ export default function FirstUserForm() {
 
  return (
  <>
+ <Page.Header>
+ <h2>{state.isEditing ? _("Edit user") : _("Create user")}</h2>
+ </Page.Header>
+
  <Page.MainContent>
  <Form id="firstUserForm" onSubmit={onSubmit}>
  {errors.length > 0 &&
  <Alert variant="warning" isInline title={_("Something went wrong")}>
  {errors.map((e, i) => <p key={`error_${i}`}>{e}</p>)}
  </Alert>}
+ <Grid hasGutter>
+ <GridItem sm={12} xl={6} rowSpan={2}>
+ <Page.CardSection isFullHeight>
+ <Stack hasGutter>
+ <FormGroup fieldId="userFullName" label={_("Full name")}>
+ <TextInput
+ id="userFullName"
+ name="fullName"
+ aria-label={_("User full name")}
+ defaultValue={state.user.fullName}
+ label={_("User full name")}
+ onBlur={(e) => setSuggestions(suggestUsernames(e.target.value))}
+ />
+ </FormGroup>
 
- <FormGroup fieldId="userFullName" label={_("Full name")}>
- <TextInput
- id="userFullName"
- name="fullName"
- aria-label={_("User full name")}
- defaultValue={state.user.fullName}
- label={_("User full name")}
- onBlur={(e) => setSuggestions(suggestUsernames(e.target.value))}
- />
- </FormGroup>
-
- <FormGroup
- className="first-username-wrapper"
- fieldId="userName"
- label={_("Username")}
- isRequired
- >
- <TextInput
- id="userName"
- name="userName"
- aria-label={_("Username")}
- ref={usernameInputRef}
- defaultValue={state.user.userName}
- label={_("Username")}
- isRequired
- onFocus={renderSuggestions}
- onKeyDown={handleKeyDown}
- onBlur={() => !insideDropDown && setShowSuggestions(false)}
- />
- <If
- condition={showSuggestions}
- then={
- <UsernameSuggestions
- entries={suggestions}
- onSelect={onSuggestionSelected}
- setInsideDropDown={setInsideDropDown}
- focusedIndex={focusedIndex}
+ <FormGroup
+ className="first-username-wrapper"
+ fieldId="userName"
+ label={_("Username")}
+ isRequired
+ >
+ <TextInput
+ id="userName"
+ name="userName"
+ aria-label={_("Username")}
+ ref={usernameInputRef}
+ defaultValue={state.user.userName}
+ label={_("Username")}
+ isRequired
+ onFocus={renderSuggestions}
+ onKeyDown={handleKeyDown}
+ onBlur={() => !insideDropDown && setShowSuggestions(false)}
+ />
+ <If
+ condition={showSuggestions}
+ then={
+ <UsernameSuggestions
+ entries={suggestions}
+ onSelect={onSuggestionSelected}
+ setInsideDropDown={setInsideDropDown}
+ focusedIndex={focusedIndex}
+ />
+ }
+ />
+ </FormGroup>
+ </Stack>
+ </Page.CardSection>
+ </GridItem>
+ <GridItem sm={12} xl={6}>
+ <Page.CardSection>
+ <Stack hasGutter>
+ {state.isEditing &&
+ <Switch
+ label={_("Change password")}
+ isChecked={changePassword}
+ onChange={() => setChangePassword(!changePassword)}
+ />}
+ <PasswordAndConfirmationInput
+ inputRef={passwordRef}
+ isDisabled={!changePassword}
+ showErrors={false}
+ />
+ </Stack>
+ </Page.CardSection>
+ </GridItem>
+ <GridItem sm={12} xl={6}>
+ <Page.CardSection>
+ <Checkbox
+ aria-label={_("user autologin")}
+ id="autologin"
+ name="autologin"
+ // TRANSLATORS: check box label
+ label={_("Auto-login")}
+ defaultChecked={state.user.autologin}
  />
- }
- />
- </FormGroup>
-
- <PasswordAndConfirmationInput
- inputRef={passwordRef}
- showErrors={false}
- />
-
- <Checkbox
- aria-label={_("user autologin")}
- id="autologin"
- name="autologin"
- // TRANSLATORS: check box label
- label={_("Auto-login")}
- defaultChecked={state.user.autologin}
- />
+ </Page.CardSection>
+ </GridItem>
+ </Grid>
  </Form>
  </Page.MainContent>
 

diff --git a/web/src/components/users/UsersPage.jsx b/web/src/components/users/UsersPage.jsx
@@ -22,18 +22,39 @@
 import React from "react";
 
 import { _ } from "~/i18n";
-import { Section } from "~/components/core";
+import { CardField, Page } from "~/components/core";
 import { FirstUser, RootAuthMethods } from "~/components/users";
+import { Card, CardBody, Grid, GridItem, Stack } from "@patternfly/react-core";
 
 export default function UsersPage() {
  return (
  <>
- <Section title={_("User")} icon="person">
- <FirstUser />
- </Section>
- <Section title={_("Root authentication")} icon="badge">
- <RootAuthMethods />
- </Section>
+ <Page.Header>
+ <h2>{_("Users")}</h2>
+ </Page.Header>
+
+ <Page.MainContent>
+ <Grid hasGutter>
+ <GridItem sm={12} xl={6}>
+ <CardField label={_("First user")}>
+ <CardBody>
+ <Stack hasGutter>
+ <FirstUser />
+ </Stack>
+ </CardBody>
+ </CardField>
+ </GridItem>
+ <GridItem sm={12} xl={6}>
+ <CardField label={_("Root authentication")}>
+ <CardBody>
+ <Stack hasGutter>
+ <RootAuthMethods />
+ </Stack>
+ </CardBody>
+ </CardField>
+ </GridItem>
+ </Grid>
+ </Page.MainContent>
  </>
  );
 }
diff --git a/web/src/components/users/routes.js b/web/src/components/users/routes.js
@@ -40,6 +40,13 @@ const routes = {
  handle: {
  name: _("Create or edit the first user")
  }
+ },
+ {
+ path: "first/edit",
+ element: <FirstUserForm />,
+ handle: {
+ name: _("Edit first user")
+ }
  }
  ]
 };