codekingpro/portable-devtools

1import React, { useState } from 'react';2import ForgotPasswordImage from '../../img/forgot_password.svg?svgr';3import { InputText } from '../components/FormComponents';4import BasePage, { SecurityButton } from './BasePage';5import gettext from 'sources/gettext';6import PropTypes from 'prop-types';7 8export default function PasswordResetPage({csrfToken, actionUrl, ...props}) {9  const [form, setForm] = useState(({password: '', password_confirm: ''}));10 11  const onTextChange = (n, val)=>{12    setForm((prev)=>({...prev, [n]: val}));13  };14 15  return (16    <BasePage title={gettext('Reset Password')} pageImage={<ForgotPasswordImage style={{height: '100%', width: '100%'}} />} {...props} >17      <form style={{display:'flex', gap:'15px', flexDirection:'column'}} action={actionUrl} method="POST">18        <input name="csrf_token" defaultValue={csrfToken} hidden/>19        <InputText name="password" value={form.password} onChange={(v)=>onTextChange('password', v)} type="password" placeholder={gettext('Password')} autoFocus20          controlProps={{autoComplete: 'new-password'}} />21        <InputText name="password_confirm" value={form.password_confirm} onChange={(v)=>onTextChange('password_confirm', v)} type="password" placeholder={gettext('Retype Password')}22          controlProps={{autoComplete: 'new-password'}} />23        <SecurityButton value="Reset Password">{gettext('Reset Password')}</SecurityButton>24      </form>25    </BasePage>26  );27}28 29PasswordResetPage.propTypes = {30  csrfToken: PropTypes.string,31  actionUrl: PropTypes.string32};33