-
-
Notifications
You must be signed in to change notification settings - Fork 822
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: Add User and Admin toggle on login pages (#1371)
* feat: Add User and Admin toggle on login pages * Refactoring and Design adjustments * fix conflicting files
- Loading branch information
Showing
14 changed files
with
203 additions
and
306 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
34 changes: 34 additions & 0 deletions
34
src/components/LoginPortalToggle/LoginPortalToggle.module.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| .navLinkClass { | ||
| display: inline-block; | ||
| padding: 0.375rem 0.75rem; | ||
| font-size: 1rem; | ||
| line-height: 1.4; | ||
| text-align: center; | ||
| vertical-align: middle; | ||
| cursor: pointer; | ||
| color: var(--bs-gray-900); | ||
| border-radius: 0.3rem; | ||
| width: 100%; | ||
| box-sizing: border-box; | ||
| border: 1px solid var(--bs-gray-700); | ||
| font-weight: 500; | ||
| transition: all 0.25s ease; | ||
| } | ||
|
|
||
| .navLinkClass:hover { | ||
| color: var(--bs-white); | ||
| background-color: var(--bs-gray); | ||
| border-color: var(--bs-gray); | ||
| } | ||
|
|
||
| .activeLink { | ||
| color: var(--bs-white); | ||
| border: 1px solid var(--bs-primary); | ||
| background-color: var(--bs-primary); | ||
| } | ||
|
|
||
| .activeLink:hover { | ||
| color: var(--bs-white); | ||
| background-color: var(--bs-primary); | ||
| border: 1px solid var(--bs-primary); | ||
| } |
32 changes: 32 additions & 0 deletions
32
src/components/LoginPortalToggle/LoginPortalToggle.test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| import React from 'react'; | ||
| import { act, render } from '@testing-library/react'; | ||
| import { Provider } from 'react-redux'; | ||
| import { BrowserRouter } from 'react-router-dom'; | ||
| import { I18nextProvider } from 'react-i18next'; | ||
| import LoginPortalToggle from './LoginPortalToggle'; | ||
| import { store } from 'state/store'; | ||
| import i18nForTest from 'utils/i18nForTest'; | ||
|
|
||
| async function wait(ms = 100): Promise<void> { | ||
| await act(() => { | ||
| return new Promise((resolve) => { | ||
| setTimeout(resolve, ms); | ||
| }); | ||
| }); | ||
| } | ||
|
|
||
| describe('Testing LoginPortalToggle component', () => { | ||
| test('Component Should be rendered properly', async () => { | ||
| render( | ||
| <BrowserRouter> | ||
| <Provider store={store}> | ||
| <I18nextProvider i18n={i18nForTest}> | ||
| <LoginPortalToggle /> | ||
| </I18nextProvider> | ||
| </Provider> | ||
| </BrowserRouter> | ||
| ); | ||
|
|
||
| await wait(); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| import React from 'react'; | ||
| import { useTranslation } from 'react-i18next'; | ||
| import styles from './LoginPortalToggle.module.css'; | ||
| import Col from 'react-bootstrap/Col'; | ||
| import Row from 'react-bootstrap/Row'; | ||
| import { NavLink } from 'react-router-dom'; | ||
|
|
||
| function loginPortalToggle(): JSX.Element { | ||
| const { t } = useTranslation('translation', { keyPrefix: 'loginPage' }); | ||
|
|
||
| return ( | ||
| <Row className="mb-4"> | ||
| <Col> | ||
| <NavLink | ||
| className={styles.navLinkClass} | ||
| activeClassName={styles.activeLink} | ||
| exact | ||
| to="/" | ||
| > | ||
| {t('admin')} | ||
| </NavLink> | ||
| </Col> | ||
| <Col> | ||
| <NavLink | ||
| className={styles.navLinkClass} | ||
| activeClassName={styles.activeLink} | ||
| exact | ||
| to="/user" | ||
| > | ||
| {t('user')} | ||
| </NavLink> | ||
| </Col> | ||
| </Row> | ||
| ); | ||
| } | ||
|
|
||
| export default loginPortalToggle; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -166,7 +166,7 @@ describe('Testing Login Page Screen', () => { | |
|
|
||
| await wait(); | ||
|
|
||
| expect(screen.getByText(/Admin Portal/i)).toBeInTheDocument(); | ||
| expect(screen.getByText(/Admin/i)).toBeInTheDocument(); | ||
| expect(window.location).toBeAt('/orglist'); | ||
| }); | ||
|
|
||
|
|
@@ -175,8 +175,8 @@ describe('Testing Login Page Screen', () => { | |
| firstName: 'John', | ||
| lastName: 'Doe', | ||
| email: '[email protected]', | ||
| password: 'John@123', | ||
| confirmPassword: 'John@123', | ||
| password: 'johndoe', | ||
| confirmPassword: 'johndoe', | ||
| }; | ||
|
|
||
| render( | ||
|
|
@@ -215,50 +215,6 @@ describe('Testing Login Page Screen', () => { | |
| userEvent.click(screen.getByTestId('registrationBtn')); | ||
| }); | ||
|
|
||
| test('Testing registration functionality when all inputs are invalid', async () => { | ||
| const formData = { | ||
| firstName: '1234', | ||
| lastName: '8890', | ||
| email: '[email protected]', | ||
| password: 'john@123', | ||
| confirmPassword: 'john@123', | ||
| }; | ||
|
|
||
| render( | ||
| <MockedProvider addTypename={false} link={link}> | ||
| <BrowserRouter> | ||
| <Provider store={store}> | ||
| <I18nextProvider i18n={i18nForTest}> | ||
| <LoginPage /> | ||
| </I18nextProvider> | ||
| </Provider> | ||
| </BrowserRouter> | ||
| </MockedProvider> | ||
| ); | ||
|
|
||
| await wait(); | ||
|
|
||
| userEvent.click(screen.getByTestId(/goToRegisterPortion/i)); | ||
|
|
||
| await wait(); | ||
|
|
||
| userEvent.type( | ||
| screen.getByPlaceholderText(/First Name/i), | ||
| formData.firstName | ||
| ); | ||
| userEvent.type( | ||
| screen.getByPlaceholderText(/Last name/i), | ||
| formData.lastName | ||
| ); | ||
| userEvent.type(screen.getByTestId(/signInEmail/i), formData.email); | ||
| userEvent.type(screen.getByPlaceholderText('Password'), formData.password); | ||
| userEvent.type( | ||
| screen.getByPlaceholderText('Confirm Password'), | ||
| formData.confirmPassword | ||
| ); | ||
| userEvent.click(screen.getByTestId('registrationBtn')); | ||
| }); | ||
|
|
||
| test('Testing registration functionality, when password and confirm password is not same', async () => { | ||
| const formData = { | ||
| firstName: 'John', | ||
|
|
||
Oops, something went wrong.