class WebService{
    static base_url = '/api';
    static host = 'app.ultracards.co';

    static async call( route, data, method, token, success, error ){
        let formData = false;
        if( !(data instanceof FormData) ){
            formData = new FormData();
            for( let key in data ){
                formData.append( key, data[key] );
            }
        } else {
            formData = data;
        }

        let headers = {
            "Accept": "application/json",
            // "Content-Type": "application/json",
            "Host": WebService.host
        };
        
        if( token ){
            headers[ 'Authorization' ] = 'Bearer '+token
        }

        let url = WebService.base_url + route;
        let errorFunc = WebService.onError( error );
        let successFunc = WebService.onSuccess( success, errorFunc );

        fetch( url, { "method": method, "body": formData, "headers": headers } )
        .then( (response) => response.json() )
        .then( successFunc )
        .catch( errorFunc );
    }

    static onSuccess( successFunc, errorFunc ){
        return function( response ){
            if( Tools.exists(response.success) ){
                if( response.success ){
                    if( Tools.isFunction(successFunc) ){
                        successFunc( response );
                    }
                } else {
                    errorFunc( response );
                }
            } else {
                errorFunc( {"succes":false, "message":"Server error, retry later.", "error":"server-error"} );
            }
        }
    }

    static onError( errorFunc ){
        return function( error ){
            if( Tools.isFunction(errorFunc) ){
                errorFunc( error );
            }
        }
    }
}class Auth{
    static profile = false;
    static tokens = {};

    static setProfile( profile ){
        Auth.profile = profile;
    }

    static getProfile(){
        return Auth.profile;
    }

    static loadProfiles(){
        let tokens = Auth.getLocalSession();
        if( tokens && !Tools.empty(tokens) ){
            Auth.tokens = tokens;

            let token = Auth.getCurrentToken();
            if( token ){
                Auth.validateToken( token );
            } else {
                EventDispatcher.trigger( 'auth_error' );
            }
        } else {
            EventDispatcher.trigger( 'auth_error' );
        }
    }

    static validateToken( token ){
        WebService.call( '/me', {}, 'POST', token, Auth.handleTokenSuccess, Auth.handleTokenError );
    }

    static handleTokenSuccess( response ){
        if( response.success && response.me ){
            Context.setProfile( Auth.getProfile() );
            Context.setToken( response.token );
            Context.setMe( response.me );

            EventDispatcher.trigger( 'auth_success' );
        } else {
            EventDispatcher.trigger( 'auth_error' );
        }
    }

    static handleTokenError( error ){
        EventDispatcher.trigger( 'auth_error' );
    }

    static setToken( token, type ){
        if( token && type ){
            Auth.tokens[ type ] = token;

            Auth.updateLocalSession();

            EventDispatcher.trigger( 'auth_success' );
        }
    }

    static getCurrentToken(){
        let token = false;
        if( Tools.exists(Auth.tokens[ Auth.getProfile() ]) ){
            token = Auth.tokens[ Auth.getProfile() ];
        }
        return token;
    }

    static getToken( type ){
        let token = false;

        if( Auth.tokens[ type ] ){
            token = Auth.tokens[ type ];
        }

        return token;
    }

    static async logout(){
        if( Context.getToken() ){
            let type = Auth.getProfile();
            WebService.call( '/logout', {}, 'POST', Context.getToken() );
            delete(Auth.tokens[ type ]);

            Context.setMe( false );
            Context.setToken( false );

            Auth.updateLocalSession();

            EventDispatcher.trigger( 'auth_logout' );
        }
    }

    static getLocalSession(){
        let tokens = localStorage.getItem("tokens");
        try{
            tokens = JSON.parse(tokens);
        } catch( error ){
            tokens = false;
        }
        return tokens;
    }

    static async updateLocalSession(){
        localStorage.setItem("tokens", JSON.stringify(Auth.tokens));
    }

    static removeToken( token ){
        for( let userType in Auth.tokens ){
            if( Auth.tokens[userType].token == token ){
                delete( Auth.tokens[userType] );
                localStorage.setItem("tokens", Auth.tokens);
            }
        }
    }

    static checkACL(){
        let profile = Auth.getProfile();
        return Auth.getTokenFromACL( profile );
    }

    static getTokenFromACL(){
        let token = false;

        if( Context.getMe() ){
            let profile = Auth.getProfile();
            if( Tools.exists(Auth.tokens[ profile ]) && Auth.tokens[ profile ] ){
                token = Auth.tokens[ profile ];
            }
        }
        return token;
    }
}class Colors{
    static getTextColor( type ){
        let textColor = 'text-gray-900';

        switch( type ){
            case 'info':
                textColor = 'text-cyan-500';
                break;
            case 'success':
                textColor = 'text-emerald-500';
                break;
            case 'warning':
                textColor = 'text-amber-500';
                break;
            case 'error':
                textColor = 'text-rose-500';
                break;
        }

        return textColor;
    }

    static getBgColor( type ){
        let bgColor = 'bg-gray-100';

        switch( type ){
            case 'info':
                bgColor = 'bg-sky-50';
                break;
            case 'success':
                bgColor = 'bg-emerald-50';
                break;
            case 'warning':
                bgColor = 'bg-amber-50';
                break;
            case 'error':
                bgColor = 'bg-rose-50';
                break;
        }

        return bgColor;
    }
}class Context{
    static me = false;
    static token = false;
    static profile = false;

    static setMe( me ){
        Context.me = me;
    }

    static getMe(){
        return Context.me;
    }

    static setProfile( profile ){
        Context.profile = profile;
    }

    static getProfile(){
        return Context.profile;
    }

    static setToken( token ){
        Context.token = token;
    }

    static getToken(){
        return Context.token;
    }
}class DynamicLoader{
    static loaded = [];

    static loadScript( src, success, error ){
        if( !Tools.inArray( src, DynamicLoader.loaded ) ){
            var script = document.createElement('script');
            script.onload = DynamicLoader.onLoadSuccess( src, success );
            script.onerror = DynamicLoader.onLoadError( src, error );
            script.src = src;
            document.head.appendChild( script );
        } else if( Tools.isFunction(success) ){
            success();
        }
    }

    static loadStyle( src, success, error ){
        if( !Tools.inArray( src, DynamicLoader.loaded ) ){
            var style = document.createElement('link');
            style.onload = DynamicLoader.onLoadSuccess( src, success );
            style.onerror = DynamicLoader.onLoadError( src, error );
            style.rel = "stylesheet";
            style.type = "text/css";
            style.href = src;
            document.head.appendChild( style );
        } else if( Tools.isFunction(success) ){
            success();
        }
    }

    static onLoadSuccess( src, successFunc ){
        return function(){
            DynamicLoader.loaded.push( src );

            if( Tools.isFunction(successFunc) ){
                successFunc();
            }
        }
    }

    static onLoadError( src, errorFunc ){
        return function(){
            if( Tools.isFunction(errorFunc) ){
                errorFunc();
            }
        }
    }
}class EventDispatcher{
    static events = {};

    static on( eventName, func ){
        if( !Tools.isset( EventDispatcher.events[eventName] ) ){
            EventDispatcher.events[eventName] = [];
        }

        if( Tools.isFunction(func) ){
            EventDispatcher.events[eventName].push( func );
        }
    }

    static trigger( eventName, params ){
        if( Tools.isset( EventDispatcher.events[eventName] ) ){
            for( let func of EventDispatcher.events[eventName] ){
                func( params );
            }
        }
    }
}class Lang{
    static current = false;
    static dictionaries = {};

    static loadDictionary( lang, dictionary ){
        if( !Tools.empty( dictionary ) ){
            Lang.dictionaries[lang] = dictionary;
        }
    }

    static setDictionary( lang ){
        if( !Tools.empty(Lang.dictionaries[lang]) ){
            Lang.current = lang;
        }
    }

    static t( str ){
        if( Lang.current && Tools.exists(Lang.dictionaries[Lang.current]) && Tools.exists( Lang.dictionaries[Lang.current][str] ) ){
            str = Lang.dictionaries[Lang.current][str];
        }
        return str;
    }
}class Tools{
    static inArray( value, mixed ){
        return mixed.indexOf( value ) !== -1;
    }

    static empty( mixed ){
        return !!mixed && mixed!='' && (typeof( mixed )!='object' || Object.entries(mixed).lenght>0);
    }

    static isFunction( mixed ){
        return Tools.exists(mixed) && typeof( mixed ) == 'function';
    }

    static isset( mixed ){
        return typeof( mixed )!='undefined' && !!mixed;
    }

    static exists( mixed ){
        let exists = false;
        try{
            exists = typeof( mixed )!='undefined';
        } catch(error) {};
        return exists;
    }
}class Component{
    tpl = '';
    styles = '';

    view = false;
    node = false;
    parameters = {};

    static render( target, parameters ){
        let me = new this();

        if( parameters ){
            me.parameters = Object.assign( me.parameters, parameters );
        }

        if( target instanceof View ){
            me.view = target;
            target = target.node;

            if( me.view.parameters ){
                me.parameters = Object.assign( me.parameters, me.view.parameters );
            }
        }

        me.beforeParseTemplate();
        let template = me.parseTemplate();
        let componentSlug = me.constructor.name.replace('component','').toLocaleLowerCase();
        me.node = $('<div/>',{'class':'component '+componentSlug}).html( template );
        me.beforeRender();

        $( target ).append( me.node );

        me.afterRender();
        me.setEvents();
    }

    beforeParseTemplate(){
    }

    parseTemplate(){
        let template = this.tpl;
        if( this.styles && this.styles!='' ){
            template += '<style>'+this.styles+'</style>';
        }
        return template;
    }

    beforeRender(){
    }

    afterRender(){
    }

    setEvents(){
    }

    getParameter( name ){
        let value = false;
        if( Tools.exists(this.parameters[name]) ){
            value = this.parameters[name];
        }
        return value;
    }
}class FormComponent extends Component{
    afterRender(){
        super.afterRender();

        this.setRoutes();
    }

    setRoutes(){
        if( Tools.exists(this.parameters.route) ){
            $( this.node ).find( 'form' ).attr( 'action', this.parameters.route );
        }
    }

    setEvents(){
        super.setEvents();

        $( this.node ).submit( this.handleSubmit( this ) );
    }

    handleSubmit( inst ){
        return (event) => {
            event.preventDefault();
            event.stopImmediatePropagation();

            inst.submit();

            return false;
        };
    }

    submit(){
        let form = $( this.node ).find('form').get(0);
        let formData = new FormData( form );

        let route = $( form ).attr('action');
        let method = $( form ).attr('method');

        let onSuccess = $( form ).data('onSuccess');
        let onError = $( form ).data('onError');

        WebService.call( route, formData, method, false, onSuccess, onError );
    }
}class View extends Component{
    route = false;

    menu = true;
    sidebar = true;

    components = {};

    static render( parameters ){
        let me = new this();
        
        if( parameters ){
            me.parameters = Object.assign( me.parameters, parameters );
        }

        me.beforeParseTemplate();

        let template = me.parseTemplate();
        let viewSlug = me.constructor.name.replace('view','').toLocaleLowerCase();
        me.node = $( '<div/>', {'class':'view '+viewSlug }).html( template );
        me.beforeRender();

        $( Viewport.content ).html( me.node );

        me.afterRender();
        me.setEvents();

        if( me.menu ){
            Viewport.showMenu();
        } else {
            Viewport.hideMenu();
        }

        if( me.sidebar ){
            Viewport.showSidebar();
        } else {
            Viewport.hideSidebar();
        }
        
        return me;
    }
}class Viewport{
    static menu = false;
    static sidebar = false;
    static content = false;

    static current_route = false;
    static routes = {};

    static node = false;
    static components = {};

    static tpl = `
        <div class="viewport-menu bg-gray-950 border-b border-solid border-gray-800"></div>
        <div class="viewport-sidebar bg-gray-950"></div>
        <div class="viewport-content bg-gray-900 flex min-h-full flex-col px-6 py-12 lg:px-8"></div>
    `;

    static styles = `
        :root{ 
            --menu-height: 50px;
            --sidebar-width: 250px;
            --transition-duration: 0.3s;
        }

        body{ overflow:hidden; }
        .viewport{ width:100vw; height:100vh; }
        
        .viewport-menu{ position:absolute; top:calc(var(--menu-height) * -1); left:0; width:100vw; height:var(--menu-height); }
        body.menu-visible .viewport-menu{ top:0; }

        .viewport-sidebar{ position:absolute; top:0; left:calc(var(--sidebar-width) * -1); width:var(--sidebar-width); height:100vh; overflow-y:auto; }
        body.sidebar-visible .viewport-sidebar{ left:0; }
        body.menu-visible .viewport-sidebar{ top:var(--menu-height); height:calc(100vh - var(--menu-height)); }

        .viewport-content{ position:absolute; top:0px; left:0px; width:100vw; height:100vh; overflow-y:auto; }
        body.menu-visible .viewport-content{ top:var(--menu-height); height:calc(100vh - var(--menu-height)); }
        body.sidebar-visible .viewport-content{ left:var(--sidebar-width); width:calc(100vw - var(--sidebar-width)); }
    `;

    static init(){
        Viewport.node = $('<div/>', {'class':'viewport'}).html( Viewport.tpl );
        $('body').html( Viewport.node );

        let styles = $('<style/>').html( Viewport.styles );
        $( Viewport.node ).append( styles );

        Viewport.menu = $( Viewport.node ).find( '.viewport-menu' );
        Viewport.sidebar = $( Viewport.node ).find( '.viewport-sidebar' );
        Viewport.content = $( Viewport.node ).find( '.viewport-content' );

        Viewport.components.menu = MenuComponent.render( Viewport.menu );
        Viewport.components.sidebar = SidebarComponent.render( Viewport.sidebar );
    }

    // Navigation Management
    static addRoute( routeName, params ){
        Viewport.routes[ routeName ] = params;
    }

    static navigate( routeName, parameters, noAnimation ){
        let view = false;

        $( Viewport.content ).html('');

        if( !noAnimation ){
            Animate.start( Viewport.content );
        }
        if( Tools.exists(Viewport.routes[ routeName ]) ){
            let params = Viewport.routes[ routeName ];

            if( params ){
                if( Tools.exists(params['func']) && Tools.isFunction(params['func']) ){
                    Viewport.current_route = routeName;
                    view = params['func']( parameters );
                }
            }
        }

        return view;
    }

    // UI Management
    static showMenu(){
        if( Tools.exists( Viewport.components.menu ) ){
            $( Viewport.menu ).append( Viewport.components.menu.node );
        }
        $('body').addClass('menu-visible');
    }

    static hideMenu(){
        if( Tools.exists( Viewport.components.menu ) ){
            $( Viewport.components.menu.node ).detach();
        }
        $('body').removeClass('menu-visible');
    }

    static showSidebar(){
        if( Tools.exists( Viewport.components.sidebar ) ){
            $( Viewport.sidebar ).append( Viewport.components.sidebar.node );
        }
        $('body').addClass('sidebar-visible');
    }

    static hideSidebar(){
        if( Tools.exists( Viewport.components.sidebar ) ){
            $( Viewport.components.sidebar.node ).detach();
        }
        $('body').removeClass('sidebar-visible');
    }
}Lang.loadDictionary( 'en', {
    'credentials-invalid': 'Invalid credentials',
    'otp-code-invalid': 'Invalid code',
    'otp-send-error': 'An error occurs while sending the email',
    'password-invalid-format': 'Password invalid format (6 chars. min.)',
    'password-mismatch': 'Passwords mismatch',
    'password-missing': 'Password is missing',
    'security-error': 'An security error occurs, please retry later',
    'server-error': 'An error occurs, please retry later',
    'user-invalid': 'You must validate your account',
}); class MenuComponent extends Component{
    tpl = `
        <nav class="fixed w-full z-20 text-white px-2">
            <div class="flex flex-wrap items-center justify-between mx-auto p-2.5">
            <a href="/" class="flex items-center space-x-3 rtl:space-x-reverse">
                <img src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=500" alt="Your Company" class="mx-auto h-6 w-auto mr-3" />
                <span class="self-center text-xl text-heading font-semibold whitespace-nowrap">UltraCards</span>
            </a>
            <div class="flex items-center md:order-2 space-x-3 md:space-x-0 rtl:space-x-reverse">
                <span class="link-logout cursor-pointer text-gray-100 hover:text-indigo-300" title="`+Lang.t('Logout')+`"><i class="fa fa-power-off"></i></span>
            </div>
        </nav>
    `;
    
    setEvents(){
        super.setEvents();

        $( this.node ).find( '.link-logout' ).click( this.handleLogoutNavigation(this) );
    }

    // Navigation Management
    handleLogoutNavigation( inst ){
        return (event) => {
            inst.logout();
        };
    }

    logout(){
        Auth.logout();
    }
}class SidebarComponent extends Component{
    tpl = `
        <ul></ul>
    `;
}class Alert{
    static tpl = `
        <div class="p-4 mb-4 text-sm rounded-base" role="alert"></div>
    `;

    static render( target, message, type ){
        if( !type ){
            type = 'brand';
        }

        let textColor = Colors.getTextColor( type );
        let bgColor = Colors.getBgColor( type );

        let node = $( Alert.tpl ).html( message );
        $( node ).addClass( textColor + ' ' + bgColor );

        $( target ).append( node );

        return node;
    }
}class Animate{
    static start( target, animation ){
        if( !animation ){
            animation = 'slide-in-fwd-center';
        }

        $( target ).addClass( animation );
        setTimeout( ((target, animation) => { return () => { $(target).removeClass(animation); } })(target, animation), 750 );
    }
}class Card{
    static tpl = `
        <div class="backdrop"></div>
        <div class="card">
            <div class="light-layer">
                <div class="slit"></div>
                <div class="lumen">
                    <div class="min"></div>
                    <div class="mid"></div>
                    <div class="hi"></div>
                </div>
                <div class="darken">
                    <div class="sl"></div>
                    <div class="ll"></div>
                    <div class="slt"></div>
                    <div class="srt"></div>
                </div>
            </div>
            <div class="content">
                <div class="icon">
                    <img src="/assets/card.png"/>
                </div>
                <div class="bottom">
                    <h4>Luminous Design</h4>
                    <p>Light Folds Around Form <br />Revealing Layers Of Depth</p>
                    <div class="toggle" onclick="this.classList.toggle('active');">
                        <div class="handle"></div>
                        <span>Activate Lumen</span>
                    </div>
                </div>
            </div>
        </div>
    `;

    static styles = ``;

    static create( img ){
        let node = $( '<div/>', {'class':'card-wrapper'} ).html( Card.tpl );
        $( node ).find( 'img, .backdrop' )
            .click( (e)=>{ 
                $(e.currentTarget).closest('.card-wrapper').toggleClass('open'); 
                $(e.currentTarget).closest('.card').toggleClass('slide-in-elliptic-bottom-fwd'); 
            } )
            .attr( 'src', img );

        return node;
    }
}class Toaster{
    static tpl = `
        <div class="toast fixed bottom-5 right-5 flex items-center w-full max-w-sm p-2 text-body bg-white rounded-base shadow-xs border border-default" role="alert">
            <div class="toast-icon inline-flex items-center justify-center shrink-0 w-7 h-7 rounded"></div>
            <div class="toast-message ms-3 text-sm font-normal"></div>
            <button type="button" class="ms-auto flex items-center justify-center text-body hover:text-heading bg-transparent box-border border border-transparent hover:bg-neutral-secondary-medium font-medium leading-5 rounded text-sm h-8 w-8 cursor-pointer" aria-label="Close">
                <i class="fa fa-times"></i>
            </button>
        </div>
    `;

    static render( icon, message, type, duration, target ){
        if( !type ){
            type = 'brand';
        }

        if( !duration ){
            duration = 3750;
        }

        if( !target ){
            target = 'body';
        }

        let textColor = Colors.getTextColor( type );
        let bgColor = Colors.getBgColor( type );

        let node = $( Toaster.tpl );
        $( node ).find('.toast-icon')
            .html( '<i class="fa fa-'+icon+'"></i>' )
            .addClass( textColor + ' ' + bgColor );

        $( node ).find('.toast-message')
            .html( message );

        $( target ).append( node );

        Animate.start( node, 'slide-in-elliptic-bottom-fwd' );

        $( node ).find( 'button' ).click( Toaster.handleClose );

        setTimeout( ( (node) => { return() => { $(node).remove(); }; } )( node ), duration );

        return node;
    }

    static handleClose( event ){
        $( event.currentTarget ).closest( '.toast' ).remove();
    }
} class ChangePasswordView extends View{
    route = 'change-password';

    menu = false;
    sidebar = false;

    tpl = `
        <div class="sm:mx-auto sm:w-full sm:max-w-sm">
            <img src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=500" alt="Your Company" class="mx-auto h-10 w-auto" />
            <h2 class="mt-10 text-center text-2xl/9 font-bold tracking-tight text-white">`+Lang.t('Lost password')+`</h2>
        </div>
        <div class="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
            <div class="container-renew-password"></div>
        </div>
    `;

    afterRender(){
        super.afterRender();

        let container = $( this.node ).find( '.container-renew-password' );
        this.components['change-password'] = ChangePasswordFormComponent.render( container, this.parameters );
    }
}

