Signup Page for Fabrik #502

sayamkanwar · 2018-12-11T01:07:44Z

Hi,
I have created the signup page for Fabrik. I have added all the custom validation code. For csrf, I have used npm package django-react-csrftoken. The signup form should be available at /#/signup.

Here's a demo

Please review @Ram81 @RishabhJain2018 @yashdusing @utsavgarg
Thank you! :)

This reverts commit d6b7a6d.

Ram81

@sayamkanwar can you please post some other mock ups for signup page, this doesn't match the theme of Fabrik.

sayamkanwar · 2018-12-11T07:15:04Z

Sure @Ram81

sayamkanwar · 2018-12-11T09:47:19Z

@Ram81, do you want me to completely change the design or change the color scheme to match with that of Fabrik?

sayamkanwar · 2018-12-11T10:31:46Z

Or would you like something like this? @Ram81

sayamkanwar · 2018-12-11T11:46:58Z

@Ram81, Can you please describe what type of design are you expecting?

sayamkanwar · 2018-12-11T14:48:20Z

Also @Ram81, can you please review the code as well? So that I can do all the changes at once.
Thank you!

Ram81 · 2018-12-11T14:49:12Z

@sayamkanwar you can see some work done by previous students who attempted the task there was one PR by @c0derlint which had a good design example

sayamkanwar · 2018-12-11T14:50:41Z

Oh okay @Ram81. But he had combined the login and signup form right? For me, I have to just create a sign up form?

sayamkanwar · 2018-12-11T15:53:09Z

Is this fine @Ram81?

Ram81

@sayamkanwar in your current implementation how are you ensuring the security of password, I haven't worked on login functionality in react yet. Are there any standard methods used to handle password security in UI component ?

And can you also share some alternative mock ups too, this one is good but to me it doesn't seem fitting to Fabrik's theme.

Ram81 · 2018-12-11T17:02:04Z

ide/static/js/signup.js

+    this.state = {
+      error_username: 0,
+      error_email: 0,
+      error_password1: 0,


@sayamkanwar please rename this variables, try not to use 1 or 2 with variable for multiple variables for same purpose

Actually I was trying to maintain consistency as these variables were used in /accounts/signup/. So should I still change these?

Ram81 · 2018-12-11T17:03:31Z

ide/static/js/signup.js

+      ).style.borderColor = this.state.wrong;
+      let email_label = document.getElementById("email-label");
+      if (email != "") {
+        email_label.style.fontSize = "0.7em";


For style changes based on actions can't you create separate css class json in the component and change the style class of component ?

Sure, I'll keep this in mind when coding the new design.

Ram81 · 2018-12-11T17:03:56Z

ide/static/js/signup.js

+      this.setState({ error_email: 0 });
+    }
+  }
+  validatePassword1() {


Rename methods based on logic in method

But there are 2-3 checks inside the method so how do I rename it?

based on the type of checks ex: validateEmailPassword, etc

Umm so if my validatePassword function has 2 checks for empty string and maximum char length so I should name it as checkPasswordEmptyMaxChar?

Ram81 · 2018-12-11T17:04:36Z

ide/static/js/signup.js

+      "csrfmiddlewaretoken"
+    )[0].value;
+    if (
+      this.state.error_username == 0 &&


Can you correct the indentation of this if () statement

Ram81 · 2018-12-11T17:04:50Z

ide/static/js/signup.js

+          password2: password2
+        },
+        success: function(result) {
+          console.log(result);


Remove debugging logs

Ram81 · 2018-12-11T17:05:08Z

ide/static/js/signup.js

+            let success = document.getElementsByClassName("success")[0];
+            let rightImg = document.getElementsByClassName("graphic")[0];
+            let logo = document.getElementsByClassName("logo")[0];
+            setTimeout(function() {});


Add newlines to make code clean

sayamkanwar · 2018-12-11T17:26:26Z

@Ram81, By security do you mean the prevention for different types of attacks through the input?

Ram81 · 2018-12-11T17:28:19Z

@sayamkanwar yes

sayamkanwar · 2018-12-11T17:28:58Z

Okay @Ram81, I'll add those checks. Thanks for pointing out! :)

sayamkanwar · 2018-12-11T18:23:59Z

Do these 2 match Fabrik's theme? @Ram81

If you like these, please mention your choice as well.

Ram81 · 2018-12-12T04:44:20Z

@sayamkanwar second one looks good for now

sayamkanwar · 2018-12-12T06:15:59Z

@Ram81, okay I'll code this then.
Thank you! :)

