Add a 'Back to login' link to the password pages (#9301)

docs/en_US/release_notes_9_16.rst

@@ -20,6 +20,8 @@ Bundled PostgreSQL Utilities
 New features
 ************
 
+  | `Issue #9301 <https://github.com/pgadmin-org/pgadmin4/issues/9301>`_ -  Added a "Back to login" link to the Forgot Password and Reset Password pages.
+
 Housekeeping
 ************
 

web/pgadmin/static/js/SecurityPages/ForgotPasswordPage.jsx

@@ -1,11 +1,12 @@
+import { Box } from '@mui/material';
 import { useState } from 'react';
 import ForgotPasswordImage from '../../img/forgot_password.svg?svgr';
 import { InputText } from '../components/FormComponents';
 import BasePage, { SecurityButton } from './BasePage';
 import gettext from 'sources/gettext';
 import PropTypes from 'prop-types';
 
-export default function ForgotPasswordPage({csrfToken, actionUrl, ...props}) {
+export default function ForgotPasswordPage({csrfToken, actionUrl, loginUrl, ...props}) {
   const [form, setForm] = useState(({email: ''}));
 
   const onTextChange = (n, val)=>{
@@ -20,6 +21,9 @@ export default function ForgotPasswordPage({csrfToken, actionUrl, ...props}) {
         <InputText name="email" value={form.email} onChange={(v)=>onTextChange('email', v)} placeholder={gettext('Email Address')} autoFocus
           controlProps={{autoComplete: null}} />
         <SecurityButton name="internal_button" value="Recover Password" disabled={!form.email}>{gettext('Recover Password')}</SecurityButton>
+        {loginUrl && <Box textAlign="center">
+          <a style={{color: 'inherit'}} href={loginUrl}>{gettext('Back to login')}</a>
+        </Box>}
       </form>
     </BasePage>
   );
@@ -28,4 +32,5 @@ export default function ForgotPasswordPage({csrfToken, actionUrl, ...props}) {
 ForgotPasswordPage.propTypes = {
   csrfToken: PropTypes.string,
   actionUrl: PropTypes.string,
+  loginUrl: PropTypes.string,
 };

web/pgadmin/static/js/SecurityPages/PasswordResetPage.jsx

@@ -1,11 +1,12 @@
+import { Box } from '@mui/material';
 import { useState } from 'react';
 import ForgotPasswordImage from '../../img/forgot_password.svg?svgr';
 import { InputText } from '../components/FormComponents';
 import BasePage, { SecurityButton } from './BasePage';
 import gettext from 'sources/gettext';
 import PropTypes from 'prop-types';
 
-export default function PasswordResetPage({csrfToken, actionUrl, ...props}) {
+export default function PasswordResetPage({csrfToken, actionUrl, loginUrl, ...props}) {
   const [form, setForm] = useState(({password: '', password_confirm: ''}));
 
   const onTextChange = (n, val)=>{
@@ -21,12 +22,16 @@ export default function PasswordResetPage({csrfToken, actionUrl, ...props}) {
         <InputText name="password_confirm" value={form.password_confirm} onChange={(v)=>onTextChange('password_confirm', v)} type="password" placeholder={gettext('Retype Password')}
           controlProps={{autoComplete: 'new-password'}} />
         <SecurityButton value="Reset Password">{gettext('Reset Password')}</SecurityButton>
+        {loginUrl && <Box textAlign="center">
+          <a style={{color: 'inherit'}} href={loginUrl}>{gettext('Back to login')}</a>
+        </Box>}
       </form>
     </BasePage>
   );
 }
 
 PasswordResetPage.propTypes = {
   csrfToken: PropTypes.string,
-  actionUrl: PropTypes.string
+  actionUrl: PropTypes.string,
+  loginUrl: PropTypes.string
 };

web/pgadmin/templates/security/forgot_password.html

@@ -1,6 +1,7 @@
 {% set page_name = 'forgot_password' %}
 {% set page_props = {
     'actionUrl': url_for('browser.forgot_password'),
+    'loginUrl': url_for('authenticate.login'),
     'csrfToken': csrf_token(),
 } %}
 {% extends "security/render_page.html" %}

web/pgadmin/templates/security/reset_password.html

@@ -1,6 +1,7 @@
 {% set page_name = 'reset_password' %}
 {% set page_props = {
     'actionUrl': url_for('browser.reset_password', token=reset_password_token),
+    'loginUrl': url_for('authenticate.login'),
     'csrfToken': csrf_token(),
 } %}
 {% extends "security/render_page.html" %}