Remove Bootstrap and jQuery from authentication pages and rewrite them in ReactJS. #6295

web/regression/javascript/SecurityPages/ForgotPasswordPage.spec.js

@@ -0,0 +1,53 @@
+/////////////////////////////////////////////////////////////
+//
+// pgAdmin 4 - PostgreSQL Tools
+//
+// Copyright (C) 2013 - 2023, The pgAdmin Development Team
+// This software is released under the PostgreSQL Licence
+//
+//////////////////////////////////////////////////////////////
+
+import jasmineEnzyme from 'jasmine-enzyme';
+import React from 'react';
+import '../helper/enzyme.helper';
+import { createMount } from '@material-ui/core/test-utils';
+import Theme from '../../../pgadmin/static/js/Theme';
+import ForgotPasswordPage from '../../../pgadmin/static/js/SecurityPages/ForgotPasswordPage';
+
+describe('ForgotPasswordPage', ()=>{
+  let mount;
+
+  /* Use createMount so that material ui components gets the required context */
+  /* https://material-ui.com/guides/testing/#api */
+  beforeAll(()=>{
+    mount = createMount();
+    // spyOn(Notify, 'alert');
+  });
+
+  afterAll(() => {
+    mount.cleanUp();
+  });
+
+  beforeEach(()=>{
+    jasmineEnzyme();
+  });
+
+  let ctrlMount = (props)=>{
+    return mount(<Theme>
+      <ForgotPasswordPage {...props}/>
+    </Theme>);
+  };
+
+  it('basic', (done)=>{
+    const ctrl = ctrlMount({
+      actionUrl: '/forgot/url',
+      csrfToken: 'some-token',
+    });
+    setTimeout(()=>{
+      expect(ctrl.find('form')).toHaveProp('action', '/forgot/url');
+      expect(ctrl.find('input[name="email"]')).toExist();
+      ctrl.unmount();
+      done();
+    }, 100);
+  });
+});

web/regression/javascript/SecurityPages/LoginPage.spec.js

@@ -0,0 +1,100 @@
+/////////////////////////////////////////////////////////////
+//
+// pgAdmin 4 - PostgreSQL Tools
+//
+// Copyright (C) 2013 - 2023, The pgAdmin Development Team
+// This software is released under the PostgreSQL Licence
+//
+//////////////////////////////////////////////////////////////
+
+import jasmineEnzyme from 'jasmine-enzyme';
+import React from 'react';
+import '../helper/enzyme.helper';
+import { createMount } from '@material-ui/core/test-utils';
+import Theme from '../../../pgadmin/static/js/Theme';
+import LoginPage from '../../../pgadmin/static/js/SecurityPages/LoginPage';
+
+describe('LoginPage', ()=>{
+  let mount;
+
+  /* Use createMount so that material ui components gets the required context */
+  /* https://material-ui.com/guides/testing/#api */
+  beforeAll(()=>{
+    mount = createMount();
+    // spyOn(Notify, 'alert');
+  });
+
+  afterAll(() => {
+    mount.cleanUp();
+  });
+
+  beforeEach(()=>{
+    jasmineEnzyme();
+  });
+
+  let ctrlMount = (props)=>{
+    return mount(<Theme>
+      <LoginPage {...props}/>
+    </Theme>);
+  };
+
+  it('internal', (done)=>{
+    const ctrl = ctrlMount({
+      userLanguage: 'en',
+      langOptions: [{
+        label: 'English',
+        value: 'en',
+      }],
+      forgotPassUrl: '/forgot/url',
+      csrfToken: 'some-token',
+      loginUrl: '/login/url',
+      authSources: ['internal'],
+      authSourcesEnum: {
+        OAUTH2: 'oauth2',
+        KERBEROS: 'kerberos'
+      },
+      oauth2Config: [],
+      loginBanner: 'login banner'
+    });
+    setTimeout(()=>{
+      expect(ctrl.find('form')).toHaveProp('action', '/login/url');
+      expect(ctrl.find('input[name="email"]')).toExist();
+      expect(ctrl.find('input[name="password"]')).toExist();
+      ctrl.unmount();
+      done();
+    }, 100);
+  });
+
+  it('oauth2', (done)=>{
+    const ctrl = ctrlMount({
+      userLanguage: 'en',
+      langOptions: [{
+        label: 'English',
+        value: 'en',
+      }],
+      forgotPassUrl: '/forgot/url',
+      csrfToken: 'some-token',
+      loginUrl: '/login/url',
+      authSources: ['internal', 'oauth2'],
+      authSourcesEnum: {
+        OAUTH2: 'oauth2',
+        KERBEROS: 'kerberos'
+      },
+      oauth2Config: [{
+        OAUTH2_NAME: 'github',
+        OAUTH2_BUTTON_COLOR: '#fff',
+        OAUTH2_ICON: 'fa-github',
+        OAUTH2_DISPLAY_NAME: 'Github'
+      }],
+      loginBanner: ''
+    });
+    setTimeout(()=>{
+      expect(ctrl.find('form')).toHaveProp('action', '/login/url');
+      expect(ctrl.find('input[name="email"]')).toExist();
+      expect(ctrl.find('input[name="password"]')).toExist();
+      expect(ctrl.find('button[name="oauth2_button"]')).toHaveProp('value', 'github');
+      ctrl.unmount();
+      done();
+    }, 100);
+  });
+});

