signup page #262

aakankshaagr · 2021-06-27T22:01:29Z

Description

Developed SignUp Page

Fixes #248

Type of Change:

Code
Quality Assurance
User Interface

Code/Quality Assurance Only

New feature (non-breaking change which adds functionality pre-approved by mentors)

How Has This Been Tested?

Checklist:

My PR follows the style guidelines of this project
I have performed a self-review of my own code or materials

Code/Quality Assurance Only

My changes generate no new warnings
New and existing unit tests pass locally with my changes

welcome · 2021-06-27T22:01:31Z

Hello there!👋 Welcome to the project!💖

Thank you and congrats🎉 for opening your first pull request.✨ AnitaB.org is an inclusive community, committed to creating a safe and positive environment.🌸Please adhere to our Code of Conduct and Contribution Guidelines.🙌.We will get back to you as soon as we can.😄

Feel free to join us on AnitaB.org Open Source Zulip Community.💖 We have different streams for each active repository for discussions.✨ Hope you have a great time there!😄

mtreacy002

@aakankshaagr , thank you for submitting the PR. I have left some feedback for you below as well as an alternative to upload the side image. Also, please don't forget to remove all the commented lines that are no longer needed. Let me know if you have any questions 😉.

mtreacy002 · 2021-06-28T08:58:22Z

src/register/Register.jsx

+                    <label id="password">Password :</label>
+                    <input
+                      aria-labelledby="password"
+                      className="feilds"


please fix typo

mtreacy002 · 2021-06-28T09:04:02Z

src/register/Register.jsx

+                      className="feilds"
+                      type={isPasswordShown ? "text" : "password"}
+                      name="password"
+                      placeholder="atleast 8 characters"


Suggested change

placeholder="atleast 8 characters"

placeholder="at least 8 characters"

mtreacy002 · 2021-06-28T09:04:50Z

src/register/Register.jsx

+                    <label id="confirmPassword">Confirm Password :</label>
+                    <input
+                      aria-labelledby="confirmPassword"
+                      className="feilds"


mtreacy002 · 2021-06-28T09:09:07Z

src/register/Register.jsx

+                      className="feilds"
+                      type={isPasswordShown ? "text" : "password"}
+                      name="confirmPassword"
+                      placeholder="atleast 8 characters"


although the design shows this as placehloder, IMO it makes more sense if we show re-type password here instead since this field is not to insert a totally new password.

mtreacy002 · 2021-06-28T09:32:39Z

src/register/Register.jsx

+    <div className="container">
+      <div class="row align-items-start">
+        <div class="col">
+          <img src="src/assets/images/side_image.jpg" alt="background" />


instead of using image path and have the image saved inside images folder, you can use the githubusercontent link of an image as it was used on the About.jsx line 12.

aakankshaagr · 2021-06-30T05:51:26Z

Thanks @mtreacy002 !! I have made changes as you suggested. About image I don't know how to get side_image in way suggested by you. Thankfully, somehow it worked and image is displayed. I have made changes in classes naming as there was lot of css getting included with those names.
Icon part is left as m facing some issues in icon display.
I didn't find any information for page layout when screen size is small so I made it as per my wish.If it's already there then please inform me, I will make changes according to that.
In media queries, I want screen to be divided in 2 rows top having image and bottom having form. I don't know why image is not showing up.Can you please point out where I am going wrong?

Waiting for your feedback :) !!

aakankshaagr · 2021-06-30T06:01:58Z

if Register component can too stretch like footer and navbar then it will look better.

mtreacy002 · 2021-07-08T13:34:33Z

@aakankshaagr , is there any reason you don't make it stretch like the footer? I believe the image in Figma also shows that the container (image+form) is stretchable.

mtreacy002

Hi @aakankshaagr , the build compiled with warnings. Can you try to fix this, please? Thanks

aakankshaagr · 2021-07-12T19:23:41Z

@mtreacy002 On stretching image got doubled and that wasn't looking good. So, as I mentioned earlier ,I felt like only making form stretchable.

aakankshaagr · 2021-07-13T15:42:14Z

@mtreacy002 route.js got autoformatted and by mistake, I pushed route.js too. While trying to fix that I somehow merged develop.I don't know how to undo this. I tried to rebase and git reset --merge but it is not working. Please suggest some other way to remove this.

mtreacy002

@aakankshaagr , I checked your code changes and it doesn't seem to have major issues. Auto-formatting of routes.jsx seems ok and the merged of develop branch to your pr branch seems to have no impact to the code you're submitting. Although, I do have some feedback for you to work on:

the build is failing. Below is the screenshot

the tests are also failing. see this gist for the error warnings.

Can you please fix these errors? Thanks

PS: I have a second thought on the form stretch. The stretching of the register form field seems odd since the fields on the form won't need that bigger input field. I think the form stretch on the bigger screen size should be maximized to up to 75% of the screen width instead to make it reasonable. Perhaps your screenshot above was made with smaller zoom range (~50 - 67%) which is probably not what most of our users would have (~75-125%). So, you can put it back to the way it was IMO 😉.

