Usage

Using referrer restriction

To restrict the access to the site from a set of subdomains referrers, you need to declare the following properties in the ThemeConfig object:

1. referrer with such a content:

referrer: {
  subdomains: 'kalisio.com,doc.kalisio.xyz'  // Subdomains to auhtorize the access
}

2. useReferrer to true

Using Keycloak authentication

To enforce user authentication with Keycloak, all you need to do is to declare the followinf properties in the ThemeConfig object:

1. keycloak with such a content:

keycloak: {
  url: 'https://keycloak.url',        // Url to the Keycloak instance
  realm: 'keycloak realm',            // Keycloak realm to be used
  clientId: 'site',                   // Keycloak client id assigned to your site
  roles: ['role1', 'role2', ...]      // Keycloak realm roles required to access the site
  fallbackUrl: 'https://kalisio.com'  // Fallback Url if access is denied
}

2. useKeycloak to true

useKeycloak: true

TIP

During development, it may be convenient to bypass Keycloak authentication. You can achieve this by either commenting out the relevant line or utilizing an environment variable. This allows you to set or unset the variable, avoiding the need to modify the config.js file.

TIP

You can combine referrer restriction and Keycloak authentication. In that case, Keycloak authentication will be executed if and only if referrer restriction fails.

Using Quasar framework

Quasar framework is shipped with the theme. You can simply create any components and use any features provided by Quasar.

WARNING

There is still some work to be done to use SASS Quasar variables, internationalization (i18n) and plugins. For now the Dialog plugin is the only plugin installed.

Using ready-made components

Here, we offer a comprehensive description of the various components shipped with the theme.

HomeFooter

This component renders a footer for the home page.

Within the ThemeConfig section:

trustLogos: [
  { imageLink: '', link: '' }
]

TODO

Image

This component renders an image that supports the dark mode.

It exposes the following props:

Name	Description	Default
src	the image to be displayed in normal mode	''
darkSrc	the image to be displayed in dark mode	''

Example

<Image 
 src="//s3.eu-central-1.amazonaws.com/kalisioscope/kalisio/kalisio-logo-black-256x84.png"
 darkSrc="https://s3.eu-central-1.amazonaws.com/kalisioscope/kalisio/kalisio-logo-white-256x84.png"
/>

KalisioLogo

This component renders an Kalisio logo using the Image component.

Example

<KalisioLogo />

KalisioMaps

This component renders an instance of Kano wihtin an iframe.

If you like to get automatically connected, you must provide a token within the maps section in the ThemeConfig:

maps: [
  jwt: '<TOKEN>'   // the token to get automatically connected
]

Example

<KalisioMaps />

TemplateAnchor

This component allows to interpolate an href according a context that includes:

• a domain: if you like to query an API depending on the flavor
• a time: if you like to query an API at a specific time
• a jwt : if you like to query an API that requires authentication

It exposes the following props:

Name	Description	Default
text	text to display	Required
hrefTemplate	the url to be interpolated	Required
domainPath	the path to extract the domain value in the ThemeConfig section	jwt
jwtPath	the path to extract the jwt value in the ThemeConfig section	domain

And it required to define within the ThemeConfig section the required keys:

  domain: '<DOMAIN>'  // the domain to use when interpolating the url
  jwt: '<TOKEN>'   // the token to use if authentication is required

TIP

Set the domainPath and jwtPath if you declare the keys domain and jwt in a different section

TourLink

TODO