web/regression/javascript/SecurityPages/MfaRegisterPage.spec.js

@@ -0,0 +1,196 @@
+/////////////////////////////////////////////////////////////
+//
+// pgAdmin 4 - PostgreSQL Tools
+//
+// Copyright (C) 2013 - 2023, The pgAdmin Development Team
+// This software is released under the PostgreSQL Licence
+//
+//////////////////////////////////////////////////////////////
+
+import jasmineEnzyme from 'jasmine-enzyme';
+import React from 'react';
+import '../helper/enzyme.helper';
+import { createMount } from '@material-ui/core/test-utils';
+import Theme from '../../../pgadmin/static/js/Theme';
+import MfaRegisterPage from '../../../pgadmin/static/js/SecurityPages/MfaRegisterPage';
+
+describe('MfaRegisterPage', ()=>{
+  let mount;
+
+  /* Use createMount so that material ui components gets the required context */
+  /* https://material-ui.com/guides/testing/#api */
+  beforeAll(()=>{
+    mount = createMount();
+    // spyOn(Notify, 'alert');
+  });
+
+  afterAll(() => {
+    mount.cleanUp();
+  });
+
+  beforeEach(()=>{
+    jasmineEnzyme();
+  });
+
+  let ctrlMount = (props)=>{
+    return mount(<Theme>
+      <MfaRegisterPage {...props}/>
+    </Theme>);
+  };
+
+  it('email registered', (done)=>{
+    const ctrl = ctrlMount({
+      actionUrl: '/mfa/register',
+      mfaList: [{
+        label: 'Email',
+        icon: '',
+        registered: true,
+      },{
+        label: 'Authenticator',
+        icon: '',
+        registered: false,
+      }],
+      nextUrl: '',
+      mfaView: null,
+    });
+    setTimeout(()=>{
+      expect(ctrl.find('form')).toHaveProp('action', '/mfa/register');
+      expect(ctrl.find('EmailRegisterView')).not.toExist();
+      expect(ctrl.find('AuthenticatorRegisterView')).not.toExist();
+      expect(ctrl.find('SecurityButton[value="DELETE"]').length).toBe(1);
+      expect(ctrl.find('SecurityButton[value="SETUP"]').length).toBe(1);
+      ctrl.unmount();
+      done();
+    }, 100);
+  });
+
+  it('both registered', (done)=>{
+    const ctrl = ctrlMount({
+      actionUrl: '/mfa/register',
+      mfaList: [{
+        label: 'Email',
+        icon: '',
+        registered: true,
+      },{
+        label: 'Authenticator',
+        icon: '',
+        registered: true,
+      }],
+      nextUrl: '',
+      mfaView: null,
+    });
+    setTimeout(()=>{
+      expect(ctrl.find('form')).toHaveProp('action', '/mfa/register');
+      expect(ctrl.find('EmailRegisterView')).not.toExist();
+      expect(ctrl.find('AuthenticatorRegisterView')).not.toExist();
+      expect(ctrl.find('SecurityButton[value="DELETE"]').length).toBe(2);
+      expect(ctrl.find('SecurityButton[value="SETUP"]').length).toBe(0);
+      ctrl.unmount();
+      done();
+    }, 100);
+  });
+
+  it('email view register', (done)=>{
+    const ctrl = ctrlMount({
+      actionUrl: '/mfa/register',
+      mfaList: [{
+        label: 'Email',
+        icon: '',
+        registered: false,
+      },{
+        label: 'Authenticator',
+        icon: '',
+        registered: false,
+      }],
+      nextUrl: '',
+      mfaView: {
+        label: 'email_authentication_label',
+        auth_method: 'email',
+        description:'Enter the email address to send a code',
+        email_address_placeholder:'Email address',
+        email_address:'email@test.com',
+        note_label:'Note',
+        note:'This email address will only be used for two factor'
+      },
+    });
+    setTimeout(()=>{
+      expect(ctrl.find('form')).toHaveProp('action', '/mfa/register');
+      expect(ctrl.find('EmailRegisterView')).toExist();
+      expect(ctrl.find('input[name="send_to"]')).toExist();
+      expect(ctrl.find('AuthenticatorRegisterView')).not.toExist();
+      expect(ctrl.find('SecurityButton[value="DELETE"]').length).toBe(0);
+      expect(ctrl.find('SecurityButton[value="SETUP"]').length).toBe(0);
+      ctrl.unmount();
+      done();
+    }, 100);
+  });
+
+  it('email view otp code', (done)=>{
+    const ctrl = ctrlMount({
+      actionUrl: '/mfa/register',
+      mfaList: [{
+        label: 'Email',
+        icon: '',
+        registered: false,
+      },{
+        label: 'Authenticator',
+        icon: '',
+        registered: false,
+      }],
+      nextUrl: '',
+      mfaView: {
+        label: 'email_authentication_label',
+        auth_method: 'email',
+        description:'Enter the email address to send a code',
+        otp_placeholder:'Enter OTP',
+        email_address:'email@test.com',
+        note_label:'Note',
+        note:'This email address will only be used for two factor'
+      },
+    });
+    setTimeout(()=>{
+      expect(ctrl.find('form')).toHaveProp('action', '/mfa/register');
+      expect(ctrl.find('EmailRegisterView')).toExist();
+      expect(ctrl.find('input[name="code"]')).toExist();
+      expect(ctrl.find('AuthenticatorRegisterView')).not.toExist();
+      expect(ctrl.find('SecurityButton[value="DELETE"]').length).toBe(0);
+      expect(ctrl.find('SecurityButton[value="SETUP"]').length).toBe(0);
+      ctrl.unmount();
+      done();
+    }, 100);
+  });
+
+  it('authenticator view register', (done)=>{
+    const ctrl = ctrlMount({
+      actionUrl: '/mfa/register',
+      mfaList: [{
+        label: 'Email',
+        icon: '',
+        registered: false,
+      },{
+        label: 'Authenticator',
+        icon: '',
+        registered: false,
+      }],
+      nextUrl: '',
+      mfaView: {
+        auth_title:'_TOTP_AUTHENTICATOR',
+        auth_method: 'authenticator',
+        image: 'image',
+        qrcode_alt_text: 'TOTP Authenticator QRCode',
+        auth_description: 'Scan the QR code and the enter the code',
+        otp_placeholder: 'Enter code'
+      },
+    });
+    setTimeout(()=>{
+      expect(ctrl.find('form')).toHaveProp('action', '/mfa/register');
+      expect(ctrl.find('EmailRegisterView')).not.toExist();
+      expect(ctrl.find('AuthenticatorRegisterView')).toExist();
+      expect(ctrl.find('input[name="code"]')).toExist();
+      expect(ctrl.find('SecurityButton[value="DELETE"]').length).toBe(0);
+      expect(ctrl.find('SecurityButton[value="SETUP"]').length).toBe(0);
+      ctrl.unmount();
+      done();
+    }, 100);
+  });
+});

