Update user profile management pages.
authorJonathan S. Katz <jonathan.katz@excoventures.com>
Mon, 16 Apr 2018 03:12:58 +0000 (23:12 -0400)
committerJonathan S. Katz <jonathan.katz@excoventures.com>
Tue, 17 Apr 2018 17:43:12 +0000 (13:43 -0400)
This applies the new CSS and HTML framework to the user profile
management pages.

Authors: Sarah Conway <sarah.conway@crunchydata.com> and me.

14 files changed:
templates/account/emailchangecompleted.html
templates/account/emailchangeform.html
templates/account/index.html
templates/account/login.html
templates/account/objectlist.html
templates/account/orglist.html
templates/account/password_change.html
templates/account/password_change_done.html
templates/account/password_reset.html
templates/account/password_reset_complete.html
templates/account/password_reset_confirm.html
templates/account/password_reset_done.html
templates/account/userprofileform.html
templates/pages/account/profile/change_email/done.html

index 49ce898d45d2f75b0afe745dd9ad6b2b9d4dcb11..c222cd3cd4505c1272da6cd8bcf98acfa00deea2 100644 (file)
@@ -3,7 +3,7 @@
 {%block contents%}
 
 {%if success%}
-<h1>Email changed</h1>
+<h1>Email changed <i class="fas fa-envelope"></i></h1>
 <p>
 Your email has successfully been changed to {{user.email}}.
 </p>
@@ -13,7 +13,7 @@ community site than <em>www.postgresql.org</em>, you may need to log
 out and back in again for the email to be updated on that site.
 </p>
 {%else%}
-<h1>Change email</h1>
+<h1>Change email <i class="fas fa-envelope"></i></h1>
 <p>
 The token <code>{{token}}</code> was not found.
 </p>
index ea00ee26de63524acbcda8bd85172830a4294416..e21e991943835814d75bbe7306bdb9ae05e19f80 100644 (file)
@@ -1,7 +1,8 @@
 {%extends "base/page.html"%}
+{% load pgfilters %}
 {%block title%}Change email{%endblock%}
 {%block contents%}
-<h1>Change email</h1>
+<h1>Change email <i class="fas fa-envelope"></i></h1>
 {%if token%}
 <h2>Awaiting confirmation</h2>
 <p>
@@ -29,27 +30,31 @@ and once you click the link in that email, your email will be changed.
 {%endif%}
 
 <form method="post" action=".">{% csrf_token %}
-
-<table class="pgGenericFormTable">
-{%if form.errors %}
- <tr class="errorheader">
-  <td colspan="2">Please correct the errors below, and re-submit the form.</td>
- </tr>
-{%endif%}
-{%for field in form%}
- {%if field.errors %}
- <tr class="error">
-  <td colspan="2">{{field.errors.as_ul}}</td>
- </tr>
- {%endif%}
- <tr {%if field.errors%}class="errorinfo"{%endif%}>
-  <th>{{field.label_tag}}{%if field.help_text %}<br/>
-   <span class="formfieldhelp">{{field.help_text}}</span>{%endif%}</th>
-  <td>{{field}}</td>
- </tr>
-{%endfor%}
-</table>
-
-<input type="submit" value="Change email" />
+  {% if form.errors %}
+    <div class="alert alert-danger" role="alert">
+      Please correct the errors below, and re-submit the form.
+    </div>
+  {% endif %}
+  {% for field in form %}
+    <div class="form-group row">
+      {% if field.errors %}
+        {% for e in field.errors %}
+          <div class="col-lg-12 alert alert-danger">{{e}}</div>
+        {% endfor %}
+      {% endif %}
+      <label class="col-form-label col-sm-3" for="{{ field.id }}">
+        {{ field.label|title }}
+        {% if field.help_text %}
+          <p><small>{{ field.help_text }}</small></p>
+        {% endif %}
+      </label>
+      <div class="col-sm-9">
+        {{ field|field_class:"form-control" }}
+      </div>
+    </div>
+  {% endfor %}
+  <div class="submit-row">
+    <input class="btn btn-primary" type="submit" value="Change Email" />
+  </div>
 </form>
 {%endblock%}
index c5fe8060eda16a2a410f8476e400af88ca8c6367..c7c0e6980c90eb34e05f00293ad6ab365ee5c7da 100644 (file)
@@ -1,7 +1,7 @@
 {%extends "base/page.html"%}
 {%block title%}Your account{%endblock%}
 {%block contents%}
