github.com/treeverse/lakefs@v1.24.1-0.20240520134607-95648127bfb0/webui/src/pages/setup/userConfiguration.tsx (about)

     1  import React, {ChangeEvent, FC, FormEvent, useCallback, useState} from "react";
     2  import Button from "react-bootstrap/Button";
     3  import Spinner from 'react-bootstrap/Spinner';
     4  import Card from "react-bootstrap/Card";
     5  import Col from "react-bootstrap/Col";
     6  import Form from "react-bootstrap/Form";
     7  import Row from "react-bootstrap/Row";
     8  import {AlertError} from "../../lib/components/controls";
     9  
    10  interface UserConfigurationProps {
    11      onSubmit: (email: string, admin: string, checks: boolean) => Promise<void>;
    12      setupError: Error;
    13      disabled: boolean;
    14      requireAdmin: boolean;
    15      requireCommPrefs: boolean;
    16  }
    17  
    18  export const UserConfiguration: FC<UserConfigurationProps> = ({
    19      onSubmit,
    20      setupError,
    21      disabled,
    22      requireAdmin,
    23      requireCommPrefs,
    24  }) => {
    25      const [userEmail, setUserEmail] = useState<string>("");
    26      const [adminUser, setAdminUser] = useState<string>("admin");
    27      const [checks, setChecks] = useState<boolean>(false);
    28  
    29      const submitHandler = useCallback((e: FormEvent) => {
    30          onSubmit(adminUser, userEmail, checks);
    31          e.preventDefault();
    32      }, [onSubmit, adminUser, userEmail, checks]);
    33  
    34      const handleEmailChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {
    35          setUserEmail(e.target.value);
    36      }, [setUserEmail]);
    37  
    38      const handleAdminUserChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {
    39          setAdminUser(e.target.value);
    40      }, [setAdminUser]);
    41  
    42      const handleChecksChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {
    43          setChecks(e.target.checked);
    44      }, [setChecks]);
    45  
    46      return (
    47          <Row>
    48              <Col md={{offset: 2, span: 8}}>
    49                  <Card className="setup-widget">
    50                      <Card.Header>User Configuration</Card.Header>
    51                      <Card.Body>
    52                          {requireAdmin &&
    53                          <Card.Text>
    54                              Please specify the name of the first admin account, or leave it as the default &apos;admin&apos;.
    55                          </Card.Text>}
    56  
    57                          <Form onSubmit={submitHandler}>
    58                              {requireAdmin &&
    59                              <Form.Group controlId="user-name" className="mb-3">
    60                                  <Form.Control type="text" value={adminUser}  onChange={handleAdminUserChange} placeholder="Admin Username" autoFocus/>
    61                              </Form.Group>}
    62  
    63                              {requireCommPrefs &&
    64                              <Form.Group controlId="user-email" className="mt-4">
    65                                  <Form.Label>Email <span className="required-field-label">*</span></Form.Label>
    66                                  <Form.Control type="email" placeholder="name@company.com" value={userEmail}  onChange={handleEmailChange} />
    67                              </Form.Group>}
    68  
    69                              {requireCommPrefs &&
    70                              <Form.Group controlId="security-check" className="mt-4 mb-3">
    71                                  <Form.Check type="checkbox"  checked={checks} onChange={handleChecksChange} label="I'd like to receive security, product and feature updates" />
    72                              </Form.Group>}
    73  
    74                              {!!setupError && <AlertError error={setupError}/>}
    75                              <Button variant="primary" disabled={disabled} type="submit">
    76                                  {disabled ? <Spinner as="span"
    77                                                       animation="border"
    78                                                       size="sm"
    79                                                       role="status"
    80                                                       aria-hidden="true"
    81                                                       /> : 'Setup'}
    82                              </Button>
    83                          </Form>
    84                      </Card.Body>
    85                  </Card>
    86              </Col>
    87          </Row>
    88      );
    89  };