aakankshaagr · 2021-08-05T15:44:51Z

@mtreacy002 I have removed error warnings. It is also suggesting we should add alt text for the password icon image. What shall I keep as alt text?
Form size is dynamic, as screen size increases fields will stretch. So I think changes help in case if the user screen size is way large or else it will display like previously I showed you.

vj-codes · 2021-08-14T20:20:54Z

@mtreacy002 hey can you please approve the workfow run in this PR?

aakankshaagr · 2021-08-16T08:19:48Z

Tests are failing bcz placeholder texts are not matching in tests and register files. So I am changing placeholder texts. @mtreacy002 According to your earlier suggestion password placeholder values isn't suitable for adding in tests. So I am changing them to be the same as label names. Is that fine or I should do vice versa?

aakankshaagr · 2021-08-19T17:57:35Z

@mtreacy002 All test cases are passed :)

I hope now it passes all build tests.

aakankshaagr · 2021-08-25T16:13:06Z

@mtreacy002 can you please approve the workflow?

aakankshaagr · 2021-08-28T12:37:41Z

All test cases are passing along with no warnings. @mtreacy002 Can you plz approve the workflow.

aakankshaagr · 2021-11-22T15:34:16Z

@mtreacy002 please approve the workflow. I have changed the layout when zoom<50% as suggested by you. All test cases have been passed locally.

mtreacy002

Hi @aakankshaagr , thank you for the pr and my apology for replying late.
Please check the below feedback.
Plus, can you please keep the Sidebar and the VideoSection from the existing code in your commits. It seems like you've deleted them by accident on this pr.

Thank you beforehand 😉

src/register/Register.jsx

* Video Section Added * Minor changes in video section

aakankshaagr · 2021-12-01T12:28:32Z

Hi @aakankshaagr , thank you for the pr and my apology for replying late. Please check the below feedback. Plus, can you please keep the Sidebar and the video section from the existing code in your commits. It seems like you've deleted them by accident on this pr.

Thank you beforehand 😉

It's fine @mtreacy002 😊. Sure, I will add them again. I am sorry I thought that the VideoSection part was not related to my pr and I added them by mistake. So I removed them. Thanks to other contributors for correcting my mistake.I have added username field and updated tests cases too. Also repositioned error before signup button. Can you please check the changes once again?
Also, I found that footer is not working. Link tag is missing to attribute and this is causing a warning in the register form section. Please look into it once and tell me if there is something I can do about it.

aakankshaagr · 2022-03-05T20:09:22Z

@mtreacy002 is this matching with your suggested changes? Please review this and let me know if there are some changes that need to be done.
Thank you

rkraeher

nice work 🙂 just a refactor suggestion: there are a lot of repeated assertions throughout the tests where the only thing that changes are the values you are passing. you could remove a lot of duplicated code by mapping these repeated values with the jest it.each method. see the docs

rkraeher · 2022-03-05T22:09:05Z

src/register/Register.jsx

-    const [showTermsModal,setShowTermsModal] = useState(false);
+  const { isAuth } = useContext(AuthContext);
+  const [isValidUsername, setIsValidUsername] = useState(true);
+  const [isValidName, setIsValidName] = useState(true);


if these are validators, does it make more sense for initial state to be set to false instead? 🤔 maybe they should only be true after successful validation?

@rkraeher Thank you for reviewing. Values are set so when the user enters the wrong value then display an error. Apart from validating, error message is also handled by this.

rkraeher · 2022-03-05T22:14:31Z

src/register/Register.jsx

+              <section className="register">
+                <h1>Welcome To Bridge In Tech</h1>
+                <h4>
+                  Lets start your account setup so you can have access to a


Lets is a typo. should be Let's

rkraeher · 2022-03-05T22:18:16Z

src/tests/PersonalDetails.test.js