-<h1>Your account</h1>
+<h1>Your account <i class="far fa-address-card"></i></h1>
 <p>
 From this section, you can manage all information on this site connected
 to your PostgreSQL community account. Other than your basic profile
index 9e251a8cc8645ab94528fec400a0a923b03b7995..653c965996d9c558a82ef9105975e74ffda07500 100644 (file)
@@ -1,6 +1,6 @@
 {%extends "base/page.html"%}
 {%block contents%}
-<h1>Sign in</h1>
+<h1>Sign in <i class="fas fa-sign-in-alt"></i></h1>
 <p>
 {%if sitename%}
 The website you are trying to log in to ({{sitename}}) is using the
@@ -32,16 +32,16 @@ password, you can use the <a href="/account/reset/">password reset</a> form.
 {%endfor%}
 {%endif%}
 <form action="." method="post" id="login-form">{% csrf_token %}
-  <div class="form-row">
-    <label for="id_username">Username:</label> <input type="text" name="username" id="id_username" />
+  <div class="form-group">
+    <input type="text" class="form-control" name="username" id="id_username" placeholder="Username" />
   </div>
-  <div class="form-row">
-    <label for="id_password">Password:</label> <input type="password" name="password" id="id_password" />
+  <div class="form-group">
+    <input type="password" class="form-control" name="password" id="id_password" placeholder="Password"/>
     <input type="hidden" name="this_is_the_login_form" value="1" />
     <input type="hidden" name="next" value="{{next}}" />
   </div>
   <div class="submit-row">
-    <label>&nbsp;</label><input type="submit" value="Sign in with community account password" />
+    <input class="btn btn-primary" type="submit" value="Community Sign-In">
   </div>
 </form>
 
index a975ca13cfaa9aa9e419369a7d72cd5467e35c93..7aed2992094553b41dc296bb0206ed5e0e47a300 100644 (file)
@@ -1,7 +1,7 @@
 {%extends "base/page.html"%}
 {%block title%}Your account{%endblock%}
 {%block contents%}
-<h1>{{title}}s</h1>
+<h1>{{title}}s <i class="fas fa-th-list"></i></h1>
 <p>
 Objects in red are awaiting moderator approval. Note that modifying a previously
 approved object <em>may</em> result in it being un-approved if the changes are
index 9781e2b14999ea3794520109c4388acb36c3f3e4..b7ea3670688f8574fdef83421ac23a29d66a82d4 100644 (file)
@@ -1,7 +1,7 @@
 {%extends "base/page.html"%}
 {%block title%}Organisations{%endblock%}
 {%block contents%}
-<h1>Organisations</h1>
+<h1>Organisations <i class="fa fa-users"></i></h1>
 <p>
 The following organisations are registered in our database. Note that any
 organisations listed as <em>Migrated Connections</em> are organisations that
@@ -12,16 +12,20 @@ organisations, please send an email to
 letting us know this, and including the name of your community account.
 We will then link your account to this organisation.
 </p>
-<table>
- <tr>
-  <th>Organisation</th>
-  <th>Manager</th>
- </tr>
-{%for o in orgs%}
- <tr>
-  <td>{{o.name}}</td>
-  <td>{%for m in o.managers.all%}{{m.first_name}} {{m.last_name}}{%if not forloop.last%}<br/>{%endif%}{%endfor%}</td>
- </tr>
-{%endfor%}
+<table class="table table-striped">
+  <thead class="thead-light">
+    <tr>
+     <th>Organisation</th>
+     <th>Manager</th>
+    </tr>
+  </thead>
+  <tbody>
+    {%for o in orgs%}
+     <tr>
+      <th scope="row">{{o.name}}</th>
+      <td>{%for m in o.managers.all%}{{m.first_name}} {{m.last_name}}{%if not forloop.last%}<br/>{%endif%}{%endfor%}</td>
+     </tr>
+    {%endfor%}
+  </tbody>
 </table>
 {%endblock%}
index 6ae98cc03d6444944ad0ccf7a2a65d13a4f9a7e6..a1211c6cecccefe56c4e2562a1bf9b3ed9b91ee3 100644 (file)
@@ -1,26 +1,49 @@
 {%extends "base/page.html"%}
+{% load pgfilters %}
 {%block title%}Change password{%endblock%}
 {%block contents%}
-<h1>Change password</h1>
+<h1>Change password <i class="fas fa-lock"></i></h1>
 <p>
 From this form you can change the password of your community account.
 </p>
 
