-
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.
feat: desgin registration form pop up
- Loading branch information
1 parent
52cee8b
commit 0f6b354
Showing
7 changed files
with
192 additions
and
11 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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
import { defineMessages } from '@edx/frontend-platform/i18n'; | ||
|
||
const messages = defineMessages({ | ||
footerText: { | ||
id: 'footer.text', | ||
defaultMessage: 'By creating an account, you agree to the Terms of Service and Honor Code and you acknowledge that edX and each Member process your personal data in accordance with the Privacy Policy.', | ||
description: 'Text that appears on registration form stating honor code and privacy policy', | ||
}, | ||
}); | ||
|
||
export default messages; |
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 |
---|---|---|
@@ -0,0 +1,87 @@ | ||
import React from 'react'; | ||
|
||
import { useIntl } from '@edx/frontend-platform/i18n'; | ||
import { | ||
Button, Container, Form, Hyperlink, Icon, | ||
} from '@openedx/paragon'; | ||
import { CheckCircleOutline, RemoveRedEye } from '@openedx/paragon/icons'; | ||
|
||
import messages from './messages'; | ||
import SocialAuthButtons from '../../common-ui/SocialAuthButtons'; | ||
import './index.scss'; | ||
|
||
const RegistrationForm = () => { | ||
const { formatMessage } = useIntl(); | ||
return ( | ||
<Container size="lg" className="registration-form overflow-auto"> | ||
<h2 className="font-italic text-center display-1 mb-4">{formatMessage(messages.registrationFormHeading1)}</h2> | ||
<hr className="separator mb-3 mt-3" /> | ||
<div className="d-flex mb-4"> | ||
<span className="pt-1"> | ||
<Icon src={CheckCircleOutline} className="mr-2" /> | ||
</span> | ||
<div className="text-gray-800"> | ||
<span className="font-weight-bold mr-2">Lorem ipsum dolor sit amet</span> | ||
<br /> | ||
<span className="small">Lorem ipsum dolor sit amet consectetur. Morbi etiam mauris enim est morbi aliquet ipsum iaculis</span> | ||
</div> | ||
</div> | ||
<SocialAuthButtons isLoginPage={false} /> | ||
<div className="text-center mt-4.5 mb-4.5"> | ||
{formatMessage(messages.registrationFormHeading2)} | ||
</div> | ||
<Form> | ||
<Form.Row className="mb-4"> | ||
<Form.Group controlId="email" className="w-100 mb-0"> | ||
<Form.Control | ||
type="email" | ||
floatingLabel={formatMessage(messages.registrationFormEmailFieldLabel)} | ||
/> | ||
</Form.Group> | ||
</Form.Row> | ||
<Form.Row className="mb-4"> | ||
<Form.Group controlId="fullName" className="w-100 mb-0"> | ||
<Form.Control | ||
type="text" | ||
floatingLabel={formatMessage(messages.registrationFormFullNameFieldLabel)} | ||
/> | ||
</Form.Group> | ||
</Form.Row> | ||
<Form.Row className="mb-4"> | ||
<Form.Group controlId="password" className="w-100 mb-0"> | ||
<Form.Control | ||
type="password" | ||
trailingElement={<Icon src={RemoveRedEye} />} | ||
floatingLabel={formatMessage(messages.registrationFormPasswordFieldLabel)} | ||
/> | ||
</Form.Group> | ||
</Form.Row> | ||
<Form.Group id="formGridCheckbox"> | ||
<Form.Checkbox className="text-gray-800">{formatMessage(messages.registrationFormOptOutLabel)}</Form.Checkbox> | ||
</Form.Group> | ||
<div className="d-flex flex-column"> | ||
<Button variant="primary" type="submit" className="align-self-end"> | ||
{formatMessage(messages.registrationFormCreateAccountButton)} | ||
</Button> | ||
</div> | ||
</Form> | ||
<div> | ||
<span className="mt-5.5 text-gray-800 mt-1"> | ||
{formatMessage(messages.registrationFormAlreadyHaveAccountText)} | ||
<Hyperlink className="p-2"> | ||
{formatMessage(messages.registrationFormSignInLink)} | ||
</Hyperlink> | ||
</span> | ||
<br /> | ||
<span className="font-weight-normal"> | ||
{formatMessage(messages.registrationFormSchoolOrOrganizationLink)} | ||
<Hyperlink className="p-2"> | ||
{formatMessage(messages.registrationFormSignInWithCredentialsLink)} | ||
</Hyperlink> | ||
</span> | ||
</div> | ||
</Container> | ||
); | ||
}; | ||
|
||
export default RegistrationForm; |
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,15 @@ | ||
@import "~@edx/brand/paragon/variables"; | ||
|
||
.registration-form { | ||
padding: 3.5rem 2.5rem; | ||
} | ||
|
||
.separator { | ||
border: 0; | ||
border-top: 0.075rem solid $light-500 | ||
} | ||
|
||
.pgn__form-control-floating-label-text:after { | ||
content:"*"; | ||
color: $danger-500; | ||
} |
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,61 @@ | ||
import { defineMessages } from '@edx/frontend-platform/i18n'; | ||
|
||
const messages = defineMessages({ | ||
registrationFormHeading1: { | ||
id: 'registration.form.heading.1', | ||
defaultMessage: 'Create account', | ||
description: 'registration form main heading', | ||
}, | ||
registrationFormHeading2: { | ||
id: 'registration.form.or.heading.2', | ||
defaultMessage: 'or', | ||
description: 'Heading that appears between social auth and basic registration form', | ||
}, | ||
registrationFormEmailFieldLabel: { | ||
id: 'registration.form.email.label', | ||
defaultMessage: 'Email', | ||
description: 'Label for email input field', | ||
}, | ||
registrationFormFullNameFieldLabel: { | ||
id: 'registration.form.full.name.label', | ||
defaultMessage: 'Full Name', | ||
description: 'Label for full name input field', | ||
}, | ||
registrationFormPasswordFieldLabel: { | ||
id: 'registration.form.password.label', | ||
defaultMessage: 'Password', | ||
description: 'Label for password input field', | ||
}, | ||
registrationFormOptOutLabel: { | ||
id: 'registration.Form.opt.out.label', | ||
defaultMessage: 'I don’t want to receive marketing messages from edX', | ||
description: 'Label marketing email opt out option on registration form', | ||
}, | ||
registrationFormCreateAccountButton: { | ||
id: 'registration.form.continue.button', | ||
defaultMessage: 'Create an account for free', | ||
description: 'Text for submit button on registration form', | ||
}, | ||
registrationFormAlreadyHaveAccountText: { | ||
id: 'registration.form.already.have.account.text', | ||
defaultMessage: 'Already have an account?', | ||
description: 'Login button help text', | ||
}, | ||
registrationFormSignInLink: { | ||
id: 'registration.form.sign.in.link', | ||
defaultMessage: 'Sign In', | ||
description: 'Text for sign in link', | ||
}, | ||
registrationFormSchoolOrOrganizationLink: { | ||
id: 'registration.form.account.school.organization.text', | ||
defaultMessage: 'Have an account through school or organization?', | ||
description: 'Label for link that leads learners to the institution login page', | ||
}, | ||
registrationFormSignInWithCredentialsLink: { | ||
id: 'registration.form.sign.in.with.credentials.link', | ||
defaultMessage: 'Sign in with your credentials', | ||
description: 'Text for signing in with credentials', | ||
}, | ||
}); | ||
|
||
export default messages; |