Viewport.addRoute( 'change-password', {'func':(parameters)=>{return ChangePasswordView.render(parameters);} } );class DashboardView extends View{
    route = 'dashboard';

    menu = true;
    sidebar = true;

    tpl = ``;

    styles = ``;

    afterRender(){
        super.afterRender();

        switch( Context.getProfile() ){
            case 'user':
                break;
            case 'company':
                $('.menucomponent .text-heading').toggleClass('text-amber-300');
                break;
            case 'admin':
                $('.menucomponent .text-heading').toggleClass('text-rose-300');
                break;
        }

        // $( this.node ).addClass( 'text-center' );

        setTimeout( ()=>{
            for( let i=0; i<15; i++ ){
                setTimeout(()=>{
                    let cardNode = Card.create();
                    $( this.node ).append( cardNode );
                    Animate.start( cardNode, 'slide-in-elliptic-top-fwd' );
                    setTimeout(((node)=>{
                        return () => { $(node).addClass('float-anim') };
                    })(cardNode),500);
                }, 150*i);
            }
        },500);
    }
}

Viewport.addRoute( 'dashboard', { 'func': (parameters)=>{return DashboardView.render(parameters);} } );class LoginView extends View{
    route = 'login';

    menu = false;
    sidebar = false;

    tpl = `
        <div class="sm:mx-auto sm:w-full sm:max-w-sm">
            <img src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=500" alt="Your Company" class="mx-auto h-10 w-auto" />
            <h2 class="mt-10 text-center text-2xl/9 font-bold tracking-tight text-white">`+Lang.t('Sign in to your account')+`</h2>
        </div>
        <div class="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
            <div class="container-login"></div>
        </div>
    `;

    afterRender(){
        super.afterRender();
        
        let container = $( this.node ).find( '.container-login' );
        this.components['login'] = LoginFormComponent.render( container, this.parameters );
    }
}

