Skip to content

Commit

Permalink
fix: addressed revieew comments
Browse files Browse the repository at this point in the history
Description: Address review comments
van-1917
  • Loading branch information
Ahtesham Quraish committed Apr 25, 2024
1 parent 8bd1614 commit d57bc16
Show file tree
Hide file tree
Showing 6 changed files with 25 additions and 19 deletions.
2 changes: 1 addition & 1 deletion src/base-container/index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ const BaseContainer = ({
size="lg"
variant="default"
title="authn-component"
className="bg-light-200 modal-layout"
className="bg-light-200 authn-component__modal"
hasCloseButton
>
<ModalDialog.Body className="modal-body-container overflow-hidden">
Expand Down
2 changes: 1 addition & 1 deletion src/base-container/index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,6 @@
border: 2px solid $light-500;
}

.modal-layout .pgn__modal-body {
.authn-component__modal .pgn__modal-body {
overflow: auto !important;
}
14 changes: 10 additions & 4 deletions src/forms/fields/password-field/index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -49,19 +49,25 @@ const PasswordField = (props) => {
/>
);

const placement = 'bottom';
const placement = 'bottom-start';
const tooltip = (
<Tooltip id={`password-requirement-${placement}`}>
<span id="letter-check" className="d-flex align-items-center">
{LETTER_REGEX.test(props.value) ? <Icon className="text-success mr-1" src={Check} /> : <Icon className="mr-1 text-light-700" src={Remove} />}
{LETTER_REGEX.test(props.value)
? <Icon className="text-success mr-1" src={Check} />
: <Icon className="mr-1 text-light-700" src={Remove} />}
{formatMessage(messages.oneLetter)}
</span>
<span id="number-check" className="d-flex align-items-center">
{NUMBER_REGEX.test(props.value) ? <Icon className="text-success mr-1" src={Check} /> : <Icon className="mr-1 text-light-700" src={Remove} />}
{NUMBER_REGEX.test(props.value)
? <Icon className="text-success mr-1" src={Check} />
: <Icon className="mr-1 text-light-700" src={Remove} />}
{formatMessage(messages.oneNumber)}
</span>
<span id="characters-check" className="d-flex align-items-center">
{props.value.length >= 8 ? <Icon className="text-success mr-1" src={Check} /> : <Icon className="mr-1 text-light-700" src={Remove} />}
{props.value.length >= 8
? <Icon className="text-success mr-1" src={Check} />
: <Icon className="mr-1 text-light-700" src={Remove} />}
{formatMessage(messages.eightCharcters)}
</span>
</Tooltip>
Expand Down
20 changes: 10 additions & 10 deletions src/forms/registration-popup/index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -50,13 +50,13 @@ const RegistrationForm = () => {
dispatch(registerUser(payload));
};

const nextStepHandle = () => {
const handleNextStep = () => {
if (currentStep < NUM_OF_STEPS) {
setCurrentStep(currentStep + 1);
}
};

const backStepHandle = () => {
const handleBackStep = () => {
if (currentStep > STEP1) {
setCurrentStep(currentStep - 1);
}
Expand Down Expand Up @@ -97,23 +97,23 @@ const RegistrationForm = () => {
<Container size="lg" className="registration-form overflow-auto">
{Header}

{currentStep === NUM_OF_STEPS && (
<div className="back-button-holder">
{currentStep > STEP1 && (
<div className="back-button-container">
<IconButton
key="primary"
src={ArrowBack}
iconAs={Icon}
alt="Back"
onClick={backStepHandle}
onClick={handleBackStep}
variant="primary"
size="inline"
className="mr-2"
/>
{formatMessage(messages.registrarionFormBackButtonLabel)}
{formatMessage(messages.registrationFormBackButton)}
</div>
)}

{currentStep !== NUM_OF_STEPS && (
{currentStep === STEP1 && (
<>
<SocialAuthButtons isLoginPage={false} />
<div className="text-center mt-3">{formatMessage(messages.registrationFormHeading2)}</div>
Expand Down Expand Up @@ -144,17 +144,17 @@ const RegistrationForm = () => {
handleChange={handleOnChange}
/>
</Stepper.Step>
{currentStep !== NUM_OF_STEPS && (
{currentStep < NUM_OF_STEPS && (
<Button
id="register-continue"
name="register-continue"
variant="primary"
type="button"
className="align-self-end"
onClick={nextStepHandle}
onClick={handleNextStep}
onMouseDown={(e) => e.preventDefault()}
>
{formatMessage(messages.registrationFormCreateAccountButtonCont)}
{formatMessage(messages.registrationFormContinueButton)}
</Button>
)}
{currentStep === NUM_OF_STEPS && (
Expand Down
2 changes: 1 addition & 1 deletion src/forms/registration-popup/index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
color: $danger-500;
}

.registration-form .back-button-holder {
.registration-form .back-button-container {
padding: 0.5rem 1.25rem .5rem 1.25rem;
}

4 changes: 2 additions & 2 deletions src/forms/registration-popup/messages.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const messages = defineMessages({
defaultMessage: 'or',
description: 'Heading that appears between social auth and basic registration form',
},
registrationFormCreateAccountButtonCont: {
registrationFormContinueButton: {
id: 'registration.form.continue.button',
defaultMessage: 'Continue',
description: 'Text for submit button for continue registration form',
Expand Down Expand Up @@ -41,7 +41,7 @@ const messages = defineMessages({
defaultMessage: 'Sign in with your credentials',
description: 'Text for signing in with credentials',
},
registrarionFormBackButtonLabel: {
registrationFormBackButton: {
id: 'registration.form.back.btn.label',
defaultMessage: 'Back',
description: 'registration back button text',
Expand Down

0 comments on commit d57bc16

Please sign in to comment.