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

Redesign login and registration pages. 

This completes a major redesign of the Zulip login and registration
pages, making them look much more slick and modern.

Major features include:
* Display of the realm name, description and icon on the login page
  and registration pages in the subdomains case.
* Much slicker looking buttons and input fields.
* A new overall style for the exterior of these portico pages.
This commit is contained in:
Brock Whittaker 2017-04-20 12:02:56 -07:00 committed by Tim Abbott
parent 6e512dddcb
commit 7afbc9ddd6
17 changed files with 1115 additions and 226 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend_tests/casper_lib/common.js
View File

@ -113,7 +113,7 @@ exports.then_log_out = function () {
});
});
casper.waitUntilVisible(".login-page-header", function () {
casper.waitUntilVisible(".login-page-container", function () {
casper.test.assertUrlMatch(/accounts\/login\/$/);
casper.test.info("Logged out");
});

775
static/styles/portico-signin.css Normal file
View File

@ -0,0 +1,775 @@
html {
min-height: 500px;
}
.app-main .bg-image {
position: fixed;
top: 0px;
left: 0px;
width: 100vw;
height: 100vh;
background-color: #fafafa;
z-index: -1;
}
.flex {
display: flex;
height: calc(100vh - 100px);
align-items: center;
justify-content: center;
}
.flex.full-page {
min-height: calc(100vh - 170px);
height: auto;
}
.m-10 {
margin: 10px;
}
.login-page-container,
.register-page-container,
.find-team-page-container,
.forgot-password-container,
#registration {
position: relative;
padding: 30px;
min-width: 0px;
background-color: #fff;
box-shadow: 0px 0px 100px rgba(0,0,0,0.2);
}
.find-team-page-container #find_my_team i {
font-size: 0.8em;
}
.login-page-container .group {
margin: 0px 20px;
display: inline-block;
}
.app-main .login-page-header {
font-size: 1.5em;
font-weight: 300;
margin: 0px;
height: 0px;
}
.login-page-container.dev-login {
margin-top: 20px;
border: none;
}
.login-page-container.dev-login .login-form {
width: auto;
}
.new-style .login-page-container .alert {
margin: 0;
text-align: left;
font-size: 0.7em;
font-weight: 600;
}
.app-main .login-page-header {
font-size: 1.5em;
font-weight: 300;
margin-top: 0px;
transform: translateX(-15px) translateY(-60px);
text-align: left;
}
.app-main .login-page-container.dev-login .login-page-header {
height: auto;
margin-top: 20px;
transform: none;
text-align: center;
}
.app-main .login-page-container.dev-login h2 {
font-size: 1em;
font-weight: 500;
}
.app-main .login-page-container .group {
display: inline-block;
vertical-align: top;
margin: 0px 20px;
}
.app-main.forgot-password-container {
font-weight: 400;
}
.app-main.find-team-page-container {
width: 456px;
font-weight: 400;
}
.find-team-page-container h3,
.forgot-password-container h3 {
margin-top: 0px;
font-weight: 300;
font-size: 2em;
}
.forgot-password-container h3 {
margin-bottom: 0px;
}
.forgot-password-container {
width: 503px;
margin-top: calc(50vh - 150px);
}
.forgot-password-container form {
margin-bottom: 0px;
}
.header {
padding: 15px 0px 15px 0px;
}
.header,
.header .stripes,
.header .darker {
background: #fff;
color: #444;
}
.header .top-links a,
.header .header-main .logo span {
color: #444;
}
.header .header-main .logo .brand-logo circle {
fill: #444 !important;
}
.header .header-main .logo .brand-logo path {
fill: #fff !important;
stroke: #fff !important;
}
.new-style {
-webkit-font-smoothing: antialiased;
}
.register-form.new-style {
text-align: left;
}
.register-form #errors {
font-size: 0.8em;
font-weight: 500;
margin-bottom: 20px;
margin-top: 10px;
}
.register-form #errors:empty {
margin-top: 0px;
}
.register-account .terms-of-service .input-group {
margin: 0px 0px 10px 10px;
}
.register-account .terms-of-service .submit-button-box button {
margin-top: 0px;
}
.relative {
position: relative;
}
.new-style .input-box {
position: relative;
display: inline-block;
vertical-align: top;
}
#login_form .input-box {
display: block;
}
.new-style .form-inline {
margin: 0px;
}
.new-style button {
display: inline-block;
vertical-align: top;
margin-top: 20px;
}
.new-style button.full-width {
width: 100%;
}
.register-form button {
margin-top: 25px;
}
.new-style .alert {
padding: 0;
margin-bottom: 0;
font-weight: 500;
font-size: 0.8em;
line-height: 1.2;
background-color: transparent;
border: none;
color: rgb(190, 88, 88);
}
.new-style .right-side .alert {
max-width: 328px;
}
.new-style .input-box input[type=text],
.new-style .input-box input[type=email],
.new-style .input-box input[type=password] {
padding: 13px 32px 11px 12px;
margin-top: 25px;
font-family: "Humbug";
font-size: 1.2rem;
width: 280px;
border: 2px solid #ddd;
box-shadow: none;
border-radius: 0px;
transition: border 0.3s ease;
}
.new-style .input-box label {
position: absolute;
top: 0px;
left: 0%;
margin-top: 5px;
transition: all 0.3s ease;
}
.new-style .input-box.moving-label input[type=text]:invalid + label,
.new-style .input-box.moving-label input[type=email]:invalid + label,
.new-style .input-box.moving-label input[type=password]:invalid + label {
left: 50%;
transform: translateY(35px) translateX(-50%);
font-size: 1.2rem;
font-weight: 500;
color: #aaa;
pointer-events: none;
}
.new-style .input-box input[type=text]:focus:invalid,
.new-style .input-box input[type=email]:focus:invalid,
.new-style .input-box input[type=password]:focus:invalid {
box-shadow: none;
color: #444;
}
.new-style .input-box input[type=text]:focus,
.new-style .input-box input[type=email]:focus,
.new-style .input-box input[type=password]:focus {
border: 2px solid #888;
}
.new-style .input-box input[required] ~ .required:after {
/* content: "*"; */
position: absolute;
top: 25px;
right: 5px;
transform: translateY(8px);
color: #d66a6a;
font-size: 2em;
font-weight: 300;
transition: all 0.3s ease;
}
.new-style .input-box.no-validation input[required] ~ .required:after {
visibility: hidden;
}
.new-style .input-box.horizontal button {
margin-top: 25px;
}
.new-style .input-box input[required]:valid ~ .required:after {
transform: translateY(0px);
opacity: 0;
}
.new-style .input-box input[required] ~ .valid {
position: absolute;
top: 42px;
right: 15px;
width: 15px;
transform: translateX(10px);
opacity: 0;
transition: all 0.3s ease;
}
.new-style .input-box input[required]:valid ~ .valid {
opacity: 1;
transform: translateX(0);
}
.new-style .input-box label,
.new-style .input-box input[type=text]:focus + label,
.new-style .input-box input[type=email]:focus + label,
.new-style .input-box input[type=password]:focus + label,
.new-style .input-box input[type=text]:valid + label,
.new-style .input-box input[type=email]:valid + label,
.new-style .input-box input[type=password]:valid + label {
left: 0px;
transform: translateY(-0px) translateX(0px);
pointer-events: auto;
font-size: 1rem;
font-weight: 600;
color: #444;
}
.new-style .input-box .text-error {
display: block;
top: 66px;
left: -4px;
color: #d26666;
font-size: 0.7em;
font-weight: 600;
padding-left: 0px;
}
.new-style .get-started {
height: 0px;
margin: 0px;
font-size: 2.5rem;
text-align: center;
color: #666;
transform: translateY(-90px);
}
.new-style button {
display: inline-block;
vertical-align: top;
padding: 15px 22px 13px 22px;
font-family: "Humbug";
font-size: 1.2rem;
font-weight: 400;
box-sizing: border-box;
outline: none;
color: #fff;
background-color: #313e4e;
border: none;
transition: all 0.3s ease;
}
.new-style button:hover {
background-color: #354c69;
}
.new-style button:active {
background-color: #1d2734;
}
/* -- /accounts/register/ page -- */
.portico-page .pitch h1 {
margin-bottom: 0px;
}
.portico-page .pitch p {
font-weight: 400;
color: #aaa;
}
.register-account .pitch {
margin-bottom: 5px;
text-align: center;
}
.login-page-container input[type=submit] {
color: #aaa;
border: 2px solid #ddd;
border-radius: 0px;
background: transparent;
transition: color 0.3s ease, border 0.3s ease;
}
.login-page-container input[type=submit]:hover {
border-color: #888;
color: #444;
}
.login-page-container input[type=submit].btn-admin {
border-color: #54b8a7;
color: #54b8a7;
}
.login-page-container input[type=submit].btn-admin:hover {
color: #60daaa;
border-color: #60daaa;
}
.split-view .org-header {
text-align: left;
}
.split-view .right-side .form-inline {
width: 328px;
}
.split-view .org-header .avatar,
.register-page-container .org-header .avatar {
display: inline-block;
vertical-align: top;
width: 100px;
height: 100px;
background-color: #444;
box-shadow: 0px 0px 5px rgba(0,0,0,0.15);
}
.split-view .org-header .info-box {
display: inline-block;
position: relative;
margin: 15px 0px 0px 20px;
width: calc(100% - 125px);
/* full width minus the avatar + padding + borders */
text-align: left;
}
.split-view .info-box .organization-name,
.split-view .info-box .organization-path {
max-width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.split-view .info-box .organization-name {
font-size: 2.5em;
font-weight: 300;
line-height: 1;
}
.split-view .info-box .organization-path {
font-weight: 500;
color: #aaa;
margin-top: 10px;
}
.register-page-container .lead,
.login-page-container .lead,
.forgot-password-container .lead {
margin: 0;
text-align: left;
}
.portico-page .or {
width: 328px;
display: block;
margin: 0 auto;
color: #bbb;
font-weight: 600;
text-align: center;
text-transform: uppercase;
}
.portico-page .or::before,
.portico-page .or::after {
content: " ";
display: inline-block;
position: relative;
width: calc(149px);
top: -3px;
border-bottom: 2px solid #ddd;
}
.portico-page .or::before {
left: -5px;
}
.portico-page .or::after {
left: 5px;
}
.login-google {
margin-top: 10px;
margin-bottom: 10px;
}
button.login-google-button,
button.login-github-button {
width: 328px;
padding-left: 35px;
background-size: auto 60%;
background-repeat: no-repeat;
background-position: 13px 50%;
margin-left: 0px;
margin-top: 0px;
color: #fff;
}
button.login-google-button,
button.login-github-button {
background-color: #fff;
box-shadow: 0px 1px 3px rgba(0,0,0,0.3), 0px 0px 5px rgba(0,0,0,0.1);
color: #888;
}
button.login-google-button:hover,
button.login-github-button:hover {
background-color: #fafafa;
box-shadow: 1px 2px 5px rgba(0,0,0,0.2);
}
button.login-google-button:active,
button.login-github-button:active {
background-color: #eee;
box-shadow: 0px 1px 1px rgba(0,0,0,0.3);
}
button.login-google-button {
background-image: url(/static/images/landing-page/logos/google-icon.png);
}
.github-wrapper:before {
content: "\f09b";
position: absolute;
font-family: "FontAwesome";
font-size: 2rem;
color: #333;
transform: translateX(15px) translateY(13px);
}
.login-page-container .right-side .actions {
margin: 20px 0px 0px;
text-align: left;
}
.split-view .actions a {
color: #54b8a7;
text-decoration: none;
font-weight: 600;
font-size: 0.8em;
line-height: 1.5;
vertical-align: top;
transition: color 0.2s ease;
}
.split-view .actions a:hover {
color: #60daaa;
}
#registration .input-box {
margin: 10px;
}
#registration {
width: 700px;
}
#registration .input-box.full-width {
width: calc(100% - 20px);
}
#registration .help-box {
width: calc(100% - 20px);
max-width: none;
margin: 0px;
}
#registration .help-box.margin-top {
margin-top: 20px;
}
#registration .external-host {
margin: 25px 0px 0px -3px;
padding: 11.5px 10px;
font-weight: 400;
font-size: 1.2rem;
background-color: #ddd;
}
#registration .center-block .pitch {
margin-bottom: 0px;
}
#registration .input-group label {
font-size: 1rem;
}
#registration .input-group.radio {
margin: 0;
padding: 0;
}
#registration .input-group label.inline-block {
margin-top: -1px;
}
.split-view .right-side,
.split-view .left-side {
display: inline-block;
vertical-align: top;
}
.split-view .left-side {
width: 500px;
border-right: 1px solid #eee;
}
.split-view .left-side + .right-side {
border-left: 1px solid #eee;
/* this is to make sure the borders of the left and right side overlap
each other. */
padding-left: 15px;
margin-left: -5px;
}
.split-view .left-side .description {
text-align: left;
font-weight: normal;
margin-top: 20px;
margin-right: 10px;
}
@media (max-width: 950px) {
.split-view .left-side {
width: 400px;
}
}
@media (max-width: 850px) {
.split-view .left-side {
width: 350px;
}
}
@media (max-width: 795px) {
.register-account #registration {
padding: 10px;
width: calc(350px);
}
.register-page-container,
.login-page-container {
width: 400px;
margin-top: 50px;
}
.split-view .org-header .avatar {
width: 50px;
height: 50px;
}
.split-view .org-header .info-box {
margin-top: 0px;
}
.split-view .org-header .info-box .organization-name {
font-size: 2em;
}
.split-view .org-header .info-box .organization-path {
margin-top: 0px;
}
.split-view .left-side,
.split-view .right-side {
display: block;
margin: 0 auto !important;
max-width: 100%;
}
.split-view .left-side + .right-side {
border-left: none;
padding: 0;
margin: 0 auto;
}
.split-view .left-side {
border: none;
margin-right: 0px;
min-height: 0px;
margin-bottom: 20px;
width: 324px;
}
.split-view .left-side .description {
margin: 20px 0px;
}
.split-view .right-side {
width: 324px;
}
.new-style .get-started {
transform: translateY(-70px);
}
}
@media (max-width: 500px) {
.flex.full-page {
margin: 20px 0px;
}
.new-style .get-started {
font-size: 1.6em;
}
.app-main.register-page-container,
.app-main.login-page-container,
.app-main.find-team-page-container,
.app-main.forgot-password-container {
display: inline-block;
padding: 20px;
width: calc(100% - 40px);
}
.forgot-password-container form .input-box {
text-align: center;
}
.forgot-password-container form button {
width: 328px;
}
}