-<form action="." method="post" id="login-form">{% csrf_token %}
-  <div class="form-row">
-    {{ form.old_password.errors }}
-    <label for="id_old_password">Old password:</label>{{ form.old_password }}
+<form action="." method="post" id="login-form">
+  {% csrf_token %}
+  <div class="form-group row">
+    {% if form.old_password.errors %}
+      {% for e in form.old_password.errors %}
+        <div class="col-lg-12 alert alert-danger">{{e}}</div>
+      {% endfor %}
+    {% endif %}
+    <label class="col-form-label col-sm-3" for="id_old_password">Old Password:</label>
+    <div class="col-sm-9">
+      {{ form.old_password|field_class:"form-control" }}
+    </div>
   </div>
-  <div class="form-row">
-    {{ form.new_password1.errors }}
-    <label for="id_new_password1">New password</label>{{ form.new_password1 }}
+  <div class="form-group row">
+    {% if form.old_password.errors %}
+      {% for e in form.new_password1.errors %}
+        <div class="col-lg-12 alert alert-danger">{{e}}</div>
+      {% endfor %}
+    {% endif %}
+    <label class="col-form-label col-sm-3" for="id_new_password1">New Password:</label>
+    <div class="col-sm-9">
+      {{ form.new_password1|field_class:"form-control" }}
+    </div>
   </div>
-  <div class="form-row">
-    {{ form.new_password2.errors }}
-    <label for="id_new_password2">Confirm password:</label>{{ form.new_password2 }}
+  <div class="form-group row">
+    {% if form.new_password2.errors %}
+      {% for e in form.new_password2.errors %}
+        <div class="col-lg-12 alert alert-danger">{{e}}</div>
+      {% endfor %}
+    {% endif %}
+    <label class="col-form-label col-sm-3" for="id_new_password2">Confirm New Password:</label>
+    <div class="col-sm-9">
+      {{ form.new_password2|field_class:"form-control" }}
+    </div>
   </div>
   <div class="submit-row">
-    <label>&nbsp;</label><input type="submit" value="Change password" />
+    <label>&nbsp;</label><input class="btn btn-primary" type="submit" value="Change Password" />
   </div>
 </form>
 
index dbd6aee7cc26fe8d6161f70ca4c8e3aa72fdd520..73b07b9edb859b4b48ec74b894c96f7e5d8c59ed 100644 (file)
@@ -1,7 +1,7 @@
 {%extends "base/page.html"%}
 {%block title%}Password changed{%endblock%}
 {%block contents%}
-<h1>Change password</h1>
+<h1>Change password <i class="fas fa-lock"></i></h1>
 <p>
 Your password has been changed.
 </p>
index 7008f0b612d07812c618831c1012e3b22837c312..ed3bb20bcdd72fb8e1c0b18c6d8b34e07196c9a1 100644 (file)
@@ -2,17 +2,18 @@
 {%block title%}Password reset{%endblock%}
 {%block contents%}
 
-<h1>Password reset</h1>
+<h1>Password reset <i class="fas fa-key"></i></h1>
 <p>
 If you've forgotten your password, you can enter your email address in the field below
 and we'll email you instructions for setting a new one.
 </p>
 
 <form action="" method="post">{% csrf_token %}
-  <div class="form-row">
-{{ form.email.errors }}
-   <label for="id_email">E-mail address</label> {{ form.email }} <input type="submit" value="Reset my password" />
+  <div class="form-group">
+    {{ form.email.errors }}
+    {{ form.email }}
   </div>
+  <button type="submit" class="btn btn-primary">Reset Password</button>
 </form>
 
 {% endblock %}
index 2df37e52a3d1aea56e3a0a183ab5510455f98765..5712e8230275648cc8b4b302ced854e8e0c62b1c 100644 (file)
@@ -1,6 +1,7 @@
 {%extends "base/page.html"%}
 {%block contents%}
-<h1>Password reset complete</h1>
+<h1>Password reset complete <i class="fas fa-key"></i></h1>
 <p>Your password has been reset.</p>
+<p><a class="btn btn-primary" href="/account/login/">Go to Login</a>
 
 {% endblock %}
index 7d3fb78806350a914c4144d5bf9636d7e2a3ffa2..4b639498721778723826dd5aee010fcb90173dc9 100644 (file)
@@ -1,30 +1,46 @@
 {%extends "base/page.html"%}
+{% load pgfilters %}
 {%block title%}Password reset{%endblock%}
 {%block contents%}
 
 {% if validlink %}
 
-<h1>Enter new password</h1>
+<h1>Enter new password <i class="fas fa-key"></i></h1>
 
 <p>Please enter your new password twice so we can verify you typed it in correctly.</p>
 
