OAuth user interface design on login screen

[jywarren]

@SidharthBansal - i wanted to share how Oauth looks on some other sites, so once we confirm it's perfectly working, we have a good workflow for login. See this example:

Note a couple things. First, since OAuth is easier, it's presented first. Then, I wonder if we can have the remainder of the non-OAuth screen be hidden until you interact with the first input... so as to keep things simple. Once you click or type in it, then the rest is shown. That way also it's clear that you can ignore it if you're using OAuth.

What do you think?

[SidharthBansal]

We can ask students to give designs for login modal in gci. Then we can break this into code segments.
This issue has instance count of 10

[digitaldina]

@SidharthBansal Hi! I'm looking into this as I am doing gci. For that task, do we design a similar login screen or actually create on? Thanks!

[SidharthBansal]

We need to do both.

…

On Thu, Nov 29, 2018, 8:46 AM d1g1t4ld1n4 ***@***.*** wrote: @SidharthBansal <https://github.com/SidharthBansal> Hi! I'm looking into this as I am doing gci. For that task, do we design a similar login screen or actually create on? Thanks! — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#2866 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AUACQ2Y-k7-ZmAvy9SbSCCDNWPJ_8dWPks5uz1GUgaJpZM4UvTee> .

[digitaldina]

Oh ok, thanks for clarifying

[jywarren]

We can start with sharing designs - esp. for the login dropdown on any https://publiclab.org page, and/or specifically in a modal for when you want to log in from a prompt lower down on a page. Say, if you are not logged in but want to log in from a Log in button at the bottom of the comments on a page like this:

https://publiclab.org/notes/warren/10-23-2018/call-for-outreachy-2018-19-proposals

Thanks, we'd love your help!

[digitaldina]

@jywarren I'm new to web dev, so bare with me, as this one seems like a challenge, but one I want to take on. I'm just wondering, how would I integrate this (what files/pages would need to be changed?) I've only every done this on a blank site, and doing it on something pre-existing is new to me.

[digitaldina]

@jywarren also, If I understood your comment above correctly, you mean that we just change the way this looks? In design and by hiding everything so that the user has to un-hide if they're not using OAuth?

[SidharthBansal]

Yeah.

…

On Fri, Nov 30, 2018, 7:48 AM d1g1t4ld1n4 ***@***.*** wrote: @jywarren <https://github.com/jywarren> also, If I understood your comment above correctly, you mean that we just change the way this looks? [image: screenshot from 2018-11-29 21-17-00] <https://user-images.githubusercontent.com/19677511/49264453-480eef00-f41c-11e8-8290-5d8e5539aea0.png> — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#2866 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AUACQ2IB3vmU1XaXQQ6ahxX5UHMAxsHgks5u0JVqgaJpZM4UvTee> .

[jonxuxu]

@jywarren could I get an extension? I have 15 hours left.

[jywarren]

of course - i'll extend now. For the errors, I don't think those should be stopping you from viewing HTML/CSS -- they're warnings from the Facebook widgets. What do you see on your screen? Keep up the good work!

…

On Wed, Dec 5, 2018 at 6:44 PM Jonathan Xu ***@***.***> wrote: @jywarren <https://github.com/jywarren> could I get an extension? I have 15 hours left. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#2866 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AABfJ7lt9JmJ5rz-FBwo7EEmuQ8MK5lkks5u2FpFgaJpZM4UvTee> .

[jonxuxu]

Thanks for the extension :)

This is what I currently see:

^ So no icons display whatsoever

Also I'm having issues when I try to include the following in my modal:
<%= render partial: 'user_sessions/new' %>

[jywarren]

Ah, so the icons should be disabled in development mode -- see this conditional? https://github.com/publiclab/plots2/blob/26161d893b85ff20a41b099254e91dafaa7f84f9/app/views/users/_form.html.erb#L11-L14 So I think we should narrow that conditional to happen not there, but inside the `/app/views/layouts/_social_icons.html.erb` file. Be aware there are other places where that social icons partial is called, and we could remove the conditional from there too -- try searching the codebase for "social_icons" to be sure -- and then the conditional could just be within the list, rather than for the entire section. Finally, if you want to rename _social_icons.html.erb to something like "_login_options.html.erb" maybe that's a bit more descriptive!

…

On Wed, Dec 5, 2018 at 7:20 PM Jonathan Xu ***@***.***> wrote: Thanks for the extension :) This is what I currently see: [image: image] <https://user-images.githubusercontent.com/22998430/49552362-2a7cd200-f8c1-11e8-9888-8eecd51b5c9b.png> ^ So no icons display whatsoever Also I'm having issues when I try to include the following in my modal: *<%= render partial: 'user_sessions/new' %>* — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#2866 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AABfJ-yoEclX5nvcA88UHQlg8LGND8Azks5u2GKYgaJpZM4UvTee> .

[SidharthBansal]

for people running things
locally where the OAuth versions aren't available, we could have it show by
default in cases where that's the only way to log in?

Oauth works well on the localhost, just you need to configure the keys.