36
static/styles/portico.css
View File

@ -187,7 +187,7 @@ body {
color: #444;
border-width: order: 1px solid #CCC;
border: 1px solid #ddd;
border-radius: 4px;
background-color: #FAFAFA;
}
@ -278,6 +278,12 @@ img.screenshot {
width: 220px;
}
#registration #pw_strength {
width: 325px;
height: 8px;
margin: -5px 0 0 0;
}
.def:before {
content: " - ";
}
@ -568,32 +574,34 @@ a.bottom-signup-button {
margin-bottom: -54px;
}
.portico-page {
/* height of the white portico navbar */
min-height: calc(100% - 59px);
}
.signup-signature {
margin-top: 20px;
padding-bottom: 50px;
}
.devlogin_subheader {
margin-top: -30px;
margin-top: 10px;
margin-bottom: 20px;
padding-top: 0px;
text-align: center;
font-size: 16px;
}
.login-page-container,
.terms-page-container,
.feature-page-container,
.apps-page-container,
.integrations-page-container,
.register-page-container,
.portico-page-container,
.api-page-container {
padding-top: 50px !important;
}
.portico-page-container,
.register-page-container {
.portico-page-container {
padding-top: 0px !important;
}
@ -737,7 +745,6 @@ a.bottom-signup-button {
.authors-page-header,
.feature-page-header,
.integrations-page-header,
.login-page-header,
.register-page-header {
font-weight: 300;
font-size: 40px;
@ -858,6 +865,10 @@ a.bottom-signup-button {
width: auto;
}
.login-page {
text-align: center;
}
.login-page .alert {
width: 320px;
margin: auto;
@ -868,7 +879,9 @@ a.bottom-signup-button {
.login-form {
margin: auto;
width: 300px;
/* plus input padding. */
width: calc(300px + 28px);
margin-bottom: 10px;
}
.register-form {
@ -901,11 +914,6 @@ input.new-organization-button {
margin-bottom: 6px;
}
.login-form #id_username,
.login-form #id_password {
width: 100%;
}
.login-form .control-group,
.register-form .control-group {
margin-right: 10px;
@ -927,7 +935,7 @@ input.new-organization-button {
min-width: 300px;
margin: auto;
text-align: center;
margin-top: 30px;
margin-top: 20px;
}
.login-google-button,

49
templates/zerver/accounts_home.html
View File

@ -9,21 +9,43 @@ $(function () {
autofocus('#email');
});
</script>
<div class="app register-page">
<div class="bg-image"></div>
<div class="app register-page split-view flex full-page">
<div class="app-main register-page-container">
<div class="center-container">
<div class="center-block">
<div class="register-form">
<p class="lead">
<div class="register-page-header">{{ _("Let's get started") }}…</div>
</p>
<div class="register-form new-style">
<div class="lead">
<h1 class="get-started">{{ _("Sign up for Zulip") }}</h1>
</div>
{% if realm_name %}
<div class="left-side">
<div class="org-header">
<div class="avatar" style="background-image: url('{{ realm_icon }}')"></div>
<div class="info-box">
<div class="organization-name">{{ realm_name }}</div>
<div class="organization-path">{{ realm_uri }}</div>
</div>
</div>
<div class="description">
{{ realm_description }}
</div>
</div>
{% endif %}
<div class="right-side">
<form class="form-inline" id="send_confirm" name="email_form"
action="{{ current_url() }}" method="post">
{{ csrf_input }}
<input type="text" class="email required" placeholder="{{ _("Enter your work email address") }}"
id="email" name="email"/>
<input type="submit" class="button btn btn-primary btn-large register-button" value="{{ _("Sign up") }}"/>
<div class="input-box no-validate">
<input type="email" id="email" class="email" name="email" value="" required />
<label>Email</label>
<div class="required"></div>
<img class="valid" src="/static/images/checkbox-valid.svg" />
</div>
<button class="full-width" type="submit" name="">{{ _('Sign up') }}</button>
</form>
<div id="errors"></div>
{% if form.email.errors %}
{% for error in form.email.errors %}
@ -35,14 +57,17 @@ $(function () {
company email address to sign up. Otherwise, we won’t be able to
connect you with your coworkers.{% endtrans %}</div>
{% if google_auth_enabled %}
<div class="or">or</div>
<div class="register-google">
<a href="{{ url('zerver.views.auth.start_google_oauth2') }}" class="zocial google register-google-button">{{ _("Sign up with Google") }}</a>
<a href="{{ url('zerver.views.auth.start_google_oauth2') }}">
<button class="login-google-button full-width">{{ _('Sign up with Google') }}</button>
</a>
</div>
{% endif %}
</div>
</div>
</div>
</div>
<div class="footer-padder"></div>
</div>

23
templates/zerver/create_realm.html
View File

@ -10,19 +10,28 @@ $(function () {
});
</script>
<div class="app register-page">
<div class="app-main register-page-container">
<div class="app register-page flex">
<div class="app-main register-page-container new-style">
<div class="bg-image"></div>
<div class="register-form">
<p class="lead">
<div class="register-page-header">{{ _("Let's get started") }}…</div>
</p>
<div class="lead">
<h1 class="get-started">{{ _("Create your Zulip Organization") }}</h1>
</div>
<form class="form-inline" id="send_confirm" name="email_form"
action="{{ current_url() }}" method="post">
{{ csrf_input }}
<div class="input-box horizontal">
<div class="inline-block relative">
<input type="text" class="email required" placeholder="{{ _("Enter your work email address") }}"
id="email" name="email"/>
<input type="submit" class="new-organization-button btn btn-primary btn-large register-button" value="{{ _("Create organization") }}"/>
id="email" name="email" required />
<label for="id_username">{{ _('Email') }}</label>
<div class="required"></div>
<img class="valid" src="/static/images/checkbox-valid.svg" />
</div>
<button type="submit" class="new-organization-button register-button">{{ _("Create organization") }}</button>
</div>
</form>
<div id="errors"></div>
{% if form.email.errors %}

18
templates/zerver/dev_login.html
View File

@ -2,8 +2,10 @@
{# Login page. #}
{% block portico_content %}
<div class="app login-page">
<div class="app-main login-page-container">
<div class="app login-page flex full-page">
<div class="app-main login-page-container dev-login">
<div class="bg-image"></div>
<h4 class="login-page-header">{{ _('Click on a user to log in!') }}</h4>
<p class="devlogin_subheader">{{ _('(Or visit the <a href="/login">normal login page</a>)') }}</p>
<form name="direct_login_form" id="direct_login_form" method="post" class="login-form"
@ -11,22 +13,28 @@
{{ csrf_input }}
<div class="control-group">
<div class="controls">
<p>{{ _('Administrators') }}</p>
<div class="group">
<h2>{{ _('Administrators') }}</h2>
{% for user_email in direct_admins %}
<p><input type="submit" name="direct_email" class="btn-direct btn-admin" value="{{ user_email }}" /></p>
{% endfor %}
</div>
<p>{{ _('Normal users') }}</p>
<div class="group">
<h2>{{ _('Normal users') }}</h2>
{% for user_email in direct_users %}
<p><input type="submit" name="direct_email" class="btn-direct btn-user" value="{{ user_email }}" /></p>
{% endfor %}
</div>
<p>{{ _('Community users') }}</p>
<div class="group">
<h2>{{ _('Community users') }}</h2>
{% for user_email in community_users %}
<p><input type="submit" name="direct_email" class="btn-direct btn-user" value="{{ user_email }}" /></p>
{% endfor %}
</div>
</div>
</div>
</form>
</div>
</div>

24
templates/zerver/find_my_team.html
View File

@ -1,11 +1,11 @@
{% extends "zerver/portico.html" %}
{% block portico_content %}
<div class="app find-team-page">
<div class="app-main find-team-page-container">
<p class="lead">
<h3 class="find-team-page-header">{{ _("Find your team") }}…</h3>
</p>
<div class="bg-image"></div>
<div class="app find-team-page flex full-page">
<div class="app-main find-team-page-container new-style">
<h3 class="get-started">{{ _("Find your team") }}…</h3>
{% if emails %}
<div id="results">
<p>
@ -36,10 +36,15 @@
<form class="form-inline" id="find_my_team" name="email_form"
action="{{ current_url() }}" method="post">
{{ csrf_input }}
<input type="text" class="form-control required" autofocus
placeholder="{{ _("Enter email addresses") }}"
id="emails" name="emails"/>
<button type="submit" class="btn btn-primary">{{ _('Find team') }}</button>
<div class="input-box moving-label horizontal">
<div class="inline-block relative">
<input type="text" autofocus id="emails" name="emails" required />
<label for="id_username">{{ _('Email addresses') }}</label>
<div class="required"></div>
<img class="valid" src="/static/images/checkbox-valid.svg" />
</div>
<button type="submit">{{ _('Find team') }}</button>
</div>
<div><i>{{ form.emails.help_text }}</i></div>
</form>
<div id="errors"></div>
@ -51,6 +56,5 @@
</div>
{% endif %}
</div>
<div class="footer-padder"></div>
</div>
{% endblock %}

129
templates/zerver/login.html
View File

@ -1,5 +1,4 @@
{% extends "zerver/portico.html" %}
{# Login page. #}
{% block customhead %}
@ -27,6 +26,9 @@
{% block portico_content %}
<div class="bg-image"></div>
{% if password_auth_enabled %}
<script type="text/javascript">
{% if email %}
@ -38,31 +40,71 @@ autofocus('#id_username');
{% endif %}
<div class="app login-page">
<div class="app-main login-page-container">
<h3 class="login-page-header">{{ _('You look familiar.') }}</h3>
{% if only_sso %}
<div class="app login-page split-view new-style flex full-page">
<div class="app-main login-page-container inline-block">
<div class="lead">
<h1 class="get-started">{{ _("Sign in to Zulip") }}</h1>
</div>
{% if only_sso %}
{# SSO users don't have a password. #}
<div class="login-sso">
<a href="/accounts/login/sso" class="btn btn-large btn-primary">{{ _('Sign in with SSO') }}</a>
</div>
{% else %}
{# Non-SSO users. #}
{% else %}
{# Non-SSO users. #}
{% if form.errors %}
<div class="alert alert-error">
{% if realm_name %}
<div class="left-side">
<div class="org-header">
<div class="avatar" style="background-image: url('{{ realm_icon }}')"></div>
<div class="info-box">
<div class="organization-name">{{ realm_name }}</div>
<div class="organization-path">{{ realm_uri }}</div>
</div>
</div>
<div class="description">
{{ realm_description }}
</div>
</div>
{% endif %}
<div class="right-side">
{% if password_auth_enabled %}
<form name="login_form" id="login_form" method="post" class="login-form"
action="{{ url('django.contrib.auth.views.login') }}?next={{ next }}">
{{ csrf_input }}
<!-- .no-validation is for removing the red star in CSS -->
<div class="input-box no-validation">
<input id="id_username" type="email" name="username" class="email required"
{% if email %} value="{{ email }}" {% else %} value="" {% endif %}
maxlength="72" required />
<label for="id_username">{{ _('Email') }}</label>
<div class="required"></div>
<img class="valid" src="/static/images/checkbox-valid.svg" />
</div>
<div class="input-box no-validation">
<input id="id_password" name="password" class="required" type="password" required />
<label for="id_password" class="control-label">{{ _('Password') }}</label>
<div class="required"></div>
<img class="valid" src="/static/images/checkbox-valid.svg" />
</div>
{% if form.errors %}
<div class="alert alert-error">
{% for error in form.errors.values() %}
<div>{{ error | striptags }}</div>
{% endfor %}
</div>
{% endif %}
</div>
{% endif %}
{% if email %}
<div class="alert">
{{ _("You've already registered with this email address. Please log in below.") }}
{{ _("You've already registered with this email address. Please sign in below.") }}
</div>
{% endif %}
@ -72,61 +114,42 @@ autofocus('#id_username');
</div>
{% endif %}
{% if password_auth_enabled %}
<form name="login_form" id="login_form" method="post" class="login-form"
action="{{ url('django.contrib.auth.views.login') }}?next={{ next }}"
>
{{ csrf_input }}
<div class="control-group">
<label for="id_username" class="control-label">{{ _('Email') }}</label>
<div class="controls">
<input id="id_username" type="email" name="username"
class="email required"
{% if email %}
value="{{ email }}"
{% else %}
value=""
{% endif %}
maxlength="72" />
</div>
</div>
<div class="control-group">
<label for="id_password" class="control-label">{{ _('Password') }}</label>
<div class="controls">
<input id="id_password" name="password" class="required" type="password" />
</div>
</div>
<div class="control-group">
<div class="controls">
<input type="submit" class="btn btn-large btn-primary" value="Log in" />
<span class="login-forgot-password">
<a href="{{ url('django.contrib.auth.views.password_reset') }}">{{ _('Forgot password?') }}</a>
</span>
</div>
</div>
<button type="submit" name="button" class="full-width">{{ _("Sign in") }}</button>
</form>
{% endif %}
{% if any_oauth_backend_enabled %}
<div class="or">or</div>
{% endif %}
{% if google_auth_enabled %}
<div class="login-google">
or <a href="{{ url('zerver.views.auth.start_google_oauth2') }}" class="login-google-button zocial google">{{ _('Sign in with Google') }}</a>
<a href="{{ url('zerver.views.auth.start_google_oauth2') }}">
<button class="login-google-button">{{ _('Sign in with Google') }}</button>
</a>
</div>
{% endif %}
{% if github_auth_enabled %}
<div class="login-github">
or <a href="{{ url('login-social', args=('github',)) }}" class="login-github-button zocial github">
<a href="{{ url('login-social', args=('github',)) }}" class="github-wrapper">
<button class="login-github-button github">
<span>{{ _('Sign in with GitHub') }}</span>
</button>
</a>
</div>
{% endif %}
{% endif %}
</div>
<div class="footer-padder"></div>
<div class="actions">
<a class="forgot-password" href="/accounts/password/reset/">Forgot your password?</a>
{% if not register_link_disabled %}
<a class="register-link float-right" href="/register/">Register</a>
{% endif %}
</div>
</div>
{% endif %}
</div>
<div class="footer-padder"></div>
</div>
<script type="text/javascript">
if (window.location.hash.substring(0, 1) === "#") {

74
templates/zerver/register.html
View File

@ -12,8 +12,9 @@ Form is validated both client-side using jquery-validate (see signup.js) and ser
{% endblock %}
{% block portico_content %}
<div class="center-container">
<div class="center-block" style="padding: 20px 0px">
<div class="center-container register-account">
<div class="bg-image"></div>
<div class="center-block new-style" style="padding: 20px 0px">
<div class="pitch">
{% trans %}
<h1>You're almost there.</h1>
@ -25,40 +26,48 @@ Form is validated both client-side using jquery-validate (see signup.js) and ser
<form method="post" class="form-horizontal" id="registration" action="{{ url('zerver.views.registration.accounts_register') }}">
{{ csrf_input }}
<div class="input-group grid">
<label for="id_email" class="inline-block label-title">{{ _('Email') }}</label>
<div class="input-box no-validation">
<input type='hidden' name='key' value='{{ key }}' />
<input id="id_email" type='text' disabled="true" placeholder="{{ email }}" />
<input id="id_email" type='text' disabled="true" placeholder="{{ email }}" required />
<label for="id_email" class="inline-block label-title">{{ _('Email') }}</label>
<div class="required"></div>
<img class="valid" src="/static/images/checkbox-valid.svg" />
</div>
<div class="input-group grid">
<label for="id_full_name" class="inline-block label-title">{{ _('Full name') }}</label>
<div class="input-box">
{% if lock_name %}
<p class="fakecontrol">{{ full_name }}</p>
{% else %}
<input id="id_full_name" class="required" type="text" name="full_name" placeholder='{{ "Wile E. Coyote" }}'
<input id="id_full_name" class="required" type="text" name="full_name"
value="{% if full_name %}{{ full_name }}{% elif form.full_name.value() %}{{ form.full_name.value() }}{% endif %}"
maxlength={{ MAX_NAME_LENGTH}} />
maxlength={{ MAX_NAME_LENGTH }} required />
{% if form.full_name.errors %}
{% for error in form.full_name.errors %}
<div class="help-inline text-error">{{ error }}</div>
{% endfor %}
{% endif %}
{% endif %}
<label for="id_full_name" class="inline-block label-title">{{ _('Full name') }}</label>
<div class="required"></div>
<img class="valid" src="/static/images/checkbox-valid.svg" />
</div>
<div class="input-box full-width">
<div class="help-box">
{{ _('Zulip has full unicode support, so you can spell your name exactly how you want it to appear.') }}
</div>
</div>
{% if password_auth_enabled %}
<div class="input-group grid">
<label for="id_password" class="inline-block">{{ _('Password') }}</label>
<div class="input-box">
<input id="id_password" class="required" type="password" name="password"
value="{% if form.password.value() %}{{ form.password.value() }}{% endif %}"
maxlength={{ MAX_PASSWORD_LENGTH }}
data-min-length="{{password_min_length}}"
data-min-quality="{{password_min_quality}}"/>
data-min-quality="{{password_min_quality}}" required />
<label for="id_password" class="inline-block">{{ _('Password') }}</label>
<div class="required"></div>
<img class="valid" src="/static/images/checkbox-valid.svg" />
{% if full_name %}
<span class="help-inline">
{{ _('This is used for mobile applications and other tools that require a password.') }}
@ -70,7 +79,6 @@ Form is validated both client-side using jquery-validate (see signup.js) and ser
{% endfor %}
{% endif %}
<br />
<label class="inline-block"></label>
<div class="progress" id="pw_strength" title="{{ _('Password strength') }}">
<div class="bar bar-danger" style="width: 10%;"></div>
</div>
@ -78,23 +86,28 @@ Form is validated both client-side using jquery-validate (see signup.js) and ser
{% endif %}
{% if creating_new_team %}
<div class="input-group grid">
<label for="id_team_name" class="inline-block label-title">{{ _('Organization name') }}</label>
<div class="input-box">
<div class="inline-block relative">
<input id="id_team_name" class="required" type="text"
placeholder="Acme"
value="{% if form.realm_name.value() %}{{ form.realm_name.value() }}{% endif %}"
name="realm_name" maxlength={{ MAX_REALM_NAME_LENGTH }} />
name="realm_name" maxlength={{ MAX_REALM_NAME_LENGTH }} required />
{% if form.realm_name.errors %}
{% for error in form.realm_name.errors %}
<div class="help-inline text-error">{{ error }}</div>
{% endfor %}
{% endif %}
<div class="help-box">
<div class="required"></div>
<img class="valid" src="/static/images/checkbox-valid.svg" />
</div>
<label for="id_team_name" class="inline-block label-title">{{ _('Organization name') }}</label>
<div class="help-box margin-top">
{{ _('This can be changed later on the settings page.') }}
</div>
</div>
<div class="input-group grid">
<div class="input-box">
<label for="id_team_subdomain" class="inline-block label-title">
{% if realms_have_subdomains %}
{{ _('Subdomain') }}
@ -103,12 +116,16 @@ Form is validated both client-side using jquery-validate (see signup.js) and ser
{% endif %}
</label>
<div class="breakpoint">
<div class="inline-block relative">
<input id="id_team_subdomain" class="required" type="text"
placeholder="acme"
value="{% if form.realm_subdomain.value() %}{{ form.realm_subdomain.value() }}{% endif %}"
name="realm_subdomain" maxlength={{ MAX_REALM_SUBDOMAIN_LENGTH }} />
name="realm_subdomain" maxlength={{ MAX_REALM_SUBDOMAIN_LENGTH }} required />
<div class="required"></div>
<img class="valid" src="/static/images/checkbox-valid.svg" />
</div>
{% if realms_have_subdomains %}
<b> .{{ external_host }}</b>
<div class="inline-block external-host"> .{{ external_host }}</div>
{% endif %}
{% if form.realm_subdomain.errors %}
{% for error in form.realm_subdomain.errors %}
@ -116,7 +133,7 @@ Form is validated both client-side using jquery-validate (see signup.js) and ser
{% endfor %}
{% endif %}
</div>
<div class="help-box">
<div class="help-box margin-top">
{% if realms_have_subdomains %}
{{ _("The address you'll use to sign in to your organization.") }}
{% else %}
@ -125,7 +142,7 @@ Form is validated both client-side using jquery-validate (see signup.js) and ser
</div>
</div>
<div class="m-v-20">
<div class="input-group m-10 inline-block">
<label for="id_org_type" class="label-title">{{ _('Organization type') }}</label>
{% for org_type_value, org_type_text in form.realm_org_type.field.choices %}
@ -137,7 +154,7 @@ Form is validated both client-side using jquery-validate (see signup.js) and ser
</div>
{% endfor %}
</div>
<div class="m-v-20">
<div class="m-10">
<div class="help-box">
<div id="org_type_blob_1" class="blob display-none">
{% trans %}
@ -163,9 +180,9 @@ Form is validated both client-side using jquery-validate (see signup.js) and ser
</div>
{% endif %}
<div class="input-group margin">
<div class="input-group margin terms-of-service">
{% if terms_of_service %}
<div class="float-left">
<div class="input-group">
{#
This is somewhat subtle.
Checkboxes have a name and value, and when the checkbox is ticked, the form posts
@ -186,9 +203,8 @@ Form is validated both client-side using jquery-validate (see signup.js) and ser
{% endif %}
</div>
{% endif %}
<div class="submit-button-box float-right">
<input type="submit" class="button-new sea-green"
value="{{ _('Register') }}" /><br />
<div class="submit-button-box m-10">
<button type="submit">{{ _('Register') }}</button>
<input type="hidden" name="next" value="{{ next }}" />
</div>
</div>

34
templates/zerver/reset.html
View File

@ -1,31 +1,39 @@
{% extends "zerver/portico_signup.html" %}
{% block portico_content %}
<div class="pitch">
<h3>{{ _('Reset your password.') }}</h3>
</div>
<div class="bg-image"></div>
<div class="app-main forgot-password-container new-style">
<div class="bg-image"></div>
<form method="post" class="form-horizontal" action="{{ url('django.contrib.auth.views.password_reset') }}">
<div class="lead">
<h3 class="get-started">{{ _('Reset your password') }}</h3>
</div>
<p>Forgot your password? No problem, we'll send a link to reset your password to the email you signed up with.</p>
<form method="post" class="form-horizontal" action="{{ url('django.contrib.auth.views.password_reset') }}">
{{ csrf_input }}
<div class="control-group">
<label for="id_email" class="control-label">{{ _('Email') }}</label>
<div class="controls">
<div class="new-style">
<div class="input-box horizontal moving-label">
<div class="inline-block relative">
<input id="id_email" class="required" type="text" name="email"
value="{% if form.email.value() %}{{ form.email.value() }}{% endif %}"
maxlength="100" />
maxlength="100" required />
<label for="id_email" class="">{{ _('Email') }}</label>
<div class="required"></div>
<img class="valid" src="/static/images/checkbox-valid.svg" />
{% if form.email.errors %}
{% for error in form.email.errors %}
<div class="alert alert-error">{{ error }}</div>
{% endfor %}
{% endif %}
</div>
</div>
<div class="control-group">
<div class="controls">
<input type="submit" class="btn btn-primary" value="{{ _('Reset password') }}" /><br />
<button type="submit">{{ _('Reset password') }}</button>
</div>
</div>
</form>
</form>
</div>
<script type="text/javascript">
autofocus('#id_email');

10
zerver/context_processors.py
View File

@ -5,8 +5,13 @@ from django.http import HttpRequest
from django.conf import settings
from zerver.models import UserProfile, get_realm
from zproject.backends import (password_auth_enabled, dev_auth_enabled,
google_auth_enabled, github_auth_enabled)
from zproject.backends import (
any_oauth_backend_enabled,
dev_auth_enabled,
github_auth_enabled,
google_auth_enabled,
password_auth_enabled,
)
from zerver.lib.utils import get_subdomain
from zerver.lib.realm_icon import get_realm_icon_url
@ -71,6 +76,7 @@ def add_settings(request):
'dev_auth_enabled': dev_auth_enabled(realm),
'google_auth_enabled': google_auth_enabled(realm),
'github_auth_enabled': github_auth_enabled(realm),
'any_oauth_backend_enabled': any_oauth_backend_enabled(realm),
'development_environment': settings.DEVELOPMENT,
'support_email': settings.ZULIP_ADMINISTRATOR,
'find_team_link_disabled': settings.FIND_TEAM_LINK_DISABLED,

8
zerver/tests/test_auth_backends.py
View File

@ -638,7 +638,7 @@ class GitHubAuthBackendTest(ZulipTestCase):
result = self.client_get(reverse('social:complete', args=['github']),
info={'state': 'state'})
self.assertEqual(result.status_code, 200)
self.assertIn("Let's get started", result.content.decode('utf8'))
self.assertIn("Sign up for Zulip", result.content.decode('utf8'))
self.assertEqual(mock_get_email_address.call_count, 2)
utils.BACKENDS = settings.AUTHENTICATION_BACKENDS
@ -752,7 +752,7 @@ class GoogleSubdomainLoginTest(GoogleOAuthTest):
mock.patch('logging.warning'):
result = self.client_get('/accounts/login/subdomain/')
self.assertEqual(result.status_code, 200)
self.assertIn("Let's get started", result.content.decode('utf8'))
self.assertIn("Sign up for Zulip", result.content.decode('utf8'))
def test_user_cannot_log_into_nonexisting_realm(self):
# type: () -> None
@ -1346,7 +1346,7 @@ class TestZulipRemoteUserBackend(ZulipTestCase):
REMOTE_USER=email)
self.assertEqual(result.status_code, 200)
self.assertIs(get_session_dict_user(self.client.session), None)
self.assertIn(b"Let's get started", result.content)
self.assertIn(b"Sign up for Zulip", result.content)
def test_login_failure_due_to_empty_subdomain(self):
# type: () -> None
@ -1358,7 +1358,7 @@ class TestZulipRemoteUserBackend(ZulipTestCase):
REMOTE_USER=email)
self.assertEqual(result.status_code, 200)
self.assertIs(get_session_dict_user(self.client.session), None)
self.assertIn(b"Let's get started", result.content)
self.assertIn(b"Sign up for Zulip", result.content)
def test_login_success_under_subdomains(self):
# type: () -> None

2
zerver/tests/test_docs.py
View File

@ -37,7 +37,7 @@ class DocPageTest(ZulipTestCase):
self._test('/hello/', 'workplace chat that actually improves your productivity')
self._test('/integrations/', 'require creating a Zulip bot')
self._test('/devlogin/', 'Normal users')
self._test('/register/', 'get started')
self._test('/register/', 'Sign up for Zulip')
result = self.client_get('/new-user/')
self.assertEqual(result.status_code, 301)

2
zerver/tests/test_management_commands.py
View File

@ -107,7 +107,7 @@ class TestGenerateRealmCreationLink(ZulipTestCase):
with self.settings(OPEN_REALM_CREATION=False):
# Check realm creation page is accessible
result = self.client_get(generated_link)
self.assert_in_success_response([u"Let's get started…"], result)
self.assert_in_success_response([u"Create your Zulip Organization"], result)
# Create Realm with generated link
self.assertIsNone(get_realm('test'))

2
zerver/tests/test_signup.py
View File

@ -117,7 +117,7 @@ class PasswordResetTest(ZulipTestCase):
# test password reset template
result = self.client_get('/accounts/password/reset/')
self.assert_in_response('Reset your password.', result)
self.assert_in_response('Reset your password', result)
# start the password reset process by supplying an email address
result = self.client_post('/accounts/password/reset/', {'email': email})

6
zproject/backends.py
View File

@ -77,6 +77,12 @@ def github_auth_enabled(realm=None):
# type: (Optional[Realm]) -> bool
return auth_enabled_helper([u'GitHub'], realm)
def any_oauth_backend_enabled(realm=None):
# type: (Optional[Realm]) -> bool
"""Used by the login page process to determine whether to show the
'OR' for login with Google"""
return auth_enabled_helper([u'GitHub', u'Google'], realm)
def common_get_active_user_by_email(email, return_data=None):
# type: (Text, Optional[Dict[str, Any]]) -> Optional[UserProfile]
try:

1
zproject/settings.py
View File

@ -683,6 +683,7 @@ PIPELINE = {
'source_filenames': (
'third/zocial/zocial.css',
'styles/portico.css',
'styles/portico-signin.css',
'styles/pygments.css',
'third/thirdparty-fonts.css',
'styles/fonts.css',