feat: design login form #4

ahtesham-quraish · 2024-04-01T06:44:21Z

Description

In this PR following things are done:

Design the login form
Include the social Auth buttons in login form
Add forgot password link
There is no hi-fi designs are available so we use approximation

JIRA

VAN-1882

How Has This Been Tested?

Mention any tests you've added or updated to ensure the changes work as expected.

Screenshots/sandbox (optional):

After

Merge Checklist

If your update includes visual changes, have they been reviewed by a designer? Send them a link to the Sandbox, if applicable.
Is there adequate test coverage for your changes?

syedsajjadkazmii

can we create a forms dir inside src and move login inside forms dir.

Let me know if you think we should have an another directory structure.

src/login/index.jsx

src/login/index.scss

src/login/index.jsx

src/forms/login/index.jsx

src/login/index.scss

syedsajjadkazmii

minor comments. thankyou

ahtesham-quraish · 2024-04-01T07:43:02Z

@syedsajjadkazmii we need to keep padding because this is taken from registration design so we are sure that this padding is needed around the form that is why we will keep it

syedsajjadkazmii

thankyou

syedsajjadkazmii · 2024-04-01T09:16:39Z

src/forms/login/index.jsx

+} from '@openedx/paragon';
+
+import messages from './messages';
+import SocialAuthButton from '../../common-ui/SocialAuthButtons';


Suggested change

import SocialAuthButton from '../../common-ui/SocialAuthButtons';

import SocialAuthButtons from '../../common-ui/SocialAuthButtons';

src/authn-component/index.jsx

src/forms/login/index.jsx

zainab-amir · 2024-04-02T05:28:01Z

src/forms/login/index.scss

+    text-decoration: underline;
+    cursor: pointer;


Where is this coming from? I don't see underline in the registration designs?

I saw this from lo-fi designs of login i can remove it if you want?

We are following hi-fi of registration for design decisions on other things, we should use that here too.

src/forms/login/index.jsx

zainab-amir

Can we get rid of "Text" from the messages id?
loginFormSignInButtonText -> loginFormSignInButton
loginFormForgotPasswordButtonText -> loginFormForgotPasswordButton

I have mentioned a few updates to messages file. Please use it to update other instances too.

zainab-amir · 2024-04-02T06:37:07Z

src/forms/login/index.jsx

+ *
+ * @returns {JSX.Element} The rendered login component along with social auth buttons.
+ */
+


nit: remove extra line

zainab-amir · 2024-04-02T06:38:25Z

src/forms/login/index.scss

+.form-layout {
+    padding: 3.5rem 2.5rem 3.5rem 2.5rem;
+}
+
+.hyper-link {
+    cursor: pointer;
+}
+
+.pgn__form-control-floating-label-text:after {
+    content:"*";
+    color: #AB0D02;
+  }


Spacing inconsistencies

Suggested change

.form-layout {

padding: 3.5rem 2.5rem 3.5rem 2.5rem;

}

.hyper-link {

cursor: pointer;

}

.pgn__form-control-floating-label-text:after {

content:"*";

color: #AB0D02;

}

.form-layout {

padding: 3.5rem 2.5rem 3.5rem 2.5rem;

}

.hyper-link {

cursor: pointer;

}

.pgn__form-control-floating-label-text:after {

content:"*";

color: #AB0D02;

}

zainab-amir · 2024-04-02T06:39:16Z

src/forms/login/messages.js

