.. _replace-strings:

How to replace strings in Angular frontend
==========================================

With 2021.05 release we have added the possibility to replace strings from Fleio, with your custom ones. In order to do that
we will have to define a new language called "en-replace" which will contain the custom strings, besides the default ones.

First of all, you will have to get the default translations from our public repository: https://github.com/fleio/fleio-i18n

If you check the ``fleio-i18n/translations/ngfrontend/src/assets/locale/`` location, you will see that there are multiple
templates that can be used to get the String ID and the String:

* template-enduser.json
* template-reseller.json
* template-staff.json
* template.json

If you inspect the ``template-enduser.json`` you will see that the translations format will be:

.. code-block:: bash

    {
      "locale": "en-US",
      "translations": {
        "STRING ID": "STRING"
      }
    }

.. warning::

  You should create and edit the following files as ``fleio`` user. This ensures that no file permission issue later
  occurs. If you want to know more about file permissions in a docker deployment, see :ref:`docker_file_permissions`.

  You should switch to ``fleio`` user before continuing:

  .. code-block:: bash

    sudo -i -u fleio

As an example, we will change the ``SIGN IN`` text with ``SIGN IN - CHANGED STRING``.
First, you will have to create a new json file called ``messages.en-replace.json`` in the ``/home/fleio/compose/custom`` directory.
If the custom directory does not exist, please create it.

Now, if you inspect the ``template.json`` file, you will see that the ``SIGN IN`` string has ``5207635742003539443`` ID.
In the ``messages.en-replace.json`` file we will have to add the following:

.. code-block:: bash

    {
      "locale": "en-US",
      "translations": {
        "5207635742003539443": "SIGN IN - CHANGED STRING"
      }
    }


The next step would be to create the ``Dockerfile``, in the ``/home/fleio/compose/custom`` directory.

.. code-block:: bash

    touch /home/fleio/compose/custom/Dockerfile

Insert the following code in the ``/home/fleio/compose/custom/Dockerfile`` file. This will ensure that on each recreate / upgrade, the
fleio_frontend_1 image will contain the changed strings.

.. code-block:: bash

    ARG FLEIO_DOCKER_HUB
    ARG FLEIO_RELEASE_SUFFIX

    FROM ${FLEIO_DOCKER_HUB}/fleio_frontend${FLEIO_RELEASE_SUFFIX}

    # we're defining the Fleio installation path in one place and we're using it below
    ENV INSTALL_PATH="/var/webapps/fleio"

    COPY messages.en-replace.json "$INSTALL_PATH/frontend/enduser/assets/locale/messages.en-replace.json"

If you want to change strings for ``staff`` or ``reseller panel``, you will have to change the path where you're copying the
``messages.en-replace.json`` file to:

* staff: ``$INSTALL_PATH/frontend/staff/assets/locale/messages.en-replace.json``
* reseller: ``$INSTALL_PATH/frontend/reseller/assets/locale/messages.en-replace.json`` # only if enabled

We will also have to add the following code to the ``/home/fleio/compose/docker-compose.override.yml`` file:

.. code-block:: bash

    # Add here your docker-compose customizations
    # docker-compose.override.yml is not overwritten by Fleio
    # (while docker-compose.yml may be OVERWRITTEN on Fleio upgrades)

    version: "3.7"

    services:
      frontend:
        build:
          context: ./custom/
          dockerfile: Dockerfile
          args:
            - FLEIO_DOCKER_HUB
            - FLEIO_RELEASE_SUFFIX
        image: fleio_frontend_custom

Now we will build and apply the customizations:

.. code-block:: bash

    # make sure you're in the directory where docker-compose files are
    cd /home/fleio/compose

    # build your image
    docker-compose build

    # apply your changes to the running frontend
    docker-compose up -d

After we have re-build the frotend image, we will have to change the default language to ``en-replace`` for the panels that we have
added the changed strings (in our case the enduser.config.json):

.. code-block:: bash

    fleio edit enduser.config.json
    fleio edit staff.config.json
    fleio edit reseller.config.json # only if reseller is enabled

Now if you access the enduser Angular panel you should see that the ``SIGN IN`` button text has changed.