[ENG-8793] [ENG-8785] [ENG-8793] Remove branded login + Update no service pages + Update OAuth workflow

src/main/resources/messages.properties

@@ -168,7 +168,7 @@ screen.error.page.title.pagenotfound=Error - Page Not Found
 screen.error.page.title.requestunsupported=Error - Unsupported Request
 screen.error.page.accessdenied=Access Denied
 screen.error.page.permissiondenied=You do not have permission to view this page.
-screen.error.page.requestunsupported=The request type or syntax is not supported.
+screen.error.page.requestunsupported=Request Not Supported
 # screen.error.page.loginagain=Login Again
 screen.error.page.notfound=Page Not Found
 screen.error.page.doesnotexist=The page you are attempting to access does not exist at the moment.
@@ -760,14 +760,15 @@ screen.institutionssomultipleemailsnotsupported.message=\
 screen.oauth.confirm.title=Approve Access
 screen.oauth.confirm.header=Approve or deny authorization
 screen.oauth.confirm.message=Do you want to grant access to the following service with listed access scopes?
-screen.oauth.confirm.service=Name: {0}
-screen.oauth.confirm.description=Description: {0}
-screen.oauth.confirm.scopes=Scope(s) requested: {0}
+screen.oauth.confirm.service.name=Service Name
+screen.oauth.confirm.service.description=Service Description
+screen.oauth.confirm.service.scopes=Scope(s) Requested
 screen.oauth.confirm.allow=Allow
 screen.oauth.confirm.deny=Deny
 screen.oauth.confirm.backtoosf=Exit and go back to OSF
 screen.oauth.error.title=OAuth Error
 screen.oauth.error.heading=Authorization failed
+screen.oauth.error.detail=Error Detail
 screen.oauth.error.exit=Exit
 #
 # Pac4j Authentication Delegation Error Views

src/main/resources/static/css/cas.css

