# @narando/express-preferred-ui-language

A middleware to set the available system languages for use with mustache.

## Getting Started

You need to have `nodejs`, `npm`, `express` and `mustache` installed.

```bash
$ npm install @narando/express-preferred-ui-language
```

## Usage

The middleware will get the availabel languages from `./app/locales/`:

```javascript
import preferredUILanguage from "@narando/express-preferred-ui-language";

// add middleware to express
app.router(preferredUILanguage());
```

To add a language you have to create a new file at `./app/locales`. The file name will be used as the language identifier.

### Use the following JSON structure and folder structure

#### Folder structure

```
app
|-locales
  |-de-DE.json
  |-en-US.json
```

#### Locale file structure

```json
{
  "namespace1": {
    "text1": "First text",
    "text2": "Second text"
  },
  "namespace2": {
    "text3": "Third text",
    "text4": "Fourth text"
  }
}
```

The middleware will set the `res.locals` like:

```
[
  { languageCode: "de-DE", selected: true },
  { languageCode: "en-US", selected: false }
]
```

To use it in your mustache template you can use the following example to create a dropdown
with all available languages

```mustache
<select name="systemLanguage" id="selectSystemLanguage" class="selectpicker form-control" data-live-search="true">
  {{#UILanguage}}
      <option value="{{languageCode}}" {{#selected}} selected {{/selected}}>{{languageCode}}</option>
  {{/UILanguage}}
</select>
```