github.com/pelicanplatform/pelican@v1.0.5/web_ui/frontend/app/(login)/components/PasswordInput.tsx (about)

     1  /***************************************************************
     2   *
     3   * Copyright (C) 2023, Pelican Project, Morgridge Institute for Research
     4   *
     5   * Licensed under the Apache License, Version 2.0 (the "License"); you
     6   * may not use this file except in compliance with the License.  You may
     7   * obtain a copy of the License at
     8   *
     9   *    http://www.apache.org/licenses/LICENSE-2.0
    10   *
    11   * Unless required by applicable law or agreed to in writing, software
    12   * distributed under the License is distributed on an "AS IS" BASIS,
    13   * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    14   * See the License for the specific language governing permissions and
    15   * limitations under the License.
    16   *
    17   ***************************************************************/
    18  
    19  import * as React from 'react';
    20  import Box from '@mui/material/Box';
    21  import IconButton from '@mui/material/IconButton';
    22  import Input from '@mui/material/Input';
    23  import FilledInput from '@mui/material/FilledInput';
    24  import OutlinedInput from '@mui/material/OutlinedInput';
    25  import InputLabel from '@mui/material/InputLabel';
    26  import InputAdornment from '@mui/material/InputAdornment';
    27  import FormHelperText from '@mui/material/FormHelperText';
    28  import FormControl from '@mui/material/FormControl';
    29  import TextField from '@mui/material/TextField';
    30  import Visibility from '@mui/icons-material/Visibility';
    31  import VisibilityOff from '@mui/icons-material/VisibilityOff';
    32  
    33  interface PasswordInputProps {
    34      FormControlProps?: React.ComponentProps<typeof FormControl>
    35      TextFieldProps?: React.ComponentProps<typeof TextField>
    36      onChange?: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>
    37  }
    38  
    39  export default function PasswordInput({FormControlProps, TextFieldProps}: PasswordInputProps) {
    40      const [showPassword, setShowPassword] = React.useState(false);
    41  
    42      const handleClickShowPassword = () => setShowPassword((show) => !show);
    43  
    44      const handleMouseDownPassword = (event: React.MouseEvent<HTMLButtonElement>) => {
    45          event.preventDefault();
    46      };
    47  
    48      return (
    49          <FormControl sx={{ mt: 1, width: '50ch' }} variant="outlined" {...FormControlProps}>
    50              <TextField
    51                  label="Password"
    52                  id="outlined-start-adornment"
    53                  sx={{ m: 1, width: '50ch' }}
    54                  type={showPassword ? 'text' : 'password'}
    55                  {...TextFieldProps}
    56                  InputProps = {{
    57                      endAdornment:
    58                          <InputAdornment position="end">
    59                              <IconButton
    60                                  aria-label="toggle password visibility"
    61                                  onClick={handleClickShowPassword}
    62                                  onMouseDown={handleMouseDownPassword}
    63                                  edge="end"
    64                                  >
    65                                  {showPassword ? <VisibilityOff /> : <Visibility />}
    66                              </IconButton>
    67                          </InputAdornment>,
    68                      ...TextFieldProps?.InputProps
    69                  }}
    70              />
    71          </FormControl>
    72      )
    73  }