Updated d4science theme and d4science.v2 account theme for KC v23.0.0

keycloak-d4science-theme/src/main/resources/theme/d4science.v2/account/index.ftl

@@ -107,10 +107,10 @@
             var content = <#include "resources/content.json"/>
         </script>
 
-        <link rel="stylesheet" type="text/css" href="${resourceCommonUrl}/web_modules/@patternfly/react-core/dist/styles/base.css"/>
-        <link rel="stylesheet" type="text/css" href="${resourceCommonUrl}/web_modules/@patternfly/react-core/dist/styles/app.css"/>
-        <link rel="stylesheet" type="text/css" href="${resourceCommonUrl}/web_modules/@patternfly/patternfly/patternfly-addons.css"/>
-        <link href="${resourceUrl}/public/layout.css" rel="stylesheet"/>
+        <link rel="stylesheet" href="${resourceCommonUrl}/node_modules/@patternfly/react-core/dist/styles/base.css"/>
+        <link rel="stylesheet" href="${resourceCommonUrl}/node_modules/@patternfly/patternfly/patternfly-addons.css"/>
+        <link rel="stylesheet" href="${resourceUrl}/public/app.css"/>
+        <link rel="stylesheet" href="${resourceUrl}/public/layout.css"/>
 
         <#if properties.styles?has_content>
             <#list properties.styles?split(' ') as style>

keycloak-d4science-theme/src/main/resources/theme/d4science.v2/account/resources/content/d4science-page/AccountExtraPage.js

