From 7c7d0da5b4f5009dcad333ed1bc9e62545592d74 Mon Sep 17 00:00:00 2001
From: Brian Talbot <btalbot@edx.org>
Date: Mon, 21 Jan 2013 15:50:16 -0500
Subject: [PATCH] drupal integration - styled page layout, form fields and
 states, added in status message areas/standards and revised Sass

---
 lms/static/sass/application.scss              |   6 +-
 lms/static/sass/base/_variables.scss          |   9 ++
 lms/static/sass/multicourse/_login.scss       |   0
 lms/static/sass/multicourse/_register.scss    |   0
 .../multicourse/_testcenter-register.scss     |   3 +
 lms/templates/login.html                      |  43 +++---
 lms/templates/register.html                   | 131 ++++++++++--------
 7 files changed, 113 insertions(+), 79 deletions(-)
 delete mode 100644 lms/static/sass/multicourse/_login.scss
 delete mode 100644 lms/static/sass/multicourse/_register.scss

diff --git a/lms/static/sass/application.scss b/lms/static/sass/application.scss
index 273299f6f9..285d98fdcb 100644
--- a/lms/static/sass/application.scss
+++ b/lms/static/sass/application.scss
@@ -16,10 +16,9 @@
 @import 'shared/course_filter';
 @import 'shared/modal';
 @import 'shared/activation_messages';
-
 @import 'multicourse/home';
 @import 'multicourse/dashboard';
-@import 'multicourse/testcenter-register';
+@import 'multicourse/account';
 @import 'multicourse/courses';
 @import 'multicourse/course_about';
 @import 'multicourse/jobs';
@@ -29,8 +28,7 @@
 @import 'multicourse/password_reset';
 @import 'multicourse/error-pages';
 @import 'multicourse/help';
-@import 'multicourse/login';
-@import 'multicourse/register';
+@import 'multicourse/testcenter-register';
 
 @import 'discussion';
 @import 'news';
diff --git a/lms/static/sass/base/_variables.scss b/lms/static/sass/base/_variables.scss
index 36bf31d4df..c2e4fad344 100644
--- a/lms/static/sass/base/_variables.scss
+++ b/lms/static/sass/base/_variables.scss
@@ -12,6 +12,8 @@ $sans-serif: 'Open Sans', $verdana;
 $monospace: Monaco, 'Bitstream Vera Sans Mono', 'Lucida Console', monospace;
 $serif: $georgia;
 
+$white: rgb(255,255,255);
+$black: rgb(0,0,0);
 $blue: rgb(29,157,217);
 $pink: rgb(182,37,104);
 $yellow: rgb(255, 252, 221);
@@ -23,6 +25,13 @@ $border-color: rgb(200, 200, 200);
 $sidebar-color: rgb(246, 246, 246);
 $outer-border-color: rgb(170, 170, 170);
 
+// edx.org-related
+$m-gray-l: rgb(247, 247, 247);
+$m-gray: rgb(67,67,67);
+$m-blue: rgb(2,159,211);
+$m-base-font-size: em(16);
+
+
 $base-font-color: rgb(60,60,60);
 $lighter-base-font-color: rgb(100,100,100);
 $text-color: $dark-gray;
