modified registration pages, contact-add/edit, user-add

* modifed ui of all pages above
* add input field check before submit for forms

contacts/templates/contacts/contact_add.html

@@ -3,20 +3,33 @@
 {% block nav_contacts_class %}class="cur"{% endblock %}
 
 {% block main_panel %}
-<div class="w350 center">
+<div class="narrow-panel">
-<h3>添加联系人</h3>
+<h3>添加联系人<a href="{{ SITE_ROOT }}contacts/list/" class="contact-list-link">（联系人列表）</a></h3>
-<form action="{{ SITE_ROOT }}contacts/add/" method="post" class="contact-op-form">
+<form action="{{ SITE_ROOT }}contacts/add/" method="post">
+    {{ form.user_email.as_hidden }}
+    <label>邮箱：</label>
+    {{ form.contact_email }}
+    <label>名字(可选)：</label>
+    {{ form.contact_name }}
+    <label>备注(可选)：</label>
+    {{ form.note }}
     {% if error_msg %}
     <p class="error">{{ error_msg }}</p>
     {% endif %}
-    {{ form.user_email.as_hidden }}
+    <p class="error hide" id="error">请输入邮箱地址。</p>
-    <label>邮箱：</label>
+    <input type="submit" value="提交" />
-    {{ form.contact_email }}<br />
-    <label>名字(可选)：</label>
-    {{ form.contact_name }}<br />
-    <label>备注(可选)：</label>
-    {{ form.note }}<br />
-    <input type="submit" value="提交" class="submit" /> <a href="{{ SITE_ROOT }}contacts/list/">联系人列表</a>
 </form>
 </div>
 {% endblock %}
+
+{% block extra_script %}
+<script type="text/javascript">
+$('input[type="submit"]').click(function() {
+    if(!$.trim($('input[name="contact_email"]').attr('value'))) {
+       $('#error').removeClass('hide') 
+        return false;
+    }
+});
+</script>
+{% endblock %}
+

contacts/templates/contacts/contact_edit.html

@@ -3,22 +3,22 @@
 {% block nav_contacts_class %}class="cur"{% endblock %}
 
 {% block main_panel %}
-<div class="w350 center">
+<div class="narrow-panel">
-<h3>编辑联系人</h3>
+<h3>编辑联系人<a href="{{ SITE_ROOT }}contacts/list/" class="contact-list-link">（联系人列表）</a></h3>
-<form action="" method="post" class="contact-op-form">
+<form action="" method="post">
+    {{ form.user_email.as_hidden }}
+    <label>邮箱：</label>
+    {{ form.contact_email }}
+    <label>名字(可选)：</label>
+    {{ form.contact_name }}
+    <label>备注(可选)：</label>
+    {{ form.note }}
+    <input type="hidden" name="contact_id" value="{{ contact_id }}" />
+    <input type="hidden" name="old_contact_email" value="{{ old_contact_email }}" />
     {% if error_msg %}
     <p class="error">{{ error_msg }}</p>
     {% endif %}
-    {{ form.user_email.as_hidden }}
+    <input type="submit" value="提交" class="submit" />
-    <label>邮箱：</label>
-    {{ form.contact_email }}<br />
-    <label>名字(可选)：</label>
-    {{ form.contact_name }}<br />
-    <label>备注(可选)：</label>
-    {{ form.note }}<br />
-    <input type="hidden" name="contact_id" value="{{ contact_id }}" />
-    <input type="hidden" name="old_contact_email" value="{{ old_contact_email }}" />
-    <input type="submit" value="提交" class="submit" /> <a href="{{ SITE_ROOT }}contacts/list/">联系人列表</a>
 </form>
 </div>
 {% endblock %}

media/css/seahub.css