Viewport.addRoute( 'login', {'func':(parameters)=>{return LoginView.render(parameters);} } );class LostPasswordView extends View{
    route = 'lost-password';

    menu = false;
    sidebar = false;

    tpl = `
        <div class="sm:mx-auto sm:w-full sm:max-w-sm">
            <img src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=500" alt="Your Company" class="mx-auto h-10 w-auto" />
            <h2 class="mt-10 text-center text-2xl/9 font-bold tracking-tight text-white">`+Lang.t('Lost password')+`</h2>
        </div>
        <div class="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
            <div class="container-lost-password"></div>
        </div>
    `;

    afterRender(){
        super.afterRender();

        let container = $( this.node ).find( '.container-lost-password' );
        this.components['lost-password'] = LostPasswordFormComponent.render( container, this.parameters );
    }
}

Viewport.addRoute( 'lost-password', {'func':(parameters)=>{return LostPasswordView.render(parameters);} } );class OTPView extends View{
    route = 'otp';

    menu = false;
    sidebar = false;

    tpl = `
        <div class="sm:mx-auto sm:w-full sm:max-w-sm">
        <img src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=500" alt="Your Company" class="mx-auto h-10 w-auto" />
            <h2 class="mt-10 text-center text-2xl/9 font-bold tracking-tight text-white">`+Lang.t('Security validation')+`</h2>
        </div>
        <div class="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
            <div class="container-otp"></div>
        </div>
    `;

    afterRender(){
        super.afterRender();

        let container = $( this.node ).find( '.container-otp' );
        this.components['otp'] = OTPFormComponent.render( container, this.parameters );
    }
}