+  loginFormHeadingText: {
+    id: 'login.form.heading.text',
+    defaultMessage: 'Login',
+    description: 'Text of heading',


Suggested change

description: 'Text of heading',

description: 'Login form main heading',

zainab-amir · 2024-04-02T06:40:13Z

src/forms/login/messages.js

+  loginFormSignUpHelpingText: {
+    id: 'login.form.sign.up.helping.text',
+    defaultMessage: 'Don’t have an account yet?',
+    description: 'Description of sign up link helping text',


Suggested change

description: 'Description of sign up link helping text',

description: 'A title that appears before "Create an account" button on login form',

zainab-amir · 2024-04-02T06:40:53Z

src/forms/login/messages.js

+  loginFormSignUpLink: {
+    id: 'login.form.sign.up.link.text',
+    defaultMessage: 'Create an account',
+    description: 'Description of sign up link',


Suggested change

description: 'Description of sign up link',

description: 'Registration button label that appears on login page',

zainab-amir · 2024-04-02T06:42:59Z

src/forms/login/messages.js

+    defaultMessage: 'Email',
+    description: 'Email field label',
+  },
+  loginFormPasswordText: {


Suggested change

loginFormPasswordText: {

loginFormPasswordFieldLabel: {

zainab-amir · 2024-04-02T06:43:10Z

src/forms/login/messages.js

+    defaultMessage: 'Password',
+    description: 'Password field label',
+  },
+  loginFormOrTxt: {


Suggested change

loginFormOrTxt: {

loginFormHeading2: {

zainab-amir · 2024-04-02T06:44:21Z

src/forms/login/messages.js

+  loginFormOrTxt: {
+    id: 'login.form.or.message',
+    defaultMessage: 'or',
+    description: 'Text of or',


Suggested change

description: 'Text of or',

description: 'Heading that appears between social auth and basic login form',

zainab-amir · 2024-04-02T06:45:11Z

src/forms/login/messages.js

+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  loginFormHeadingText: {


Suggested change

loginFormHeadingText: {

loginFormHeading1: {

zainab-amir · 2024-04-02T06:47:23Z

src/forms/login/messages.js

+  loginFormSignInButtonText: {
+    id: 'login.form.signin.button.text',
+    defaultMessage: 'Sign in',
+    description: 'Text of sign in button',


Suggested change

description: 'Text of sign in button',

description: 'Sign in button label that appears on login page',

zainab-amir

Please address the comments before merging.

zainab-amir · 2024-04-02T08:58:33Z

src/forms/login/index.scss

+    content:"*";
+    color: #AB0D02;
+  }
+


nit: remove extra line

zainab-amir · 2024-04-02T08:59:27Z

src/forms/login/messages.js

+
+const messages = defineMessages({
+  loginFormHeading1: {
+    id: 'login.form.heading.text',


Please update id based on the key (update for all other messages too).

Suggested change

id: 'login.form.heading.text',

id: 'login.form.heading.1',

Description: Create login form using paragon form fields VAN-1882

syedsajjadkazmii reviewed Apr 1, 2024

View reviewed changes

src/login/index.jsx Outdated Show resolved Hide resolved

src/login/index.jsx Outdated Show resolved Hide resolved

src/login/index.jsx Outdated Show resolved Hide resolved

src/login/index.scss Outdated Show resolved Hide resolved

src/login/index.jsx Outdated Show resolved Hide resolved

ahtesham-quraish force-pushed the ahtesham/van-1882 branch 4 times, most recently from 66e07b2 to cc4b51c Compare April 1, 2024 07:38

syedsajjadkazmii reviewed Apr 1, 2024

View reviewed changes

src/forms/login/index.jsx Outdated Show resolved Hide resolved

src/login/index.scss Outdated Show resolved Hide resolved

syedsajjadkazmii reviewed Apr 1, 2024

View reviewed changes

ahtesham-quraish force-pushed the ahtesham/van-1882 branch from cc4b51c to a096243 Compare April 1, 2024 07:41

syedsajjadkazmii approved these changes Apr 1, 2024

View reviewed changes

ahtesham-quraish force-pushed the ahtesham/van-1882 branch 3 times, most recently from 24808ff to f3b61c7 Compare April 1, 2024 08:53

syedsajjadkazmii reviewed Apr 1, 2024

View reviewed changes

zainab-amir suggested changes Apr 2, 2024

View reviewed changes

ahtesham-quraish force-pushed the ahtesham/van-1882 branch 2 times, most recently from 0fa8cf3 to 0b01a2e Compare April 2, 2024 06:22

zainab-amir reviewed Apr 2, 2024

View reviewed changes

ahtesham-quraish force-pushed the ahtesham/van-1882 branch from 0b01a2e to 70fa4d0 Compare April 2, 2024 07:27

zainab-amir approved these changes Apr 2, 2024

View reviewed changes

feat: create login form

86b7b88

Description: Create login form using paragon form fields VAN-1882

ahtesham-quraish force-pushed the ahtesham/van-1882 branch from 70fa4d0 to 86b7b88 Compare April 2, 2024 09:18

ahtesham-quraish merged commit 52cee8b into master Apr 2, 2024
5 checks passed

ahtesham-quraish deleted the ahtesham/van-1882 branch April 2, 2024 09:25

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: design login form #4

feat: design login form #4

ahtesham-quraish commented Apr 1, 2024 •

edited

Loading

syedsajjadkazmii left a comment

syedsajjadkazmii left a comment

ahtesham-quraish commented Apr 1, 2024

syedsajjadkazmii left a comment

syedsajjadkazmii Apr 1, 2024

ahtesham-quraish Apr 2, 2024

zainab-amir Apr 2, 2024

ahtesham-quraish Apr 2, 2024 •

edited

Loading

zainab-amir Apr 2, 2024

zainab-amir left a comment

zainab-amir Apr 2, 2024

ahtesham-quraish Apr 2, 2024

zainab-amir Apr 2, 2024

ahtesham-quraish Apr 2, 2024

zainab-amir Apr 2, 2024

ahtesham-quraish Apr 2, 2024

zainab-amir Apr 2, 2024 •

edited

Loading

ahtesham-quraish Apr 2, 2024

zainab-amir Apr 2, 2024 •

edited

Loading

ahtesham-quraish Apr 2, 2024

zainab-amir Apr 2, 2024

ahtesham-quraish Apr 2, 2024

zainab-amir Apr 2, 2024

ahtesham-quraish Apr 2, 2024

zainab-amir Apr 2, 2024

ahtesham-quraish Apr 2, 2024

zainab-amir Apr 2, 2024

ahtesham-quraish Apr 2, 2024

zainab-amir Apr 2, 2024

ahtesham-quraish Apr 2, 2024

zainab-amir left a comment

zainab-amir Apr 2, 2024

zainab-amir Apr 2, 2024

	import SocialAuthButton from '../../common-ui/SocialAuthButtons';
	import SocialAuthButtons from '../../common-ui/SocialAuthButtons';

	description: 'Text of heading',
	description: 'Login form main heading',

	description: 'Description of sign up link helping text',
	description: 'A title that appears before "Create an account" button on login form',

	description: 'Description of sign up link',
	description: 'Registration button label that appears on login page',

	description: 'Text of or',
	description: 'Heading that appears between social auth and basic login form',

	description: 'Text of sign in button',
	description: 'Sign in button label that appears on login page',

feat: design login form #4

feat: design login form #4

Conversation

ahtesham-quraish commented Apr 1, 2024 • edited Loading

Description

JIRA

How Has This Been Tested?

Screenshots/sandbox (optional):

Merge Checklist

syedsajjadkazmii left a comment

Choose a reason for hiding this comment

syedsajjadkazmii left a comment

Choose a reason for hiding this comment

ahtesham-quraish commented Apr 1, 2024

syedsajjadkazmii left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ahtesham-quraish Apr 2, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

zainab-amir left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

zainab-amir Apr 2, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

zainab-amir Apr 2, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

zainab-amir left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ahtesham-quraish commented Apr 1, 2024 •

edited

Loading

ahtesham-quraish Apr 2, 2024 •

edited

Loading

zainab-amir Apr 2, 2024 •

edited

Loading

zainab-amir Apr 2, 2024 •

edited

Loading