.. index:: settings file, constants.js ================= Frontend settings ================= Besides the :doc:`backend settings `, several frontend configuration options are available to customize your Fleio installation. .. important:: The AngularJS frontend was removed in 2021.07 release .. contents:: :local: .. _constants-js: How to edit constants.js files ============================== AngularJS frontend ------------------ As of 2020.07 release, the AngularJS frontend was removed. Skip to Angular frontend configuration guide if you're using 2021.07.0 or newer. There are two ``constants.js`` files: one for AngularJS end-user panel and a second one for AngularJS staff panel. To edit the AngularJS **enduser panel** configuration file .. code-block:: bash fleio edit site.constants.js To edit the AngularJS **staff panel** configuration file .. code-block:: bash fleio edit staff.constants.js .. _config-json: Angular frontend ---------------- To edit the Angular **enduser panel** configuration file: .. code-block:: bash fleio edit enduser.config.json To edit the Angular **staff panel** configuration file: .. code-block:: bash fleio edit staff.config.json .. _top-logo: How to change the top logo ========================== AngualarJS frontend ------------------- As of 2020.07 release, the AngularJS frontend was removed. Skip to Angular frontend configuration guide if you're using 2021.07.0 or newer. You do not need to pay the white-label fee in order to remove the Fleio logo from the top-left corner of Fleio web application. To change the top logo for the end-user and/or staff panel, see :ref:`constants-js`. Add the properties ``logo_light`` and ``logo_dark`` to the ``CONFIG`` JavaScript object and set their value to the full HTTP path of an image file. The light logo will be used on dark backgrounds and the dark logo on bright background. For example, here's a how an end-user panel configuration would look like: .. code-block:: javascript var user_config = { api_url: 'http://localhost:8000/api', language: 'en', // default language base_url: '/', home_url: '/', // externalBilling: { // enabled: true, // addCreditUrl: 'http://...' // }, logo_light: 'https://fleio.com/images/logo.png', logo_dark: 'https://fleio.com/images/logo.png', shutdown_instance_note: "NOTE: The instance will continue to be charged even if it's shutdown. Delete the instance if you want to no longer be charged.", // toast_hide_delay: 3000, // bottom-left toast message animation delay in milliseconds items_display_mode: 'cardview', //cardview || listview enable_debug: false, // set to true in development to enable angular debug flavors_as_cards: false, // used on instance creation for flavors selector layout local_compute_storage_enabled: true, // used on instance create on boot source selection }; Those options can also be found in the staff panel configurations file. Angular frontend ---------------- As of 2020.05.0 release, Angular frontend is being used for Reseller panel and newstaff panel. In order to change the logo you need to upload your logo in the following folders: .. code-block:: bash /var/webapps/fleio/frontend/reseller/assets/assets/img/reseller/ /var/webapps/fleio/frontend/staff/assets/img/staff/ /var/webapps/fleio/frontend/enduser/assets/img/enduser/ The next step is to change the ``logoDark`` and ``logoLight`` in the following files: ``/var/webapps/fleio/frontend/reseller/assets/config/reseller.config.json`` ``/var/webapps/fleio/frontend/staff/assets/config/staff.config.json`` ``/var/webapps/fleio/frontend/enduser/assets/config/enduser.config.json`` You will have to replace ``null`` with ``"REPLACE_ME_WITH_THE_CORRECT_FILENAME.png"`` To edit those files, run: * ``fleio edit reseller.config.json`` * ``fleio edit staff.config.json`` * ``enduser.config.json`` .. _default-language: How to change default language ============================== AngularJS frontend ------------------ In order to change the default language for AngularJS frontends, you must edit the ``language`` field in constants.js file: .. code-block:: bash fleio edit site.constants.js fleio edit staff.constants.js If you added custom strings for Fleio, by following the guide available at :ref:`change-string`, you will have to change 'en' with your chosen language (in our example it was 'en_us'). Also, if you want to change the default language to all your existing clients you will have run an update query directly on the database, or impersonate each user and change the language. Angular frontend ---------------- In order to change the default language for Angular panels, you need to change the ``defaultLanguage`` variable from the enduser and staff panels. To edit the Angular **enduser panel** configuration file: .. code-block:: bash fleio edit enduser.config.json To edit the Angular **staff panel** configuration file: .. code-block:: bash fleio edit staff.config.json Change the page size ==================== Fleio uses infinite scroll to display objects list. By default, 20 objects are loaded at once and you can change this default value for end-user or staff user :ref:`constants.js files `. .. code-block:: javascript var user_config = { // ... paginate_by: '20' // ... } Customize page title ==================== In order to customize the page title of a certain panel, be it enduser, staff or reseller, you will have to edit the configuration panel and add the following line in the settings options: .. code-block:: javascript ... "settings": { "baseTitle": "CHANGE THIS", "defaultLanguage": "en", "imagesPath": "assets/img/enduser/", "logoDark": null, "logoLight": null, ... How to change instance create form display ========================================== Instance create form display can be changed using the ``flavors_as_cards`` property from the ``constants.js`` file. When set to false, the instance create form will look like this: .. image:: /_static/images/enduser/cloud/instances/create-instance-dropdown.png When the setting is set to true, the flavors will be displayed as cards. Their description will appear in each card's body: .. image:: /_static/images/enduser/cloud/instances/create-instance-flavor-cards.png Root password related settings ============================== By default the **Root password** field is displayed and optional in the create instance form. You can make the field mandatory or hide it with these settings in :ref:`constants.js files `: .. code-block:: javascript var user_config = { // ... show_root_password_field_on_new_instance_form: true, root_password_mandatory_on_new_instance_form: false // ... } Show hide cloud-init user data ============================== You can toggle cloud-init use data field from the create instance form via :ref:`constants.js files `: .. code-block:: javascript var user_config = { // ... show_userdata_on_new_instance_form: true, // ... } Volume related setting ====================== If you set ``hide_volume_selection_for_flavors_with_disk`` property from the ``constants.js`` file to ``true``, the volume create options on instance deploy dialog will be hidden if the flavor has more than 0 local disk space. If you want to set a default volume type you will need to add a dict for ``default_volume_type_on_new_instance_form`` property, as it is shown in the following example: .. code-block:: javascript var user_config = { // ... hide_volume_selection_for_flavors_with_disk: true, default_volume_type_on_new_instance_form: { 'Region one': 'VOLUME_TYPE1', 'Region two': 'VOLUME_TYPE2', }, // ... } .. _storage-related-options: Storage realated option ======================= The following OpenStack principles are applied regarding the storage options: * local storage option does not show if the selected flavor has 0 disk space * local storage option will be displayed if the flavor has more than 0 disk space * if ``hideVolumeSelectionForFlavorsWithDisk`` is enabled, then only the local storage option will be available (the previous condition must be satisfied) .. _hide-volume-options: Hide volume options for flavors with disk size ============================================== If you want to hide the volume options when deploying an instance with a flavor that has disk space configured you will have to set ``hideVolumeSelectionForFlavorsWithDisk`` to True in ``/var/webapps/fleio/frontend/staff/assets/config/staff.config.json``. .. code-block:: javascript { // ... "hideVolumeSelectionForFlavorsWithDisk": false, // ... } This setting defaults to False. How to change default display mode for items ============================================ Change the ``items_display_mode`` property from the same ``constants.js`` files as stated above to either ``cardview`` to display the items as cards or ``listview`` to display them like a list. Note that the user will still be able to change the display mode for a page using the button from the top-right side of the page content. .. _add-custom-menu-items: How to add custom menu items and categories =========================================== You are able to customize your menu by adding top level menu options with links, menu options underneath existing categories or even add new categories with menu options. To do so, you just need to edit your ``settings.py`` file (more on that :doc:`here `). You need to edit some settings (available both for enduser and staff panel). These settings are: ``CUSTOM_MENU_CATEGORIES_ENDUSER``, ``CUSTOM_MENU_OPTIONS_ENDUSER``, ``CUSTOM_MENU_CATEGORIES_STAFF``, ``CUSTOM_MENU_OPTIONS_STAFF``. To add a category you may follow the following example: .. code-block:: python CUSTOM_MENU_CATEGORIES_ENDUSER = { 'Category one': { 'main_feature': 'core', 'location': 2, }, 'Category two': { 'main_feature': 'core', 'location': 3, } } You may condition the category by any existing feature name in fleio (more on that :doc:`here `). You can use the ``core`` feature if you want your category to be always visible ('core' feature is always enabled). Also note the ``location`` setting, which allows you to specify where in the menu should the category appear. Note that counting starts from ``0``. Also, you should be careful not to use the same location for more than 1 custom category because this may raise issues in your application. To add a menu option underneath a menu category (already existing in fleio or one that you created like described above ), you may use the ``CUSTOM_MENU_OPTIONS`` settings for enduser and staff like in the following example: .. code-block:: python CUSTOM_MENU_OPTIONS_ENDUSER = [ { 'category': 'Category one', 'label': 'Option one', 'href': 'https://fleio.com', 'open_in_new_tab': True, 'icon': 'warning', 'feature': 'core', }, { 'category': 'Billing', 'label': 'Custom product', 'href': 'https://fleio.com', 'open_in_new_tab': True, 'icon': 'product', 'feature': 'billing', 'location': 2, }, ] As you may notice, there are several settings that you can use. Use the ``category`` attribute to specify under what category the new menu option should be placed, use ``label`` attribute to specify what will be the menu option's name, ``href`` attribute for redirecting to a custom link, ``open_in_new_tab`` to make users open the link in new tab when clicking it, ``icon`` for displaying an icon to the left and ``feature`` to condition this menu option by a fleio feature. Again, you can use 'core' feature to make sure it will appear forever. Also, you can use the ``location`` attribute just like you did for categories. To add a top level menu option (it will not be under any category) add a new option in the 'CUSTOM_MENU_OPTIONS_ENDUSER' setting just like above, but not using the ``category`` attribute. So, this may look like this: .. code-block:: python CUSTOM_MENU_OPTIONS_ENDUSER = [ { 'label': 'Top level', 'href': 'https://fleio.com', 'open_in_new_tab': True, 'icon': 'warning', 'feature': 'core', 'location': 6, }, ] For top level menu options, make sure their location is not the same with one defined for categories. If you want to move the plugins position you can use the ``ENDUSER_PLUGINS_MENU_INSERT_INDEX`` variable. For example, if you want to make sure that the plugins (tickets and domains) are always at the bottom you need to add the following option in the settings.py file: .. code-block:: python ENDUSER_PLUGINS_MENU_INSERT_INDEX = 1000 After editing the ``settings.py`` file, you must restart all the ``fleio`` services (see :ref:`restart-fleio`). .. _frontend-add-credit-url: How to set custom add credit URL ================================ The **Add credit** button from the end-user's dashboard can be customized to any link. You can for instance set an external link, if you are using another system (like WHMCS) to handle invoicing and credit card payments. .. image:: /_static/images/enduser/billing/add-credit-button.png More on that on :ref:`settings.py ADD_CREDIT_URLS setting documentation `. The Billing panel that shows client's credit and the **Add credit** button can be hidden completely through an :ref:`end-user feature toggle `. .. _logout-url: How to set custom logout URL ============================ By default your customers will be redirected to the login page when they log out. If you want to set a custom URL you will need to edit two variables, one for each type of frontend. For AngularJS frontend you need to edit logout_redirect variable available in the following locations: .. code-block:: python /var/webapps/fleio/frontend/site/constants/constants.js (end user) /var/webapps/fleio/frontend/site/staff/constants.js (staff) For Angular frontend you need to edit the logoutRedirect variable available in: .. code-block:: python /var/webapps/fleio/frontend/enduser/assets/config/enduser.config.json (staff) /var/webapps/fleio/frontend/staff/assets/config/staff.config.json (staff) /var/webapps/fleio/frontend/reseller/assets/config/reseller.config.json (reseller) Changing text editor on tickets plugin, etc. ============================================ The rich text editor found on tickets plugin, notification templates edit page, etc. can be customized in the ``constants.js`` file. All you need to do is to add a new property called ``tiny_mce_options`` and define a dictionary with the settings. The example below is the default one, you can find more settings reading the tinymce documentation. .. code-block:: javascript tiny_mce_options: { relative_urls: false, inline: false, plugins : 'link code image lists autolink', toolbar: ["undo redo | styleselect | bold italic underline | alignleft aligncenter alignright alignjustify | link code image | bullist numlist | removeformat"], skin: 'lightgray', theme : 'modern', menubar: '' }, White label =========== If you want to remove the small Fleio link that appears at the bottom of the login screen and at the bottom of the left menu, you have to purchase the white-label option. Changing the :ref:`top logo is a simple setting ` and does not require you to pay the white-label fee. Custom favicon ============== See :ref:`frontend customization with docker below`. Adding new custom themes ======================== You can add your own custom themes and change the list of themes that a user can choose from on his profile page. In order to do so, add in :ref:`constants.js files ` (staff/end-user) your theme definition in the ``customThemesCallback`` function. This may look something like this: .. code-block:: javascript { // ... other settings customThemesCallback: function(mdThemingProvider) { mdThemingProvider.definePalette('testAccent', { '50': '#FF6633', '100': '#BBBBBB', '200': '#FFFFFF', '300': '#FFFFFF', '400': '#FFFFFF', '500': '#FFFFFF', '600': '#FFFFFF', '700': '#FFFFFF', '800': '#FFFFFF', '900': '#FFFFFF', 'A100': '#FF3919', 'A200': '#FF3919', 'A400': '#FF3919', 'A700': '#FF3919', 'contrastDefaultColor': 'light' }); mdThemingProvider.definePalette('testPrimary', { '50': '#083652', '100': '#083652', '200': '#083652', '300': '#083652', '400': '#083652', '500': '#083652', '600': '#083652', '700': '#083652', '800': '#083652', '900': '#083652', 'A100': '#083652', 'A200': '#083652', 'A400': '#FFFFFF', 'A700': '#C0CADD', 'contrastDefaultColor': 'light' }); var testBackground = mdThemingProvider.extendPalette('flLightBackGround' , { '600': '#083652' }); mdThemingProvider.definePalette('testBackground', testBackground); mdThemingProvider.theme('Test') .backgroundPalette('testBackground') .primaryPalette('testPrimary') .accentPalette('testAccent'); }, } The above is actually a replication of the existing "Dusk" theme. You can name it and add whatever colors you want, you may find more info on `AngularJS Material documentation `_. Once you've defined your new theme, you can change the default user theme and the list of themes that appear in the profile page by changing the other two settings: ``default_theme`` and ``registeredThemes``. Fleio's default theme is 'Spring' and themes registered by default are: 'Spring', 'Navy', 'Dusk'. This is how your new settings may look like: .. code-block:: javascript { // ... other settings registeredThemes: ['Spring', 'Custom',], default_theme: 'Custom', } For defining and adding new themes in the frontend panels using Angular framework, read more here: :doc:`/developer/angular-frontend-customization`. .. _new-menu-definition: New menu definition =================== NOTE: this won't affect you if you had not previously re-declared the menu definition in any of your constants.js file. Before 2020.05 release, the menu was defined in frontend and you could override it editing constants.js file for the panel you wanted to edit by redefining it and replacing/removing menu items (not to be confused with :ref:`backend menu customization setting `, which remains unchanged). As we've moved the menu definition in backend, if you had redefined it in any constants.js file, you will need to go to :doc:`/configuring/settings-file` and re-declare the menu again. The menu definitions are variables that store arrays, very similar to how it was before. Those are called: ``STAFF_MENU``, ``ENDUSER_MENU`` and ``RESELLER_MENU``. Please take a look in the `/var/webapps/fleio/project/fleio/base_settings.py` file for how a menu definition looks like now. You can copy a menu panel definition and place it in the :doc:`/configuring/settings-file` and start editing/removing menu items as you wish. Remember to import the ``MenuItem`` and ``MenuCategory`` classes that are used for defining menu entries before your new definition like this: .. code-block:: python from fleio.menu.menu_interface import MenuCategory, MenuItem Also add the function definition that is used for marking strings for translation at the top of the file: .. code-block:: python def _(s): # work around for using i18n in settings return s Each parameter of MenuCategory and MenuItem is self explanatory, however note that for a MenuItem you can also define the ``icon_class``, ``href`` as strings and ``open_in_new_tab`` as boolean. All options can be found in the class definition. When you are done with your changes, you'll need to run the following command (depending on your distro) for your changes to appear in frontend: .. code-block:: bash service uwsgi-fleio reload or service uwsgi reload Please note that we recommend you use the :ref:`backend menu customization feature ` for adding menu items or categories as redefining the menu means you will need to manually keep it up to date with the original menu found in `base_settings.py` file after each release. Adding custom headers in requests ================================= You can manipulate headers sent from frontend requests using a settings in constants.js (both staff and end-user). Use the callback ``interceptorConfig`` in order to change headers like so: .. code-block:: javascript { // ... other settings interceptorConfig: function(config, cookies) { // e.g. config.headers['header_name'] = 'header-value'; return config; }, } Remember to always return the config that was passed as a parameter to the function. You may also use ``cookies`` which is the angularjs cookies service (just named without the dollar sign). Note: to do the same thing but for the panels that make use of Angular framework, read more here: :doc:`/developer/angular-frontend-customization`. Add HTML head or body tags ========================== See :ref:`docker-custom-frontend`. Include custom JavaScript/CSS code ================================== See :ref:`docker-custom-frontend`. See :doc:`/developer/angular-frontend-customization`.