Skip to content

Private Components

Overview

For the sake of user permission aspect, Private components in Still.js help manage user authorization for navigation and rendering. If a component is not public (isPublic = false or unset), custom logic is required to control its visibility. Still.js allows blacklisting and whitelisting components based on custom requirements, overriding the isPublic flag regardless of its value (true or false).


1. Making component private

This is the entry point component which is set as Home in app-setup.js
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
import { ViewComponent } from "../../../@still/component/super/ViewComponent.js";

export class NewAccountForm extends ViewComponent {
    // Bellow flag makes the component public
    isPublic = true;
    template = `
        <section>
            This is the UI for creating account<br>
            More Options<br><br>
            <a href="#" (click)="goto('SavingAccount')">List Saving accounts</a>
            |
            <a href="#" (click)="goto('CheckingAccount')">List Checking accounts</a>
        </section>
    `;
}
This is a private component
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
import { ViewComponent } from "../../../@still/component/super/ViewComponent.js";

export class CheckingAccount extends ViewComponent {
    // Since the flag is set to false the component is then private
    isPublic = false;
    template = `
        <div>
            Here will be the list of Checking accounts
        </div>
    `;

}
This is a private component
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
import { ViewComponent } from "../../../@still/component/super/ViewComponent.js";

export class SavingAccount extends ViewComponent {

    /** The isPublic flag is not set making it to default to private */

    template = `
        <div>
            The Saving accounts will be displayed here
        </div>
    `;
}
This is the where Application context aspects are setup. This file is in the root folder.
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
import { StillAppMixin } from "./@still/component/super/AppMixin.js";
import { Components } from "./@still/setup/components.js";
import { AppTemplate } from "./app-template.js";
import { NewAccountForm } from "./app/components/BankAccount/NewAccountForm.js";

export class StillAppSetup extends StillAppMixin(Components) {

    constructor() {
        super();
        //Bellow the entry point component is being set
        this.setHomeComponent(NewAccountForm);
    }

    async init() {
        return await AppTemplate.newApp();
    }

}
Routes will be added and manage automatically from here when creating the component using still-cli
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
export const stillRoutesMap = {
    viewRoutes: {
        regular: {
            SavingAccount: {
                path: "app/components/BankAccount",
                url: "/minha/url/like/rest"
            },
            CheckingAccount: {
                path: "app/components/BankAccount",
                url: "/bankaccoun/checking-account"
            },
            NewAccountForm: {
                path: "app/components/BankAccount",
                url: "/bankaccoun/new-account-form"
            },
        },
        lazyInitial: {}
    }
}
Project folder structure
project-root-folder
|__ @still/
|__ app/
|    |
|    |__ components/
|    |   |__ BankAccount/
|    |   |   |__ NewAccountForm.js
|    |   |   |__ CheckingAccount.js
|    |   |   |__ SavingAccount.js
|    |   |   |
|__ config/
|    |__ app-setup.js
|    |__ route.map.js
|__  ...

In the example above, the NewAccountForm component includes buttons to navigate to private components, causing an Unauthorized acces warning and not rendering the component. To allow navigation, two approaches can be used separately or in combination and they can be set through the StillAppSetup (app-setup.js file):

  • setAuthN - For the Application context, when the AuthN is set to true (this.setAuthN(true)), it understands that navigation to/ embeding such component can happen at all levels, anyway, there might be some exception which cannot be addressed here.

  • setWhiteList - It's possible to specify a list of components that should be whitelisted, by doing that, even if the component is private, it'll always be accessible.



1.1 Allowing private component access through authN flag

The authN flag is configured at the application level in the StillAppSetup class (app-setup.js). It is set using .setAuthN(true) in the custom authentication logic to indicate that the user is authenticated, allowing access to all components, including private ones. Having the same sample project from point 1 only edit the app-setup.js as follow:

This is the where Application context aspects are setup. This file is in the root folder.
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
import { StillAppMixin } from "./@still/component/super/AppMixin.js";
import { Components } from "./@still/setup/components.js";
import { AppTemplate } from "./app-template.js";
import { NewAccountForm } from "./app/components/BankAccount/NewAccountForm.js";

export class StillAppSetup extends StillAppMixin(Components) {

    constructor() {
        super();
        //Bellow the entry point component is being set
        this.setHomeComponent(NewAccountForm);
        //This informs the application that user can access all component
        this.setAuthN(true);
    }

    async init() {
        return await AppTemplate.newApp();
    }
}



1.2 Using whiteList to allow access to Private component

In addition to setAuthN flag approach, setWhiteList is another way to make a private component accessible, in this case we have to pass an array of all components that we want to make accessible although it's private. Having the same sample project from point 1 only edit the app-setup.js as follow:

This is the where Application con, follow the text aspects are setup. This file is in the root folder.
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import { StillAppMixin } from "./@still/component/super/AppMixin.js";
import { Components } from "./@still/setup/components.js";
import { AppTemplate } from "./app-template.js";
import { CheckingAccount } from "./app/components/BankAccount/CheckingAccount.js";
import { NewAccountForm } from "./app/components/BankAccount/NewAccountForm.js";
import { SavingAccount } from "./app/components/BankAccount/SavingAccount.js";

export class StillAppSetup extends StillAppMixin(Components) {

    constructor() {
        super();
        //Bellow the entry point component is being set
        this.setHomeComponent(NewAccountForm);
        const whiteListComponents = [SavingAccount, CheckingAccount];
        //Make components whitelisted by passing it to setWhiteList App configuration
        this.setWhiteList(whiteListComponents);
    }

    async init() {
        return await AppTemplate.newApp();
    }

}

Whitelist behind the scenes

whiteList components can only be set once, means, if setWhiteList() is call more than once, only the first call will take affect, therefore changing it the runtime does not work, nevertheless, multiples list can yet be set and combined with the appropriate application logic/flow, so alternative flows can take place.


2 Using blackList to make a component private (not accessible)

The blacklist is used to restrict access to specific components or parts of the application, even for authenticated users. When combined with business logic, it ensures that components listed in the blacklist remain inaccessible—regardless of a successful .setAuthN(true) call—preventing access via both navigation and embedding. Having the same sample project from point 1 only edit the app-setup.js as follow:

This is the where Application con, follow the text aspects are setup. This file is in the root folder.
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
import { StillAppMixin } from "./@still/component/super/AppMixin.js";
import { Components } from "./@still/setup/components.js";
import { AppTemplate } from "./app-template.js";
import { CheckingAccount } from "./app/components/BankAccount/CheckingAccount.js";
import { NewAccountForm } from "./app/components/BankAccount/NewAccountForm.js";

export class StillAppSetup extends StillAppMixin(Components) {

    constructor() {
        super();
        //Bellow the entry point component is being set
        this.setHomeComponent(NewAccountForm);

        const userAuthSuccess = true;
        if (userAuthSuccess) {
            this.setAuthN(true);
        }

        //Revokes access to CheckingAccount provided by authN flag
        this.setWhiteList([CheckingAccount]);
    }

    async init() {
        return await AppTemplate.newApp();
    }

}

Blacklist precedence and considerations

  • Blacklist has hte highest precedence in case it's combined with authN flag or whiteList, no matter in what order they are called, once blackList takes this hieghst priority if when a component is found there.

  • blackList components can only be set once, means, just as the whiteList (see explanation).


Component rendering will be affectid by the component visibility (public, private), nevertheless, therefore, this happens in the application level, however Still.js also provides with (renderIf) directive which allows controling component in the component level by putting such directive in the template for a specific HTML tag as shown in this example.