Viewport.addRoute( 'otp', {'func':(parameters)=>{return OTPView.render(parameters);} } );class RegisterView extends View{
    route = 'register';

    menu = false;
    sidebar = false;

    tpl = `
        <div class="sm:mx-auto sm:w-full sm:max-w-sm">
            <img src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=500" alt="Your Company" class="mx-auto h-10 w-auto" />
            <h2 class="mt-10 text-center text-2xl/9 font-bold tracking-tight text-white">`+Lang.t('Create your account')+`</h2>
        </div>
        <div class="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
            <div class="container-register"></div>
        </div>
    `;

    afterRender(){
        super.afterRender();

        let container = $( this.node ).find('.container-register');
        this.components['register'] = RegisterFormComponent.render( container, this.parameters );
    }
}

Viewport.addRoute( 'register', {'func':(parameters)=>{return RegisterView.render(parameters);} } );class ChangePasswordFormComponent extends FormComponent{
    params = {
        'type': 'user',
        'route': '/renew-password'
    };

    tpl = `
        <form method="post" action="#" class="space-y-5 rounded-sm border-solid border bg-gray-100 p-5">
            <input type="hidden" name="email" value=""/>
            <div class="error-message text-red-700 text-sm mb-3 text-center"></div>

            <div>
                <div class="flex items-center justify-between">
                    <label for="otp" class="block text-sm/6 font-medium">`+Lang.t('Security code received by mail')+`</label>
                    <div class="text-sm">
                        <span class="link-resend cursor-pointer font-semibold text-indigo-400 hover:text-indigo-500"><i class="fa fa-sync mr-1"></i>`+Lang.t('Resend')+`</span>
                    </div>
                </div>
                <div class="mt-2">
                    <input type="text" name="otp" placeholder="`+Lang.t('Enter security code')+`" minlength="6" maxlength="6" required class="block w-full rounded-md bg-white border border-solid border-gray-300 rounded-sm px-3 py-1.5 text-base outline-1 -outline-offset-1 outline-white/10 placeholder:text-gray-500 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-500 sm:text-sm/6" />
                </div>
            </div>

            <div>
                <div class="flex items-center justify-between">
                    <label for="password" class="block text-sm/6 font-medium">`+Lang.t('Password')+`</label>
                </div>
                <div class="mt-2">
                    <div class="relative">
                        <input type="password" name="password" placeholder="`+Lang.t('Enter password')+`" required autocomplete="new-password" class="block w-full rounded-md bg-white border border-solid border-gray-300 rounded-sm px-3 py-1.5 text-base outline-1 -outline-offset-1 outline-white/10 placeholder:text-gray-500 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-500 sm:text-sm/6" />
                        <div class="absolute inset-y-0 end-2 flex items-center ps-3">
                            <div class="input-toggle-visibility cursor-pointer" title="`+Lang.t('Toggle visibility')+`">
                                <i class="fa fa-eye-slash text-gray-500"></i>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="mt-2">
                    <div class="relative">
                        <input type="password" name="password-confirm" placeholder="`+Lang.t('Confirm password')+`" required autocomplete="new-password" class="block w-full rounded-md bg-white border border-solid border-gray-300 rounded-sm px-3 py-1.5 text-base outline-1 -outline-offset-1 outline-white/10 placeholder:text-gray-500 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-500 sm:text-sm/6" />
                    </div>
                </div>
            </div>

            <div>
                <button type="submit" class="flex w-full justify-center rounded-md bg-indigo-500 px-3 py-1.5 text-sm/6 font-semibold text-white hover:bg-indigo-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500 cursor-pointer">`+Lang.t('Change password')+`</button>
            </div>
        </form>
        <p class="mt-5 text-center text-sm/6 text-white">
            <span class="link-login cursor-pointer font-semibold text-indigo-400 hover:text-indigo-300"><i class="fa fa-chevron-left mr-3"></i>`+Lang.t('Back')+`</span>
        </p>
    `;

    styles = `
        .error-message:empty{ display:none; }
    `;

    afterRender(){
        super.afterRender();
        
        let email = this.getParameter( 'email' );
        if( email){
            $( this.node ).find( '[name="email"]' ).val( email );   
        }

        this.sendOTP();
    }

    setRoutes(){
        let type = Auth.getProfile();
        let route = this.getParameter( 'route' );

        let contextRoute = '/'+type+route;
        $( this.node ).find( 'form' ).attr( 'action', contextRoute );
    }

    setEvents(){
        super.setEvents();

        $( this.node ).find('form')
            .data( 'onSuccess', this.handleChangePasswordSuccess( this ) )
            .data( 'onError', this.handleChangePasswordError( this ) );

        $( this.node ).find( '.input-toggle-visibility' ).click( this.handleTogglePasswordVisibility(this) );

        $( this.node ).find( '.link-login' ).click( this.handleLoginNavigation(this) );
        $( this.node ).find( '.link-resend' ).click( this.handleResendOTP(this) );
    }

    submit(){
        $( this.node ).find( '.error-message' ).html();
        $( this.node ).find( '[name="email"]' ).removeClass( 'border-red-700' );
        $( this.node ).find( '[name="password"], [name="password-confirm"]' ).removeClass( 'border-red-700' );

        let password = $( this.node ).find( '[name="password"]' ).val();
        let confirm = $( this.node ).find( '[name="password-confirm"]' ).val();

        if( password && password!='' ){
            if( password.length>5 ){
                if( password == confirm ){
                    super.submit();
                } else {
                    this.changePasswordError( {'error':'password-mismatch'} );
                }
            } else {
                this.changePasswordError( {'error':'password-invalid-format'} );
            }
        } else {
            this.changePasswordError( {'error':'password-missing'} );
        }
    }

    // Logic Management
    handleChangePasswordSuccess( inst ){
        return (response) => {
            inst.changePasswordSuccess( response );
        };
    }

    changePasswordSuccess( response ){
        if( response.success ){
            Toaster.render( 'check', Lang.t('Password updated'), 'success' );
            
            Context.setProfile( Auth.getProfile() );
            Context.setToken( response.token );
            Context.setMe( response[Context.getProfile()] );

            Auth.setToken( response.token, Context.getProfile() );
        } else {
            this.lostPasswordError( response );
        }
    }

    handleChangePasswordError( inst ){
        return (response) => {
            inst.changePasswordError( response );
        };
    }

    changePasswordError( response ){
        let errorMessage = Lang.t( response.error );
        switch( response.error ){
            case 'email-missing':
                $( this.node ).find( '[name="email"]' ).addClass( 'border-red-700' );
                break;
            case 'otp-code-invalid':
                $( this.node ).find( '[name="otp"]' ).val('').focus();
                break;
        }

        if( errorMessage && errorMessage!='' ){
            $( this.node ).find( '.error-message' ).html( '<i class="fa fa-ban mr-2"></i>' + errorMessage );
        }
    }

    handleResendOTP( inst ){
        return (event) => {
            inst.sendOTP();
        };
    }

    sendOTP(){
        let email = $( this.node ).find( '[name="email"]' ).val();
        if( email ){
            let send_route = this.getParameter( 'send' );
            if( send_route ){
                let type = Auth.getProfile();
                send_route = '/'+type+send_route;
                WebService.call( send_route, {'email':email}, 'POST', false, this.handleSendOTPSuccess( this ), this.handleSendOTPError( this ) );
            }
        } else {
            this.otpError( {'error':'security-error'} );
        }
    }

    handleSendOTPSuccess( inst ){
        return (response) => {
            if( response.success ){
                Toaster.render( 'check', Lang.t('Security code sent'), 'success' );
            } else {
                inst.sendOTPError( response );
            }
        }
    }

    handleSendOTPError( inst ){
        return (response) => {
            inst.sendOTPError( response );
        }
    }

    sendOTPError( response ){
        this.loginError( {'error':'security-error'} );
    }

    // Navigation Management
    handleLoginNavigation( inst ){
        return (event) => {
            let parameters = Object.assign( this.parameters, {"route":"/login"} );
            Viewport.navigate( 'login', parameters );
        };
    }

    // UI Management
    handleTogglePasswordVisibility( inst ){
        return ( event ) => {
            inst.togglePasswordVisibility();
        };
    }

    togglePasswordVisibility(){
        let isVisible = this.isPasswordVisible();
        if( isVisible ){
            this.unsetPasswordVisible();
        } else {
            this.setPasswordVisible();
        }
    }

    isPasswordVisible(){
        return $( this.node ).find( '[name="password"], [name="password-confirm"]' ).attr( 'type' ) == 'text';
    }

    setPasswordVisible(){
        $( this.node ).find( '[name="password"], [name="password-confirm"]' ).attr( 'type', 'text' );
        $( this.node ).find('.input-toggle-visibility .fa').removeClass( 'fa-eye-slash text-gray-500' ).addClass( 'fa-eye text-gray-600' );
    }

    unsetPasswordVisible(){
        $( this.node ).find( '[name="password"], [name="password-confirm"]' ).attr( 'type', 'password' );
        $( this.node ).find('.input-toggle-visibility .fa').removeClass( 'fa-eye text-gray-600' ).addClass( 'fa-eye-slash text-gray-500' );
    }
}class LoginFormComponent extends FormComponent{
    params = {
        'type': 'user',
        'route': '/login'
    };

    tpl = `
        <form method="post" action="#" class="space-y-5 rounded-sm border-solid border bg-gray-100 p-5">
            <div class="error-message text-red-700 text-sm mb-3 text-center"></div>

            <div>
                <label for="email" class="block text-sm/6 font-medium">`+Lang.t('Email address')+`</label>
                <div class="mt-2">
                    <input type="email" name="email" placeholder="`+Lang.t('Enter email')+`" required autocomplete="email" class="block w-full rounded-md bg-white border border-solid border-gray-300 rounded-sm px-3 py-1.5 text-base outline-1 -outline-offset-1 outline-white/10 placeholder:text-gray-500 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-500 sm:text-sm/6" />
                </div>
            </div>

            <div>
                <div class="flex items-center justify-between">
                    <label for="password" class="block text-sm/6 font-medium">`+Lang.t('Password')+`</label>
                    <div class="text-sm">
                        <span class="link-forgot-password cursor-pointer font-semibold text-indigo-400 hover:text-indigo-500">`+Lang.t('Forgot password')+`</span>
                    </div>
                </div>
                <div class="mt-2">
                    <div class="relative">
                        <input type="password" name="password" placeholder="`+Lang.t('Enter password')+`" required autocomplete="current-password" class="block w-full rounded-md bg-white border border-solid border-gray-300 rounded-sm px-3 py-1.5 text-base outline-1 -outline-offset-1 outline-white/10 placeholder:text-gray-500 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-500 sm:text-sm/6" />
                        <div class="absolute inset-y-0 end-2 flex items-center ps-3">
                            <div class="input-toggle-visibility cursor-pointer" title="`+Lang.t('Toggle visibility')+`">
                                <i class="fa fa-eye-slash text-gray-500"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div>
                <button type="submit" class="flex w-full justify-center rounded-md bg-indigo-500 px-3 py-1.5 text-sm/6 font-semibold text-white hover:bg-indigo-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500 cursor-pointer">`+Lang.t('Sign in')+`</button>
            </div>
        </form>
        <p class="mt-5 text-center text-sm/6 text-white">
            `+Lang.t('Not already member?')+`
            <span class="link-register cursor-pointer font-semibold text-indigo-400 hover:text-indigo-300">`+Lang.t('Join us now.')+`</span>
        </p>
    `;

    styles = `
        .error-message:empty{ display:none; }
    `;

    setRoutes(){
        let type = Auth.getProfile();
        let route = this.getParameter( 'route' );

        let contextRoute = '/'+type+route;
        $( this.node ).find( 'form' ).attr( 'action', contextRoute );
    }

    setEvents(){
        super.setEvents();

        $( this.node ).find('form')
            .data( 'onSuccess', this.handleLoginSuccess( this ) )
            .data( 'onError', this.handleLoginError( this ) );

        $( this.node ).find( '.input-toggle-visibility' ).click( this.handleTogglePasswordVisibility(this) );

        $( this.node ).find( '.link-forgot-password' ).click( this.handleForgotPasswordNavigation(this) );
        $( this.node ).find( '.link-register' ).click( this.handleRegisterNavigation(this) );
    }

    submit(){
        $( this.node ).find( '.error-message' ).html();
        $( this.node ).find( '[name="email"]' ).removeClass( 'border-red-700' );
        $( this.node ).find( '[name="password"]' ).removeClass( 'border-red-700' );

        super.submit();
    }

    // Logic Management
    handleLoginSuccess( inst ){
        return (response) => {
            inst.loginSuccess( response );
        };
    }

    loginSuccess( response ){
        if( response.success ){
            let type = Auth.getProfile();

            Context.setProfile( type );
            Context.setToken( response.token );
            Context.setMe( response[type] );

            Auth.setToken( response.token, type );
        } else {
            this.loginError( response );
        }
    }

    handleLoginError( inst ){
        return (response) => {
            inst.loginError( response );
        };
    }

    loginError( response ){
        let errorMessage = Lang.t( response.error );
        switch( response.error ){
            case 'email-missing':
                $( this.node ).find( '[name="email"]' ).addClass( 'border-red-700' );
                break;
            case 'password-missing':
                $( this.node ).find( '[name="password"]' ).addClass( 'border-red-700' );
                break;
            case 'user-invalid':
                this.navigateToOTP();
                break;
        }

        if( errorMessage && errorMessage!='' ){
            $( this.node ).find( '.error-message' ).html( '<i class="fa fa-ban mr-2"></i>' + errorMessage );
        }
    }

    navigateToOTP(){
        let email = $( this.node ).find( '[name="email"]' ).val();
        if( email ){
            let parameters = Object.assign( this.parameters, {"route":"/otp/validate", "send":"/otp/send", "email":email} );
            Viewport.navigate( 'otp', parameters );
        }
    }

    // Navigation Management
    handleForgotPasswordNavigation( inst ){
        return (event) => {
            let parameters = Object.assign( this.parameters, {"route":"/lost-password"} );
            Viewport.navigate( 'lost-password', parameters );
        };
    }

    handleRegisterNavigation( inst ){
        return (event) => {
            let parameters = Object.assign( this.parameters, {"route":"/register"} );
            Viewport.navigate( 'register', parameters );
        };
    }

    // UI Management
    handleTogglePasswordVisibility( inst ){
        return ( event ) => {
            inst.togglePasswordVisibility();
        };
    }

    togglePasswordVisibility(){
        let isVisible = this.isPasswordVisible();
        if( isVisible ){
            this.unsetPasswordVisible();
        } else {
            this.setPasswordVisible();
        }
    }

    isPasswordVisible(){
        return $( this.node ).find( '[name="password"]' ).attr( 'type' ) == 'text';
    }

    setPasswordVisible(){
        $( this.node ).find( '[name="password"]' ).attr( 'type', 'text' );
        $( this.node ).find('.input-toggle-visibility .fa').removeClass( 'fa-eye-slash text-gray-500' ).addClass( 'fa-eye text-gray-600' );
    }

    unsetPasswordVisible(){
        $( this.node ).find( '[name="password"]' ).attr( 'type', 'password' );
        $( this.node ).find('.input-toggle-visibility .fa').removeClass( 'fa-eye text-gray-600' ).addClass( 'fa-eye-slash text-gray-500' );
    }
}class LostPasswordFormComponent extends FormComponent{
    params = {
        'type': 'user',
        'route': '/lost-password'
    };

    tpl = `
        <form method="post" action="#" class="space-y-5 rounded-sm border-solid border bg-gray-100 p-5">
            <div class="error-message text-red-700 text-sm mb-3 text-center"></div>

            <div>
                <label for="email" class="block text-sm/6 font-medium">`+Lang.t('Email address')+`</label>
                <div class="mt-2">
                    <input type="email" name="email" placeholder="`+Lang.t('Enter email')+`" required autocomplete="email" class="block w-full rounded-md bg-white border border-solid border-gray-300 rounded-sm px-3 py-1.5 text-base outline-1 -outline-offset-1 outline-white/10 placeholder:text-gray-500 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-500 sm:text-sm/6" />
                </div>
            </div>

            <div>
                <button type="submit" class="flex w-full justify-center rounded-md bg-indigo-500 px-3 py-1.5 text-sm/6 font-semibold text-white hover:bg-indigo-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500 cursor-pointer">`+Lang.t('Receive reset code')+`</button>
            </div>
        </form>
        <p class="mt-5 text-center text-sm/6 text-white">
            <span class="link-login cursor-pointer font-semibold text-indigo-400 hover:text-indigo-300"><i class="fa fa-chevron-left mr-3"></i>`+Lang.t('Back')+`</span>
        </p>
    `;

    styles = `
        .error-message:empty{ display:none; }
    `;

    setRoutes(){
        let type = Auth.getProfile();
        let route = this.getParameter( 'route' );

        let contextRoute = '/'+type+route;
        $( this.node ).find( 'form' ).attr( 'action', contextRoute );
    }

    setEvents(){
        super.setEvents();

        $( this.node ).find( '.link-login' ).click( this.handleLoginNavigation(this) );
    }

    submit(){
        $( this.node ).find( '.error-message' ).html();
        let email = $( this.node ).find( '[name="email"]' ).removeClass( 'border-red-700' ).val();

        if( email ){
            let parameters = Object.assign( this.parameters, {"route":"/renew-password", "send":"/otp/send", "email":email} );
            Viewport.navigate( 'change-password', parameters );
        }
    }

    // Navigation Management
    handleLoginNavigation( inst ){
        return (event) => {
            let parameters = Object.assign( this.parameters, {"route":"/login"} );
            Viewport.navigate( 'login', parameters );
        };
    }

    // UI Management
} class OTPFormComponent extends FormComponent{
    params = {
        'type': 'user',
        'route': '/otp/validate',
        'send': '/otp/send',
        'email': false
    };

    tpl = `
        <form method="post" action="#" class="space-y-5 rounded-sm border-solid border bg-gray-100 p-5">
            <input type="hidden" name="email" value=""/>
            <div class="error-message text-red-700 text-sm mb-3 text-center"></div>

            <div>
                <div class="flex items-center justify-between">
                    <label for="otp" class="block text-sm/6 font-medium">`+Lang.t('Security code received by mail')+`</label>
                    <div class="text-sm">
                        <span class="link-resend cursor-pointer font-semibold text-indigo-400 hover:text-indigo-500"><i class="fa fa-sync mr-1"></i>`+Lang.t('Resend')+`</span>
                    </div>
                </div>
                <div class="mt-2">
                    <input type="text" name="otp" placeholder="`+Lang.t('Enter security code')+`" minlength="6" maxlength="6" required class="block w-full rounded-md bg-white border border-solid border-gray-300 rounded-sm px-3 py-1.5 text-base outline-1 -outline-offset-1 outline-white/10 placeholder:text-gray-500 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-500 sm:text-sm/6" />
                </div>
            </div>

            <div>
                <button type="submit" class="flex w-full justify-center rounded-md bg-indigo-500 px-3 py-1.5 text-sm/6 font-semibold text-white hover:bg-indigo-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500 cursor-pointer">`+Lang.t('Validate')+`</button>
            </div>
        </form>
        <p class="mt-5 text-center text-sm/6 text-white">
            <span class="link-login cursor-pointer font-semibold text-indigo-400 hover:text-indigo-300"><i class="fa fa-chevron-left mr-3"></i>`+Lang.t('Back')+`</span>
        </p>
    `;

    styles = `
        .error-message:empty{ display:none; }
    `;

    afterRender(){
        super.afterRender();
        
        let email = this.getParameter( 'email' );
        if( email){
            $( this.node ).find( '[name="email"]' ).val( email );   
        }

        this.sendOTP();
    }

    setRoutes(){
        let type = Auth.getProfile();
        let route = this.getParameter( 'route' );

        let contextRoute = '/'+type+route;
        $( this.node ).find( 'form' ).attr( 'action', contextRoute );
    }

    setEvents(){
        super.setEvents();

        $( this.node ).find('form')
            .data( 'onSuccess', this.handleOTPSuccess( this ) )
            .data( 'onError', this.handleOTPError( this ) );

        $( this.node ).find( '.link-login' ).click( this.handleLoginNavigation(this) );
        $( this.node ).find( '.link-resend' ).click( this.handleResendOTP(this) );
    }

    submit(){
        $( this.node ).find( '.error-message' ).html();
        $( this.node ).find( '[name="otp"]' ).removeClass( 'border-red-700' );

        super.submit();
    }

    // Logic Management
    handleOTPSuccess( inst ){
        return (response) => {
            inst.otpSuccess( response );
        };
    }

    otpSuccess( response ){
        if( response.success ){
            Toaster.render( 'check', Lang.t('Your account is now validated'), 'success' );
            
            Context.setProfile( Auth.getProfile() );
            Context.setToken( response.token );
            Context.setMe( response[Context.getProfile()] );

            Auth.setToken( response.token, Context.getProfile() );
        } else {
            this.otpError( response );
        }
    }

    handleOTPError( inst ){
        return (response) => {
            inst.otpError( response );
        };
    }

    otpError( response ){
        let errorMessage = Lang.t( response.error );
        switch( response.error ){
            case 'email-missing':
                let parameters = Object.assign( this.parameters, {"route":"/login"} );
                Viewport.navigate( 'login', parameters );
                break;
            case 'otp-code-invalid':
                $( this.node ).find( '[name="otp"]' ).val('').focus();
                break;
        }

        if( errorMessage && errorMessage!='' ){
            $( this.node ).find( '.error-message' ).html( '<i class="fa fa-ban mr-2"></i>' + errorMessage );
        }
    }

    handleResendOTP( inst ){
        return (event) => {
            inst.sendOTP();
        };
    }

    sendOTP(){
        let email = $( this.node ).find( '[name="email"]' ).val();
        if( email ){
            let send_route = this.getParameter( 'send' );
            if( send_route ){
                let type = Auth.getProfile();
                send_route = '/'+type+send_route;
                WebService.call( send_route, {'email':email}, 'POST', false, this.handleSendOTPSuccess( this ), this.handleSendOTPError( this ) );
            }
        } else {
            this.otpError( {'error':'security-error'} );
        }
    }

    handleSendOTPSuccess( inst ){
        return (response) => {
            if( response.success ){
                Toaster.render( 'check', Lang.t('Security code sent'), 'success' );
            } else {
                inst.sendOTPError( response );
            }
        }
    }

    handleSendOTPError( inst ){
        return (response) => {
            inst.sendOTPError( response );
        }
    }

    sendOTPError( response ){
        this.loginError( {'error':'security-error'} );
    }

    // Navigation Management
    handleLoginNavigation( inst ){
        return (event) => {
            let parameters = Object.assign( this.parameters, {"route":"/login"} );
            Viewport.navigate( 'login', parameters );
        };
    }

    // UI Management
}class RegisterFormComponent extends FormComponent{
    params = {
        'type': 'user',
        'route': '/register'
    };

    tpl = `
        <form method="post" action="#" class="space-y-5 rounded-sm border-solid border bg-gray-100 p-5">
            <div class="error-message text-red-700 text-sm mb-3 text-center"></div>

            <div>
                <label for="email" class="block text-sm/6 font-medium">`+Lang.t('Email address')+`</label>
                <div class="mt-2">
                    <input type="email" name="email" placeholder="`+Lang.t('Enter email')+`" required autocomplete="email" class="block w-full rounded-md bg-white border border-solid border-gray-300 rounded-sm px-3 py-1.5 text-base outline-1 -outline-offset-1 outline-white/10 placeholder:text-gray-500 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-500 sm:text-sm/6" />
                </div>
            </div>

            <div>
                <div class="flex items-center justify-between">
                    <label for="password" class="block text-sm/6 font-medium">`+Lang.t('Password')+`</label>
                </div>
                <div class="mt-2">
                    <div class="relative">
                        <input type="password" name="password" placeholder="`+Lang.t('Enter password')+`" required autocomplete="current-password" class="block w-full rounded-md bg-white border border-solid border-gray-300 rounded-sm px-3 py-1.5 text-base outline-1 -outline-offset-1 outline-white/10 placeholder:text-gray-500 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-500 sm:text-sm/6" />
                        <div class="absolute inset-y-0 end-2 flex items-center ps-3">
                            <div class="input-toggle-visibility cursor-pointer" title="`+Lang.t('Toggle visibility')+`">
                                <i class="fa fa-eye-slash text-gray-500"></i>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="mt-2">
                    <div class="relative">
                        <input type="password" name="password-confirm" placeholder="`+Lang.t('Confirm password')+`" required autocomplete="current-password" class="block w-full rounded-md bg-white border border-solid border-gray-300 rounded-sm px-3 py-1.5 text-base outline-1 -outline-offset-1 outline-white/10 placeholder:text-gray-500 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-500 sm:text-sm/6" />
                    </div>
                </div>
            </div>

            <div>
                <button type="submit" class="flex w-full justify-center rounded-md bg-indigo-500 px-3 py-1.5 text-sm/6 font-semibold text-white hover:bg-indigo-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500 cursor-pointer">`+Lang.t('Register')+`</button>
            </div>
        </form>
        <p class="mt-5 text-center text-sm/6 text-white">
            `+Lang.t('Already have an account?')+`
            <span class="link-login cursor-pointer font-semibold text-indigo-400 hover:text-indigo-300">`+Lang.t('sign in.')+`</span>
        </p>
    `;

    styles = `
        .error-message:empty{ display:none; }
    `;

    setRoutes(){
        let type = Auth.getProfile();
        let route = this.getParameter( 'route' );

        let contextRoute = '/'+type+route;
        $( this.node ).find( 'form' ).attr( 'action', contextRoute );
    }

    setEvents(){
        super.setEvents();

        $( this.node ).find('form')
            .data( 'onSuccess', this.handleRegisterSuccess( this ) )
            .data( 'onError', this.handleRegisterError( this ) );

        $( this.node ).find( '.input-toggle-visibility' ).click( this.handleTogglePasswordVisibility(this) );

        $( this.node ).find( '.link-login' ).click( this.handleLoginNavigation(this) );
    }

    submit(){
        $( this.node ).find( '.error-message' ).html();
        $( this.node ).find( '[name="email"]' ).removeClass( 'border-red-700' );
        $( this.node ).find( '[name="password"], [name="password-confirm"]' ).removeClass( 'border-red-700' );

        let password = $( this.node ).find( '[name="password"]' ).val();
        let confirm = $( this.node ).find( '[name="password-confirm"]' ).val();

        if( password && password!='' ){
            if( password.length>5 ){
                if( password == confirm ){
                    super.submit();
                } else {
                    this.registerError( {'error':'password-mismatch'} );
                }
            } else {
                this.registerError( {'error':'password-invalid-format'} );
            }
        } else {
            this.registerError( {'error':'password-missing'} );
        }
    }

    // Logic Management
    handleRegisterSuccess( inst ){
        return (response) => {
            inst.registerSuccess( response );
        };
    }

    registerSuccess( response ){
        if( response.success ){
            let email = $( this.node ).find( '[name="email"]' ).val();
            if( email ){
                let parameters = Object.assign( this.parameters, {"route":"/otp/validate", "send":"/otp/send", "email":email} );
                Viewport.navigate( 'otp', parameters );
            }
        } else {
            this.registerError( response );
        }
    }

    handleRegisterError( inst ){
        return (response) => {
            inst.registerError( response );
        };
    }

    registerError( response ){
        let errorMessage = Lang.t( response.error );
        switch( response.error ){
            case 'email-missing':
                $( this.node ).find( '[name="email"]' ).addClass( 'border-red-700' );
                break;
            case 'password-invalid-format':
                $( this.node ).find( '[name="password"]' ).addClass( 'border-red-700' );
                break;
            case 'password-mismatch':
                $( this.node ).find( '[name="password"], [name="password-confirm"]' ).addClass( 'border-red-700' );
                break;
            case 'password-missing':
                $( this.node ).find( '[name="password"]' ).addClass( 'border-red-700' );
                break;
        }

        if( errorMessage && errorMessage!='' ){
            $( this.node ).find( '.error-message' ).html( '<i class="fa fa-ban mr-2"></i>' + errorMessage );
        }
    }

    // Navigation Management
    handleLoginNavigation( inst ){
        return (event) => {
            let parameters = Object.assign( this.parameters, {"route":"/login"} );
            Viewport.navigate( 'login', parameters );
        };
    }

    // UI Management
    handleTogglePasswordVisibility( inst ){
        return ( event ) => {
            inst.togglePasswordVisibility();
        };
    }

    togglePasswordVisibility(){
        let isVisible = this.isPasswordVisible();
        if( isVisible ){
            this.unsetPasswordVisible();
        } else {
            this.setPasswordVisible();
        }
    }

    isPasswordVisible(){
        return $( this.node ).find( '[name="password"], [name="password-confirm"]' ).attr( 'type' ) == 'text';
    }

    setPasswordVisible(){
        $( this.node ).find( '[name="password"], [name="password-confirm"]' ).attr( 'type', 'text' );
        $( this.node ).find('.input-toggle-visibility .fa').removeClass( 'fa-eye-slash text-gray-500' ).addClass( 'fa-eye text-gray-600' );
    }

    unsetPasswordVisible(){
        $( this.node ).find( '[name="password"], [name="password-confirm"]' ).attr( 'type', 'password' );
        $( this.node ).find('.input-toggle-visibility .fa').removeClass( 'fa-eye text-gray-600' ).addClass( 'fa-eye-slash text-gray-500' );
    }
}class UltraCards{
    static inst = false;

    constructor(){
        UltraCards.inst = this;

        console.log('UltraCards™');

        let element = document.querySelector('[data-profile]');
        let profile = element.getAttribute('data-profile');
        Auth.setProfile( profile );
        
        EventDispatcher.on( 'auth_success', this.onAuthSuccess );
        EventDispatcher.on( 'auth_error', this.onAuthError );
        EventDispatcher.on( 'auth_logout', this.onAuthError );
    }

    init(){
        EventDispatcher.trigger( 'ready', {'instance':this} );

        DynamicLoader.loadStyle( '/assets/css/fontawesome.min.css', console.log, console.error );
        DynamicLoader.loadStyle( '/assets/css/UltraCards.css', console.log, console.error );

        DynamicLoader.loadScript( '/assets/js/jquery.min.js', this.onDependenciesReady, console.error );
        DynamicLoader.loadScript( '/assets/js/tailwindcss.js', console.log, console.error );
    }

    onAuthSuccess( params ){
        if( Auth.checkACL() ){
            UltraCards.inst.displayDashboard();
        } else {
            UltraCards.inst.displayLogin();
        }
    }

    onAuthError( params ){
        UltraCards.inst.displayLogin();
    }

    onLogout( params ){
        UltraCards.inst.displayLogin();
    }

    onDependenciesReady(){
        Lang.setDictionary( 'en' );

        Viewport.init();
        Auth.loadProfiles();
    }

    displayDashboard(){
        Viewport.navigate( 'dashboard' );
    }

    displayLogin(){
        Viewport.navigate( 'login', {'route':'/login', 'otp':'email'}, true );
    }
}

const app = new UltraCards();
app.init();