Built out visual styling for user profile.

rookeries/static/partials/user-login.html

@@ -12,7 +12,7 @@
         <div class="control-group">
             <label class="control-label" for="password">Password</label>
             <div class="controls">
-                <input type="text" id="password" />
+                <input type="password" id="password" />
             </div>
         </div>
         <div class="control-group">

rookeries/static/partials/user-profile.html

@@ -2,38 +2,78 @@
 <h1>User Profile</h1>
 
 <div class="user_profile_box">
-    {% if error %}
-        <div class="error_message">{{ error }}</div>
-    {% endif %}
 
+    <div class="error_message">{{ error.message }}</div>
+
+    <!-- TODO Translate the logic into an Angular controller that controlls the URL. -->
+    <!--
     {% if not registration and user is defined %}
         <form action="{{ url_for('display_user_profile', username=user.username) }}" method="post">
     {% else %}
         <form action="{{ url_for('register_user') }}" method="post">
     {% endif %}
-        <ul>
+    -->
-            <li>Username:
+    <!-- TODO And please, please, come up with a saner name for the action. -->
+    <form class="form-horizontal" ng-submit="profile-url" method="post">
+
+        <!-- TODO Make this all part of the User object with user.username, etc. -->
+        <div class="control-group">
+            <label class="control-label" for="username">Username</label>
+            <div class="controls">
+                <input type="text" id="username" placeholder="Username" />
+            </div>
+        </div>
+
+        <!-- TODO Translate this template -->
+        <!-- li>Username:
             {% if not registration and user is defined %}
                 {{ user.username }}
             {% else %}
-                <input type="text" name="username" /></li>
+                <input type="text" name="username" />
             {% endif %}
-            <li>Email: <input type="email" name="email"
+            </li-->
-                    value="{% if not registration and user is defined %}{{ user.email }}{% endif %}" /></li>
-            <li>Full Name: <input type="text" name="user_full_name"
-                    value="{% if not registration and user is defined %}{{ user.full_name }}{% endif %}" /></li>
 
-            <li>Password: <input type="password" name="password" /></li>
+        <div class="control-group">
+            <label class="control-label" for="email">Email</label>
+            <div class="controls">
+                <input type="text" id="email" placeholder="user@email.net" />
+            </div>
+        </div>
 
+
+        <!-- TODO Add in placeholders where appropriate too. -->
+        <!-- li>Email: <input type="email" name="email"
+                value="{% if not registration and user is defined %}{{ user.email }}{% endif %}" /></li-->
+
+        <div class="control-group">
+            <label class="control-label" for="full_name">Full Name</label>
+            <div class="controls">
+                <input type="text" id="full_name" placeholder="First Last" />
+            </div>
+        </div>
+
+        <div class="control-group">
+            <label class="control-label" for="password">Password</label>
+            <div class="controls">
+                <input type="password" id="password" />
+            </div>
+        </div>
+
+        <div class="control-group">
+            <div class="controls">
+                <button type="submit" class="btn">{{ profile-button-name }}</button>
+            </div>
+        </div>
+
+        <!-- TODO Again model the Angular app to work in a similar fashion to the Jinja2 templated version. -->
+        <!--
             {% if registration %}
                 <li><input type="submit" value="Register" /></li>
             {% else %}
                 <li><input type="submit" value="Update Profile" /></li>
             {% endif %}
+            </li-->
+
 
-            {% if registration and invite_key is defined %}
-                <input type="hidden" name="invite_key" value="{{ invite_key }}" />
-            {% endif %}
-        </ul>
     </form>
 </div>