-<form action="" method="post">{% csrf_token %}
-  <div class="form-row">
-   {{ form.new_password1.errors }}
-   <label for="id_new_password1">New password:</label>{{ form.new_password1 }}
+<form action="" method="post">
+  {% csrf_token %}
+  <div class="form-group row">
+    {% if form.new_password1.errors %}
+      {% for e in form.new_password1.errors %}
+        <div class="col-lg-12 alert alert-danger">{{e}}</div>
+      {% endfor %}
+    {% endif %}
+    <label class="col-form-label col-sm-3" for="id_new_password1">New Password:</label>
+    <div class="col-sm-9">
+      {{ form.new_password1|field_class:"form-control" }}
+    </div>
   </div>
-  <div class="form-row">
-   {{ form.new_password2.errors }}
-   <label for="id_new_password2">Confirm password:</label>{{ form.new_password2 }}
+  <div class="form-group row">
+    {% if form.new_password2.errors %}
+      {% for e in form.new_password2.errors %}
+        <div class="col-lg-12 alert alert-danger">{{e}}</div>
+      {% endfor %}
+    {% endif %}
+    <label class="col-form-label col-sm-3" for="id_new_password2">Confirm New Password:</label>
+    <div class="col-sm-9">
+      {{ form.new_password2|field_class:"form-control" }}
+    </div>
   </div>
   <div class="submit-row">
-    <label>&nbsp;</label><input type="submit" value="Change password" />
+    <label>&nbsp;</label><input class="btn btn-primary" type="submit" value="Change Password" />
   </div>
 </form>
 
 {% else %}
 
-<h1>Password reset unsuccessful</h1>
+<h1>Password reset unsuccessful <i class="fas fa-key"></i></h1>
 
 <p>The password reset link was invalid, possibly because it has already been used.  Please request a new password reset.</p>
 
index 9230bb821d96ff2873a206c80e8e87dd891fb177..5b8aae55cd12bcd62cfb667c8f8475f7b532561c 100644 (file)
@@ -2,7 +2,7 @@
 {%block title%}Password reset{%endblock%}
 {%block contents%}
 
-<h1>Password reset</h1>
+<h1>Password reset <i class="fas fa-key"></i></h1>
 <p>
 We've e-mailed you instructions for setting your password to the e-mail address you submitted. You should be receiving it shortly.
 </p>
index 74fd334f01697a75df2ce63ae3d4c70592f134f7..cd56fa7ad8093fc12578ea0ca50464838b45a292 100644 (file)
@@ -1,77 +1,96 @@
 {%extends "base/page.html"%}
+{% load pgfilters %}
 {%block title%}Edit user profile{%endblock%}
 {%block contents%}
-<h1>Edit user profile</h1>
-<form method="post" action=".">{% csrf_token %}
+<h1>Edit User Profile <i class="far fa-address-card"></i></h1>
 
