z-index of alerts

.gitignore

@@ -3,4 +3,5 @@ node_modules
 npm-debug.log
 bower_components
 dist
-*.swp
+*.swp
+.idea

src/pages/manage-bol-add-error.html

@@ -0,0 +1,113 @@
+---
+layout: manage-bol
+---
+
+<article class="management">
+  <div>
+
+    <h1>Manage Your BOL Service Settings</h1>
+
+    <p>You can manage @ucla.edu email forwarding and view the BOL services you have access to.</p>
+
+    <h2>BOL Email Forwarding</h2>
+
+    <div class="item-overview">
+      <span class="expandable-area">
+        <dl>
+          <dt>Your foo.bear@ucla.edu email is delivered to:</dt>
+          <dd>Google Apps at UCLA</dd>
+        </dl>
+
+        <span class="expand-context">Change forwarding</span>
+      </span>
+
+      <div class="expanded-info">
+        <p>Mail sent to your @ucla.edu email address has to be forwarded to another email address to be received. By default, email sent to your @ucla.edu email address is forwarded to your Google Apps at UCLA account, but you can choose to send it to a custom address (i.e. a personal one you already use). You can also just disable your @ucla.edu address - if you do so, all email will be returned to the sender.</p>
+
+        <form action="/mailprefs.php" method="post" data-abide novalidate>
+          <label>Enter address to forward all @ucla.edu email to
+            <input class="focus" id="e1" name="e1" type="email" placeholder="foobruin@gmail.com" title="Enter email address" required>
+            <span class="form-error">This doesn't look like a valid email address.</span>
+          </label>
+
+          <label>Confirm address to forward all @ucla.edu email to
+            <input class="focus" id="e2" name="e2" type="email" placeholder="foobruin@gmail.com" data-equalto="e1" title="Re-enter email address" required>
+            <span class="form-error">This doesn't look like a valid email address and/or doesn't match the one above.</span>
+          </label>
+
+          <button id="verify-forwarding" class="primary-button" type="submit" name="action">Forward @ucla.edu emails to new address</button>  <button class="button" type="submit">Cancel</button>
+          <p>Note: A verification link will be sent to the new email address.</p>
+
+          <span class="line-thru">or</span>
+
+          <button id="disable" class="button cancel-button" type="submit" name="action">Disable my @ucla.edu address</button>
+        </form>
+      </div>
+    </div>
+
+    <h2>BOL Email Alias</h2>
+
+    <div class="item-overview">
+      <span class="expandable-area">
+        <dl>
+          <dt>Manage email alias</dt>
+          <dd>Email alias is <strong class="error-title">NOT</strong> set up for your account.</dd>
+        </dl>
+
+        <span class="expand-context">Change email alias</span>
+      </span>
+
+      <div class="expanded-info">
+        <p>An email alias will allow you to set up a new email address that will deliver to your @ucla.edu email address that is setup for your account.</p>
+
+        <form action="/mailprefs.php" method="post" data-abide novalidate>
+          <label>Enter address to act as an email alias
+            <input class="focus" id="alias-1" name="alias-1" type="email" placeholder="foobruin@gmail.com" title="Enter email alias" required>
+            <span class="form-error is-visible">This doesn't look like a valid email address.</span>
+          </label>
+
+          <label>Confirm address to set up as alias
+            <input class="focus" id="alias-2" name="alias-2" type="email" placeholder="foobruin@gmail.com" data-equalto="e1" title="Re-enter email alias" required>
+            <span class="form-error is-visible">This doesn't look like a valid email address and/or doesn't match the one above.</span>
+          </label>
+
+          <button id="verify-alias" class="primary-button" type="submit" name="action">Add new email alias</button>  <button class="button" type="submit">Cancel</button>
+
+          <!--          <span class="line-thru">or</span>-->
+
+          <!--          <button id="disable" class="button cancel-button" type="submit" name="action">Delete my email alias</button>-->
+        </form>
+
+        <p class="note-that">(<a href="manage-bol.html">default</a>)</p>
+      </div>
+    </div>
+
+    <h2>BOL Enabled Services</h2>
+
+    <div class="item-overview">
+      <span class="expandable-area">
+        <dl>
+          <dt>BOL Services</dt>
+          <dd>
+            <ul class="listless">
+              <li>UCLA Logon ID</li>
+              <li>Google Apps for UCLA</li>
+              <li>Wired</li>
+              <li>Wireless</li>
+              <li>VPN</li>
+            </ul>
+          </dd>
+        </dl>
+
+        <span class="expand-context">More Info</span>
+      </span>
+
+      <div class="expanded-info">
+        <p>Your UCLA Logon ID grants you access to the services listed above.</p>
+      </div>
+    </div>
+
+    <p class="note-that">(<a href="manage-bol.html">default</a>, <a href="manage-bol-disabled.html">disabled</a>, <a href="manage-bol-custom.html">custom</a>, <a href="manage-bol-pending.html">pending</a>)</p>
+
+  </div>
+</article>

