Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

auth: Style the GitHub auth email selection page. 

I added the `white-box` as it was in the other similar pages
(`/accounts/go`).

In order to be able to style it better, I removed the buttons and added
`div`s instead, then added click handler for submitting the form.

If the email is associated to a Zulip account, the avatar of the account
is displayed and the text `Log in`, otherwize a `+` sign is
displayed and the text `Create new account`.
This commit is contained in:
Alexandra Ciobica 2019-08-03 12:01:07 +02:00 committed by Tim Abbott
parent e5e45c9a25
commit eb6c5e1962
3 changed files with 104 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
static/js/portico/signup.js
View File

@ -214,4 +214,9 @@ $(function () {
clearTimeout(timer);
timer = setTimeout(check_subdomain_avilable, 250, $('#id_team_subdomain').val());
});
// GitHub auth
$("body").on("click", "#choose_email .choose-email-box", function () {
this.parentNode.submit();
});
});

73
static/styles/portico/portico-signin.scss
View File

@ -31,6 +31,15 @@ html {
margin-top: 20px;
font-weight: 500;
font-size: 0.9em;
a {
color: hsl(164, 100%, 23%);
&:hover {
text-decoration: none;
color: hsl(156, 62%, 61%);
}
}
}
.grey {
@ -1088,26 +1097,62 @@ button.login-social-button:active {
#choose_email {
flex-direction: column;
.white-box {
min-width: 450px;
padding: 30px 0 50px 0;
}
form {
padding: 0;
margin: 0;
&.form-horizontal:hover {
background-color: hsl(202, 56%, 91%);
cursor: pointer;
i.fa {
color: hsl(203, 63%, 76%);
}
}
}
button {
color: hsl(0, 0%, 0%);
background-color: hsl(0, 0%, 100%);
width: 100%;
margin-top: 15px;
border: 1px solid hsl(0, 0%, 80%);
border-radius: 4px;
}
.choose-email-box {
padding: 13px 0;
margin: 0 30px;
border-bottom: 1px solid hsl(0, 0%, 95%);
display: flex;
align-items: center;
button:hover {
border-color: hsl(0, 0%, 0%);
}
p {
margin: 0;
font-size: 0.8em;
button:active {
border-color: hsl(0, 0%, 60%);
background-color: hsl(0, 0%, 95%);
&:last-child {
line-height: 1.2em;
}
}
.email {
font-size: 0.95em;
font-weight: 500;
}
img,
i {
width: 35px;
height: 35px;
margin-right: 10px;
border-radius: 3px;
}
i.fa {
color: hsl(0, 0%, 67%);
text-align: center;
line-height: 38px;
&::before {
font-size: 30px;
}
}
}
}

51
templates/zerver/social_auth_select_email.html
View File

@ -8,28 +8,57 @@
{% endtrans %}
</div>
<div>
<div class="white-box">
<form method="post" class="form-horizontal" action="/complete/{{ backend }}/">
<div class='choose-email-box'>
<div class="choose-email-box">
<input type="hidden" name="email" value="{{ primary_email }}" />
<button type="submit" >
{{ primary_email }}
</button>
{% if avatar_urls[primary_email] %}
<img src="{{ avatar_urls[primary_email] }}" alt=""/>
{% else %}
<i class="fa fa-plus" aria-hidden="true"></i>
{% endif %}
<div>
<p class="email">
{{ primary_email }}
</p>
<p>
GitHub primary
{% if avatar_urls[primary_email] %}
- Log in
{% else %}
- Create new account
{% endif %}
</p>
</div>
</div>
</form>
{% for email in verified_non_primary_emails %}
<form method="post" class="form-horizontal" action="/complete/{{ backend }}/">
<div class='choose-email-box'>
<div class="choose-email-box">
<input type="hidden" name="email" value="{{ email }}" />
<button type="submit" >
{{ email }}
</button>
{% if avatar_urls[email] %}
<img src="{{ avatar_urls[email] }}" alt="" class="no-drag"/>
{% else %}
<i class="fa fa-plus" aria-hidden="true"></i>
{% endif %}
<div>
<p class="email">
{{ email }}
</p>
<p>
{% if avatar_urls[email] %}
Log in
{% else %}
Create new account
{% endif %}
</p>
</div>
</div>
</form>
{% endfor %}
</div>
<div class="bottom-text">
<p class="bottom-text">
Only verified GitHub email addresses are listed.
</div>
</p>
</div>
{% endblock %}