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")
+      }
     }
   ]
 };