src/pages/manage-bol-custom.html

@@ -46,6 +46,41 @@ <h2>BOL Email Forwarding</h2>
       </div>
     </div>
 
+    <h2>BOL Email Alias</h2>
+
+    <div class="item-overview">
+      <span class="expandable-area">
+        <dl>
+          <dt>Manage email alias</dt>
+          <dd>foo@ucla.edu</dd>
+        </dl>
+
+        <span class="expand-context">Change email alias</span>
+      </span>
+
+      <div class="expanded-info">
+        <p>An email alias will allow you to set up a new email address that will deliver to your @ucla.edu email address that is setup for your account.</p>
+
+        <form action="/mailprefs.php" method="post" data-abide novalidate>
+          <label>Enter address to act as an email alias
+            <input class="focus" id="alias-1" name="alias-1" type="email" placeholder="foobruin@gmail.com" title="Enter email alias" required>
+            <span class="form-error">This doesn't look like a valid email address.</span>
+          </label>
+
+          <label>Confirm address to set up as alias
+            <input class="focus" id="alias-2" name="alias-2" type="email" placeholder="foobruin@gmail.com" data-equalto="e1" title="Re-enter email alias" required>
+            <span class="form-error">This doesn't look like a valid email address and/or doesn't match the one above.</span>
+          </label>
+
+          <button id="verify-alias" class="primary-button" type="submit" name="action">Delete old alias and add new email alias</button>  <button class="button" type="submit">Cancel</button>
+          <p>Note: Adding a new email alias will delete your previous one.</p>
+          <span class="line-thru">or</span>
+
+          <button id="disable" class="button cancel-button" type="submit" name="action">Delete my email alias</button>
+        </form>
+      </div>
+    </div>
+
     <h2>BOL Enabled Services</h2>
 
     <div class="item-overview">

src/pages/manage-bol-disabled.html

@@ -45,6 +45,41 @@ <h2>BOL Email Forwarding</h2>
       </div>
     </div>
 
+    <h2>BOL Email Alias</h2>
+
+    <div class="item-overview">
+      <span class="expandable-area">
+        <dl>
+          <dt>Manage email alias</dt>
+          <dd>Email alias is <strong class="error-title">NOT</strong> set up for your account.</dd>
+        </dl>
+
+        <span class="expand-context">Change email alias</span>
+      </span>
+
+      <div class="expanded-info">
+        <p>An email alias will allow you to set up a new email address that will deliver to your @ucla.edu email address that is setup for your account.</p>
+
+        <form action="/mailprefs.php" method="post" data-abide novalidate>
+          <label>Enter address to act as an email alias
+            <input class="focus" id="alias-1" name="alias-1" type="email" placeholder="foobruin@gmail.com" title="Enter email alias" required>
+            <span class="form-error">This doesn't look like a valid email address.</span>
+          </label>
+
+          <label>Confirm address to set up as alias
+            <input class="focus" id="alias-2" name="alias-2" type="email" placeholder="foobruin@gmail.com" data-equalto="e1" title="Re-enter email alias" required>
+            <span class="form-error">This doesn't look like a valid email address and/or doesn't match the one above.</span>
+          </label>
+
+          <button id="verify-alias" class="primary-button" type="submit" name="action">Add new email alias</button>  <button class="button" type="submit">Cancel</button>
+
+          <!--          <span class="line-thru">or</span>-->
+
+          <!--          <button id="disable" class="button cancel-button" type="submit" name="action">Delete my email alias</button>-->
+        </form>
+      </div>
+    </div>
+
     <h2>BOL Enabled Services</h2>
 
     <div class="item-overview">

