paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-05 06:23:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

Implement a new login redesign per Waseem. Be a little cute about it.

Browse Source 
Split off some content previously placed into base back into index.html.
Move content previously localised in accounts_home to a new content_base
for use in the non-app version of the site.

We wrote up some copy and styled it according to taste.

In our new signup form, we no longer collect a short name and instead
extrapolate from the email.

(imported from commit cd734b13a4bda7f304129379524c4cc96b77b24b)
This commit is contained in:
Luke Faraone
2012-09-25 16:58:59 -04:00
parent 8ef40a9654
commit ae6cfee818
10 changed files with 208 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
templates/zephyr/accounts_home.html
View File

@@ -1,28 +1,30 @@
{% extends "zephyr/base.html" %} {% extends "zephyr/content_base.html" %}
{% block more_content %}
<script type="text/javascript">
autofocus('#email');
</script>
{% block content %} <div class="pitch">
<br/> <p>You’re not using your Zip drive anymore.</p>
<div class="hero-unit"> <p>You’re not calling your parents from the pay phone at school, asking
<div class="row-fluid"> to be picked up because you stayed late to go to the computer club
<div class="span5"> meeting.</p>
<h1>Humbug</h1> <p>You haven’t watched Saved by the Bell in a while.</p>
<h2>Zephyr for the masses (?)</h2> <p>So why are you still using IRC?</p>
<br/>
<p>Discover a better alternative for group communication at work.</p>
</div> </div>
<div class="span7"> <div class="signup">
<p>Here we describe what makes it so great.</p> <p class="lead">Get started now, for free</p>
<form class="form-inline" id="email_signup" action="/accounts/register/" method="post">
<p>With several features such as: {% csrf_token %}
<ul> <input type="text" class="email required" placeholder="Enter your work email address" id="email" name="email"/>&nbsp;
<li>Sending messages</li> <input type="submit" class="btn btn-primary btn-large" value="Sign up"/>
<li>Reading messages</li> <span class="or">- or -</span>
<li>Incessant polling</li> <button type="submit" class="btn">Connect with Google Apps</button>
</ul></p> <p><small>By continuing, you are indicating that you have read and agree to our <a href="/tos">Terms of Use</a>.</small></p>
</form>
<p> <div id="errors"></div>
<a class="btn btn-primary btn-large" href="/accounts/login/?next=/">Log in &raquo;</a> <div class="alert alert-pitch" id="company-email">Please use your company email address to sign up. Otherwise, we won’t be able to connect you with your coworkers.</div>
<a class="btn btn-primary btn-large" href="/accounts/register/">Register &raquo;</a>
</p>
</div> </div>
</div>
</div>
{% endblock %} {% endblock %}

1
templates/zephyr/base.html
View File

