+
+
+
+
+
+
+
+
+
+
+
+ © 2019 EUDAT Collaborative Data Infrastructure
+
+ diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..96a17dc --- /dev/null +++ b/.gitignore @@ -0,0 +1,4 @@ +.idea +*/**/imprint.html +*/**/impressum.html +*/**/data-privacy-statement.html diff --git a/README.md b/README.md index 5662f10..6e5688d 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,55 @@ -EUDAT B2ACCESS webserver theme components +# B2ACCESS Theme -One can install it by cloning this repository to the directory where are -B2ACCESS html files deployed -" git clone https://github.com/EUDAT-B2ACCESS/b2access-theme.git theme " +Subset of configurations and customizations on Unity IdM installation for b2access.eudat.eu + +### What's in here + +- Landing page (and homepage) template +- about-page +- acceptable-use-policy + +### What's **not** in here +- Imprint/Impressum +- Data privacy statement + +## Installation + +1. Clone this repository into `unity-4.x.x./webContents` with `git clone https://github.com/EUDAT-B2ACCESS/b2access-theme.git b2access` +so your directory structure looks like this: +``` +webContents/ +├── assets/ +├── favicon.html +├── b2access/ +│ ├── README.md + **this project** +├── styles.css +└── templates/ + +``` + +2. Swap assets (e.g logo, favicon, etc.) under `webContents/assets` +3. Put missing files like `impressum.html` and `data-privacy-statement.html` in `webContents/b2access/files/` +4. Change permissions `chown -R unity:unity webContents` +5. Set up the following unity settings in `conf/modules/core/userhome.properties` for the home endpoint: +``` +unity.endpoint.web.customCssFileName=b2access/b2access-home.css +unity.endpoint.web.extraTopPanel=b2access/b2access-topbar.html +unity.endpoint.web.extraBottomPanel=b2access/b2access-bottombar.html + +``` + +6. `conf/modules/core/upman.properties` for the upman-endpoint: +``` +unity.endpoint.web.customCssFileName=b2access/b2access-home.css +unity.endpoint.web.extraTopPanel=b2access/b2access-topbar.html +unity.endpoint.web.extraBottomPanel=b2access/b2access-bottombar.html +``` + +Note: You can put off the extra panels prevents header and footer to show AFTER login +with `unity.endpoint.web.addExtraPanelsAfterAuthentication=false` + +7. `conf/unityServer.conf` for general endpoints: +``` +unityServer.core.customCssFileName=b2access/b2access-core.css +``` \ No newline at end of file diff --git a/b2access-bottombar.html b/b2access-bottombar.html new file mode 100644 index 0000000..69f11e3 --- /dev/null +++ b/b2access-bottombar.html @@ -0,0 +1,54 @@ +
\ No newline at end of file diff --git a/b2access-core.css b/b2access-core.css new file mode 100644 index 0000000..6a5a129 --- /dev/null +++ b/b2access-core.css @@ -0,0 +1,29 @@ +html { + --lumo-font-size-xxxl: 3rem; + --lumo-font-family: Verdana, "Verdana Ref", sans-serif; + --lumo-size-xl: 5rem; + --lumo-primary-text-color: #3F3F3E; + --lumo-primary-color-50pct: #fff; + --lumo-primary-color-10pct: #fff; + --lumo-primary-color: #FF4637; + --lumo-shade-90pct: hsla(214, 40%, 16%, 0.94); + --lumo-header-text-color: #264899; + --lumo-error-color: #FF4637; + --lumo-success-color: #00B720; + --unity-font-weight: 500; + --vaadin-text-field-default-width: 16em; + --lumo-button-primary-background: #264899; + --vaadin-button-primary-background: #264899; + --unity-hover-button-color: #E65217; + --unity-selected-tab-color: #677eb7; + + --unity-tab-hover-color: #E65217; + /* This naming schema >.< */ + --unity-icon-color: #264899; + /* Why is the default so stupid here? Make a handsymbol for clickable stuff*/ + --lumo-clickable-cursor: pointer; + /*This one works on u-authn-screen*/ + background-color: #fafafa; + --unity-text-field-medium: 100%; + --unity-left-menu-navbar-color: #264899; +} \ No newline at end of file diff --git a/b2access-home.css b/b2access-home.css new file mode 100644 index 0000000..2c2b31e --- /dev/null +++ b/b2access-home.css @@ -0,0 +1,506 @@ +/* all buttons on the authentication page shall have this style */ +.u-authn-screen vaadin-button { + background-color: #264899; + color: #FAFAFA; + width: 100%; + /*text-transform: uppercase;*/ +} + +/* couple of general changes, applicable to all screens */ +html { + --lumo-font-size-xxxl: 3rem; + --lumo-font-family: Verdana, "Verdana Ref", sans-serif; + --lumo-size-xl: 5rem; + --lumo-primary-text-color: #3F3F3E; + --lumo-primary-color-50pct: #fff; + --lumo-primary-color-10pct: #fff; + --lumo-primary-color: #FF4637; + --lumo-shade-90pct: hsla(214, 40%, 16%, 0.94); + --lumo-header-text-color: #264899; + --lumo-error-color: #FF4637; + --lumo-success-color: #00B720; + --unity-font-weight: 500; + --vaadin-text-field-default-width: 16em; + --lumo-button-primary-background: #264899; + --vaadin-button-primary-background: #264899; + --unity-hover-button-color: #E65217; + --unity-selected-tab-color: #677eb7; + --unity-tab-hover-color: #E65217; + /* This naming schema >.< */ + --unity-icon-color: #264899; + /* Why is the default so stupid here? Make a handsymbol for clickable stuff*/ + --lumo-clickable-cursor: pointer; + /*This one works on u-authn-screen*/ + background-color: #fafafa; + --unity-text-field-medium: 100%; +} + + +/*https://stackoverflow.com/questions/643879/css-to-make-html-page-footer-stay-at-bottom-of-the-page-with-a-minimum-height-b*/ +/*Fix annoying scrollbar*/ +:root { + --header-height: 120px; + --footer-height: 165px; +} + +#unity-layout-top { + min-height: var(--header-height) !important; +} + +.u-main-layout-container > div:nth-child(2), +.u-main-layout-container, +.main-subsite .container { + min-height: calc(100vh - var(--header-height) - var(--footer-height)) !important; +} + +#unity-layout-bottom { + min-height: var(--footer-height) !important; +} + +/* background logo*/ +.u-main-layout-container, +.main-subsite { + background-image: url("/unitygw/b2access/common/img/bg_page.png"); + background-position-y: center; + background-position-x: center; + background-repeat: no-repeat; +} + +/* base flex classes*/ +.flex-center-column { + display: flex; + justify-content: center; + flex-direction: column; +} + +.flex-center-row { + display: flex; + justify-content: center; + flex-direction: row; +} + +.flex-right-row { + display: flex; + justify-content: flex-end; + flex-direction: row; +} + +.flex-left-row { + display: flex; + justify-content: left; + flex-direction: row; +} + +/* header */ +.header, +.unity-layout-top, +#header-content-container { + height: 120px; + max-height: 120px; + padding-top: 0; + padding-bottom: 0; + background-color: #f8f8f8; +} + +#header { + box-shadow: 0 10px 10px #eeeeee; +} + +#header-content-container { + background-image: url("/unitygw/b2access/common/img/pattern.svg"); + background-repeat: no-repeat; + background-position: right; + padding: 0 50px; +} + +#header-content-container .logo-link:hover { + opacity: 0.8; + /* Reduce opacity on hover */ + transform: scale(1.05); + /* Scale up slightly on hover */ + transition: opacity 0.3s, transform 0.3s; + /* Smooth transition */ +} + +#header-content-container .logo-link::after { + background: rgba(0, 0, 0, 0.2); + /* Semi-transparent black */ + transition: opacity 0.3s; + /* Smooth transition */ +} + +#header-content-container .logo { + z-index: 1; + position: absolute; + height: 88px; + /*width: 200px; this looks a bit scuffed, just set height*/ +} + +#header-content-container .logo a { + height: inherit; + width: inherit; +} + +#header-menu { + padding: 0 15% 0 15%; + text-transform: uppercase; + color: #555; + line-height: 115px; + font-size: 115px; + font: 300 15px/1.55 "Open Sans", sans-serif; +} + +#header-menu a { + background: none; + border: 0; + font-weight: 700; + transition: color .2s ease; + padding: 0 1rem 0 1rem; +} + +#header #gotoeudat span:hover, +#header-menu a:hover { + color: #E65217 !important; + text-decoration: none !important; +} + +#header #gotoeudat { + background-color: #264899; + padding: 0 50px; +} +#header #gotoeudat span { + color: #fff; + text-transform: uppercase; + font-size: 13px; +} + +/*.unity-layout-top { + width: 100%; + /*box-shadow: 0 6px 3px #DDD; + z-index: 10; +}*/ + +/* footer */ +#unity-layout-bottom { + text-align: center; + background-color: #2c2c2c; + /*height: 8%;*/ + margin-top: auto; +} + +#unity-layout-bottom a { + color: #FAFAFA; + padding: 0 1rem 0 1rem; +} + +/* auth screen */ +.u-authn-screen { + margin: 1% 15% 1% 15%; + padding: 0 1rem; + border-radius: 4px; + width: 70% !important; + /*height: 92%;*/ +} + +/* search bar */ +.u-authn-search { + width: 34em; +} + +/* signin-button e.g forschuntszentrum jülich */ +.u-signin-button { + margin: 1px; +} + +/* OTHER sites */ +.main-subsite { + margin: 0; +} + +/* logged in: right side */ +.u-main-layout-right-container { + background-color: #FFF; +} + +/* logged in: left side */ +.u-main-layout-left-container { + background-color: #264899; +} + +/* logged in: navbar, where "Profile" is written*/ +.u-main-layout-navbar { + background-color: #f0f0f0; +} + +/* hide unitys logo */ +.u-authn-logo { + display: none; +} + +/* move title up due to hidden logo */ +.u-authn-title { + margin-top: 0; + margin-left: 1px; + margin-right: 1px; +} + +.main-subsite .container { + margin: 0 15% 0 15%; + padding: 0 1rem 0 1rem; + border-radius: 4px; +} + +/* fix h1 being stupid*/ +.main-subsite .container h1 { + margin-top: 0; + padding-top: 10px; +} + +/* Fix clipping and use elipsies */ +.u-authn-screen .u-text-left::part(label) { + padding-right: 0; + text-overflow: ellipsis; +} + +/* Fix consent screen width*/ +.u-consentMainColumn .u-consent-screen { + width: auto; +} + +/* Fix consent screen header beeing dark blue on blue */ +/*.u-consentMainColumn > vaadin-vertical-layout:nth-child(1), +.u-consentMainColumn > vaadin-vertical-layout:nth-child(1) > h2, +.u-consentMainColumn .u-underline { + color: #e7ebef; +} + +.u-consentMainColumn .u-consentDeclineButton { + background-color: #e7ebef; + color: var(--lumo-contrast-70pct); +}*/ +.u-consentMainColumn { + background-color: #e7ebef; + width: 70% !important; + border-radius: 4px; +} + +/*Banner*/ +#banner-img { + max-height: 70px; + width: 100%; + margin-bottom: -40px; +} + +/* Hide phone menu buttons */ +#header-menu-button { + display: none; + background-color: #e7ebef; + border-radius: 4px; + border: 3px solid #264899; + color: #264899; + height: 40px; + width: 40px; + position: absolute; +} + +#header-menu-button:hover { + background-color: #d8dde2; + color: #264899; + cursor: pointer; +} + +/* FOOTER */ +#footer { + padding: 15px 50px; + font-size: 12px; + text-align: center; +} + +#footer span { + white-space: nowrap !important; +} + +#footer a { + display: flex; + justify-content: center; + flex-direction: column; +} + +#footer-menu-button { + background-color: #2c2c2c; + border-radius: 4px; + border: 3px solid #e7ebef; + color: #e7ebef; + height: 30px; + width: 40px; +} + +#footer-menu-button-menu { + display: none; + /*position: absolute;*/ +} + +#footer-menu-button:hover { + background-color: #00193e; + cursor: pointer; +} + +/* footer line */ +#footer .line { + margin-top: 0px; + margin-bottom: 5px; + width: 100%; + border-bottom: 1px solid #888; +} + +#footer .footer-text { + color: #fff; +} + +#footer .footer-hspacer { + margin-right: auto; +} + +#footer #copyright-eudat { + padding: 2px 0; +} + +#footer #subfooter-menu { + padding-top: 6px; +} + +#footer .flag-eu { + padding-right: 6px; +} + +/* PHONE */ +@media(max-width: 1200px) { + .u-authn-screen vaadin-vertical-layout vaadin-vertical-layout vaadin-vertical-layout vaadin-vertical-layout vaadin-horizontal-layout { + flex-direction: column; + } + + /* default login*/ + .u-authn-screen vaadin-vertical-layout vaadin-vertical-layout vaadin-vertical-layout vaadin-vertical-layout vaadin-horizontal-layout div.u-auto-width vaadin-vertical-layout { + width: 100% !important; + } + + /* just remove weird gap from switching to column view */ + .u-authn-columnsSeparator { + margin-top: 0 !important; + } + + .u-main-layout-container { + overflow: inherit; + } +} + +@media(max-width: 900px) { + #banner-img { + max-height: 60px; + margin-bottom: -5px; + } + /* menu toggles */ + #footer-menu-button-menu, + #header-menu-button { + display: block; + } + + #footer-menu, + #header-menu { + display: none; + } + + #header-menu.active { + display: flex; + flex-direction: column; + position: absolute; + background-color: #e7ebef; + border: 3px solid #264899; + border-radius: 4px; + padding: 0 40px; + margin: 0; + z-index: 2; + top: var(--header-height); + } + + #footer { + padding: 0; + } + + #footer-menu.active { + display: flex; + flex-direction: column; + position: absolute; + background-color: #2c2c2c; + border: 3px solid #e7ebef; + border-radius: 4px; + padding: 0; + margin: 0; + z-index: 2; + bottom: var(--footer-height); + left: 0; + } + + #header-content-container .logo { + padding: 0; + margin: 0 30px; + } + + /**/ + + .u-authn-screen { + margin: 1% 0 1% 0; + padding: 0; + width: 100% !important; + } + + /*move menu under logo*/ + /*.header, + .unity-layout-top, + #header-content-container { + max-height: 130px; + height: 130px; + }*/ + + #header #gotoeudat, + #header-content-container { + padding: 0; + } + + #header-menu { + margin-top: 70px; + justify-content: center; + } + + #header-menu a { + padding: 0 5%; + } + + /* fix searchbar and title having fixed width*/ + .u-authn-title, + .u-authn-search { + width: 80vw; + } + + .u-consentMainColumn { + /* use as much as you can */ + width: 100% !important; + } + + /* fix footer */ + #unity-layout-bottom a { + overflow: hidden; + text-overflow: ellipsis; + /*padding: 0 4px;*/ + } + + /* fix consent screen buttons margin left */ + .u-consent-screen-buttons { + margin-left: auto; + } + + /* hide useless thing on phone */ + div.footer-text:nth-child(3){ + display: none; + } +} \ No newline at end of file diff --git a/b2access-topbar.html b/b2access-topbar.html new file mode 100644 index 0000000..c98e973 --- /dev/null +++ b/b2access-topbar.html @@ -0,0 +1,20 @@ +
+
+ The B2ACCESS service is a Identity and Authorisation Management (IAM) system which arbitrates authenticated + access to registered services in the context of the EUDAT Collaborative Data Infrastructure (CDI). The role + of the B2ACCESS service is to allow these services to make authentication and the authorisation decisions, + and to perform any other processing required, when the end user accesses these services. When connecting to + a CDI service that requires a login (eventually with further attributes) the access request is redirected to + the B2ACCESS instance ( https://b2access.eudat.eu:8443/home/home) and the user can effectively login by + using his/her primary credential (such as username and password).
+EUDAT identifiers provided by the B2ACCESS service are persistently bound to the user's primary identity. + Primary identities can be provided by external identity providers, e.g. shibboleth IdPs of the users' home + organisations or OpenID providers such as the Google IdP, or they can be provided by the B2ACCESS service + itself, if the users registered genuinely on this service. B2ACCESS may use and store the Attributes + provided by the IdP. The B2ACCESS Service Provider makes sure that the end user’s attributes are only + forwarded to lower-level Service Providers which the end user wants to access. Service Providers must have + declared to the B2ACCESS SP that they comply with the GEANT Data Protection Code of Conduct. This implies + that these lower-level Service Providers will only use personal information that is relevant to provide + their service.
+B2ACCESS is the EUDAT Authentication, Authorization and Identity service. When B2ACCESS is integrated with a + given service, you can sign into the service by using EUDAT identity or another identity you have gotten + from en external identity providers - universities, social media.
+B2ACCESS uses secure communications (like you would see in e-commerce except it is not rated to handle + financial data). B2ACCESS has also gone through a security assessment. And don't forget that B2ACCESS - with + the exception of identities managed by B2ACCESS itself - never sees your password!
+If B2ACCESS is your primary identity provider then press "Forgotten Password?" link between + password field and authenticate button. You have to enter your username. Thereafter a reset code will be + sent to your registered e-mail address. If you enter the reset code you are able to set a new password.
+If you are using an external identity provider, B2ACCESS cannot help you with a forgotten password: you will + need to use the helpdesk of your identity provider or password reset mechanism.
+If B2ACCESS is your identity provider, then your username is the name you typed into the registration form. + Names can have spaces in them, for example "Joe Bloggs".
+If your are using an identity from an external identity provider, then please contact their helpdesk.
+In this case your identity provider doesn't support identity exchange with B2ACCESS. Please contact their + helpdesk and ask for enabling B2ACCESS as service provider. B2ACCESS needs mail and EPPN attributes from + your identity provider.
+This message is a general error message. A more detailed message is printed on screen behind this error + message. Please close it and have a look on details.
+This error occurs if something in the response is not signed. In most cases assertion elements within
+ response messages are not signed. The assertion elements must be signed in SAML2int profile. This profile is the only
+ allowed profile within eduGain SSO.
+ B2ACCESS follows these requirements and only accepts responses from identity providers with signed assertion
+ elements. Please contact your identity provider's helpdesk and ask for singing the assertion elements in
+ SAML response.
Additional information for IT-staff:
This error occurs often after Shibboleth
+ update. A working configuration is:
+
+<bean parent="RelyingPartyByName" c:relyingPartyIds="https://b2access.eudat.eu:8443/unitygw/saml-sp-metadata">
+ <property name="profileConfigurations">
+ <list>
+ <bean parent="SAML2.SSO" p:encryptAssertions="true" p:signResponses="true" p:signAssertions="true"
+ p:encryptionOptional="false" p:nameIDFormatPrecedence="#{{'urn:oasis:names:tc:SAML:2.0:nameid-format:persistent'}}"/>
+ </list>
+ </property>
+</bean>
+
+ If this error still occurs although the signatures are fine, please contact us. We will try to find a solution for
+ your problem.
+ In most cases the external identity provider doesn't release all attributes needed by B2ACCESS. B2ACCESS + consumes mail and EPPN attributes. Please contact your identity providers helpdesk and ask for releasing + this attributes to B2ACCESS. If this error still occurs although these attributes are release, please contact us. We will try to + find a solution for your problem.
+Account association is not supported. Your different accounts may have different attribute values which will + clash. To avoid problems using the EUDAT services, we decided not to support the account association.
+Please use a valid certificate instead of your Apple ID. If you don't have a valid certificate, press + "Deny" if you get asked about access to your Apple ID in keychain. B2ACCESS will be loaded after + it.
+Please contact our helpdesk: + you will get an answer very soon!
+Get in contact with us: we + will provide a great support!
+ Version 1.6 + 2020-04-02 +