Modal to show username/email advice before sending users to Wikipedia (…

…#5564)

Resolves #3295

app/assets/javascripts/components/enroll/advice_modal.jsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import NewAccountButton from './new_account_button';
+import PropTypes from 'prop-types';
+
+const AdviceModal = ({ setModalShown, course, passcode, user }) => {
+  return (
+    <div className="wizard active undefined">
+      <div className="container">
+        <div className="wizard__panel active ">
+          <div className="wizard_pop_header">
+            <h3 className="heading-advice" >
+              {I18n.t('application.sign_up_extended')}
+            </h3>
+            <a
+              className="close-icon-advice icon-close"
+              onClick={() => setModalShown(false)}
+            />
+          </div>
+          <div className="pop_body">
+            <h4 className="subheading-advice" >
+              {I18n.t(
+                'home.registration_advice.username_rules.heading'
+              )}
+            </h4>
+            <ul className="list-advice">
+              <li>
+                {I18n.t(
+                  'home.registration_advice.username_rules.avoid_offensive_usernames'
+                )}
+              </li>
+              <li>
+                {I18n.t(
+                  'home.registration_advice.username_rules.represent_individual'
+                )}
+              </li>
+            </ul>
+            <h4 className="subheading-advice" >
+              {I18n.t('home.registration_advice.additional_advice.heading')}
+            </h4>
+            <p className="list-advice2" >
+              {I18n.t(
+                'home.registration_advice.additional_advice.anonymous_username_recommendation'
+              )}
+            </p>
+            <div>
+              <NewAccountButton
+                course={course}
+                passcode={passcode}
+                currentUser={user}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+AdviceModal.propTypes = {
+  user: PropTypes.object,
+  course: PropTypes.object,
+  passcode: PropTypes.string,
+  setModalShown: PropTypes.func,
+};
+
+export default AdviceModal;

app/assets/javascripts/components/enroll/enroll_card.jsx

@@ -1,11 +1,16 @@
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import NewAccountButton from './new_account_button.jsx';
+import AdviceModal from './advice_modal';
+import NewAccountButton from './new_account_button';
 
 const EnrollCard = ({
   user, userRoles, course, courseLink, passcode, enrolledParam, enrollFailureReason
 }) => {
+  const [modalShown, setModalShown] = useState(false);
+  const [isHovered, setIsHovered] = useState(false);
+
   let messageBody;
+  let adviceModalButton;
   if (course.ended) {
     messageBody = (
       <div>
@@ -27,7 +32,7 @@ const EnrollCard = ({
           <p>{I18n.t('courses.join_successful', { title: course.title || '' })}</p>
         </div>
       );
-    // Enrollment failed (not approved?)
+      // Enrollment failed (not approved?)
     } else if (enrolledParam === 'false') {
       messageBody = (
         <div>
@@ -36,7 +41,7 @@ const EnrollCard = ({
         </div>
       );
     }
-  // User is logged in and ready to enroll
+    // User is logged in and ready to enroll
   } else if (user.id && userRoles.notEnrolled) {
     messageBody = (
       <div>
@@ -45,14 +50,19 @@ const EnrollCard = ({
         <a className="button border" href={courseLink}>{I18n.t('application.cancel')}</a>
       </div>
     );
-  // User is already enrolled
+    // User is already enrolled
   } else if (userRoles.isEnrolled) {
     messageBody = <h1>{I18n.t('courses.already_enrolled', { title: course.title })}</h1>;
-  // User is not logged in
+    // User is not logged in
   } else if (!user.id) {
     // Login link relies on rails/ujs to turn the anchor link into
     // a POST request based on data-method="post". Otherwise, this
     // needs to become a button or form and include the authenticity token.
+    adviceModalButton = (
+      <a onMouseEnter={() => setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} onClick={() => setModalShown(true)} className="button auth signup border margin">
+        <i className={`icon ${isHovered ? 'icon-wiki-white' : ' icon-wiki-purple'}`} /> {I18n.t('application.sign_up_extended')}
+      </a>
+    );
     messageBody = (
       <div>
         <h1>{I18n.t('application.greeting')}</h1>
@@ -62,7 +72,10 @@ const EnrollCard = ({
           <a data-method="post" href={`/users/auth/mediawiki?origin=${window.location}`} className="button auth dark">
             <i className="icon icon-wiki-white" /> {I18n.t('application.log_in_extended')}
           </a>
-          <NewAccountButton course={course} passcode={passcode} currentUser={user} />
+          {
+            Features.wikiEd
+            ? (adviceModalButton) : (<NewAccountButton course={course} passcode={passcode} currentUser={user} />)
+          }
         </div>
       </div>
     );
@@ -74,6 +87,9 @@ const EnrollCard = ({
         course.passcode !== '' && <a href={courseLink} className="icon-close-small" />
       }
       {messageBody}
+      {Features.wikiEd && modalShown
+        && <AdviceModal setModalShown={setModalShown} course={course} passcode={passcode} user={user} />
+      }
     </div>
   );
 };

app/assets/stylesheets/home.styl

@@ -285,4 +285,4 @@ body.home
 
         +below(desktop)
           margin 15px 15px 0 15px
-          max-width 30%
+          max-width 30%

app/assets/stylesheets/modules/_modules.styl

@@ -48,6 +48,22 @@
     .loading__spinner__small
       margin-left 20px
 
+.heading-advice
+  display: inline-block
+
+.subheading-advice
+  margin: 0 0 0 10px
+
+.list-advice
+  margin: 0 0 5px 10px
+
+.list-advice2
+  margin: 0 0 16px 10px
+
+.close-icon-advice
+  display: inline-block
+  float: right
+
 .module.enroll
   position relative
   padding 30px 40px 40px 40px

app/views/home/index.html.haml

@@ -4,11 +4,11 @@
 
     .button-container
       = link_to user_mediawiki_omniauth_authorize_path, {class: 'button auth', method: :post} do
-        %i.icon.icon-wiki-logo
+        %i.icon.icon-wiki-purple
         = t('home.log_in')
 
       = link_to user_mediawiki_signup_omniauth_authorize_path, {class: 'button button-inverse auth signup', method: :post} do
-        %i.icon.icon-wiki-logo
+        %i.icon.icon-wiki-purple
         = t('home.sign_up')
 
       %span.help{data: { title: t('home.sign_up_help') } }

config/locales/en.yml

@@ -129,6 +129,14 @@ en:
     explore: Explore
     log_in: Log in with Wikipedia
     sign_up: Sign up with Wikipedia
+    registration_advice:
+      username_rules:
+        heading: Username rules
+        avoid_offensive_usernames: Do not choose a username that is offensive, misleading, disruptive, or promotional.
+        represent_individual: Usernames must represent an individual editor. Do not use the name of a school or organization.
+      additional_advice: 
+        heading: Advice
+        anonymous_username_recommendation: Wiki Education recommends choosing an anonymous username, not one that includes your real name or other identifying information.
     sign_up_help: >
       To use the dashboard, you'll need to sign in through Wikipedia and give
       it permission to access your account. You can log in with an existing