Oggi voglio affrontare un problema molto comune per i designer e web developer: la progettazione della pagina di login e registrazione ad un portale, nel nostro caso sviluppato con Oracle APEX.

Devi sapere, infatti, che ci sono alcuni piccoli accorgimenti che vale la pena tenere a mente quando sviluppi una applicazione con Oracle APEX ed in particolare, quando vuoi creare una pagina di login bella e funzionale.

Partiamo dal dire che tutte le applicazioni APEX nascono con una pagina di login di default, che sicuramente fa il suo dovere, ma che per i più esigenti potrebbe essere scarna ed in generale poco accattivante.

Abbiamo un logo (standard), un campo per inserire la username e la password ed il bottone per effettuare il Log On.

Se si tratta di una applicazione aziendale, potrebbe essere anche accettabile.

Ma se la tua intenzione è quella di creare un’applicazione più evoluta e completa, sono necessarie alcune modifiche come inserire un logo, creare una form di registrazione e modificare aspetto e colori affinché rispecchino il brand.

Insomma, realizzare qualcosa di simile a questo:

In questo articolo ti spiegherò come personalizzare la login page di una applicazione APEX.

Prima di iniziare

Per modificare l’aspetto di una pagina APEX faremo uso di CSS: anche se non sei un esperto non devi preoccuparti perché ti fornirò tutti gli script da inserire.

Per maggiori dettagli su come importare il CSS all’interno di una applicazione APEX puoi leggere questo articolo.

Inoltre, collegandoti a questo link puoi vedere una pagina di login DEMO che ho creato appositamente per questo tutorial.

Cosa sapere sulla pagina Login di una applicazione APEX

Quando crei una qualsiasi applicazione in APEX viene automaticamente creata una pagina di login standard. Come prima cosa ti spiego come individuarla.

• Accedi all’APP Builder
• Inserisci nel campo di ricerca la parola chiave Login Page e premi GO

• Quello che dovresti ottenere come risultato è la pagina 9999 – Login Page. Clicca sull’icona della pagina

• Se osservi la struttura della pagina dovresti riconoscere i suoi componenti principali
  • P9999_USERNAME: campo username
  • P9999_PASSWORD: campo password
  • P9999_REMEMBER: checkbox “Remember Me”
  • LOGIN: bottone per eseguire l’autenticazione

• Come puoi notare esiste un altro componente chiamato Language Selector che viene visualizzato quando l’applicazione è multilingua
• Clicca sul tab Processing per scoprire alcune informazioni interessanti.
• Clicca su processo Login

• Se andiamo a guardare le proprietà del processo scopriamo che viene usato il seguente script PL-SQL.

Ti ho già spiegato come puoi utilizzare l’autenticazione social con Linkedin, Facebook o Google: tutti questi metodi prevedono di inserire le credenziali attraverso la pagina di login del servizio scelto.

Se invece preferisci usare la tua pagina di login personalizzata lo potrai fare andando a scrivere il codice per eseguire l’autenticazione direttamente in questo punto: esploreremo questa possibilità in un’altra occasione.

Per il momento concentriamoci sulle modifiche estetiche.

Come modificare il logo della pagina di login

La prima cosa che faremo sarà sostituire il logo di default con uno personalizzato.

• Accedi all’APP Builder e clicca su Shared Components

• Clicca su Files > Static Application Files

• In questa sezione puoi caricare tutti i file statici che la tua applicazione deve utilizzare. Ad esempio potresti caricarci i CSS, le icone e le immagini.
• Clicca su Upload File.

• Seleziona il file da caricare e premi Upload.

• Se il file che viene caricato correttamente dovresti vedere un messaggio di conferma.
• Il campo Reference mostra la stringa che dovrai utilizzare per referenziare questo file, nel mio caso è #APP_IMAGES#appin5minuti-logo.png

• Se clicchi sul nome del file puoi vederne il contenuto

A questo punto possiamo inserire il logo nella pagina di login.

• Accedi all’APP Builder e seleziona la Login Page.
• Clicca sul nodo radice della pagina

• Nel pannello delle proprietà vai alla sezione CSS > Inline ed inserisci il seguente codice CSS
  • background-image: qui andrai ad inserire l’URL del file logo che hai caricato, ovvero il campo Reference che abbiamo visto poco fa.
  • width: larghezza in pixel
  • height: altezza in pixel