[oorjitchowdhary]

Even I wasn't able to see the social icons on running localhost when I was doing my PR #4116
@SidharthBansal How can I configure the keys?

[SidharthBansal]

@JonathanXu1 we can delete Rails.env == production... line from all the places for social link icons.
This will avoid the further confusions happening.

[SidharthBansal]

#4148 created. I hope now we can create the modal easily.

[jonxuxu]

Hi, I've gotten the icons to appear and moved the login within a modal. The email login is also toggle-able with the email button.

[SidharthBansal]

I think it will be better to show the text instead of icon. Icon seems confusing to me.

Well done!!!
Can you tell the PR number?

[jonxuxu]

It's #4133 . I believe @jywarren requested for an icon, so I changed my original button to that.

[SidharthBansal]

I think you misspelled the pr number. OK. Changes look awesome to me.

[jywarren]

I think the icon looks good as "one mode of logging in" but perhaps some extra explanatory text would help -- something like this -- and maybe we should still say OR but it could be between the buttons? Click to log in with one of these methods: [1] [2] [3] or [email] What do you think? It's really helpful to see the gif, thank you!

…

On Thu, Dec 6, 2018 at 2:52 PM Jonathan Xu ***@***.***> wrote: It's #4113 <#4113> . I believe @jywarren <https://github.com/jywarren> requested for an icon, so I changed my original button to that. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#2866 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AABfJ4VC6e_VL-2KWV3f-NrU5GbuOPFbks5u2XVMgaJpZM4UvTee> .

[SidharthBansal]

Yeah, we can write email below the icon and have OR between them.
Great idea Jeff.

[jonxuxu]

How's this?

[SidharthBansal]

Place OR between social media icons and Login with email

[jywarren]

This looks great. I have a slight preference for the bootstrap "btn-default" style, which is black text on a white button with grey outline, but i'm not super intense about it! :-)

…

On Thu, Dec 6, 2018 at 3:15 PM Sidharth Bansal ***@***.***> wrote: Place OR between social media icons and Login with email — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#2866 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AABfJ2y7TAPXfFRxj0dwC4g09BTGKgF-ks5u2XrcgaJpZM4UvTee> .

[SidharthBansal]

@JonathanXu1 please continue the conversation in the PR, instead of issue.

[jonxuxu]

Alright, I'll post new screenshots there.

[jonxuxu]

Here it is: :)

I've submitted the task on codein

[jywarren]

Ah super - but sorry, i had meant to leave the text inputs visible as you'd originally done -- thank you! And could you add 20px padding on the bottom of the modal? It's a bit squished. Is it just me, or is the modal not quite centered, too? This is looking tremendous!!! Thanks for your excellent work!

…

On Fri, Dec 7, 2018 at 2:27 PM Jonathan Xu ***@***.***> wrote: Here it is: :) [image: image] <https://user-images.githubusercontent.com/22998430/49668449-1c979000-fa2c-11e8-8fa5-943cd3261f03.png> I've submitted the task on codein — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#2866 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AABfJweZZFuS9viuGz9P5SAnQF1lrwL4ks5u2sD2gaJpZM4UvTee> .

[SidharthBansal]

I agree the modal needs to be centered on the screen. On Sat, Dec 8, 2018, 12:59 AM Jeffrey Warren <notifications@github.com wrote:

…

Ah super - but sorry, i had meant to leave the text inputs visible as you'd originally done -- thank you! And could you add 20px padding on the bottom of the modal? It's a bit squished. Is it just me, or is the modal not quite centered, too? This is looking tremendous!!! Thanks for your excellent work! On Fri, Dec 7, 2018 at 2:27 PM Jonathan Xu ***@***.***> wrote: > Here it is: :) > [image: image] > < https://user-images.githubusercontent.com/22998430/49668449-1c979000-fa2c-11e8-8fa5-943cd3261f03.png > > I've submitted the task on codein > > — > You are receiving this because you were mentioned. > Reply to this email directly, view it on GitHub > <#2866 (comment) >, > or mute the thread > < https://github.com/notifications/unsubscribe-auth/AABfJweZZFuS9viuGz9P5SAnQF1lrwL4ks5u2sD2gaJpZM4UvTee > > . > — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#2866 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AUACQ_-LIdIgDwuuRRPMN23sLTXrcYuyks5u2sGxgaJpZM4UvTee> .

[jonxuxu]

I believe the slight off-center horizontally is because of the styling of the internal login partial. There's an offset and some padding I believe. I'll look into it.

[SidharthBansal]

ok great! I was referring to centring the modal on the screen. Modal is aligned to the top. We need it to be centered.

…

On Sat, Dec 8, 2018 at 1:19 AM Jonathan Xu ***@***.***> wrote: I believe the slight off-center horizontally is because of the styling of the internal login partial. There's an offset and some padding I believe. I'll look into it. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#2866 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AUACQ9UEdJtdJn57zk5AAh7obYujZDJ6ks5u2sZEgaJpZM4UvTee> .

[SidharthBansal]

Moved to #4173