Merge pull request #337 from dod-ccpo/user-profile-screen

User profile screen

atst/forms/edit_user.py

@@ -0,0 +1,70 @@
+import pendulum
+from wtforms.fields.html5 import DateField, EmailField, TelField
+from wtforms.fields import RadioField, StringField
+from wtforms.validators import Email, Required
+
+from .fields import SelectField
+from .forms import ValidatedForm
+from .data import SERVICE_BRANCHES
+
+from .validators import Alphabet, DateRange, PhoneNumber
+
+
+class EditUserForm(ValidatedForm):
+
+    first_name = StringField("First Name", validators=[Required(), Alphabet()])
+
+    last_name = StringField("Last Name", validators=[Required(), Alphabet()])
+
+    email = EmailField(
+        "E-mail Address",
+        description="Enter your preferred contact e-mail address",
+        validators=[Required(), Email()],
+    )
+
+    phone_number = TelField(
+        "Phone Number",
+        description="Enter your 10-digit U.S. phone number",
+        validators=[Required(), PhoneNumber()],
+    )
+
+    service_branch = SelectField(
+        "Service Branch or Agency",
+        description="Which service or organization do you belong to within the DoD?",
+        choices=SERVICE_BRANCHES,
+    )
+
+    citizenship = RadioField(
+        description="What is your citizenship status?",
+        choices=[
+            ("United States", "United States"),
+            ("Foreign National", "Foreign National"),
+            ("Other", "Other"),
+        ],
+        validators=[Required()],
+    )
+
+    designation = RadioField(
+        "Designation of Person",
+        description="What is your designation within the DoD?",
+        choices=[
+            ("military", "Military"),
+            ("civilian", "Civilian"),
+            ("contractor", "Contractor"),
+        ],
+        validators=[Required()],
+    )
+
+    date_latest_training = DateField(
+        "Latest Information Assurance (IA) Training Completion Date",
+        description='To complete the training, you can find it in <a class="icon-link" href="https://iatraining.disa.mil/eta/disa_cac2018/launchPage.htm" target="_blank">Information Assurance Cyber Awareness Challange</a> website.',
+        validators=[
+            Required(),
+            DateRange(
+                lower_bound=pendulum.duration(years=1),
+                upper_bound=pendulum.duration(days=0),
+                message="Must be a date within the last year.",
+            ),
+        ],
+        format="%m/%d/%Y",
+    )

atst/routes/__init__.py

@@ -7,6 +7,7 @@ from atst.domain.users import Users
 from atst.domain.authnid import AuthenticationContext
 from atst.domain.audit_log import AuditLog
 from atst.domain.auth import logout as _logout
+from atst.forms.edit_user import EditUserForm
 
 
 bp = Blueprint("atst", __name__)
@@ -89,3 +90,16 @@ def logout():
 def activity_history():
     audit_events = AuditLog.get_all_events(g.current_user)
     return render_template("audit_log.html", audit_events=audit_events)
+
+
+@bp.route("/user")
+def user():
+    form = EditUserForm(request.form)
+    user = g.current_user
+    return render_template("user/edit.html", form=form, user=user)
+
+
+@bp.route("/save_user")
+def save_user():
+    # no op
+    return redirect(url_for(".home"))

styles/components/_forms.scss

@@ -16,6 +16,12 @@
         margin-top: 0;
       }
     }
+
+    .usa-input {
+      input {
+        max-width: none;
+      }
+    }
   }
 
   @include media($medium-screen) {
@@ -46,10 +52,6 @@
             right: -$gap * 3;
           }
         }
-
-        input {
-          max-width: none;
-        }
       }
 
       &:first-child {

templates/base_public.html

@@ -24,7 +24,7 @@
       </a>
 
       {% if g.current_user %}
-        <a href="{{ url_for('atst.home') }}" class="topbar__link">
+        <a href="{{ url_for('atst.user') }}" class="topbar__link">
           <span class="topbar__link-label">{{ g.current_user.first_name + " " + g.current_user.last_name }}</span>
           {{ Icon('avatar', classes='topbar__link-icon') }}
         </a>

templates/fragments/edit_user_form.html

@@ -0,0 +1,38 @@
+{% from "components/text_input.html" import TextInput %}
+{% from "components/options_input.html" import OptionsInput %}
+{% from "components/date_input.html" import DateInput %}
+
+<form action='{{ form_action }}'>
+  <div class='panel'>
+    <div class='panel__content'>
+      <div class='form-row'>
+        <div class='form-col form-col--half'>
+          {{ TextInput(form.first_name) }}
+        </div>
+
+        <div class='form-col form-col--half'>
+          {{ TextInput(form.last_name) }}
+        </div>
+      </div>
+
+      <div class='form-row'>
+        <div class='form-col form-col--half'>
+          {{ TextInput(form.email, validation='email') }}
+        </div>
+
+        <div class='form-col form-col--half'>
+          {{ TextInput(form.phone_number, validation='usPhone') }}
+        </div>
+      </div>
+
+      {{ OptionsInput(form.service_branch) }}
+      {{ OptionsInput(form.citizenship) }}
+      {{ OptionsInput(form.designation) }}
+      {{ DateInput(form.date_latest_training,tooltip="When was the last time you completed the IA training? <br> Information Assurance (IA) training is an important step in cyber awareness.",placeholder="MM / DD / YYYY", validation="date") }}
+    </div>
+  </div>
+
+  <div class='action-group'>
+    <button class='usa-button usa-button-big' type='submit'>Save Details</button>
+  </div>
+</form>

templates/navigation/topbar.html

@@ -20,7 +20,7 @@
         </a>
       {% endif %}
 
-      <a href="{{ url_for('atst.home') }}" class="topbar__link">
+      <a href="{{ url_for('atst.user') }}" class="topbar__link">
         <span class="topbar__link-label">{{ g.current_user.first_name + " " + g.current_user.last_name }}</span>
         {{ Icon('avatar', classes='topbar__link-icon') }}
       </a>

templates/user/edit.html

@@ -0,0 +1,24 @@
+{% extends "base.html" %}
+{% from "components/alert.html" import Alert %}
+
+{% block content %}
+<div class='col'>
+  {{ Alert('This form does not yet function',
+    message="<p>Functionality of this form is pending more engineering work. Engineers, please remove this alert when done.</p>",
+    level='warning'
+  ) }}
+
+  <div class='panel'>
+    <div class='panel__heading'>
+      <h1>
+        <div class='h2'>{{ user.first_name }} {{ user.last_name }}</div>
+        <div class='subtitle h3'>Edit user details</div>
+      </h1>
+    </div>
+  </div>
+
+  {% set form_action = url_for('atst.save_user') %}
+  {% include "fragments/edit_user_form.html" %}
+
+</div>
+{% endblock %}