web/regression/javascript/SecurityPages/MfaValidatePage.spec.js

@@ -0,0 +1,128 @@
+/////////////////////////////////////////////////////////////
+//
+// pgAdmin 4 - PostgreSQL Tools
+//
+// Copyright (C) 2013 - 2023, The pgAdmin Development Team
+// This software is released under the PostgreSQL Licence
+//
+//////////////////////////////////////////////////////////////
+
+import jasmineEnzyme from 'jasmine-enzyme';
+import React from 'react';
+import '../helper/enzyme.helper';
+import { createMount } from '@material-ui/core/test-utils';
+import Theme from '../../../pgadmin/static/js/Theme';
+import MfaValidatePage from '../../../pgadmin/static/js/SecurityPages/MfaValidatePage';
+
+describe('MfaValidatePage', ()=>{
+  let mount;
+
+  /* Use createMount so that material ui components gets the required context */
+  /* https://material-ui.com/guides/testing/#api */
+  beforeAll(()=>{
+    mount = createMount();
+    // spyOn(Notify, 'alert');
+  });
+
+  afterAll(() => {
+    mount.cleanUp();
+  });
+
+  beforeEach(()=>{
+    jasmineEnzyme();
+  });
+
+  let ctrlMount = (props)=>{
+    return mount(<Theme>
+      <MfaValidatePage {...props}/>
+    </Theme>);
+  };
+
+  it('email selected', (done)=>{
+    const ctrl = ctrlMount({
+      actionUrl: '/mfa/validate',
+      views: {
+        'email': {
+          id: 'email',
+          label: 'Email',
+          icon: '',
+          selected: true,
+          view: {
+            description: 'description',
+            otp_placeholder: 'otp_placeholder',
+            button_label: 'button_label',
+            button_label_sending: 'button_label_sending'
+          }
+        },
+        'authenticator': {
+          id: 'authenticator',
+          label: 'Authenticator',
+          icon: '',
+          selected: false,
+          view: {
+            auth_description: 'auth_description',
+            otp_placeholder: 'otp_placeholder',
+          }
+        }
+      },
+      logoutUrl: '/logout/url',
+      sendEmailUrl: '/send/email',
+      csrfHeader: 'csrfHeader',
+      csrfToken: 'csrfToken',
+    });
+    setTimeout(()=>{
+      ctrl.update();
+      expect(ctrl.find('form')).toHaveProp('action', '/mfa/validate');
+      expect(ctrl.find('EmailValidateView')).toExist();
+      expect(ctrl.find('AuthenticatorValidateView')).not.toExist();
+      expect(ctrl.find('button[name="send_code"]')).toExist();
+      expect(ctrl.find('input[name="mfa_method"]').instance().value).toBe('email');
+      ctrl.unmount();
+      done();
+    }, 100);
+  });
+
+  it('authenticator selected', (done)=>{
+    const ctrl = ctrlMount({
+      actionUrl: '/mfa/validate',
+      views: {
+        'email': {
+          id: 'email',
+          label: 'Email',
+          icon: '',
+          selected: false,
+          view: {
+            description: 'description',
+            otp_placeholder: 'otp_placeholder',
+            button_label: 'button_label',
+            button_label_sending: 'button_label_sending'
+          }
+        },
+        'authenticator': {
+          id: 'authenticator',
+          label: 'Authenticator',
+          icon: '',
+          selected: true,
+          view: {
+            auth_description: 'auth_description',
+            otp_placeholder: 'otp_placeholder',
+          }
+        }
+      },
+      logoutUrl: '/logout/url',
+      sendEmailUrl: '/send/email',
+      csrfHeader: 'csrfHeader',
+      csrfToken: 'csrfToken',
+    });
+    setTimeout(()=>{
+      ctrl.update();
+      expect(ctrl.find('form')).toHaveProp('action', '/mfa/validate');
+      expect(ctrl.find('EmailValidateView')).not.toExist();
+      expect(ctrl.find('AuthenticatorValidateView')).toExist();
+      expect(ctrl.find('input[name="code"]')).toExist();
+      expect(ctrl.find('input[name="mfa_method"]').instance().value).toBe('authenticator');
+      ctrl.unmount();
+      done();
+    }, 100);
+  });
+});

