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//////////////////////////////////////////////////////////////9import { Box } from '@mui/material';10import React, { useState } from 'react';11import LoginImage from '../../img/login.svg?svgr';12import { FormNote, InputText } from '../components/FormComponents';13import BasePage, { SecurityButton } from './BasePage';14import { DefaultButton } from '../components/Buttons';15import gettext from 'sources/gettext';16import PropTypes from 'prop-types';17 18function EmailRegisterView({mfaView}) {19  const [inputEmail, setInputEmail] = useState(mfaView.email_address);20  const [inputCode, setInputCode] = useState('');21 22  if(mfaView.email_address_placeholder) {23    return <>24      <div style={{textAlign: 'center', fontSize: '1.2em'}} data-test="email-register-view">{mfaView.label}</div>25      <div>26        <input type='hidden' name={mfaView.auth_method} value='SETUP'/>27        <input type='hidden' name='validate' value='send_code'/>28      </div>29      <div>{mfaView.description}</div>30      <InputText value={inputEmail} type="email" name="send_to" placeholder={mfaView.email_address_placeholder}31        onChange={setInputEmail} required32      />33      <FormNote text={mfaView.note} />34    </>;35  } else if(mfaView.otp_placeholder) {36    return <>37      <div style={{textAlign: 'center', fontSize: '1.2em'}} data-test="email-register-view">{mfaView.label}</div>38      <div>39        <input type='hidden' name={mfaView.auth_method} value='SETUP'/>40        <input type='hidden' name='validate' value='verify_code'/>41      </div>42      <div>{mfaView.message}</div>43      <InputText value={inputCode} pattern="\d{6}" type="password" name="code" placeholder={mfaView.otp_placeholder}44        onChange={setInputCode} required autoComplete="one-time-code"45      />46    </>;47  }48}49 50EmailRegisterView.propTypes = {51  mfaView: PropTypes.object,52};53 54function AuthenticatorRegisterView({mfaView}) {55  const [inputValue, setInputValue] = useState(mfaView.email_address);56 57  return <>58    <div style={{textAlign: 'center', fontSize: '1.2em'}} data-test="auth-register-view">{mfaView.auth_title}</div>59    <div>60      <input type='hidden' name={mfaView.auth_method} value='SETUP'/>61      <input type='hidden' name='VALIDATE' value='validate'/>62    </div>63    <div style={{minHeight: 0, display: 'flex'}}>64      <img src={`data:image/jpeg;base64,${mfaView.image}`} style={{maxWidth: '100%', objectFit: 'contain'}} alt={mfaView.qrcode_alt_text} />65    </div>66    <div>{mfaView.auth_description}</div>67    <InputText value={inputValue} type="password" name="code" placeholder={mfaView.otp_placeholder}68      onChange={setInputValue}69    />70  </>;71}72 73AuthenticatorRegisterView.propTypes = {74  mfaView: PropTypes.object,75};76 77export default function MfaRegisterPage({actionUrl, mfaList, nextUrl, mfaView, ...props}) {78  return (79    <BasePage title={gettext('Authentication Registration')} pageImage={<LoginImage style={{height: '100%', width: '100%'}} />} {...props}>80      <form style={{display:'flex', gap:'15px', flexDirection:'column', minHeight: 0}} action={actionUrl} method="POST">81        {mfaView ? <>82          {mfaView.auth_method == 'email' && <EmailRegisterView mfaView={mfaView} />}83          {mfaView.auth_method == 'authenticator' && <AuthenticatorRegisterView mfaView={mfaView} />}84          <Box display="flex" gap="15px">85            <SecurityButton name="continue" value="Continue">{gettext('Continue')}</SecurityButton>86            <DefaultButton type="submit" name="cancel" value="Cancel" style={{width: '100%'}}>{gettext('Cancel')}</DefaultButton>87          </Box>88        </>:<>89          {mfaList?.map((m)=>{90            return (91              <Box display="flex" width="100%" key={m.label}>92                <div style={{93                  width: '10%', mask: `url(${m.icon})`, maskRepeat: 'no-repeat',94                  WebkitMask: `url(${m.icon})`, WebkitMaskRepeat: 'no-repeat',95                  backgroundColor: '#fff'96                }}>97                </div>98                <div style={{width: '70%'}}>{m.label}</div>99                <div style={{width: '20%'}}>100                  <SecurityButton name={m.id} value={m.registered ? 'DELETE' : 'SETUP'}>{m.registered ? gettext('Delete') : gettext('Setup')}</SecurityButton>101                </div>102              </Box>103            );104          })}105          {nextUrl != 'internal' && <SecurityButton value="Continue">{gettext('Continue')}</SecurityButton>}106        </>}107        <div><input type="hidden" name="next" value={nextUrl}/></div>108      </form>109    </BasePage>110  );111}112 113MfaRegisterPage.propTypes = {114  actionUrl: PropTypes.string,115  mfaList: PropTypes.arrayOf(PropTypes.object),116  nextUrl: PropTypes.string,117  mfaView: PropTypes.object118};119