Signup Page for Fabrik

[sayamkanwar]

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! :)

[sayamkanwar]

Sure @Ram81

[sayamkanwar]

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

[sayamkanwar]

Or would you like something like this? @Ram81

[sayamkanwar]

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

[sayamkanwar]

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

[Ram81]

@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]

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]

Is this fine @Ram81?

[sayamkanwar]

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

[Ram81]

@sayamkanwar yes

[sayamkanwar]

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

[sayamkanwar]

Do these 2 match Fabrik's theme? @Ram81

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

[Ram81]

@sayamkanwar second one looks good for now

[sayamkanwar]

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

[sayamkanwar]

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]

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

[sayamkanwar]

@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! :)