@@ -679,6 +679,7 @@ button.close {
     --cas-theme-osf-blue-hover: #0089ff;
     --cas-theme-grey-hover: #f5f8fb;
     --cas-theme-osf-red: #b52b27;
+    --cas-theme-osf-red-hover: #E40303;
     --cas-theme-osf-disabled: #eeeeee;
     --cas-theme-osf-disabled-dark: #cccccc;
     --cas-theme-primary: var(--cas-theme-osf-navbar, #263947);
@@ -830,6 +831,10 @@ body {
 .form-button .button-osf-red,
 .form-button-inline .button-osf-red {
     background-color: var(--cas-theme-osf-red, #b52b27);
+
+    &:hover {
+        background-color: var(--cas-theme-osf-red-hover, #E40303);
+    }
 }
 
 .form-button .button-osf-disabled,
@@ -870,8 +875,7 @@ body {
     color: #F7F7F7;
 }
 
-.mdc-top-app-bar__row .hidden-narrow,
-.service-ui .osf-shield-with-name .hidden-narrow {
+.mdc-top-app-bar__row .hidden-narrow {
     font-weight: normal;
 }
 
@@ -886,53 +890,11 @@ body {
     flex: 1;
 }
 
+.login-section .card-message h1,
 .login-error-card .card-message h1 {
     text-align: center;
 }
 
-#serviceui {
-    background-color: transparent;
-}
-
-.service-ui {
-    margin-top: 1rem!important;
-    margin-bottom: 1rem!important;
-}
-
-.service-ui .service-ui-logo {
-    max-height: 56px;
-    max-width: 360px;
-}
-
-.service-ui .service-ui-logo-branded {
-    max-height: 48px;
-    max-width: 360px;
-}
-
-.service-ui .osf-shield-with-name {
-    margin: 0 auto;
-    padding-bottom: 1rem;
-}
-
-.osf-shield-with-name .service-ui-logo {
-    padding-right: 0.5rem;
-}
-
-.osf-shield-with-name .service-ui-logo-branded {
-    padding-right: 1rem;
-}
-
-.osf-shield-with-name .service-ui-name {
-    font-size: 2.25rem;
-    font-weight: bold;
-}
-
-.osf-shield-with-name .service-ui-name-branded {
-    font-size: 2rem;
-    font-weight: normal;
-    overflow-wrap: anywhere;
-}
-
 .text-with-mdi,
 .text-without-mdi {
     font-size: 1rem;
@@ -1011,7 +973,8 @@ body {
     font-size: 1rem;
 }
 
-.login-error-card .pre-formatted-small pre {
+.login-error-card .pre-formatted-small pre,
+.login-section .card-message .pre-formatted-small pre {
     font-size: 0.75rem;
     white-space: pre-wrap;
 }
@@ -1041,8 +1004,11 @@ body {
 }
 
 .login-error-card #errorInfo,
-.login-error-card #authnAttr {
+.login-error-card #authnAttr,
+.login-error-card .text-with-border,
+.login-section .text-with-border {
     margin-top: 1rem;
+    margin-bottom: 1rem;
     padding: 0 1rem;
     border: solid #e7e7e7;
 }
@@ -1137,11 +1103,6 @@ body {
     .mdc-top-app-bar__row .mdc-button {
     }
 
-    .service-ui {
-        margin-top: 1rem!important;
-        margin-bottom: 1rem!important;
-    }
-
     .cas-footer-osf {
         font-size: 1.125rem!important;
         padding-bottom: 1.125rem!important;
@@ -1168,11 +1129,6 @@ body {
         padding-top: 48px;
     }
 
-    .service-ui {
-        margin-top: 0.875rem!important;
-        margin-bottom: 0.875rem!important;
-    }
-
     .cas-footer-osf {
         font-size: 1rem!important;
         padding-bottom: 1rem!important;
@@ -1199,11 +1155,6 @@ body {
         padding-top: 36px;
     }
 
-    .service-ui {
-        margin-top: 0.75rem!important;
-        margin-bottom: 0.75rem!important;
-    }
-
     .cas-footer-osf {
         font-size: 0.875rem!important;
         padding-bottom: 0.875rem!important;
@@ -1230,11 +1181,6 @@ body {
         padding-top: 24px;
     }
 
-    .service-ui {
-        margin-top: 0.5rem!important;
-        margin-bottom: 0.5rem!important;
-    }
-
     .cas-footer-osf {
         font-size: 0.625rem!important;
         padding-bottom: 0.625rem!important;
@@ -1250,16 +1196,11 @@ body {
     .w-card-wide {
         width: 75%;
     }
-
-    .service-ui .service-ui-logo {
-        max-width: 320px;
-    }
 }
 
 @media all and (max-width: 699.99px) {
 
-    .mdc-top-app-bar__row .hidden-narrow,
-    .service-ui-name .osf-shield-with-name .hidden-narrow {
+    .mdc-top-app-bar__row .hidden-narrow {
         display: None;
     }
 
@@ -1269,22 +1210,6 @@ body {
     .w-card-wide {
         width: 100%;
     }
-
-    .service-ui .service-ui-logo {
-        max-width: 280px;
-    }
-
-    .osf-shield-with-name .service-ui-logo {
-        max-height: 48px;
-    }
-
-    .osf-shield-with-name .service-ui-name {
-        font-size: 2rem;
-    }
-
-    .osf-shield-with-name .service-ui-name-branded {
-        font-size: 1.75rem;
-    }
 }
 
 @media all and (max-width: 511.99px) {
@@ -1317,22 +1242,6 @@ body {
 
 @media all and (max-width: 399.99px) {
 
-    .service-ui .service-ui-logo {
-        max-width: 240px;
-    }
-
-    .osf-shield-with-name .service-ui-logo {
-        max-height: 36px;
-    }
-
-    .osf-shield-with-name .service-ui-name {
-        font-size: 1.75rem;
-    }
-
-    .osf-shield-with-name .service-ui-name-branded {
-        font-size: 1.5rem;
-    }
-
     .login-section .mdi-before-text,
     .login-error-card .mdi-before-text {
         display: none;

src/main/resources/templates/casGenericSuccessView.html

@@ -14,10 +14,6 @@
 
         <div class="d-flex justify-content-center flex-md-row flex-column mdc-card mdc-card-content w-lg-30">
             <section class="login-error-card">
-                <section class="text-without-mdi text-center text-bold text-large margin-large-vertical title">
-                    <span th:utext="#{screen.generic.loginsuccess.tips}"></span>
-                </section>
-                <hr class="my-4" />
                 <section class="card-message">
                     <h1 th:utext="#{screen.generic.loginsuccess.heading}"></h1>
                     <div th:utext="#{screen.generic.loginsuccess.message}"></div>

src/main/resources/templates/casLogoutView.html

@@ -14,10 +14,6 @@
 
         <div class="d-flex justify-content-center flex-md-row flex-column mdc-card mdc-card-content w-lg-30">
             <section class="login-error-card">
-                <section class="text-without-mdi text-center text-bold text-large margin-large-vertical title">
-                    <span th:utext="#{screen.generic.logoutsuccess.tips}"></span>
-                </section>
-                <hr class="my-4" />
                 <section class="card-message">
                     <h1 th:utext="#{screen.generic.logoutsuccess.heading}"></h1>
                     <div th:utext="#{screen.generic.logoutsuccess.message}"></div>

src/main/resources/templates/casOAuth20ErrorView.html

@@ -14,21 +14,13 @@
 
     <div class="d-flex justify-content-center flex-md-row flex-column mdc-card mdc-card-content w-lg-30">
         <section class="login-error-card">
-            <section>
-                <div th:replace="fragments/osfbannerui :: osfBannerUI">
-                    <a href="fragments/osfbannerui.html"></a>
-                </div>
-            </section>
-            <section class="text-without-mdi text-center text-bold text-large margin-large-vertical title-danger">
-                <span th:utext="#{screen.authnerror.tips}"></span>
-            </section>
-            <hr class="my-4" />
             <section class="card-message">
                 <h1 th:utext="#{screen.oauth.error.heading}"></h1>
                 <p th:utext="#{${errorMsg}}"></p>
-                <p class="pre-formatted-small word-break-all">
+                <h2 th:text="#{screen.oauth.error.detail}" />
+                <section class="text-with-border pre-formatted-small word-break-all">
                     <pre class="wrap" th:utext="#{${errorCode + ': ' + errorParam}}"></pre>
-                </p>
+                </section>
             </section>
             <hr class="my-4" />
             <section class="text-with-mdi">

src/main/resources/templates/fragments/loginform.html

@@ -16,12 +16,6 @@
         <!-- Login form template begins here -->
         <div th:fragment="loginform" class="d-flex flex-column justify-content-between m-auto">
 
-            <section th:if="${delegatedAuthenticationProviderPrimary == null}">
-                <div class="service-ui" th:replace="fragments/serviceui :: serviceUI">
-                    <a href="fragments/serviceui.html"></a>
-                </div>
-            </section>
-
             <section class="text-without-mdi text-center text-bold text-large margin-large-vertical">
                 <span th:utext="#{screen.welcome.tips}"></span>
             </section>

src/main/resources/templates/fragments/totploginform.html

@@ -16,12 +16,6 @@
         <!-- Two-factor authentication login form template begins here -->
         <div th:fragment="totploginform" class="d-flex flex-column justify-content-between m-auto">
 
-            <section>
-                <div class="service-ui" th:replace="fragments/osfbannerui :: osfBannerUI">
-                    <a href="fragments/osfbannerui.html"></a>
-                </div>
-            </section>
-
             <section class="text-without-mdi text-center text-bold text-large margin-large-vertical">
                 <span th:utext="#{screen.twofactor.tips.top}"></span>
             </section>