search

Cloud-CV / Fabrik

:factory: Collaboratively build, visualize, and design neural nets in browser
GNU General Public License v3.0
1.12k stars 235 forks source link

Signup Page for Fabrik #502

Open sayamkanwar opened 5 years ago

sayamkanwar commented 5 years ago

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

fabrik_signup

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

sayamkanwar commented 5 years ago

Sure @Ram81

sayamkanwar commented 5 years ago

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

sayamkanwar commented 5 years ago

Or would you like something like this? @Ram81

screenshot 2018-12-11 at 4 01 33 pm
sayamkanwar commented 5 years ago

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

sayamkanwar commented 5 years ago

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

Ram81 commented 5 years ago

@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 commented 5 years ago

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 commented 5 years ago

Is this fine @Ram81?

new_signup_mockup

sayamkanwar commented 5 years ago

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

Ram81 commented 5 years ago

@sayamkanwar yes

sayamkanwar commented 5 years ago

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

sayamkanwar commented 5 years ago

Do these 2 match Fabrik's theme? @Ram81

new_signup_mockup2

new_signup_mockup3

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

Ram81 commented 5 years ago

@sayamkanwar second one looks good for now

sayamkanwar commented 5 years ago

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

sayamkanwar commented 5 years ago

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

screenshot 2018-12-12 at 9 22 39 pm

Demo demo_account

Please review @Ram81 @RishabhJain2018 Thank you! :)

sayamkanwar commented 5 years ago

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

sayamkanwar commented 5 years ago

@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. signup-localstorage

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