web/regression/javascript/SecurityPages/PasswordResetPage.spec.js

@@ -0,0 +1,54 @@
+/////////////////////////////////////////////////////////////
+//
+// pgAdmin 4 - PostgreSQL Tools
+//
+// Copyright (C) 2013 - 2023, The pgAdmin Development Team
+// This software is released under the PostgreSQL Licence
+//
+//////////////////////////////////////////////////////////////
+
+import jasmineEnzyme from 'jasmine-enzyme';
+import React from 'react';
+import '../helper/enzyme.helper';
+import { createMount } from '@material-ui/core/test-utils';
+import Theme from '../../../pgadmin/static/js/Theme';
+import PasswordResetPage from '../../../pgadmin/static/js/SecurityPages/PasswordResetPage';
+
+describe('PasswordResetPage', ()=>{
+  let mount;
+
+  /* Use createMount so that material ui components gets the required context */
+  /* https://material-ui.com/guides/testing/#api */
+  beforeAll(()=>{
+    mount = createMount();
+    // spyOn(Notify, 'alert');
+  });
+
+  afterAll(() => {
+    mount.cleanUp();
+  });
+
+  beforeEach(()=>{
+    jasmineEnzyme();
+  });
+
+  let ctrlMount = (props)=>{
+    return mount(<Theme>
+      <PasswordResetPage {...props}/>
+    </Theme>);
+  };
+
+  it('basic', (done)=>{
+    const ctrl = ctrlMount({
+      actionUrl: '/reset/url',
+      csrfToken: 'some-token',
+    });
+    setTimeout(()=>{
+      expect(ctrl.find('form')).toHaveProp('action', '/reset/url');
+      expect(ctrl.find('input[name="password"]')).toExist();
+      expect(ctrl.find('input[name="password_confirm"]')).toExist();
+      ctrl.unmount();
+      done();
+    }, 100);
+  });
+});