@@ -32,6 +32,37 @@ img { border:none; }
 h2 { font-size:18px; color:#808; margin:10px 0 8px; }
 h3 { font-size:15px; color:#808; font-weight:normal; margin:10px 0 6px; }
 ol { padding-left:2em; }
+/* input button */
+textarea { border: 1px solid #80B0B0; }
+input { 
+    height:20px;
+    line-height:20px;
+    margin:3px 0;
+    border: 1px solid #80B0B0;
+}
+input[type=checkbox] {
+    height:auto;
+}
+input[type=submit],
+button { 
+    color: #080;
+    height:23px;
+    padding:2px 3px;
+    background: #EEE;
+    border: 1px solid #80B0B0;
+    border-radius: 3px;
+    -moz-border-radius:3px;
+    margin-top:8px;
+}
+button {
+    margin:0;
+}
+input[type=submit]:hover,
+button:hover { 
+    cursor:pointer;
+    background: #FFF;
+}
+label { display: inline-block; margin:2px 0px; }
 /* table */
 table {
     border-spacing: 0;
@@ -49,12 +80,6 @@ tr.hl { background-color: #ddddff; }/*highlight*/
 .odd th { background:#ddd; }
 tr.first { background-color: #00FF00; }
 
-.w350 {
-    width:350px;
-}
-.center {
-    margin:0 auto;
-}
 /* container */
 #wrapper { font: 13px/1.5 Arial, Helvetica, sans-serif; }
 #header, #main, #footer { width:950px; }
@@ -105,58 +130,26 @@ tr.first { background-color: #00FF00; }
 #main .avatar_op ul ul li { float:left; margin-right:5px; }
 .avatar { float:left; width:120px; }
 .ele_info { float:right; width:450px; }
-/* input button */
+
-textarea { border: 1px solid #80B0B0; }
+/*narrow-panel*/
-input { 
+.narrow-panel {
-    height:20px;
+    width:25em;
-    line-height:20px;
+    min-height:15em;
-    margin:2px 0;
+    padding:2.5em;
-    border: 1px solid #80B0B0;
+    background:#E9F1F4;
+    border-radius:4px;
+    -moz-border-radius:4px;
+    margin:5em auto 0;
 }
-input[type=checkbox] {
+.narrow-panel h2,
-    height:auto;
+.narrow-panel h3 {
+    margin-top:0;
 }
-input[type=submit],
+.narrow-panel input[type="text"],
-button { 
+.narrow-panel input[type="password"] {
-    color: #080;
+    width:96%;
-    height:23px;
+    height:1.8em;
-    padding:2px 3px;
+    margin:0 0 0.6em;
-    background: #EEE;
-    border: 1px solid #80B0B0;
-    border-radius: 3px;
-    -moz-border-radius:3px;
-    margin-top:5px;
-}
-button {
-    margin:0;
-}
-input[type=submit]:hover,
-button:hover { 
-    cursor:pointer;
-    background: #FFF;
-}
-label { display: inline-block; margin:2px 0px; }
-#user-add-form label,
-.reg label,
-.pwd_change label {
-    width:5em;
-    text-align:right;
-}
-#user-add-form .submit,
-.reg .submit {
-    margin-left:5em;
-}
-.login .submit {
-    margin-left:3em;
-}
-.login .error {
-    margin:3px 0 0 3em;
-}
-.pwd_change label {
-    width:6em;
-}
-.pwd_change .submit {
-    margin-left:6em;
 }
 /* popup dialog */
 #basic-modal-content {display:none;}
@@ -235,12 +228,11 @@ label { display: inline-block; margin:2px 0px; }
     height:80px;
 }
 /*contact*/
-.contact-op-form label {
+.contact-list-link {
-    width:6em;
+    font-size:13px;
-    text-align:right;
 }
-.contact-op-form .submit {
+.contact-list-link:hover {
-    margin-left:6em;
+    text-decoration:none;
 }
 /* group */
 .group-member-icon {

templates/add_user_form.html

@@ -2,21 +2,45 @@
 {% block title %}添加用户{% endblock %}
 {% block nav_useradmin_class %}class="cur"{% endblock %}
 {% block main_panel %}
+<div class="narrow-panel">
 <h3>添加用户</h3>
-<form action="" method="post" id="user-add-form">
+<form action="" method="post">
 	<label for="id_email">邮箱：</label>
 	{{ form.email }}
-	{% if form.email.errors %}
-	{{ form.email.errors }}
-	{% endif %}<br />
 	<label for="id_password1">密码：</label>
 	{{ form.password1 }}
-	{% if form.password1.errors %}
-	{{ form.password1.errors }}
-	{% endif %}<br />
 	<label for="id_password2">确认密码：</label>
-	{{ form.password2 }}<br />
+	{{ form.password2 }}
-	<input type="submit" value="提交" class="submit" />
+
+	{{ form.email.errors }}
+	{{ form.password1.errors }}
+	{{ form.password2.errors }}
+    <p class="error hide" id="error"></p>
+
+	<input type="submit" value="提交" />
 </form>
+</div>
+{% endblock %}
+
+{% block extra_script %}
+<script type="text/javascript">
+$('input[type="submit"]').click(function() {
+    if (!$.trim($('input[name="email"]').attr('value'))) {
+       $('#error').html('请输入邮箱。').removeClass('hide'); 
+        return false;
+    }
+    if (!$.trim($('input[name="password1"]').attr('value'))) {
+       $('#error').html('请输入密码。').removeClass('hide'); 
+        return false;
+    }
+    if (!$.trim($('input[name="password2"]').attr('value'))) {
+       $('#error').html('请确认密码。').removeClass('hide'); 
+        return false;
+    }
+    if ($.trim($('input[name="password1"]').attr('value')) != $.trim($('input[name="password2"]').attr('value'))) {
+       $('#error').html('两次输入的密码不一致。').removeClass('hide'); 
+        return false;
+    }
+});
+</script>
 {% endblock %}
- 

templates/registration/activate.html

@@ -1,7 +1,9 @@
 {% extends "myhome_base.html" %}
 
-{% block title %}Create an account{% endblock %}
+{% block title %}激活码错误{% endblock %}
 
 {% block main_panel %}
-<p class="error w350 center">激活码错误。</p>
+<div class="narrow-panel">
+    <p class="error">激活码错误。</p>
+</div>
 {% endblock %}

templates/registration/activation_complete.html

@@ -3,6 +3,8 @@
 {% block title %}帐号已激活{% endblock %}
 
 {% block main_panel %}
-<p class="w350 center">你的帐号已经激活。 <a href="{{ SITE_ROOT }}accounts/login/">登录</a></p>
+<div class="narrow-panel">
+    <p>你的帐号已经激活。 <a href="{{ SITE_ROOT }}accounts/login/">登录</a></p>
+</div >
 {% endblock %}
  

templates/registration/activation_email_subject.txt

@@ -1 +1 @@
-请激活你的帐号，完成注册
+请激活您的帐号，完成注册。

templates/registration/login.html

@@ -1,15 +1,15 @@
 {% extends "myhome_base.html" %}
-{% block title %}用户登录{% endblock %}
+{% block title %}登录{% endblock %}
 {% block main_panel %}
-<div class="w350 center">
+<div class="narrow-panel">
-<h2>用户登录</h2>
+<h2>登录</h2>
-<form action="" method="post" class="login">
+<form action="" method="post">
     <label for="username">邮箱：</label>
-	<input type="text" name="username" value="" style="color:#666;" autocomplete="off" /><br />
+	<input type="text" name="username" value="" autocomplete="off" />
 	<label for="password">密码：</label>
-	<input type="password" name="password" value="" autocomplete="off" /><br />
+	<input type="password" name="password" value="" autocomplete="off" />
 	<p class="error hide"></p>
-	<input type="submit" value="提交" class="submit" />
+	<input type="submit" value="提交" />
 	<a href="{{ SITE_ROOT }}accounts/password/reset/">忘记密码？</a>
 {% if next %}
     <input type="hidden" name="next" value="{{ next|escape }}" />
@@ -19,16 +19,12 @@
 </form>
 </div>
 {% endblock %}
+
 {% block extra_script %}
 <script type="text/javascript">
-var Username_default = $.trim($('input[name="username"]').attr('value'));
-$('input[name="username"]').click(function(){
-        $(this).attr('value','');
-        $(this).removeAttr('style');
-    });
 $('input[type="submit"]').click(function(){
-        if ($.trim($('input[name="username"]').attr('value')) == Username_default || !$.trim($('input[name="username"]').attr('value'))) {
+        if (!$.trim($('input[name="username"]').attr('value'))) {
-            $('.error').removeClass('hide').html('请输入帐号。');
+            $('.error').removeClass('hide').html('请输入邮箱。');
             return false;
         }
         if (!$.trim($('input[name="password"]').attr('value'))) {
@@ -37,8 +33,7 @@ $('input[type="submit"]').click(function(){
         }
    });
     {% if form.errors %}
-    $('.error').removeClass('hide').html('您输入的帐号或密码不正确');
+    $('.error').removeClass('hide').html('您输入的邮箱或密码不正确');
     {% endif %}
 </script>
 {% endblock %}
-

templates/registration/logout.html

@@ -3,7 +3,7 @@
 {% block title %}退出{% endblock %}
 
 {% block main_panel %}
-<div class="w350 center">
+<div class="narrow-panel">
 	<p>感谢参与。</p>
 	<a href="{{ SITE_ROOT }}accounts/login/">重新登录</a>
 </div>

templates/registration/password_change_done.html

@@ -1,9 +1,11 @@
 {% extends "accounts.html" %}
 
-{% block title %}{% trans 'Password change successful' %}{% endblock %}
+{% block title %}密码修改成功{% endblock %}
 
 {% block main_panel %}
 
-<p class="w350 center">您的密码已成功修改。</p>
+<div class="narrow-panel">
+    <p>您的密码已成功修改。</p>
+</div>
 
 {% endblock %}

templates/registration/password_change_form.html

@@ -2,16 +2,45 @@
 {% block title %}密码修改{% endblock %}
 
 {% block main_panel %}
-<div class="w350 center">
+<div class="narrow-panel">
 	<h2>密码修改</h2>
-	<form action="" method="post" class="pwd_change">
+	<form action="" method="post">
-		<label for="id_old_password">当前密码：</label>{{ form.old_password }}<br />
+		<label for="id_old_password">当前密码：</label>
+        {{ form.old_password }}
+		<label for="id_new_password1">新密码：</label>
+        {{ form.new_password1 }}
+		<label for="id_new_password2">新密码确认：</label>
+        {{ form.new_password2 }}
+
 		{{ form.old_password.errors }}
-		<label for="id_new_password1">新密码：</label>{{ form.new_password1 }}<br />
 		{{ form.new_password1.errors }}
-		<label for="id_new_password2">新密码确认：</label>{{ form.new_password2 }}<br />
 		{{ form.new_password2.errors }}
-		<input type="submit" value="提交" class="submit" />
+        <p class="error hide"></p>
+
+		<input type="submit" value="提交" />
 	</form>
 </div>
 {% endblock %}
+
+{% block extra_script %}
+<script type="text/javascript">
+$('input[type="submit"]').click(function(){
+        if (!$.trim($('input[name="old_password"]').attr('value'))) {
+            $('.error').removeClass('hide').html('请输入当前密码。');
+            return false;
+        }
+        if (!$.trim($('input[name="new_password1"]').attr('value'))) {
+            $('.error').removeClass('hide').html('请输入新密码。');
+            return false;
+        }
+        if (!$.trim($('input[name="new_password2"]').attr('value'))) {
+            $('.error').removeClass('hide').html('请确认新密码。');
+            return false;
+        }
+        if ($.trim($('input[name="new_password1"]').attr('value')) != $.trim($('input[name="new_password2"]').attr('value'))) {
+            $('.error').removeClass('hide').html('两次输入的新密码不一致。');
+            return false;
+        }
+   });
+</script>
+{% endblock %}

templates/registration/password_reset_complete.html

@@ -3,5 +3,7 @@
 {% block title %}密码重置成功{% endblock %}
 
 {% block main_panel %}
-<p class="w350 center">密码重置成功。 <a href="{{ login_url }}">登录</a></p>
+<div class="narrow-panel"> 
+    <p>密码重置成功。 <a href="{{ login_url }}">登录</a></p>
+</div>
 {% endblock %}

templates/registration/password_reset_confirm.html

@@ -3,17 +3,18 @@
 {% block title %}密码重置{% endblock %}
 
 {% block main_panel %}
-<div class="w350 center">
+<div class="narrow-panel">
 {% if validlink %}
 
 <h2>请输入新密码</h2>
-
 <form action="" method="post">
+<label for="id_new_password1">新密码：</label>
+{{ form.new_password1 }}
 {{ form.new_password1.errors }}
-<p class="aligned wide"><label for="id_new_password1">新密码：</label>{{ form.new_password1 }}</p>
+<label for="id_new_password2">新密码确认：</label>
+{{ form.new_password2 }}
 {{ form.new_password2.errors }}
-<p class="aligned wide"><label for="id_new_password2">密码确认：</label>{{ form.new_password2 }}</p>
+<input type="submit" value="提交" />
-<p><input type="submit" value="提交" /></p>
 </form>
 
 {% else %}

templates/registration/password_reset_done.html

@@ -4,6 +4,6 @@
 
 {% block main_panel %}
 
-<p class="w350 center">我们已经把密码重置说明发往您提交的邮箱里，请查收。</p>
+<p class="narrow-panel">我们已经把密码重置说明发往您提交的邮箱里，请查收。</p>
 
 {% endblock %}

templates/registration/password_reset_form.html

@@ -2,12 +2,14 @@
 
 {% block title %}密码重置{% endblock %}
 {% block main_panel %}
-<div class="w350 center">
+<div class="narrow-panel">
-<h2>密码重置</h2>
+    <h2>密码重置</h2>
-<form action="" method="post">
+    <form action="" method="post">
-<label for="id_email">邮箱：</label> {{ form.email }} <input type="submit" value="提交" />
+        <label for="id_email">邮箱：</label>
-<p>[我们会把新密码设置说明通过邮件发送给您]</p>
+        <span>(我们会把新密码设置说明通过邮件发送给您)</span>
-{{ form.email.errors }}
+        {{ form.email }}
-</form>
+        {{ form.email.errors }}
+        <input type="submit" value="提交" />
+    </form>
 </div>
 {% endblock %}

templates/registration/registration_closed.html

@@ -3,6 +3,8 @@
 {% block title %}Create an account{% endblock %}
 
 {% block main_panel %}
-<p class="w350 center">注册关闭。</p>
+<div class="narrow-panel"> 
+    <p>注册关闭。</p>
+</div>
 {% endblock %}
  

templates/registration/registration_complete.html

@@ -1,7 +1,7 @@
 {% extends "myhome_base.html" %}
 {% block title %}感谢注册{% endblock %}
 {% block main_panel %}
-<div class="w350 center">
+<div class="narrow-panel">
 {% if send_mail %}
 <p>感谢注册，激活邮件已发往您的邮箱,请查收。</P>
 <p>如果您在收件箱里没找到，请检查下是否被当成垃圾邮件了。</p>

templates/registration/registration_form.html

@@ -1,23 +1,43 @@
 {% extends "myhome_base.html" %}
-{% block title %}用户注册{% endblock %}
+{% block title %}注册{% endblock %}
 {% block main_panel %}
-<div class="w350 center">
+<div class="narrow-panel">
-    <h2>用户注册</h2>
+    <h2>注册</h2>
-    <form action="" method="post" class="reg">
+    <form action="" method="post">
         <label for="id_email">邮箱：</label>
         {{ form.email }}
-        {% if form.email.errors %}
-        {{ form.email.errors }}
-        {% endif %}<br />
         <label for="id_password1">密码：</label>
         {{ form.password1 }}
-        {% if form.password1.errors %}
-        {{ form.password1.errors }}
-        {% endif %}<br />
         <label for="id_password2">确认密码：</label>
-        {{ form.password2 }}<br />
+        {{ form.password2 }}
-        <input type="submit" value="提交" class="submit" />
+        <p class="error hide"></p>
+        {{ form.email.errors }}
+        {{ form.password1.errors }}
+        {{ form.password2.errors }}
+        <input type="submit" value="提交" />
     </form>
 </div>
 {% endblock %}
- 
+
+{% block extra_script %}
+<script type="text/javascript">
+$('input[type="submit"]').click(function(){
+        if (!$.trim($('input[name="email"]').attr('value'))) {
+            $('.error').removeClass('hide').html('请输入邮箱。');
+            return false;
+        }
+        if (!$.trim($('input[name="password1"]').attr('value'))) {
+            $('.error').removeClass('hide').html('请输入密码。');
+            return false;
+        }
+        if (!$.trim($('input[name="password2"]').attr('value'))) {
+            $('.error').removeClass('hide').html('请确认密码。');
+            return false;
+        }
+        if ($.trim($('input[name="password1"]').attr('value')) != $.trim($('input[name="password2"]').attr('value'))) {
+            $('.error').removeClass('hide').html('两次输入的密码不一致。');
+            return false;
+        }
+   });
+</script>
+{% endblock %}

templates/useradmin.html

@@ -48,19 +48,20 @@
 
 {% block extra_script %}
 <script type="text/javascript">
-    $('.activate').each(function(){
+$('.activate').each(function(){
-        $(this).click(function(){
+    $(this).click(function(){
-            location.href = $(this).attr('data');
+        location.href = $(this).attr('data');
-        });
     });
+});
 $(".add-role-btn").each(function() {
-        $(this).click(function() {
+     $(this).click(function() {
-            var url = "{{ SITE_ROOT }}useradmin/" + $(this).attr("userid") + "/role/add/";
+         var url = "{{ SITE_ROOT }}useradmin/" + $(this).attr("userid") + "/role/add/";
-            $("#add-role-form").attr('action', url);
+         $("#add-role-form").attr('action', url);
-            $("#user_email").html($(this).attr("email"));
+         $("#user_email").html($(this).attr("email"));
-            $("#add-role-form").modal({appendTo: "#main"});
+         $("#add-role-form").modal({appendTo: "#main"});
-            });
+     });
-        });
+});
+
 //delete confirm
 addConfirmTo($('.remove-user-btn'));
 addConfirmTo($('.role-delete-btn'));