.. _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-staff.json``
* ``template.json``

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

.. code-block:: json

    {
      "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 occurs
  later. 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, 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:: json

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


The next step is 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  ``/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:: dockerfile

    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`` 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``

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

.. code-block:: yaml

    # 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
        pull_policy: never

Now we will build and apply the customizations:

.. code-block:: bash

    # make sure you're in the directory with Docker Compose files
    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-built the frontend 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

Now if you access the end-user panel, you should see that the ``SIGN IN`` button text has changed.