-<table class="pgGenericFormTable">
-{%if userform.errors or profileform.errors or contribform.errors %}
- <tr class="errorheader">
-  <td colspan="2">Please correct the errors below, and re-submit the form.</td>
- </tr>
-{%endif%}
- <tr>
-  <th>Username</th>
-  <td>{{user.username}}</td>
- </tr>
- <tr>
-  <th>Email</th>
-  <td>{{user.email}} {%if can_change_email%}(<em><a href="change_email/">change</a></em>){%else%}
-<br/><br/>
-The email address of this account cannot be changed, because the account does
-not have a local password, most likely because it's connected to a third
-party system (such as Google or Facebook).
-{%endif%}</td>
- </tr>
-{%for field in userform%}
- {%if field.errors %}
- <tr class="error">
-  <td colspan="2">{{field.errors.as_ul}}</td>
- </tr>
- {%endif%}
- <tr {%if field.errors%}class="errorinfo"{%endif%}>
-  <th>{{field.label_tag}}{%if field.help_text %}<br/>
-   <span class="formfieldhelp">{{field.help_text}}</span>{%endif%}</th>
-  <td>{{field}}</td>
- </tr>
-{%endfor%}
-{%for field in profileform%}
- {%if field.errors %}
- <tr class="error">
-  <td colspan="2">{{field.errors.as_ul}}</td>
- </tr>
- {%endif%}
- <tr {%if field.errors%}class="errorinfo"{%endif%}>
-  <th>{{field.label_tag}}{%if field.help_text %}<br/>
-   <span class="formfieldhelp">{{field.help_text}}</span>{%endif%}</th>
-  <td>{{field}}</td>
- </tr>
-{%endfor%}
-</table>
-
-{%if contribform%}
-<h2>Edit contributor information</h2>
-<p>
-You can edit the information that's shown on the
-<a href="/community/contributors/">contributors</a> page. Please be
-careful as your changes will take effect immediately.
-</p>
-<table class="pgGenericFormTable">
-{%for field in contribform%}
- {%if field.errors %}
- <tr class="error">
-  <td colspan="2">{{field.errors.as_ul}}</td>
- </tr>
- {%endif%}
- <tr {%if field.errors%}class="errorinfo"{%endif%}>
-  <th>{{field.label_tag}}{%if field.help_text %}<br/>
-   <span class="formfieldhelp">{{field.help_text}}</span>{%endif%}</th>
-  <td>{{field}}</td>
- </tr>
-{%endfor%}
-</table>
-{%endif%}
-
-<input type="submit" value="Save" />
+<form method="post" action=".">
+  {% csrf_token %}
+  {% if userform.errors or profileform.errors or contribform.errors %}
+    <div class="alert alert-danger" role="alert">
+      Please correct the errors below, and re-submit the form.
+    </div>
+  {% endif %}
+  <div class="form-group row">
+    <label class="col-form-label col-sm-3">Username:</label>
+    <div class="col-sm-9">
+      {{ user.username }}
+    </div>
+  </div>
+  <div class="form-group row">
+    <label class="col-form-label col-sm-3">Email:</label>
+    <div class="col-sm-9">
+      {{ user.email }}
+      {% if can_change_email %}
+        (<em><a href="change_email/">change</a></em>)
+      {% else %}
+        <p><em>The email address of this account cannot be changed, because the account does
+        not have a local password, most likely because it's connected to a third
+        party system (such as Google or Facebook).</em></p>
+      {% endif %}
+    </div>
+  </div>
+  {% for field in userform %}
+    <div class="form-group row">
+      {% if field.errors %}
+        {% for e in field.errors %}
+          <div class="col-lg-12 alert alert-danger">{{e}}</div>
+        {% endfor %}
+      {% endif %}
+      <label class="col-form-label col-sm-3" for="{{ field.id }}">
+        {{ field.label|title }}
+        {% if field.help_text %}
+          <p><small>{{ field.help_text }}</small></p>
+        {% endif %}
+      </label>
+      <div class="col-sm-9">
+        {{ field|field_class:"form-control" }}
+      </div>
+    </div>
+  {% endfor %}
+  {% for field in profileform %}
+    <div class="form-group row">
+      {% if field.errors %}
+        {% for e in field.errors %}
+          <div class="col-lg-12 alert alert-danger">{{e}}</div>
+        {% endfor %}
+      {% endif %}
+      <label class="col-form-label col-sm-3" for="{{ field.id }}">
+        {{ field.label }}
+        {% if field.help_text %}
+          <p><small>{{ field.help_text }}</small></p>
+        {% endif %}
+      </label>
+      <div class="col-sm-9">
+        {{ field|field_class:"form-control" }}
+      </div>
+    </div>
+  {% endfor %}
+  {% if contribform %}
+    <h2>Edit contributor information</h2>
+    <p>You can edit the information that's shown on the <a href="/community/contributors/" target="_blank">contributors</a> page. Please be careful as your changes will take effect immediately!
+    </p>
+    {% for field in contribform %}
+      <div class="form-group row">
+        {% if field.errors %}
+          {% for e in field.errors %}
+            <div class="col-lg-12 alert alert-danger">{{e}}</div>
+          {% endfor %}
+        {% endif %}
+        <label class="col-form-label col-sm-3" for="{{ field.id }}">
+          {{ field.label }}
+          {% if field.help_text %}
+            <p><small>{{ field.help_text }}</small></p>
+          {% endif %}
+        </label>
+        <div class="col-sm-9">
+          {{ field|field_class:"form-control" }}
+        </div>
+      </div>
+    {% endfor %}
+  {% endif %}
+  <div class="submit-row">
+    <input class="btn btn-primary" type="submit" value="Save" />
+  </div>
 </form>
 {%endblock%}
index 65b5339d406a0c45b55ad85e6a0daf881b061de0..b3991949b98b2fa17ce1fb4538ada96cac1973e2 100644 (file)
@@ -1,7 +1,7 @@
 {%extends "base/page.html"%}
 {%block title%}Change email{%endblock%}
 {%block contents%}
-<h1>Change email</h1>
+<h1>Change email <i class="fas fa-envelope"></i></h1>
 <p>
 An email has been sent to your new email address to confirm the
 change of email. This token will remain valid for approximately