src/pages/manage-bol-pending.html

@@ -29,6 +29,41 @@ <h2>BOL Email Forwarding</h2>
       </div>
     </div>
 
+    <h2>BOL Email Alias</h2>
+
+    <div class="item-overview">
+      <span class="expandable-area">
+        <dl>
+          <dt>Manage email alias</dt>
+          <dd>Email alias is <strong class="error-title">NOT</strong> set up for your account.</dd>
+        </dl>
+
+        <span class="expand-context">Change email alias</span>
+      </span>
+
+      <div class="expanded-info">
+        <p>An email alias will allow you to set up a new email address that will deliver to your @ucla.edu email address that is setup for your account.</p>
+
+        <form action="/mailprefs.php" method="post" data-abide novalidate>
+          <label>Enter address to act as an email alias
+            <input class="focus" id="alias-1" name="alias-1" type="email" placeholder="foobruin@gmail.com" title="Enter email alias" required>
+            <span class="form-error">This doesn't look like a valid email address.</span>
+          </label>
+
+          <label>Confirm address to set up as alias
+            <input class="focus" id="alias-2" name="alias-2" type="email" placeholder="foobruin@gmail.com" data-equalto="e1" title="Re-enter email alias" required>
+            <span class="form-error">This doesn't look like a valid email address and/or doesn't match the one above.</span>
+          </label>
+
+          <button id="verify-alias" class="primary-button" type="submit" name="action">Add new email alias</button>  <button class="button" type="submit">Cancel</button>
+
+          <!--          <span class="line-thru">or</span>-->
+
+          <!--          <button id="disable" class="button cancel-button" type="submit" name="action">Delete my email alias</button>-->
+        </form>
+      </div>
+    </div>
+
     <h2>BOL Enabled Services</h2>
 
     <div class="item-overview">

src/pages/manage-bol.html

@@ -45,6 +45,43 @@ <h2>BOL Email Forwarding</h2>
       </div>
     </div>
 
+    <h2>BOL Email Alias</h2>
+
+    <div class="item-overview">
+      <span class="expandable-area">
+        <dl>
+          <dt>Manage email alias</dt>
+          <dd>Email alias is <strong class="error-title">NOT</strong> set up for your account.</dd>
+        </dl>
+
+        <span class="expand-context">Change email alias</span>
+      </span>
+
+      <div class="expanded-info">
+        <p>An email alias will allow you to set up a new email address that will deliver to your @ucla.edu email address that is setup for your account.</p>
+
+        <form action="/mailprefs.php" method="post" data-abide novalidate>
+          <label>Enter address to act as an email alias
+            <input class="focus" id="alias-1" name="alias-1" type="email" placeholder="foobruin@gmail.com" title="Enter email alias" required>
+            <span class="form-error">This doesn't look like a valid email address.</span>
+          </label>
+
+          <label>Confirm address to set up as alias
+            <input class="focus" id="alias-2" name="alias-2" type="email" placeholder="foobruin@gmail.com" data-equalto="e1" title="Re-enter email alias" required>
+            <span class="form-error">This doesn't look like a valid email address and/or doesn't match the one above.</span>
+          </label>
+
+          <button id="verify-alias" class="primary-button" type="submit" name="action">Add new email alias</button>  <button class="button" type="submit">Cancel</button>
+
+<!--          <span class="line-thru">or</span>-->
+
+<!--          <button id="disable" class="button cancel-button" type="submit" name="action">Delete my email alias</button>-->
+        </form>
+
+        <p class="note-that">(<a href="manage-bol-add-error.html">error</a>)</p>
+      </div>
+    </div>
+
     <h2>BOL Enabled Services</h2>
 
     <div class="item-overview">