Plots2: Create signup modal

[JonathanXu1]

As an extension of #4133 , and similar to the issue of #2866 , we will need to create a modal that pops up when the user clicks the "signup" button in the navbar:

A modal should pop up, with the contents of this page: https://publiclab.org/signup
Here's the modal for logging in:

I've made the login modal so if I'm not working on this task you can ask me for help :)

[SidharthBansal]

Sorry for the misunderstanding.
You need to enlarge the existing modal so that it will have sign up form also.
Check the sign up form for codechef.com
May be that will help us.
You need not to create second modal.

Also, please claim the suggest changes issue on the GCI dashboard I will give you rewards.

[JonathanXu1]

Alright, I'll add the signup to the modal. While I'm working on that, I've claimed the suggest changes issue and submitted that.

[SidharthBansal]

Approved it!
Can you claim it again?

[JonathanXu1]

Nope, not anymore :) I'm trying to add the signup form in a new modal like such:

However I'm getting the error:

Not sure if you meant this way of adding the signup.

[SidharthBansal]

I was looking forward for this design

In the form of a modal, a line in between dividing the sign up and login
Like
Sign up | Login
Social media Icons | Social media Icons
Sign up Form Button | Login form button

You created the right portion in the pr. Now let's make the right portion and integrate both stuff together.
We require Social Media Icons on both sides because an end user don't know that backend logic for login and sign up for social media icons is same.

OR
We can create the exact copy of https://www.codechef.com/signup into a modal. What do you say?
I prefer second option.

[JonathanXu1]

Mhmm, the design would be pretty easy for that, but I'm having trouble including the form component. It only works if I'm on the signup page because of line 2:

<%= form_for @user, :url => {:controller => 'users', :action => @action}, :html => {:class => "row"} do f| %>

If I can get it to work anywhere outside the signup page I can add signup functionality to the modal.

[SidharthBansal]

Can we complete #4133 first OR are you willing to push changes to that PR?

[jywarren]

OK, I'm sort of thinking let's get this working really well with the modal for login, and treat sign up as a separate task/issue. The reason is that i thought about this a lot and there is just more content on the signup form: https://publiclab.org/signup (in incognito mode or not logged in). So, let's get the login working smoothly before we take on this 2-column version which seems almost like a separate issue. I hope that sounds reasonable.

I was thinking more about Sidharth's concern that the "Log in with Email" button appearing on the same line looks strange... i do think some people who have been logging into the site for a long time with username + password may find it confusing. I think i was wrong about it... so shall we revert back to how it was in an earlier version?

[jywarren]

I apologize for the confusion about the email button -- and Sidharth's idea of OR happening with a horizontal line does still make sense too:

[jywarren]

Thanks everyone for this quite complex set of inter-related issues!

[JonathanXu1]

Personally, I think the signup should not be placed in a modal as there is much text, information and content that would make it very difficult to read in a modal. Also, since it is a one-time event, a page would not affect the ui much afterwards. That's just my opinion; you probably have reasons to include it as a modal.

[JonathanXu1]

@jywarren @SidharthBansal can I apply the changes to the design of the login modal and push just the login modal as a solution for #4133 ? A signup modal could be discussed and added as an issue later if needed.

[jywarren]

Hmm, @SidharthBansal what do you think? Signup is quite a bit more complex, maybe it needs more thought esp. for narrow smartphone screens. We could break this issue in two and solve the first part completely?

[SidharthBansal]

We can first merge the login modal then we can work on the sign-up.
Then we can integrate both of them into a single modal.
I will suggest that we should create a modal for signup. Redirecting for the signup to a page and we are popping the login template does not makes sense to me. Sorry @JonathanXu1
I know that signup form is lengthy.

I am reviewing some other websites to see their UI.

[SidharthBansal]

I reviewed many websites. Many of them show the sign up form in modal combined with login.

One way to reduce the size on the mobile is to show
Sign up
....................
Social Media Icons
OR
Want to authenticate through email? (link to /signup)

For the laptop view we can have the modal containing all the signup information. What do you say @jywarren ?

[SidharthBansal]

in the gif shared @JonathanXu1 you can be minimized the sign up modal by removing the sidebar.
@JonathanXu1 please remove the sidebar.
Thanks

[SidharthBansal]

Also, we don't need OR Login with email on signup page. Please remove it

[oorjitchowdhary]

@JonathanXu1 Ping me if you need any help..

[oorjitchowdhary]

@JonathanXu1 you're working on this or this issue is left to solve by anyone?

[JonathanXu1]

Yep, I'm currently setting up the signup modal as it was before in my previous PR before I removed it. I'll let you know if there's anything I'll help with. Good luck!

[oorjitchowdhary]

Okay great

[JonathanXu1]

@oorjitchowdhary could you help me figure out a way to render the form template in directories outside of /signup?
https://github.com/publiclab/plots2/issues/4173#issuecomment-445283901

@SidharthBansal @jywarren Is this task up on GCI yet?

[SidharthBansal]

you need to check it. If it is not we will create one. It is non beginner task. So, don't worry :smile:

[SidharthBansal]

@oorjitchowdhary if you will be doing the collaborative task with @JonathanXu1 in resolving then both of you will get rewards :-) I am very generous in giving points.

[oorjitchowdhary]

@JonathanXu1 We can do that

[oorjitchowdhary]

@JonathanXu1 Could you please describe the problem a bit more clearly.. Sorry.. I can't quite get it.. 😞

[JonathanXu1]

If you see the gif here: https://github.com/publiclab/plots2/issues/4173#issuecomment-445326331
You can see that the signup modal works until you navigate out of publiclab/signup. We need to know why that is and how to fix it. I'll make a pr so you can see my code exactly.

[SidharthBansal]

@JonathanXu1 please open up a Pull request for this issue. We will have remaining conversation in the PR.

[oorjitchowdhary]

I'll make a pr so you can see my code exactly.

Yes that'd be great

[SidharthBansal]

Moved to#4196 then #4203 then to #4209.
Now we are on the integration part.