codekingpro/portable-devtools

1/////////////////////////////////////////////////////////////2//3// pgAdmin 4 - PostgreSQL Tools4//5// Copyright (C) 2013 - 2024, The pgAdmin Development Team6// This software is released under the PostgreSQL Licence7//8//////////////////////////////////////////////////////////////9 10import React, { useState, useRef, useEffect } from 'react';11import PropTypes from 'prop-types';12import gettext from 'sources/gettext';13import url_for from 'sources/url_for';14 15import { Box } from '@mui/material';16import CloseIcon from '@mui/icons-material/CloseRounded';17import DeleteForeverIcon from '@mui/icons-material/DeleteForever';18import CheckRoundedIcon from '@mui/icons-material/CheckRounded';19import HelpIcon from '@mui/icons-material/Help';20 21import { DefaultButton, PrimaryButton, PgIconButton } from '../components/Buttons';22import { useModalStyles } from '../helpers/ModalProvider';23import { FormFooterMessage, FormNote, InputText, MESSAGE_TYPE } from '../components/FormComponents';24 25export default function MasterPasswordContent({ closeModal, onResetPassowrd, onOK, onCancel, setHeight, isPWDPresent, data, keyringName}) {26  const classes = useModalStyles();27  const containerRef = useRef();28  const firstEleRef = useRef();29  const okBtnRef = useRef();30  const isKeyring = keyringName.length > 0;31  const [formData, setFormData] = useState({32    password: ''33  });34 35  const onTextChange = (e, id) => {36    let val = e;37    if (e?.target) {38      val = e.target.value;39    }40    setFormData((prev) => ({ ...prev, [id]: val }));41  };42 43  const onKeyDown = (e) => {44    // If enter key is pressed then click on OK button45    if (e.key === 'Enter') {46      okBtnRef.current?.click();47    }48  };49 50  useEffect(() => {51    setTimeout(() => {52      firstEleRef.current?.focus();53    }, 350);54  }, [firstEleRef.current]);55 56  useEffect(() => {57    setHeight?.(containerRef.current?.offsetHeight);58  }, [containerRef.current]);59 60 61  return (62    <Box display="flex" flexDirection="column" className={classes.container} ref={containerRef}>63      {isKeyring ?64        <Box flexGrow="1" p={2}>65          <Box>66            <span style={{ fontWeight: 'bold' }}>67              {gettext('Please enter your master password.')}68            </span>69            <br />70            <span style={{ fontWeight: 'bold' }}>71              <FormNote text={gettext(`pgAdmin now stores any saved passwords in ${keyringName}. Enter the master password for your existing pgAdmin saved passwords and they will be migrated to the operating system store when you click OK.`)}></FormNote>72            </span>73          </Box>74          <Box marginTop='12px'>75            <InputText inputRef={firstEleRef} type="password" value={formData['password']} maxLength={null}76              onChange={(e) => onTextChange(e, 'password')} onKeyDown={(e) => onKeyDown(e)}/>77          </Box>78          <FormFooterMessage type={MESSAGE_TYPE.ERROR} message={data.errmsg} closable={false} style={{79            position: 'unset', padding: '12px 0px 0px'80          }} />81        </Box> :82        <Box flexGrow="1" p={2}>83          <Box>84            <span style={{ fontWeight: 'bold' }}>85              {isPWDPresent ? gettext('Please enter your master password.') : gettext('Please set a master password for pgAdmin.')}86            </span>87            <br />88            <span style={{ fontWeight: 'bold' }}>89              {isPWDPresent ? gettext('This is required to unlock saved passwords and reconnect to the database server(s).') : gettext('This will be used to secure and later unlock saved passwords and other credentials.')}90            </span>91          </Box>92          <Box marginTop='12px'>93            <InputText inputRef={firstEleRef} type="password" value={formData['password']} maxLength={null}94              onChange={(e) => onTextChange(e, 'password')} onKeyDown={(e) => onKeyDown(e)} controlProps={{autoComplete: 'new-password'}}/>95          </Box>96          <FormFooterMessage type={MESSAGE_TYPE.ERROR} message={data.errmsg} closable={false} style={{97            position: 'unset', padding: '12px 0px 0px'98          }} />99        </Box>100      }101      <Box className={classes.footer}>102        <Box style={{ marginRight: 'auto' }}>103          <PgIconButton data-test="help-masterpassword" title={gettext('Help')} style={{ padding: '0.3rem', paddingLeft: '0.7rem' }} startIcon={<HelpIcon />} onClick={() => {104            let _url = url_for('help.static', {105              'filename': 'master_password.html',106            });107            window.open(_url, 'pgadmin_help');108          }} >109          </PgIconButton>110          {isPWDPresent &&111            <DefaultButton data-test="reset-masterpassword" style={{ marginLeft: '0.5rem' }} startIcon={<DeleteForeverIcon />}112              onClick={() => {onResetPassowrd?.(isKeyring);}} >113              {gettext('Reset Master Password')}114            </DefaultButton>115          }116        </Box>117        {118          !isKeyring && <DefaultButton data-test="close" startIcon={<CloseIcon />} onClick={() => {119            onCancel?.();120            closeModal();121          }} >{gettext('Cancel')}</DefaultButton>122        }123        <PrimaryButton ref={okBtnRef} data-test="save" className={classes.margin} startIcon={<CheckRoundedIcon />}124          disabled={formData.password.length == 0}125          onClick={() => {126            let postFormData = new FormData();127            postFormData.append('password', formData.password);128            postFormData.append('submit_password', true);129            onOK?.(postFormData);130            closeModal();131          }}132        >133          {gettext('OK')}134        </PrimaryButton>135      </Box>136    </Box>);137}138 139MasterPasswordContent.propTypes = {140  closeModal: PropTypes.func,141  onResetPassowrd: PropTypes.func,142  onOK: PropTypes.func,143  onCancel: PropTypes.func,144  setHeight: PropTypes.func,145  isPWDPresent: PropTypes.bool,146  data: PropTypes.object,147  keyringName: PropTypes.string,148};149