github.com/treeverse/lakefs@v1.24.1-0.20240520134607-95648127bfb0/webui/src/pages/auth/users/create-user-with-password.jsx (about)

     1  import Layout from "../../../lib/components/layout";
     2  import React, {useRef, useState} from "react";
     3  import {Navigate} from "react-router-dom";
     4  import Row from "react-bootstrap/Row";
     5  import Col from "react-bootstrap/Col";
     6  import Card from "react-bootstrap/Card";
     7  import Form from "react-bootstrap/Form";
     8  import {auth} from "../../../lib/api";
     9  import {ActionGroup, ActionsBar, AlertError} from "../../../lib/components/controls";
    10  import Button from "react-bootstrap/Button";
    11  import {useRouter} from "../../../lib/hooks/router";
    12  
    13  const TOKEN_PARAM_NAME = "token";
    14  const EMAIL_PARAM_NAME = "email";
    15  
    16  const CreateUserWithPasswordForm = ({token, email}) => {
    17      const router = useRouter();
    18  
    19      const onPasswordChange = () => {
    20          const v1 = newPwdField.current.value || '';
    21          const v2 = confirmPasswordField.current.value || '';
    22          if (v1.length > 0 && v2.length > 0) {
    23              const isPasswordMatch = v1 === v2;
    24              setFormValid(isPasswordMatch);
    25              setPwdConfirmValid(isPasswordMatch);
    26          } else {
    27              setPwdConfirmValid(true);
    28          }
    29      };
    30  
    31      const [formValid, setFormValid] = useState(false);
    32      const [pwdConfirmValid, setPwdConfirmValid] = useState(null);
    33      const [reqActivateUserError, setReqActivateUserError] = useState(null);
    34      const newPwdField = useRef(null);
    35      const confirmPasswordField = useRef(null);
    36  
    37      return (
    38          <Row>
    39              <Col md={{offset: 4, span: 4}}>
    40                  <div className="invited-welcome-msg">
    41                      <div className="title">
    42                          Welcome to the lake!
    43                      </div>
    44                      <div className="body">
    45                          You were invited to use lakeFS Cloud!
    46                      </div>
    47                  </div>
    48                  <Card className="create-invited-user-widget">
    49                      <Card.Header>Activate User</Card.Header>
    50                      <Card.Body>
    51                          <Form id='activate-user' onSubmit={async (e) => {
    52                              e.preventDefault();
    53                              try {
    54                                  await auth.updatePasswordByToken(token, e.target.password.value, email);
    55                                  setReqActivateUserError(null);
    56                                  router.push("/auth/login");
    57                              } catch (err) {
    58                                  setReqActivateUserError(err);
    59                              }
    60                          }}>
    61                              <Form.Group controlId="email">
    62                                  <Form.Control type="text" placeholder={email} disabled={true}/>
    63                              </Form.Group>
    64  
    65                              <Form.Group controlId="password">
    66                                  <Form.Control type="password" placeholder="Password" ref={newPwdField} onChange={onPasswordChange}/>
    67                              </Form.Group>
    68  
    69                              <Form.Group controlId="confirmPassword">
    70                                  <Form.Control type="password" placeholder="Confirm Password" ref={confirmPasswordField} onChange={onPasswordChange}/>
    71                                  {pwdConfirmValid === false &&
    72                                  <Form.Text className="text-danger">
    73                                      Your password and confirmation password do not match.
    74                                  </Form.Text>
    75                                  }
    76                              </Form.Group>
    77  
    78                              {(!!reqActivateUserError) && <AlertError error={reqActivateUserError}/>}
    79                          </Form>
    80                      </Card.Body>
    81                  </Card>
    82                  <ActionsBar>
    83                      <ActionGroup orientation="right">
    84                          <Button form='activate-user' type="submit" className="create-user" disabled={!formValid}>Create</Button>
    85                          <Button className="cancel-create-user" onClick={() => {router.push("/");}}>Cancel</Button>
    86                      </ActionGroup>
    87                  </ActionsBar>
    88              </Col>
    89          </Row>
    90      );
    91  }
    92  
    93  
    94  export const ActivateInvitedUserPage = () => {
    95  
    96      const queryString = window.location.search;
    97      const params = new URLSearchParams(queryString);
    98      const token = params.get(TOKEN_PARAM_NAME);
    99      const invitedUserEmail = params.get(EMAIL_PARAM_NAME);
   100  
   101      return (
   102          <Layout logged={false}>
   103              {
   104                  token ?
   105                      <CreateUserWithPasswordForm token={token} email={invitedUserEmail}/> :
   106                      <Navigate to="/auth/login"/>
   107              }
   108          </Layout>
   109      );
   110  };
   111  
   112  export default ActivateInvitedUserPage;