sayamkanwar · 2018-12-12T15:54:13Z

I have created the new design with all the changes you had asked for. I have also added the code to clean the string before submitting to the database which will prevent cyber security attacks. Also added all types of validation rules in the form. I have also added the code which gives an error if the account with the provided details already exists in the database.

New UI

Demo

Please review @Ram81 @RishabhJain2018
Thank you! :)

sayamkanwar · 2018-12-12T16:01:31Z

Also, if you see any odd indentations, that's probably because of ESLint. Without those, I was getting webpack errors and warnings.

Ram81 · 2018-12-12T17:08:25Z

ide/static/js/signup.js

+        },
+        success: function(result) {
+          if (result.location == "/") {
+            window.location = "/";


@sayamkanwar we would want to set the logged in user details in user login component but we would want it to be done in a secure way can you try to figure out some method for it

Sure @Ram81, I'll look into it.

sayamkanwar · 2018-12-13T15:13:43Z

@Ram81,
I have added the code which sets the logged in user's details in localStorage. localStorage will be the best option to maintain such type of records which are to be used at the frontend for real-time collaboration purpose.

Here's a demo on how this will work.

So whenever we need to use them, we can simply read the item value from localStorage through javascript.
For User ID: localStorage.getItem("userID"),
For Username: localStorage.getItem("username"),
For Email: localStorage.getItem("email")

Let me know your opinion on this.
Thank you! :)

sayamkanwar added 6 commits December 8, 2018 19:24

Update index.js

d6b7a6d

Revert "Update index.js"

3ab0419

This reverts commit d6b7a6d.

Created a new signup page

e9ff1a2

Typo fix

7bc89d8

Removed useless code & added success img

244ebf0

Added stylesheet link

da2c2ad

Ram81 requested changes Dec 11, 2018

View reviewed changes

Merge branch 'master' into signup

435d2e6

Ram81 requested changes Dec 11, 2018

View reviewed changes

sayamkanwar added 6 commits December 12, 2018 21:11

Update signup.js

43c0b35

Update signup_style.css

f05a9d9

Delete bg.jpg

198ae5e

Delete graphic_signup.png

9f15445

Delete smile.png

d2190a1

Add files via upload

1e91873

Ram81 requested changes Dec 12, 2018

View reviewed changes

sayamkanwar added 4 commits December 13, 2018 20:16

Update signup.js

c38d395

Update login.js

aad5ee5

Merge branch 'master' into signup

8222190

Update login.js

3712709

Signup Page for Fabrik #502

Are you sure you want to change the base?

Signup Page for Fabrik #502

Conversation

sayamkanwar commented Dec 11, 2018

Ram81 left a comment

Choose a reason for hiding this comment

sayamkanwar commented Dec 11, 2018

sayamkanwar commented Dec 11, 2018

sayamkanwar commented Dec 11, 2018

sayamkanwar commented Dec 11, 2018

sayamkanwar commented Dec 11, 2018

Ram81 commented Dec 11, 2018

sayamkanwar commented Dec 11, 2018 • edited

sayamkanwar commented Dec 11, 2018

Ram81 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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Ram81 Dec 11, 2018 • edited

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

sayamkanwar commented Dec 11, 2018

Ram81 commented Dec 11, 2018

sayamkanwar commented Dec 11, 2018

sayamkanwar commented Dec 11, 2018 • edited

Ram81 commented Dec 12, 2018

sayamkanwar commented Dec 12, 2018

sayamkanwar commented Dec 12, 2018

sayamkanwar commented Dec 12, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sayamkanwar commented Dec 13, 2018

sayamkanwar commented Dec 11, 2018 •

edited

Ram81 Dec 11, 2018 •

edited

sayamkanwar commented Dec 11, 2018 •

edited