@@ -1,18 +1,24 @@
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-import * as React from "../../../../common/keycloak/web_modules/react.js";
-import { PageSection, PageSectionVariants, Button, Grid, GridItem, ExpandableSection, Modal } from "../../../../common/keycloak/web_modules/@patternfly/react-core.js";
+import * as React from "../../../resources/web_modules/react.js";
+import { PageSection, PageSectionVariants, Button, Grid, GridItem, ExpandableSection, Modal } from "../../../resources/web_modules/@patternfly/react-core.js";
 import { AccountServiceContext } from "../../account-service/AccountServiceContext.js";
 import { Msg } from "../../widgets/Msg.js";
 import { ContentPage } from "../ContentPage.js";
 import { ContentAlert } from "../ContentAlert.js";
 import { AvatarForm } from "./AvatarForm.js";
 export class AccountExtraPage extends React.Component {
-  constructor(props) {
+  constructor(props, context) {
     super(props);
 
     _defineProperty(this, "context", void 0);
 
+    _defineProperty(this, "DEFAULT_STATE", {
+      isModalOpen: false
+    });
+
+    _defineProperty(this, "state", this.DEFAULT_STATE);
+
     _defineProperty(this, "handleModalToggle", open => {
       this.setState({
         isModalOpen: open
@@ -31,9 +37,7 @@ export class AccountExtraPage extends React.Component {
       });
     });
 
-    this.state = {
-      isModalOpen: false
-    };
+    this.context = context;
   }
 
   render() {

keycloak-d4science-theme/src/main/resources/theme/d4science.v2/account/resources/content/d4science-page/AvatarForm.js

@@ -1,8 +1,8 @@
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-import * as React from "../../../../common/keycloak/web_modules/react.js";
-import { Form, FormGroup, ActionGroup, FileUpload, Avatar, Button, Tooltip } from "../../../../common/keycloak/web_modules/@patternfly/react-core.js";
-import { OutlinedQuestionCircleIcon } from "../../../../common/keycloak/web_modules/@patternfly/react-icons.js";
+import * as React from "../../../resources/web_modules/react.js";
+import { Form, FormGroup, ActionGroup, FileUpload, Avatar, Button, Tooltip } from "../../../resources/web_modules/@patternfly/react-core.js";
+import { OutlinedQuestionCircleIcon } from "../../../resources/web_modules/@patternfly/react-icons.js";
 import { AccountServiceContext } from "../../account-service/AccountServiceContext.js";
 import { ContentAlert } from "../ContentAlert.js";
 import { Msg } from "../../widgets/Msg.js";
@@ -101,7 +101,7 @@ export class AvatarForm extends React.Component {
     };
     var reader = new FileReader();
 
-    reader.onloadend = function (event) {
+    reader.onloadend = event => {
       var imgData = String(event.target.result);
       this.imageScale(imgData, blob => {
         this.setState({
@@ -109,7 +109,7 @@ export class AvatarForm extends React.Component {
           avatarSrc: URL.createObjectURL(blob)
         });
       });
-    }.bind(this);
+    };
 
     this.handleFileInputChange = (file, filename) => {
       if (filename != "") {

keycloak-d4science-theme/src/main/resources/theme/d4science/account/messages/messages_it.properties

@@ -2,12 +2,12 @@ accountManagementTitle=D4Science Account Management
 
 changeAvatarHtmlTitle=Modifica Avatar
 noAvatarSet=Caricare un'immagine (si consiglia una dimensione di 100x100 px, le immagini che eccedono 250x250px saranno ridimensionate a 250px di larchezza o altezza mantenendo il loro rapporto) con Scegli file e premendo quindi su Salva
-avatarFileSizeMessage=La massima dimensione consentita del file è di 1MB.
+avatarFileSizeMessage=La massima dimensione consentita del file è di 1MB.
 avatarFileTooBig=Dimensione file eccessiva!
 
 deleteAccountHtmlTitle=Cancellazione Account
 deleteAccountSubmitButton=Conferma cancellazione account
-deleteAccountMessage=La cancellazione del proprio account disabiliterà il profilo e rimuoverà il nome e le foto condivise sul/sui gateway D4Science. Alcune informazioni potrebbero risultare ancora visibili agli altri utenti, come il nome nei post e nei messaggi privati inviati. Tutti i file e le cartelle create nel workspace personale saranno rimosse.
+deleteAccountMessage=La cancellazione del proprio account disabiliterà il profilo e rimuoverà il nome e le foto condivise sul/sui gateway D4Science. Alcune informazioni potrebbero risultare ancora visibili agli altri utenti, come il nome nei post e nei messaggi privati inviati. Tutti i file e le cartelle create nel workspace personale saranno rimosse.
 deleteAccountWarningTitle=Attenzione
-deleteAccountWarningMessage=Cliccando sul bottone "Conferma cancellazione account" si avvierà un''operazione irreversibile, l''account personale sarà rimosso e saranno terminate tutte le sessioni aperte nei vari siti.
-deleteAccountConfirmDeleteMessage=\\nSi vuole veramente cancellare il proprio account?\\n\\n[NB: Questa azione è irreversible]
+deleteAccountWarningMessage=Cliccando sul bottone "Conferma cancellazione account" si avvierà un''operazione irreversibile, l''account personale sarà rimosso e saranno terminate tutte le sessioni aperte nei vari siti.
+deleteAccountConfirmDeleteMessage=\\nSi vuole veramente cancellare il proprio account?\\n\\n[NB: Questa azione è irreversible]

keycloak-d4science-theme/src/main/resources/theme/d4science/login/register.ftl

@@ -1,4 +1,5 @@
 <#import "template.ftl" as layout>
+<#import "register-commons.ftl" as registerCommons>
 <@layout.registrationLayout displayMessage=!messagesPerField.existsError('firstName','lastName','email','username','password','password-confirm'); section>
     <#if section = "header">
         ${msg("registerTitle")}
@@ -87,10 +88,18 @@
                         <label for="password" class="${properties.kcLabelClass!}">${msg("password")}</label>
                     </div>
                     <div class="${properties.kcInputWrapperClass!}">
-                        <input type="password" id="password" class="${properties.kcInputClass!}" name="password"
-                               autocomplete="new-password"
-                               aria-invalid="<#if messagesPerField.existsError('password','password-confirm')>true</#if>"
-                        />
+                        <div class="${properties.kcInputGroup!}">
+                            <input type="password" id="password" class="${properties.kcInputClass!}" name="password"
+                                   autocomplete="new-password"
+                                   aria-invalid="<#if messagesPerField.existsError('password','password-confirm')>true</#if>"
+                            />
+                            <button class="pf-c-button pf-m-control" type="button" aria-label="${msg('showPassword')}"
+                                    aria-controls="password"  data-password-toggle
+                                    data-label-show="${msg('showPassword')}" data-label-hide="${msg('hidePassword')}">
+                                <i class="fa fa-eye" aria-hidden="true"></i>
+                            </button>
+                        </div>
+
 
                         <#if messagesPerField.existsError('password')>
                             <span id="input-error-password" class="${properties.kcInputErrorMessageClass!}" aria-live="polite">
@@ -106,10 +115,17 @@
                                class="${properties.kcLabelClass!}">${msg("passwordConfirm")}</label>
                     </div>
                     <div class="${properties.kcInputWrapperClass!}">
-                        <input type="password" id="password-confirm" class="${properties.kcInputClass!}"
-                               name="password-confirm"
-                               aria-invalid="<#if messagesPerField.existsError('password-confirm')>true</#if>"
-                        />
+                        <div class="${properties.kcInputGroup!}">
+                            <input type="password" id="password-confirm" class="${properties.kcInputClass!}"
+                                   name="password-confirm"
+                                   aria-invalid="<#if messagesPerField.existsError('password-confirm')>true</#if>"
+                            />
+                            <button class="pf-c-button pf-m-control" type="button" aria-label="${msg('showPassword')}"
+                                    aria-controls="password-confirm"  data-password-toggle
+                                    data-label-show="${msg('showPassword')}" data-label-hide="${msg('hidePassword')}">
+                                <i class="fa fa-eye" aria-hidden="true"></i>
+                            </button>
+                        </div>
 
                         <#if messagesPerField.existsError('password-confirm')>
                             <span id="input-error-password-confirm" class="${properties.kcInputErrorMessageClass!}" aria-live="polite">
@@ -120,6 +136,8 @@
                 </div>
             </#if>
 
+            <@registerCommons.termsAcceptance/>
+
             <#if recaptchaRequired??>
                 <div class="form-group">
                     <div class="${properties.kcInputWrapperClass!}">
@@ -143,6 +161,7 @@
                 </div>
             </div>
         </form>
+        <script type="module" src="${url.resourcesPath}/js/passwordVisibility.js"></script>
 
         <!-- D4Science username constraints js check -->
         <script type="text/javascript">
@@ -169,4 +188,4 @@
             })
         </script>
     </#if>
-</@layout.registrationLayout>
+</@layout.registrationLayout>

keycloak-d4science-theme/src/main/resources/theme/d4science/login/template.ftl

@@ -1,6 +1,6 @@
 <#macro registrationLayout bodyClass="" displayInfo=false displayMessage=true displayRequiredFields=false displayWide=false>
 <!DOCTYPE html>
-<html class="${properties.kcHtmlClass!}">
+<html class="${properties.kcHtmlClass!}"<#if realm.internationalizationEnabled> lang="${locale.currentLanguageTag}"</#if>>
 
 <head>
     <meta charset="utf-8">
@@ -35,6 +35,17 @@
             <script src="${script}" type="text/javascript"></script>
         </#list>
     </#if>
+    <#if authenticationSession??>
+        <script type="module">
+            import { checkCookiesAndSetTimer } from "${url.resourcesPath}/js/authChecker.js";
+
+            checkCookiesAndSetTimer(
+              "${authenticationSession.authSessionId}",
+              "${authenticationSession.tabId}",
+              "${url.ssoLoginInOtherTabsUrl}"
+            );
+        </script>
+    </#if>
 </head>
 
 <!-- D4Science body style overridden to handle bg image custom configs -->