span.t-Login-logo { 
    background-image: url(#APP_IMAGES#appin5minuti-logo.png);
    background-size: cover;
    width: 150px;
    height: 150px;
}

• Esegui la preview per vedere il risultato

Come modificare lo sfondo della pagina di login

Puoi anche personalizzare il background di tutta la pagina di login.

• Sempre dalla proprietà CSS > Inline della pagina di login (dove hai inserito il codice per modificare il logo), inserisci il codice CSS per modificare il background.
• Ad esempio, questo è il codice CSS per avere uno sfondo con colori sfumati (in gergo si parla di gradiente)

.t-PageBody--login {
    background: rgb(216,71,39);
    background: linear-gradient(315deg, rgba(216,71,39,1) 9%, rgba(0,48,73,1) 43%);
}

• Puoi creare la tua combinazione di gradiente preferita usando, ad esempio, il sito cssgradient.io.
• Se esegui la preview, questo è il risultato finale

• Ovviamente puoi anche usare una immagine come sfondo della pagina; in tal caso dovrai
  • Caricare il file nella sezione Static Application File come fatto per l’immagine del logo.
  • Modificare il CSS della pagina di login usando il seguente codice CSS

.t-PageBody--login {
    background-image:url(#APP_IMAGES#appin5minuti-background.jpg);
    background-repeat: no-repeat;
    background-size : cover;
    background-position: center;
}

• Questo è il risultato

Come modificare i campi Username e Password

Con un po’ di codice CSS possiamo modificare l’aspetto dei campi username e password

• Apri la definizione della pagina di login e clicca sul nodo radice
• Vai sempre alla sezione CSS > Inline ed inserisci il seguente codice CSS

#P9999_USERNAME , #P9999_PASSWORD  {
    background-color: #0e0d0d00;
    color: rgba(0,48,73,1);
    border-bottom-color: rgba(216,71,39,1);
    border-width: 0 0 3px 0;
}

• Questo è il significato degli attributi
  • background-color: colore dello sfondo
  • color: colore del testo
  • border-bottom-color: colore del bordo inferiore
  • border-width: larghezza del bordo

• Questo è il risultato finale

Come nascondere il logo o il nome dell’applicazione

La pagina di login sfrutta uno specifico template APEX che permette alcune configurazioni di base.

Vediamole insieme.

• Apri la definizione della pagina Login Page
• Clicca sul componente che contiene i campi username e password

Vai alla sezione Appearance e clicca su Template Options.

• Seleziona l’opzione Login Header: Hidden

• Con questa opzione non verrà mostrato né il logo, né il titolo dell’applicazione

• Le altre opzioni di configurazione del template sono:
  • Icon and Title: mostra logo e titolo dell’applicazione
  • Icon: mostra solo il logo
  • Title: mostra solo il titolo dell’applicazione
  • Hidden: nascondi sia logo che titolo dell’applicazione

Come personalizzare il bottone Sign In

Come cambiare l’aspetto di un bottone usando il Theme Roller

Il modo più immediato e semplice per modificare il bottone Sign-In è tramite il Theme Roller.

• Avvia l’applicazione in modalità Preview
• Nella parte inferiore del browser o a lato (puoi decidere dove preferisci posizionarlo) dovresti vedere un menù, visibile solo in modalità Preview. Clicca su Theme Roller.

• Vai alla sezione Buttons per modificare l’aspetto dei bottoni.

• In questo caso ho modificato il colore dei bottoni Hot e ho smussato gli angoli.
• Clicca su Save As e salva le modifiche al tema

• Assegna un nome al tema e clicca Save

• Clicca Set As Current per attivare il nuovo tema.

• Questo è il risultato finale

Usare il Theme Roller è sicuramente un ottimo metodo per personalizzare l’aspetto di una applicazione APEX.

La cosa importante che devi tenere a mente è che le modifiche sono globali all’interno della tua applicazione.

Questo vuol dire che tutti i bottoni che userai di tipo Hot erediteranno questo aspetto: questo può essere una cosa positiva o negativa in funzione delle tue esigenze.

Non preoccuparti, ci sono alcun trucchi che puoi utilizzare per ovviare a questo problema: vediamo insieme com modificare l’aspetto di un bottone senza usare il Theme Roller

Come cambiare l’aspetto di un bottone usando la Color Palette

Per comodità ho creato un secondo bottone sign-in come copia di quello originale.

• Essendo entrambi hot-buttons ne ereditano, come puoi immaginare, l’aspetto previsto nel Theme Roller.

• Vai alle proprietà del bottone Sign In 2.
• Vai alla proprietà Appearance > CSS Classes ed inserisci il valore u-color-1 (tra un attimo ti spiego cosa rappresenta)

• Esegui la preview per vedere il colore del secondo bottone diverso da quello di default

Cosa rappresenta u-color-1?

Si tratta di una classe CSS che richiama uno dei colori previsti nella Palette dell’applicazione.

Per gestire e modificare la Palette di colori dell’applicazione:

• Apri il Theme Roller in modalità Preview
• Vai alla sezione Palette: in questo punto puoi definire e gestire la palette di colori della tua app. Ciascun colore della Palette è identificato da un numero (da 1 a 15) e potrai richiamare il colore usando la relativa classe CSS
  • Color 1: u-color-1
  • Color 2: u-color-2
  • Color 3: u-color-3
  • ecc…

A questo link puoi trovare tutte le classi CSS standard previste per modificare il colore di riempimento del bottone, il colore dello sfondo, del bordo e del testo senza dover scrivere codice CSS custom.

Ad esempio, per modificare il colore ed il testo i un bottone potresti usare due classi CSS diverse (u-color-10 e u-color-11-text).

Questo è il risultato

Come cambiare l’aspetto di un bottone usando CSS personalizzato

L’ultima opzione che voglio spiegarti è sicuramente quella più complicata, ma che ti da il massimo delle possibilità.

• Apri la definizione della Login Page
• Clicca sul nodo radice della pagina e vai alla sezione CSS > Inline.
• Inserisci il seguente codice CSS che definisce una nuova classe CSS (che si chiama appin5minuti-login-btn ma che tu puoi chiamare come preferisci).

.appin5minuti-login-btn {
    background: #009EDB !important;
    font-size: 20px !important;
    color:rgba(0,48,73,1) !important;
    border-radius: 15px !important;
}

• Con questa classe CSS vado a definire le seguenti proprietà
  • background: colore del bottone
  • font-size: dimensione del testo
  • color: colore del testo
  • border-radius: spigoli del bottone

• Clicca sul bottone da personalizzare

• Vai alla proprietà CSS Classes ed inserisci la classe CSS che abbiamo appena definito

• Esegui la Preview per vedere il risultato dove lo sfondo del bottone è cambiato così come la dimensione del font e il colore del testo.

• Ovviamente puoi aggiungere tutte le funzionalità CSS che preferisci. Ad esempio, ho inserito il seguente codice CSS che cambia l’aspetto del bottone quando ti posizioni con il mouse (proprietà on-hover)

.appin5minuti-login-btn:hover {
  background: rgba(0,48,73,1) !important;
  color:rgb(255, 255, 255) !important;
}

• Quando posizioni il puntatore del mouse sul pulsando Log In 2 vedrai il suo aspetto cambiare

Come aggiungere un testo alla Login Page

Talvolta è utile inserire delle brevi istruzioni a video, come nel seguente esempio

Un modo veloce per fare questo è inserendo l’html direttamente nella pagina.

• Apri al definizione della Login Page e seleziona il componente Login

• Vai alle proprietà Header and Footer > Header Text ed inserisci il codice HTML che desideri mostrare

• Salva ed esegui la Preview

Come aggiungere un link alla form di registrazione

Normalmente tutte le applicazione web più comuni richiedono all’utente di registrarsi per usare il servizio. In questo articolo ho spiegato come creare una form di registrazione.

Vediamo come possiamo richiamarla dalla nostra pagina di login.

• Apri la definizione della Login Page
• Crea un nuovo pulsante di nome REGISTER

• Apri la definizione del pulsante ed imposta le seguenti proprietà
  • Label: inserisci la label che vuoi visualizzare
  • Button Position: Edit
  • Button Template: Text
  • Template Options > Style: Display as a link

• Vai alla sezione Behavior ed imposta la seguenti proprietà
  • Action: Redirect to Page in this Application
  • Target: inserisci la pagina che hai implementato per gestire la registrazione.

• Esegui la preview dell’applicazione. Al di sotto del bottone Sign In dovresti vedere il link per aprire la form di registrazione.

• Se clicchi sul link dovresti vedere questo risultato

Come aggiungere un link per il recupero password

Una delle caratteristiche di una Login Page fatta bene è la presenza di un link per il recupero o reset della password.

Non è mia intenzione spiegare in questo post come creare una form di password recovery. Ti mostrerò, invece, come collegarla alla tua form di login.

In questo caso, ha senso mettere il link vicino al campo Password, come in questo esempio

• Apri la definizione della Login Page
• Seleziona l’item page dove viene inserita la password

• Vai alla sezione Help > Inline Help Text ed inserisci il codice HTML con il link alla pagina che avrai creato per il recupero della password

• Esegui la preview per vedere il risultato

Conclusioni

Bene! Questo è tutto per questo tutorial.

Adesso hai a disposizione tante informazioni utili che ti aiuteranno a progettare una login Page su Oracle APEX bella e funzionale.

Se hai suggerimenti o commenti, fammelo sapere!

Ti invito a condividere questo articolo se lo hai trovato interessante e ad iscriverti alla pagina Linkedin di APPin5Minuti.

Se poi vuoi approfondire le tue conoscenze su Oracle APEX e non solo, dai un’occhiata ai tanti tutorial che settimanalmente pubblico sul sito.

Un abbraccio

Daniele