Sistemato home e keycloak

keycloak/realm-export.json

@@ -6,8 +6,12 @@
   "registrationAllowed": true,
   "registrationEmailAsUsername": true,
   "loginWithEmailAllowed": true,
+  "editUsernameAllowed": true,
   "resetPasswordAllowed": true,
   "verifyEmail": false,
+  "displayName": "Scouthub",
+  "displayNameHtml": "Scouthub",
+  "loginTheme": "scouthub",
 
   "roles": {
     "realm": [

keycloak/themes/scouthub/login/resources/css/scouthub.css

@@ -0,0 +1,146 @@
+/*
+ * Palette e font presi da scouthub-home-fe/src/material-theme.scss
+ * (design system "Scouthub - Home"), per far combaciare login/registrazione
+ * Keycloak con la grafica del frontend home. scouthub-home-fe forza
+ * `color-scheme: light` (nessuna dark mode), quindi qui i colori sono
+ * valori fissi e non seguono il toggle dark del tema keycloak.v2.
+ */
+@import url('https://fonts.googleapis.com/css2?family=Caprasimo&family=Figtree:wght@400;500;600;700&display=swap');
+
+:root {
+  --scouthub-primary: #c67139;
+  --scouthub-on-primary: #f5ead8;
+  --scouthub-primary-container: #fff2eb;
+  --scouthub-on-primary-container: #643312;
+  --scouthub-secondary: #7a8a5e;
+  --scouthub-error: #8c2f22;
+  --scouthub-background: #f5ead8;
+  --scouthub-on-background: #201e1d;
+  --scouthub-surface-container: #ebddc5;
+  --scouthub-surface-container-lowest: #ffffff;
+  --scouthub-outline: #a89a83;
+  --scouthub-outline-variant: #d8c9ab;
+
+  color-scheme: light;
+  /* Nessuna striscia colorata in cima alla card: home-fe non usa questo
+     pattern (le sue card, es. profilo-card/crea-gruppo__card, sono piatte). */
+  --keycloak-card-top-color: transparent;
+}
+
+html,
+body {
+  font-family: 'Figtree', sans-serif;
+}
+
+.login-pf body,
+#keycloak-bg {
+  background: var(--scouthub-background);
+  color: var(--scouthub-on-background);
+}
+
+.pf-v5-c-login__main-header {
+  border-top: none;
+}
+
+.pf-v5-c-login__main {
+  /* Stesso tono delle card di home-fe (profilo-card, crea-gruppo__card),
+     non bianco: qui il bianco sarebbe l'unico elemento "freddo" della pagina. */
+  background: var(--scouthub-surface-container);
+  border-radius: 32px;
+  box-shadow: 0 12px 32px rgba(46, 43, 37, 0.16);
+  padding: 8px;
+}
+
+#kc-header-wrapper {
+  font-family: 'Caprasimo', sans-serif;
+  text-transform: none;
+  letter-spacing: normal;
+  font-size: 28px;
+  color: var(--scouthub-on-background) !important;
+}
+
+.pf-v5-c-title.pf-m-3xl,
+#kc-page-title {
+  font-family: 'Caprasimo', sans-serif;
+  color: var(--scouthub-on-background);
+}
+
+a,
+a:visited {
+  color: var(--scouthub-primary);
+}
+
+.pf-v5-c-form__label-text {
+  font-family: 'Figtree', sans-serif;
+  font-weight: 500;
+  font-size: 13px;
+  color: var(--scouthub-on-background);
+  opacity: 0.75;
+}
+
+.pf-v5-c-form-control {
+  background-color: var(--scouthub-surface-container-lowest);
+  color: var(--scouthub-on-background);
+  border-radius: 12px;
+  border-color: var(--scouthub-outline-variant);
+}
+
+/* La classe kcInputClass è sullo <span> che avvolge l'<input>, non
+   sull'input stesso: :focus non scatterebbe mai, serve :focus-within.
+   L'input interno non ha classi proprie, quindi va spento il suo outline
+   nativo separatamente. */
+.pf-v5-c-form-control:focus-within {
+  border-color: var(--scouthub-primary);
+  box-shadow: 0 0 0 1px var(--scouthub-primary);
+}
+
+.pf-v5-c-form-control input:focus,
+.pf-v5-c-form-control textarea:focus,
+.pf-v5-c-form-control select:focus {
+  outline: none;
+}
+
+/* PatternFly disegna l'indicatore di focus come bordo inferiore blu tramite
+   uno pseudo-elemento ::after sullo <span> wrapper (non tramite :focus né
+   outline): va sovrascritto qui, altrimenti resta il blu di default. */
+.pf-v5-c-form-control::after {
+  border-bottom-color: var(--scouthub-primary);
+}
+
+.pf-v5-c-button.pf-m-primary {
+  background-color: var(--scouthub-primary) !important;
+  color: var(--scouthub-on-primary) !important;
+  border-radius: 999px !important;
+  border: none !important;
+}
+
+.pf-v5-c-button.pf-m-primary:hover,
+.pf-v5-c-button.pf-m-primary:focus {
+  background-color: var(--scouthub-on-primary-container) !important;
+}
+
+.pf-v5-c-button.pf-m-secondary {
+  color: var(--scouthub-secondary) !important;
+  border-color: var(--scouthub-secondary) !important;
+  border-radius: 999px !important;
+}
+
+.pf-v5-c-button.pf-m-link {
+  color: var(--scouthub-primary) !important;
+}
+
+.pf-v5-c-button.pf-m-control {
+  border-radius: 12px;
+  border-color: var(--scouthub-outline-variant);
+  color: var(--scouthub-on-background);
+}
+
+.pf-v5-c-check__input:checked ~ .pf-v5-c-check__label::before {
+  background-color: var(--scouthub-primary);
+}
+
+.pf-v5-c-alert.pf-m-danger {
+  --pf-v5-c-alert--BackgroundColor: var(--scouthub-primary-container);
+  --pf-v5-c-alert--m-danger--BorderTopColor: var(--scouthub-error);
+  color: var(--scouthub-on-primary-container);
+}

keycloak/themes/scouthub/login/theme.properties

@@ -0,0 +1,19 @@
+# Tema di login/registrazione allineato alla grafica di scouthub-home-fe
+# (stessi colori/font del design system "Scouthub - Home", vedi
+# scouthub-home-fe/src/material-theme.scss). Eredita struttura e
+# comportamento dal tema built-in "keycloak.v2", aggiungendo solo un foglio
+# di stile che sovrascrive i colori PatternFly.
+parent=keycloak.v2
+import=common/keycloak
+
+# Non chiamare il nostro foglio di stile "css/styles.css": è lo stesso path
+# relativo usato dal tema padre keycloak.v2 (che contiene l'override del
+# layout a colonna singola dell'header). Con lo stesso nome Keycloak serve
+# solo il file del tema figlio, perdendo quello del padre: elenchiamo
+# entrambi, il nostro per ultimo così vince in cascata sui colori.
+styles=css/styles.css css/scouthub.css
+
+# scouthub-home-fe non ha una dark mode (color-scheme fissato a light in
+# material-theme.scss): disattiviamo anche qui il toggle automatico di
+# keycloak.v2, altrimenti col sistema in dark mode gli input diventano neri.
+darkMode=false