globular_panel/src/installationWizard.ts

Globular Configuration Panel

import { Wizard } from "../../globular-mvc/src/components/Wizard";
import { Model } from "../../globular-mvc/src/Model";


export class InstallationWizard {

    private wiz: Wizard;

    constructor(parent: any) {
        this.wiz = new Wizard()
        this.wiz.style.paddingTop = "5%"
        this.wiz.width = 500

        parent.appendChild(this.wiz)

        // The introduction page.
        this.createIntroductionPage()

        // The admin setup page.
        this.createAdminSetupPage()

        // The web-server setup.
        this.createHttpSetupPage()

        // Here I will react to next page event to manage 
        // if the next step can be access or not.
        Model.eventHub.subscribe("wizard_next_page_evt", (uuid: string) => { }, (evt: any) => {
            if (evt.index == 1) {
                evt.nextBtn.setAttribute("disabled")
            }
        }, true)

    }

    private appendPage(innerHTML: string): any {
        let div = document.createElement("div")
        div.innerHTML = innerHTML;
        this.wiz.appendPage(div)
        return div;
    }

    /** Create the introduction page. */
    private createIntroductionPage() {

        let html = `
        <h2>Welcome to Globular!</h2>
        <img style="align-self: center; width: 250px;" src="images/puffer.svg"></img>
        <p>This wizard will guide you in the installation of your server.</p>
        `
        // create the page
        let div = this.appendPage(html)

        // set style attribute for the page to display correctly...
        div.style.display = "flex"
        div.style.alignItems = "center"
        div.style.flexDirection = "column"

    }


    /** Create Admin setup page */
    private createAdminSetupPage() {
        let html =
            `
        <h2>Admin Setup</h2>
        <span style="font-style: italic;">But are you still "Master of your Domain?"</span><br>
        <span style="font-style: italic; font-size: .8em">Seinfeld</span>
        <p>
            The first thing to do is to secure your server by changing the admin email and admin password (<span style="font-style: italic;">"adminadmin"</span> by defaut.).
        </p>
        <h3>
            Admin Email 
            <paper-icon-button id="email_info" icon="info" alt="information"></paper-icon-button>
        </h3>
        <paper-tooltip for="email_info" position="right" animation-delay="250" animation-entry="scale-up-animation" animation-exit="scale-down-animation">
            <p>
                The administrator email can be any well formed email address. 
            </p>
            <p>
                By using active email address it 
                became posible to receive alert or notification 
                from your server when something happen.
            </p>
        </paper-tooltip>
        <paper-input value="globular@globular.app" type="email" id="admin_email_address_input" required label="email" pattern="^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$" error-message="not well formed email!"></paper-input>

        <h3>
            Admin Password
            <paper-icon-button id="password_info" icon="info" alt="information"></paper-icon-button>
        </h3>
        <paper-input id="admin_password" type="password" required label="password" pattern="" error-message="password does not respect requirement"></paper-input>
        <paper-input id="admin_password_confirm" type="password" required label="confirm password" pattern="" error-message=""></paper-input>

        <paper-tooltip for="password_info" position="right" animation-delay="250" animation-entry="scale-up-animation" animation-exit="scale-down-animation">
            <p>
                The admin password will be save in the configuration file 
            </p>
            <span style="font-style: italic; font-size: 1.4em;">installation_folder/config/config.json</span>
            <p>
                For that reason you must restrict the access of that file on your server.
            <p>
                * If you forgot your password you will be able to retreive it from that file.
            </p>
        </paper-tooltip>
        `
        this.appendPage(html)

        // Here I will append 
        let emailInput = <any>this.wiz.getElementById("admin_email_address_input")
        emailInput.onblur = () => {
            if (!emailInput.validate()) {
                console.log("no valid!")
            } else {
                console.log("valid!")
            }
        }
    }

    /** Create the http server configuration */
    private createHttpSetupPage() {

        let html = `
        <h2>Web Application Server Setup</h2>
        <p>
            Globular can be use as a simple web-server or as a complete application server.
        </p>
        
        <h3>
            Domain(s)
        </h3>
        <div>
            <paper-input id="domain_name_input" label="domain" value="localhost"></paper-input>
            
        </div>
        `
        // create the page
        let div = this.appendPage(html)

        // set style attribute for the page to display correctly...
        div.style.display = "flex"
        div.style.flexDirection = "column"

    }
}