-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Added AdminCredentials component & fixed TextInput component clear state
Implemented the AdminCredentials component and copied its ErrorResponse component styling to the Login component, which appropriately displays an "Invalid Credentials" error message outside of the relevant TextInput components group. Also, added a SetNativeValue utility function to dispatch "change" events on TextInput components when their values are cleared by updates to their state. For performance reasons React does not dispatch onChange or onInput events when a value of an HTMLElement is updated by state (RE: facebook/react#10135).
- Loading branch information
Showing
25 changed files
with
442 additions
and
165 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,142 @@ | ||
| /** | ||
| * @description AdminCredentials component | ||
| * | ||
| * @requires Collapsible | ||
| * @requires constants | ||
| * @requires ErrorResponse | ||
| * @requires InputPassword | ||
| * @requires InputText | ||
| * @requires prop-types | ||
| * @requires react | ||
| * @requires useInputText | ||
| * @requires utilities | ||
| * @public | ||
| * @module | ||
| * | ||
| */ | ||
| import { concatClassNames } from "../support/utilities"; | ||
| import * as C from "../support/constants"; | ||
| import Collapsible from "./Collapsible"; | ||
| import ErrorResponse from "./ErrorResponse"; | ||
| import InputPassword from "./InputPassword"; | ||
| import InputText from "./InputText"; | ||
| import PropTypes from "prop-types"; | ||
| import React, { useEffect, useRef } from "react"; | ||
|
|
||
| /** | ||
| * @description The AdminCredentials component contains UI elements that are required to enter admin credentials. | ||
| * | ||
| * @param {object} props - Immutable properties populated by the parent component. | ||
| * @returns {object} JSX markup. | ||
| * @public | ||
| * @function | ||
| * | ||
| */ | ||
| const AdminCredentials = ({ | ||
|
|
||
| bindAdminUsername, | ||
| bindAdminPassword, | ||
| isLoading, | ||
| errorMessage | ||
| }) => { | ||
|
|
||
| /** | ||
| * Refs | ||
| * | ||
| */ | ||
| const showErrorMessage = useRef(true); | ||
|
|
||
| /** | ||
| * @description Reset the "showErrorMessage" reference when the "errorMessage" prop is updated. | ||
| * | ||
| * @private | ||
| * @function | ||
| * | ||
| */ | ||
| useEffect(() => { | ||
|
|
||
| showErrorMessage.current = true; | ||
| }, [errorMessage]); | ||
|
|
||
| /** | ||
| * @description Callback for a dispatched "change" event for either the "adminUsername" or "adminPassword" HTMLInputElement. | ||
| * Intercepts the target's "onChange" binding from its UseInputText hook. | ||
| * | ||
| * @param {object} target - The object that dispatched the event. | ||
| * @param {object} event - The event object. | ||
| * | ||
| * @private | ||
| * @function | ||
| * | ||
| */ | ||
| const adminCredentialsChangeHandler = (target, event) => { | ||
|
|
||
| if (showErrorMessage.current) { | ||
|
|
||
| showErrorMessage.current = false; | ||
| } | ||
|
|
||
| target.onChange(event); | ||
| }; | ||
|
|
||
| /** | ||
| * JSX markup | ||
| * | ||
| */ | ||
| return ( | ||
|
|
||
| <Collapsible | ||
| title={`${C.Label.ADMIN_CREDENTIALS} ${C.Label.OPTIONAL}`} | ||
| headerStyle={C.Style.COLLAPSIBLE_HEADER_SECTION} | ||
| > | ||
| <div className={C.Style.ADMIN_CREDENTIALS}> | ||
| <div className={ | ||
| concatClassNames( | ||
| C.Style.ADMIN_CREDENTIALS_ERROR, | ||
| (errorMessage && showErrorMessage.current && C.Style.ADMIN_CREDENTIALS_ERROR_SHOW) | ||
| ) | ||
| }> | ||
| {errorMessage && | ||
| <ErrorResponse message={errorMessage} /> | ||
| } | ||
| </div> | ||
|
|
||
| <div className={C.Style.ADMIN_CREDENTIALS_USERNAME}> | ||
| <InputText | ||
| name={C.ID.NAME_ADMIN_USERNAME} | ||
| disabled={isLoading} | ||
| {...bindAdminUsername} | ||
| onChange={adminCredentialsChangeHandler.bind(null, bindAdminUsername)} | ||
| /> | ||
| </div> | ||
|
|
||
| <div className={C.Style.ADMIN_CREDENTIALS_PASSWORD}> | ||
| <InputPassword | ||
| name={C.ID.NAME_ADMIN_PASSWORD} | ||
| disabled={isLoading} | ||
| {...bindAdminPassword} | ||
| onChange={adminCredentialsChangeHandler.bind(null, bindAdminPassword)} | ||
| /> | ||
| </div> | ||
| </div> | ||
| </Collapsible> | ||
| ); | ||
| }; | ||
|
|
||
| /** | ||
| * Prop Types | ||
| * | ||
| */ | ||
| AdminCredentials.propTypes = { | ||
|
|
||
| bindAdminUsername: PropTypes.object.isRequired, | ||
| bindAdminPassword: PropTypes.object.isRequired, | ||
| isLoading: PropTypes.bool.isRequired, | ||
| errorMessage: PropTypes.string, | ||
| }; | ||
|
|
||
| /** | ||
| * Export module | ||
| * | ||
| */ | ||
| export default AdminCredentials; |
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
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
Oops, something went wrong.