Build backend form for creating a new workspace member

atst/forms/new_member.py

@@ -0,0 +1,30 @@
+from flask_wtf import Form
+from wtforms.fields import StringField
+from wtforms.fields.html5 import EmailField
+from wtforms.validators import Required, Email, Length
+
+from atst.forms.validators import IsNumber
+from atst.forms.fields import SelectField
+
+
+class NewMemberForm(Form):
+
+    first_name = StringField(label="First Name", validators=[Required()])
+    last_name = StringField(label="Last Name", validators=[Required()])
+    email = EmailField("Email Address", validators=[Required(), Email()])
+    dod_id = StringField(
+        "DOD ID", validators=[Required(), Length(min=10), IsNumber()]
+    )
+    workspace_role = SelectField(
+        "Workspace Role",
+        choices=[
+            ("", "Select a Role"),
+            ("admin", "Admin"),
+            ("billing_auditor", "Billing Auditor"),
+            ("ccpo", "CCPO"),
+            ("developer", "Developer"),
+            ("owner", "Owner"),
+            ("security_auditor", "Security Auditor"),
+        ],
+        validators=[Required()]
+    )

templates/member_new.html

@@ -1,6 +1,8 @@
 {% extends "base.html" %}
 
 {% from "components/icon.html" import Icon %}
+{% from "components/text_input.html" import TextInput %}
+{% from "components/options_input.html" import OptionsInput %}
 
 {% block content %}
 
@@ -14,51 +16,12 @@
     </div>
 
     <div class="panel__content">
-
+      {{ TextInput(form.first_name) }}
-
+      {{ TextInput(form.last_name) }}
-      <div class='usa-input'>
+      {{ TextInput(form.email) }}
-        <label for='member_fname'>
+      {{ TextInput(form.dod_id) }}
-          First Name
+      {{ OptionsInput(form.workspace_role) }}
-        </label>
-        <input id='member_fname' type='text' aria-describedby='member_fname'/>
-      </div>
-
-      <div class='usa-input'>
-        <label for='member_lname'>
-          Last Name
-        </label>
-        <input id='member_lname' type='text' aria-describedby='member_lname'/>
-      </div>
-
-      <div class='usa-input'>
-        <label for='member_email'>
-          Email
-        </label>
-        <input id='member_email' type='email' placeholder='name@mail.mil' aria-describedby='member_email'/>
-      </div>
-
-      <div class='usa-input'>
-        <label for='member_dodid'>
-          DoD ID
-        </label>
-        <input id='member_dodid' type='text' placeholder='23456789' aria-describedby='member_dodid'/>
-      </div>
-
-      <div class="usa-input">
-        <label for="filter-status">Workspace Role</label>
-        <select id="filter-status" name="filter-status">
-          <option value="" selected="selected" disabled>Select a role</option>
-          <option value="Admin">Admin</option>
-          <option value="Billing Auditor">Billing Auditor</option>
-          <option value="CCPO">CCPO</option>
-          <option value="Developer">Developer</option>
-          <option value="Owner">Owner</option>
-          <option value="Security Auditor">Security Auditor</option>
-        </select>
-      </div>
-
     </div>
-
   </div>
 
   <div class='action-group'>