@@ -5,7 +5,6 @@
<head> <head>
<title>Humbug, from Humbug Inc.</title> <title>Humbug, from Humbug Inc.</title>
<link href="/static/third/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <link href="/static/third/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="/static/styles/zephyr.css?dummy_time={% now "U" %}" rel="stylesheet">
<link href="/static/third/bootstrap/css/bootstrap-responsive.css" rel="stylesheet"> <link href="/static/third/bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'> <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
{# We need to import jQuery before Bootstrap #} {# We need to import jQuery before Bootstrap #}

28
templates/zephyr/content_base.html Normal file
View File

@@ -0,0 +1,28 @@
{% extends "zephyr/base.html" %}
{% block customhead %}
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<script src="/static/js/signup.js"></script>
<link href="/static/styles/signup.css?dummy_time={% now "U" %}" rel="stylesheet">
{% endblock %}
{% block content %}
<div class="navbar">
<ul class="nav pull-right">
<li><a href="#">Learn More</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="https://blog.humbughq.com/">Blog</a></li>
<li><a href="/accounts/login/?next=/">Log in</a></li>
</ul>
</div>
<div class="row-fluid">
<div class="span2">
</div>
<div class="span10">
<div class="title">Humbug<span class="for_you">{% block for_you %}{% endblock %}</div>
{% block more_content %}
{% endblock %}
</div>
</div>
{% endblock %}

1
templates/zephyr/index.html
View File

@@ -21,6 +21,7 @@
</script> </script>
{% autoescape off %} {% autoescape off %}
<link href="/static/styles/zephyr.css?dummy_time={% now "U" %}" rel="stylesheet">
<link href="/static/styles/pygments.css" rel="stylesheet"> <link href="/static/styles/pygments.css" rel="stylesheet">
<script type="text/javascript" src="/static/third/jquery/jquery.form.js"></script> <script type="text/javascript" src="/static/third/jquery/jquery.form.js"></script>
<script type="text/javascript" src="/static/third/handlebars/handlebars-1.0.rc.1.js"></script> <script type="text/javascript" src="/static/third/handlebars/handlebars-1.0.rc.1.js"></script>

46
templates/zephyr/login.html
View File

@@ -1,12 +1,16 @@
{% extends "zephyr/base.html" %} {% extends "zephyr/content_base.html" %}
{% block content %} {% block more_content %}
<script type="text/javascript"> <script type="text/javascript">
autofocus('#id_username'); if ($('#id_email').length === 0) {
autofocus('#id_full_name');
} else {
autofocus('#id_email');
}
</script> </script>
<h1>Log in</h1> <h3>You look familiar.</h3>
{% if form.errors %} {% if form.errors %}
<div class="alert alert-error"> <div class="alert alert-error">
@@ -14,17 +18,31 @@ autofocus('#id_username');
</div> </div>
{% endif %} {% endif %}
<form method="post" action="{% url django.contrib.auth.views.login %}?next={{ request.get_full_path }}">
{% csrf_token %}
<label for="id_username">Email</label>
{{ form.username }}
{{ form.password.label_tag }}
{{ form.password }}
<input type="submit" value="Log in" />
<input type="hidden" name="next" value="{{ next }}" /> <input type="hidden" name="next" value="{{ next }}" />
</form> </form>
<form method="post" class="form-horizontal" action="{% url django.contrib.auth.views.login %}?next={{ request.get_full_path }}">
{% csrf_token %}
<div class="control-group">
<label for="id_username" class="control-label">Email</label>
<div class="controls">
{{ form.username }}
</div>
</div>
<div class="control-group">
<label for="id_password" class="control-label">Password</label>
<div class="controls">
{{ form.password }}
</div>
</div>
<div class="control-group">
<div class="controls">
<input type="submit" class="btn btn-large btn-primary" value="Log in" />
</div>
</div>
<br />
<input type="hidden" name="next" value="{{ next }}" />
</form>
{% endblock %} {% endblock %}

56
templates/zephyr/register.html
View File

@@ -1,27 +1,49 @@
{% extends "zephyr/base.html" %} {% extends "zephyr/content_base.html" %}
{% block content %} {% block for_you %}for {% if company_name %} {{company_name}} {% else %} __________ {% endif %} {% endblock %}
{% block more_content %}
<script type="text/javascript"> <script type="text/javascript">
autofocus('#id_full_name'); if ($('#id_email').length === 0) {
autofocus('#id_full_name');
} else {
autofocus('#id_email');
}
</script> </script>
<h1>Register for an account</h1> <p>(Welcome! We think you'll like it here.)</p>
<form method="post" action="{% url register %}"> <div class="pitch">
<hr/>
<p>You're almost there. We just need you to do one last thing.</p>
<h3>Tell us a bit about yourself.</h3>
</div>
<form method="post" class="form-horizontal" action="{% url register %}">
{% csrf_token %} {% csrf_token %}
<div class="control-group">
{{ form.full_name.label_tag }} <label for="id_email" class="control-label">Email</label>
{{ form.full_name }} <div class="controls">
{% if company_name %} {# They entered through the main page and already entered their email #}
{{ form.short_name.label_tag }} {{ form.email.as_hidden }}
{{ form.short_name }} <p>{{ form.email.value }}<p>
{% else %}
{{ form.email.label_tag }} {{ form.email }}
{{ form.email }} {% endif %}
</div>
{{ form.password.label_tag }} </div>
{{ form.password }} <div class="control-group">
<label for="id_full_name" class="control-label">Your name</label>
<div class="controls">
{{ form.full_name }}
</div>
</div>
<div class="control-group">
<label for="id_password" class="control-label">Password</label>
<div class="controls">
{{ form.password }}
</div>
</div>
<br /> <br />
<input type="submit" value="Register" /><br /> <input type="submit" value="Register" /><br />

1
zephyr/forms.py
View File

@@ -2,6 +2,5 @@ from django import forms
class RegistrationForm(forms.Form): class RegistrationForm(forms.Form):
full_name = forms.CharField(max_length=100) full_name = forms.CharField(max_length=100)
short_name = forms.CharField(max_length=100)
email = forms.EmailField() email = forms.EmailField()
password = forms.CharField(widget=forms.PasswordInput, max_length=100) password = forms.CharField(widget=forms.PasswordInput, max_length=100)

28
zephyr/static/js/signup.js Normal file
View File

@@ -0,0 +1,28 @@
/*jslint browser: true, devel: true, sloppy: true,
plusplus: true, nomen: true, regexp: true */
/*global $: false, jQuery: false */
var tld_list = ['gmail.com'];
$.validator.addMethod("fromDomain", function (value, element, param) {
console.log("foo");
console.log(value);
var splitted = value.split("@");
var tld = splitted[spitted.length - 1];
return false;
return $.inArray(tld, tld_list) !== -1;
},
"Please use your company email address to sign up. Otherwise, we won’t be able to connect you with your coworkers.");
$(document).ready(function(){
$("#email_signup").validate({
rules: {
email: {
required: true,
email: true,
}
},
errorElement: "div",
errorClass: "alert",
});
});

46
zephyr/static/styles/signup.css Normal file
View File

@@ -0,0 +1,46 @@
body {
font-family: 'Open Sans', Helvetica, Arial, sans-serif;
}
div.title {
font-family: Helvetica;
font-size: 100px;
font-weight: bold;
padding-top: 50px;
padding-bottom: 60px;
}
.lead {
font-weight: bold;
}
div.pitch {
width: 500px;
}
div.signup {
width: 650px;
padding: 8px 35px 8px 14px;
margin-bottom: 20px;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
background-color: LightGray;
border: 1px solid DarkGray;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
span.or {
padding-left: 25px;
padding-right: 25px;
}
span.for_you {
font-size: 30px;
font-style: italic;
}
#company-email {
display: none;
}

10
zephyr/views.py
View File

@@ -50,9 +50,14 @@ def strip_html(x):
def register(request): def register(request):
if request.method == 'POST': if request.method == 'POST':
try:
email = strip_html(request.POST['email'])
company_name = email.split('@')[-1]
except KeyError:
company_name = None
form = RegistrationForm(request.POST) form = RegistrationForm(request.POST)
if form.is_valid(): if form.is_valid():
email = strip_html(request.POST['email'])
password = request.POST['password'] password = request.POST['password']
full_name = strip_html(request.POST['full_name']) full_name = strip_html(request.POST['full_name'])
short_name = strip_html(request.POST['short_name']) short_name = strip_html(request.POST['short_name'])
@@ -70,9 +75,10 @@ def register(request):
return HttpResponseRedirect(reverse('zephyr.views.home')) return HttpResponseRedirect(reverse('zephyr.views.home'))
else: else:
form = RegistrationForm() form = RegistrationForm()
company_name = None
return render(request, 'zephyr/register.html', { return render(request, 'zephyr/register.html', {
'form': form, 'form': form, 'company_name': company_name,
}) })
def accounts_home(request): def accounts_home(request):