diff --git a/lms/static/sass/multicourse/_login.scss b/lms/static/sass/multicourse/_login.scss
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/lms/static/sass/multicourse/_register.scss b/lms/static/sass/multicourse/_register.scss
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/lms/static/sass/multicourse/_testcenter-register.scss b/lms/static/sass/multicourse/_testcenter-register.scss
index 77b4788823..01405d7fc1 100644
--- a/lms/static/sass/multicourse/_testcenter-register.scss
+++ b/lms/static/sass/multicourse/_testcenter-register.scss
@@ -1,3 +1,6 @@
+// Pearson VUE Test Center Registration
+// =====
+
 .testcenter-register {
 	@include clearfix;
 	padding: 60px 0px 120px;
diff --git a/lms/templates/login.html b/lms/templates/login.html
index fe46f54cb4..56ac86c8eb 100644
--- a/lms/templates/login.html
+++ b/lms/templates/login.html
@@ -7,8 +7,10 @@
   <script type="text/javascript">
     $(function() {
       
+      var view_name = 'view-login';
+
       // adding js class for styling with accessibility in mind
-      $('body').addClass('js');
+      $('body').addClass('js').addClass(view_name);
 
       // new window/tab opening
       $('a[rel="external"], a[class="new-vp"]')
@@ -19,9 +21,9 @@
 
       // form field label styling on focus
       $("form :input").focus(function() {
-        $("label[for='" + this.id + "']").addClass("is-focused");
+        $("label[for='" + this.id + "']").parent().addClass("is-focused");
       }).blur(function() {
-        $("label").removeClass("is-focused");
+        $("label").parent().removeClass("is-focused");
       });
 
     });
@@ -31,7 +33,10 @@
 <section class="login container">
   <section class="introduction">
     <header>
-      <h1>Log Into Your edX Account</h1>
+      <h1>Log Into Your Account</h1>
+      <span class="wrapper wrapper-action">
+        <a class="action action-register" href="#">Not enrolled? Sign up</a>
+      </span>
     </header>
   </section>
 
@@ -43,14 +48,16 @@
     <form role="form" id="login-form" method="post" data-remote="true" action="/login">
       
       <!-- status messages -->
-      <div role="alert" class="status message submission-error">
-        <h3 class="message-title"></h3>
-        <p class="message-copy"></p>
+      <div role="alert" class="status message">
+        <h3 class="message-title">We're Sorry, edX accounts are unavailable currently</h3>
+        <p class="message-copy">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
       </div>
 
-      <div role="alert" class="status message system-error">
-        <h3 class="message-title"></h3>
-        <p class="message-copy"></p>
+      <div role="alert" class="status message submission-error">
+        <h3 class="message-title">The following errors occured while logging you in: </h3>
+        <ul class="message-copy">
+          <li>Your email or password is incorrect</li>
+        </ul>
       </div>
 
       <p class="instructions is-hidden">
@@ -61,11 +68,11 @@
         <legend class="is-hidden">Required Information</legend>
 
         <ol class="list-input">
-          <li class="field required" id="field-email">
+          <li class="field required text" id="field-email">
             <label for="email">E-mail</label>
             <input class="" id="email" type="email" name="email" value="" placeholder="eg. example@edx.org" />              
           </li>
-          <li class="field required" id="field-password">
+          <li class="field required password" id="field-password">
             <label for="password">Password</label>
             <input id="password" type="password" name="password" value="" placeholder="*****" />
             <span class="tip tip-input"><a href="#" class="action action-forgotpw">Forgot password?</a></span>
@@ -77,7 +84,7 @@
         <legend class="is-hidden">Account Preferences</legend>
 
         <ol class="list-input">
-          <li class="field required" id="field-remember">
+          <li class="field required checkbox" id="field-remember">
             <input id="remember-yes" type="checkbox" name="remember" value="true" />
             <label for="remember-yes">Remember me</label>
           </li>
@@ -87,7 +94,9 @@
       <div class="form-actions">
         <button name="submit" type="submit" id="submit" class="action action-primary action-update">Access My Courses</button>
         % if has_extauth_info is UNDEFINED:
-        <a href="#" class="action action-secondary action-register">Not enrolled? Register</a>
+        <span class="wrapper wrapper-action action-secondary">
+          <a href="#" class="action action-register">Not enrolled? Register</a>
+        </span>
         % endif
       </div>
     </form>
@@ -106,12 +115,6 @@
     </div>
     % endif
 
-    <div class="cta cta-register">
-      <h3>Not Enrolled at edX?</h3>
-      <p>Becoming an edX student is easy. Register quickly and start learning!</p>
-      <a class="action action-register" href="#">Register with edX</a>
-    </div>
-
     <div class="cta cta-forgotpw">
       <h3>Forgot Your edX Password</h3>
       <p><a href="#" class="action action-forgotpw">Request help with resetting your password</a></p>
diff --git a/lms/templates/register.html b/lms/templates/register.html
index 6bfe92b67e..f68e0f8be5 100644
--- a/lms/templates/register.html
+++ b/lms/templates/register.html
@@ -13,8 +13,10 @@
   <script type="text/javascript">
     $(function() {
 
+      var view_name = 'view-register';
+
       // adding js class for styling with accessibility in mind
-      $('body').addClass('js');
+      $('body').addClass('js').addClass(view_name);
 
       // new window/tab opening
       $('a[rel="external"], a[class="new-vp"]')
@@ -25,9 +27,9 @@
 
       // form field label styling on focus
       $("form :input").focus(function() {
-        $("label[for='" + this.id + "']").addClass("is-focused");
+        $("label[for='" + this.id + "']").parent().addClass("is-focused");
       }).blur(function() {
-        $("label").removeClass("is-focused");
+        $("label").parent().removeClass("is-focused");
       });
 
     });
@@ -38,6 +40,9 @@
   <section class="introduction">
     <header>
       <h1>Register for edX</h1>
+      <span class="wrapper wrapper-action">
+        <a class="action action-login" href="${reverse('login')}">Already have an account? Login</a>
+      </span>
     </header>
   </section>
 
@@ -49,18 +54,33 @@
     <form role="form" id="register-form" method="post" data-remote="true" action="/create_account">
       
       <!-- status messages -->
+      <div role="alert" class="status message">
+        <h3 class="message-title">We're sorry, edX enrollment is not available in your region</h3>
+        <p class="message-copy">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
+      </div>
+
       <div role="alert" class="status message submission-error">
-        <h3 class="message-title"></h3>
-        <p class="message-copy"></p>
+        <h3 class="message-title">The following errors occured while processing your registration: </h3>
+        <ul class="message-copy">
+          <li>You must accept the terms of service.</li>
+          <li>You must accept the terms of service.</li>
+          <li>Your username must be a minimum of 2 characters long (e.g. "edx").</li>
+        </ul>
+      </div>
+
+      <div role="alert" class="status message submission-error">
+        <h3 class="message-title">The following errors occured while processing your registration: </h3>
+        <p class="message-copy">To enroll, you must follow the honor code</p>
       </div>
 
       <div role="alert" class="status message system-error">
-        <h3 class="message-title"></h3>
-        <p class="message-copy"></p>
+        <h3 class="message-title">We're sorry, our systems seem to be having trouble processing your registration now.</h3>
+        <p class="message-copy">Someone has been made aware of this issue. Please try again shortly. Please <a href="">contact us</a> about any concerns you have.</p>
       </div>
 
       <p class="instructions">
-        Please complete the following fields to register for an edX account. Required fields are noted by <strong class="indicator">bold text and an asterisk (*)</strong>. 
+        Please complete the following fields to register for an edX account. <br />
+        Required fields are noted by <strong class="indicator">bold text and an asterisk (*)</strong>. 
       </p>
 
       <fieldset class="group group-form group-form-requiredinformation">
@@ -69,20 +89,20 @@
         % if has_extauth_info is UNDEFINED:
 
         <ol class="list-input">
-          <li class="field required" id="field-email">
+          <li class="field required text" id="field-email">
             <label for="email">E-mail</label>
             <input class="" id="email" type="email" name="email" value="" placeholder="eg. example@edx.org" />              
           </li>
-          <li class="field required" id="field-password">
+          <li class="field required password" id="field-password">
             <label for="password">Password</label>
             <input id="password" type="password" name="password" value="" placeholder="*****" />
           </li>
-          <li class="field required" id="field-username">
+          <li class="field required text" id="field-username">
             <label for="username">Public Username</label>
             <input id="username" type="text" name="username" value="" placeholder="e.g. JaneDoe314159" />
             <span class="tip tip-input">Will be shown in any discussions or forums you participate in</span>
           </li>
-          <li class="field required" id="field-name">
+          <li class="field required text" id="field-name">
             <label for="name">Full Name</label>
             <input id="name" type="text" name="name" value="" placeholder="e.g. Jane Doe" />
             <span class="tip tip-input">Needed for any certificates you earn</span>
@@ -97,7 +117,7 @@
         </div>
 
         <ol class="list-input">
-          <li class="field required" id="field-username">
+          <li class="field required text" id="field-username">
             <label for="username">Public Username</label>
             <input id="username" type="text" name="username" value="${extauth_username}" placeholder="e.g. JaneDoe314159" />
             <span class="tip tip-input">Will be shown in any discussions or forums you participate in</span>
@@ -111,34 +131,36 @@
         <legend class="is-hidden">Optional Personal Information</legend>
 
         <ol class="list-input">
-          <li class="field" id="field-education-level">
-            <label for="education-level">Highest Level of Education Completed</label>
-            <select id="education-level" name="level_of_education">
-              <option value="">--</option>
-              %for code, ed_level in UserProfile.LEVEL_OF_EDUCATION_CHOICES:
-              <option value="${code}">${ed_level}</option>
-              %endfor
-            </select>
-          </li>
+          <li class="field-group">
+            <div class="field select" id="field-education-level">
+              <label for="education-level">Highest Level of Education Completed</label>
+              <select id="education-level" name="level_of_education">
+                <option value="">--</option>
+                %for code, ed_level in UserProfile.LEVEL_OF_EDUCATION_CHOICES:
+                <option value="${code}">${ed_level}</option>
+                %endfor
+              </select>
+            </div>
 
-          <li class="field" id="field-gender">
-            <label for="gender">Highest Level of Education Completed</label>
-            <select id="gender" name="gender">
-              <option value="">--</option>
-              %for code, gender in UserProfile.GENDER_CHOICES:
-              <option value="${code}">${gender}</option>
-              %endfor
-            </select>
-          </li>
+            <div class="field select" id="field-gender">
+              <label for="gender">Gender</label>
+              <select id="gender" name="gender">
+                <option value="">--</option>
+                %for code, gender in UserProfile.GENDER_CHOICES:
+                <option value="${code}">${gender}</option>
+                %endfor
+              </select>
+            </div>
 
-          <li class="field" id="field-yob">
-            <label for="yob">Year of Birth</label>
-            <select id="yob" name="year_of_birth">
-              <option value="">--</option>
-              %for year in UserProfile.VALID_YEARS:
-              <option value="${year}">${year}</option>
-              %endfor
-            </select>
+            <div class="field select" id="field-yob">
+              <label for="yob">Year of Birth</label>
+              <select id="yob" name="year_of_birth">
+                <option value="">--</option>
+                %for year in UserProfile.VALID_YEARS:
+                <option value="${year}">${year}</option>
+                %endfor
+              </select>
+            </div>
           </li>
         </ol>
       </fieldset>
@@ -147,12 +169,12 @@
         <legend class="is-hidden">Optional Personal Information</legend>
 
         <ol class="list-input">
-          <li class="field" id="field-address-mailing">
+          <li class="field text" id="field-address-mailing">
             <label for="address-mailing">Mailing Address</label>
             <textarea id="address-mailing" name="mailing_address" value=""></textarea>
           </li>
 
-          <li class="field" id="field-goals">
+          <li class="field text" id="field-goals">
             <label for="goals">Do you have any goals in signing up for edX?</label>
             <textarea id="goals" name="goals" value=""></textarea>
           </li>
@@ -163,14 +185,16 @@
         <legend class="is-hidden">Account Acknowledgements</legend>
 
         <ol class="list-input">
-          <li class="field required" id="field-tos">
-            <input id="tos-yes" type="checkbox" name="terms_of_service" value="true" />
-            <label for="tos-yes">I agree to the <a href="${reverse('tos')}" class="new-vp">Terms of Service</a></label>
-          </li>
+          <li class="field-group">
+            <div class="field required checkbox" id="field-tos">
+              <input id="tos-yes" type="checkbox" name="terms_of_service" value="true" />
+              <label for="tos-yes">I agree to the <a href="${reverse('tos')}" class="new-vp">Terms of Service</a></label>
+            </div>
 
-          <li class="field required" id="field-honorcode">
-            <input id="honorcode-yes" type="checkbox" name="honor_code" value="true" />
-            <label for="honorcode-yes">I agree to the <a href="${reverse('honor')}" class="new-vp">Honor Code</a></label>
+            <div class="field required checkbox" id="field-honorcode">
+              <input id="honorcode-yes" type="checkbox" name="honor_code" value="true" />
+              <label for="honorcode-yes">I agree to the <a href="${reverse('honor')}" class="new-vp">Honor Code</a></label>
+            </div>
           </li>
         </ol>
       </fieldset>
@@ -178,7 +202,9 @@
       <div class="form-actions">
         <button name="submit" type="submit" id="submit" class="action action-primary action-update">Register &amp; Create My Account</button>
         % if has_extauth_info is UNDEFINED:
-        <a href="${reverse('login')}" class="action action-secondary action-login">Already have an account? Login.</a>
+        <span class="wrapper wrapper-action action-secondary">
+          <a href="${reverse('login')}" class="action action-login">Already have an account? Login</a>
+        </span>
         % endif
       </div>
     </form>
@@ -189,14 +215,9 @@
       <h3 class="is-hidden">Registration Help</h3>
     </header>
 
-    <div class="cta cta-login">
-      <h3>Already Have an Account?</h3>
-      <p><a class="action action-login" href="${reverse('login')}">Log into your edX account</a> and continue with your classes</p>
-    </div>
-
     <div class="cta cta-help">
       <h3>Need Help?</h3>
-      <p>Looking for help in registering with edX? <a href="#">View our help section for contact information and answers to commonly asked questions</a></p>
+      <p>Looking for help in registering with edX? View our <a href="#">help section for contact information and answers to commonly asked questions</a></p>
     </div>
   </aside>
 </section>
\ No newline at end of file