[ENG-9015] Redesign legacy pages

framework/auth/views.py

@@ -1072,6 +1072,8 @@ def external_login_email_post():
                 destination = campaign
                 break
 
+    status_message = None
+    error_list = []
     if form.validate():
         clean_email = form.email.data
         user = get_user(email=clean_email)
@@ -1104,11 +1106,11 @@ def external_login_email_post():
                 destination=destination
             )
             # 3. notify user
-            message = language.EXTERNAL_LOGIN_EMAIL_LINK_SUCCESS.format(
+            status_message = language.EXTERNAL_LOGIN_EMAIL_LINK_SUCCESS.format(
+                fullname=fullname,
                 external_id_provider=external_id_provider,
                 email=user.username
             )
-            kind = 'success'
             # 4. Clear session data
             clear_external_first_login_anonymous_session_data(session)
         else:
@@ -1134,22 +1136,26 @@ def external_login_email_post():
                 destination=destination
             )
             # 4. notify user
-            message = language.EXTERNAL_LOGIN_EMAIL_CREATE_SUCCESS.format(
+            status_message = language.EXTERNAL_LOGIN_EMAIL_CREATE_SUCCESS.format(
+                fullname=fullname,
                 external_id_provider=external_id_provider,
                 email=user.username
             )
-            kind = 'success'
-            # 5. Clear session data
+            # 5. clear session data
             clear_external_first_login_anonymous_session_data(session)
-        status.push_status_message(message, kind=kind, trust=False)
     else:
-        forms.push_errors_to_status(form.errors)
+        form_errors = form.errors
+        for field, _ in form_errors.items():
+            for error in form_errors[field]:
+                error_list.append(error)
 
     # Don't go anywhere
     return {
         'form': form,
         'external_id_provider': external_id_provider,
-        'auth_user_fullname': fullname
+        'auth_user_fullname': fullname,
+        'status_message': status_message,
+        'error_list': error_list,
     }
 
 

package.json

@@ -12,6 +12,10 @@
     "@centerforopenscience/markdown-it-toc": "~1.1.1",
     "@centerforopenscience/markdown-it-video": "1.0.0",
     "@centerforopenscience/osf-style": "1.9.0",
+    "@fortawesome/fontawesome-free": "^7.0.1",
+    "@fortawesome/fontawesome-svg-core": "^7.0.1",
+    "@fortawesome/free-brands-svg-icons": "^7.0.1",
+    "@fortawesome/react-fontawesome": "^3.0.2",
     "URIjs": "^1.14.1",
     "assets-webpack-plugin": "^2.3.0",
     "babel-core": "^6.0.0",
@@ -25,7 +29,6 @@
     "dropzone": "https://github.com/CenterForOpenScience/dropzone.git#aba21eb6b82cc823ac7a7a53d6e035791c082bae",
     "exports-loader": "0.6.3",
     "file-loader": "^0.11.2",
-    "font-awesome": "^4.4.0",
     "font-awesome-webpack": "0.0.5-beta.2",
     "gsap": "3.9.1",
     "highlight.js": "~9.18.2",

website/language.py

@@ -57,9 +57,8 @@
 
 REGISTRATION_SUCCESS = """Registration successful. Please check {email} to confirm your email address."""
 
-EXTERNAL_LOGIN_EMAIL_CREATE_SUCCESS = """A new OSF account has been created with your {external_id_provider} profile. Please check {email} to confirm your email address."""
-
-EXTERNAL_LOGIN_EMAIL_LINK_SUCCESS = """Your OSF account has been linked with your {external_id_provider}. Please check {email} to confirm this action."""
+EXTERNAL_LOGIN_EMAIL_CREATE_SUCCESS = """Hello {fullname}, a new OSF account has been created with your {external_id_provider} profile. Please check {email} to confirm your email address."""
+EXTERNAL_LOGIN_EMAIL_LINK_SUCCESS = """Hello {fullname}, your OSF account has been linked with your {external_id_provider}. Please check {email} to confirm this action."""
 
 # Shown if registration is turned off in website.settings
 REGISTRATION_UNAVAILABLE = 'Registration currently unavailable.'

website/static/css/style.css

@@ -4,7 +4,6 @@ html, body {
 }
 
 body {
-    padding-top: 50px; /* body padding for fixed top nav */
     position: relative; /* for bootstrap affix */
     -webkit-font-smoothing: antialiased;
     font-family: 'Open Sans', 'Helvetica Neue', sans-serif;
@@ -38,6 +37,19 @@ a {
 
 /* Footer
 -------------------------------------------------- */
+.footer-wrapper {
+    margin-top: 20px;
+    text-shadow: 0 1px 0 #fff;
+    width: 100%;
+    color: #515151;
+    text-align: center;
+    background-color: #e6f1fc;
+    border-radius: 0 0 0 0.75rem;
+
+    .footer-row:first-of-type {
+        background-color: #f1f8fd;
+    }
+}
 .footer {
     padding-top: 10px;
     margin-top: 20px;
@@ -52,13 +64,25 @@ a {
     color: #2d6a9f;
 }
 
-
 .footer ul, .footer li {
     padding: 0;
     margin: 0;
     list-style-type: none;
 }
 
+.footer-row {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    align-items: center;
+    padding: 1.5em;
+}
+
+.footer-logo span {
+    font-size: 20px;
+    width: 44px;
+}
+
 /* Warning Banner for cookies and browser depreciation goes on bottom of page */
 .warningBanner {
     margin-bottom: 0px;
@@ -82,6 +106,15 @@ a {
     color: #264F82;
 }
 
+.footer-social-links-list {
+    display: inline-flex;
+}
+
+.footer-links-list {
+    display: inline-flex;
+    gap: 0.5em;
+}
+
 .warningBannerText {
     margin-left: 10%;
     margin-right: 75px;
@@ -954,3 +987,206 @@ table.add-links {
 .text-smaller {
     color: #4d4d4d;
 }
+
+/* Override of Bootstrap button styles */
+.container.container {
+    width: auto !important;
+}
+
+.btn.btn {
+    border-radius: 6px;
+    padding-block: 0.5rem;
+    padding-inline: 1rem;
+    font-weight: 700;
+}
+
+.btn-primary.btn-primary {
+    color: #fff;
+    background-color: #337ab7;
+    border-color: #2e6da4;
+}
+
+.btn-secondary.btn-secondary {
+    color: #337ab7;
+    background: #f1f8fd;
+}
+
+input.form-control.form-control {
+    border-radius: 6px;
+}
+
+/* Utility classes */
+
+.border-top {
+    border-top: 1px solid #eee;
+}
+
+.flex-row {
+    display: flex;
+}
+
+.gap-1 {
+    gap: 1em;
+}
+
+.flex-grow-1 {
+    flex-grow: 1;
+}
+
+.padding-top-2 {
+    padding-top: 2em;
+}
+
+.navbar {
+    background: #24384a;
+}
+
+.main-wrapper {
+    display: flex;
+    min-height: 100vh;
+    flex-direction: row;
+    background: #24384a;
+}
+
+.content-wrapper {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    overflow-y: auto;
+    background: linear-gradient(135deg, #e6f1fc 0%, #f7f7f7 60%, #eaf6ff 100%);
+    background-color: #f7f7f7;
+}
+
+.main-content {
+    margin: 50px auto 0;
+    display: flex;
+    align-items: center;
+
+    [role="main"] {
+        border-radius: 0.75rem;
+        background: #fff;
+        padding: 2em;
+    }
+}
+
+.left-logo {
+    display: inline-flex;
+    align-items: center;
+    margin-left: 0 !important;
+    height: 100%;
+    line-height: 27px !important;
+    gap: 8px;
+    font-size: 32px;
+    font-weight: lighter;
+    color: #f7f7f7;
+
+    .osf-navbar-logo {
+        width: 33px;
+        height: 33px;
+        margin: 6px 0 0 12px;
+    }
+}
+
+.toggle-nav-input {
+    float: right;
+}
+
+.toggle-nav-label {
+    color: #f7f7f7;
+    float: right;
+    margin: 12px;
+}
+
+.slideout {
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: 100%;
+    background: #24384a;
+    color: #f7f7f7;
+    transition: transform 0.3s ease;
+    margin-left: 0 !important;
+}
+
+.left-pane-nav {
+    width: 300px;
+    max-width: 300px;
+    height: 100vh;
+    overflow-y: auto;
+    scrollbar-width: thin;
+    scrollbar-color: #eff0f1 #24384a;
+}
+
+.left-pane-ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    margin-top: 2em;
+    margin-bottom: 4em;
+
+    li {
+        margin: 0 1.5em 1em;
+    }
+
+    a {
+        display: flex;
+        align-items: center;
+        padding: 0.75em;
+        gap: 0.5em;
+        width: 100%;
+        font-size: medium;
+        font-weight: 700;
+        color: #F7F7F7;
+        text-decoration: none;
+    }
+
+    a:hover {
+        background: #384b5c;
+        border-radius: 0.375em;
+    }
+}
+
+.chevron-right {
+    margin-left: auto;
+}
+
+@media (min-width: 1200px){
+    .content-wrapper {
+        border-radius: 0.75rem 0 0 0.75rem;
+    }
+    .slideout {
+        transform: translateX(0);
+    }
+    .desktop-only {
+        display: block;
+    }
+    .mobile-only {
+        display: none;
+    }
+}
+
+@media (max-width: 1199.99px){
+    .slideout {
+        transform: translateX(-100%);
+    }
+
+    input#toggle-leftnav:checked~.slideout {
+        transform: translateX(0);
+    }
+    .desktop-only {
+        display: none;
+    }
+    .mobile-only {
+        display: block;
+    }
+
+    #maintenance {
+        margin-top: 50px;
+    }
+}
+
+#slideout-nav {
+    margin-left: 0 !important;
+    margin-top: 50px;
+}

website/static/js/pages/base-page.js

@@ -8,7 +8,8 @@ require('../../vendor/bootstrap-editable-custom/css/bootstrap-editable.css');
 require('../../vendor/bower_components/jquery-ui/themes/base/resizable.css');
 require('../../css/bootstrap-xl.css');
 require('../../css/animate.css');
-require('font-awesome-webpack');
+
+import '@fortawesome/fontawesome-free/css/all.css';
 
 var $ = require('jquery');
 var Cookie = require('js-cookie');