-    expect(screen.getByLabelText("Photo Url :", {selector: "input"})).toBeEmpty();
-    expect(screen.getByLabelText("Resume Url :", {selector: "input"})).toBeEmpty();
+    expect(
+      screen.getByLabelText("Username :", { selector: "input" })


there is a lot of weird formatting and line breaks in this file that really decreases the readability of the tests.

rkraeher · 2022-03-05T22:41:29Z

src/tests/Register.test.js

+import { rest } from "msw";
+import { setupServer } from "msw/node";
+import {
+  render,


something odd happened with the formatting in this file as well. this negatively affects readability like ☝️

I guess it's because prettier is not working properly for me. I guess the code will be readable after running the prettier. I tried hard to correct this even done manually but after saving everything goes back to the same.So it's quite difficult to format tests.

I see. do you have prettier extension or any other linter enabled? it is annoying to do it manually but if you do that and have the prettier disabled it shouldn't autoformat when you save

rkraeher · 2022-03-05T22:41:41Z

src/tests/Register.test.js

+    target: { value: "My Name" },
+  });
+  act(() => {
+    fireEvent.change(screen.getByPlaceholderText("Username"), {


do we really need to use act() in this test if none of these form input events are asynchronous except for the submit registration?

@rkraeher I guess we need to use act()

this warning seems to have to do with state updates happening asynchronously. this is not really how act should be used if you check out the docs.

This article also has a really useful explanation of the error and some suggestions on alternative solutions for how to deal with it effectively and eliminate the warning

signup page

8aa8008

aakankshaagr requested a review from mtreacy002 as a code owner June 27, 2021 22:01

mtreacy002 added Category: Coding Changes to code base or refactored code that doesn't fix a bug. Category: User Interface Improvements or additions to design. Status: Needs Review PR needs an additional review or a maintainer's review. Type: Enhancement New feature or request. labels Jun 28, 2021

mtreacy002 assigned aakankshaagr Jun 28, 2021

mtreacy002 requested changes Jun 28, 2021

View reviewed changes

mtreacy002 added Status: Changes Requested Changes are required to be done by the PR author. and removed Status: Needs Review PR needs an additional review or a maintainer's review. labels Jun 28, 2021

Responsive Signup with Footer

da97f52

aakankshaagr requested a review from mtreacy002 July 4, 2021 15:40

mtreacy002 requested changes Jul 8, 2021

View reviewed changes

aakankshaagr added 2 commits July 12, 2021 21:49

added preloader

4e78ef1

made resgiter dynamic

78e39ec

aakankshaagr and others added 5 commits July 13, 2021 13:56

added password icon

29f125a

Merge branch 'develop' into signup

4d64f7e

removed unwanted changes of route.js

e41c745

added password icon

e2ac3e2

formatted register.jsx

41b92ca

mtreacy002 requested changes Jul 16, 2021

View reviewed changes

aakankshaagr added 2 commits August 5, 2021 20:43

removed errors in register.jsx

418bbc0

removed warnings from register

6f11b37

aakankshaagr requested a review from mtreacy002 August 14, 2021 08:33

aakankshaagr added 2 commits August 16, 2021 14:08

removed build errors

094a932

removed test error

b2cea55

aakankshaagr added 2 commits August 28, 2021 17:29

added alt text in images

9ec66d8

user login succesfully test case passed

8cb2149

changed layout for <40% zoom

53b7495

mtreacy002 requested changes Nov 24, 2021

View reviewed changes

src/register/Register.jsx Show resolved Hide resolved

naveen8801 and others added 5 commits November 25, 2021 18:50

UI: Added Video Section on Homepage (anitab-org#261)

fea35e4

* Video Section Added * Minor changes in video section

added username in registration and tests

150fdb0

wrapped react usestate in act in test file

49892ec

added act() in testcases

4696c19

changed position of payload error

c23cc97

aakankshaagr requested a review from mtreacy002 January 10, 2022 13:22

rkraeher reviewed Mar 5, 2022

View reviewed changes

removed typo mistake

e44b645

	placeholder="atleast 8 characters"
	placeholder="at least 8 characters"

signup page #262

Are you sure you want to change the base?

signup page #262

Conversation

aakankshaagr commented Jun 27, 2021 • edited Loading

Description

Type of Change:

How Has This Been Tested?

Checklist:

welcome bot commented Jun 27, 2021

mtreacy002 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

aakankshaagr commented Jun 30, 2021

aakankshaagr commented Jun 30, 2021 • edited Loading

mtreacy002 commented Jul 8, 2021 • edited Loading

mtreacy002 left a comment

Choose a reason for hiding this comment

aakankshaagr commented Jul 12, 2021 • edited Loading

aakankshaagr commented Jul 13, 2021

mtreacy002 left a comment • edited Loading

Choose a reason for hiding this comment

aakankshaagr commented Aug 5, 2021

vj-codes commented Aug 14, 2021

aakankshaagr commented Aug 16, 2021

aakankshaagr commented Aug 19, 2021 • edited Loading

aakankshaagr commented Aug 25, 2021

aakankshaagr commented Aug 28, 2021

aakankshaagr commented Nov 22, 2021

mtreacy002 left a comment

Choose a reason for hiding this comment

aakankshaagr commented Dec 1, 2021

aakankshaagr commented Mar 5, 2022

rkraeher left a comment • edited Loading

Choose a reason for hiding this comment

rkraeher Mar 5, 2022 • 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

rkraeher Mar 5, 2022 • 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

aakankshaagr commented Jun 27, 2021 •

edited

Loading

aakankshaagr commented Jun 30, 2021 •

edited

Loading

mtreacy002 commented Jul 8, 2021 •

edited

Loading

aakankshaagr commented Jul 12, 2021 •

edited

Loading

mtreacy002 left a comment •

edited

Loading

aakankshaagr commented Aug 19, 2021 •

edited

Loading

rkraeher left a comment •

edited

Loading

rkraeher Mar 5, 2022 •

edited

Loading

rkraeher Mar 5, 2022 •

edited

Loading