From 78efe84899bdee8315d0d15ca70a1c6c07689088 Mon Sep 17 00:00:00 2001
From: Tobias Klika <cee@live.at>
Date: Mon, 4 May 2020 16:00:39 +0200
Subject: [PATCH] languages CRUD

---
 zero.Core/Api/LanguagesApi.cs                 | 137 +++++++++++++++++
 zero.Core/Constants.cs                        |   1 +
 zero.Core/Entities/Language.cs                |  20 +++
 zero.Core/Identity/Permissions.cs             |   1 +
 zero.Core/Validation/LanguageValidator.cs     |  16 ++
 zero.Web/App/Components/Forms/property.vue    |  17 ++-
 zero.Web/App/Pages/settings/language.vue      | 139 ++++++++++++++++++
 zero.Web/App/Pages/settings/languages.vue     |  56 +++++++
 zero.Web/App/Pages/settings/translation.vue   |  17 ++-
 zero.Web/App/Resources/languages.js           |  34 +++++
 zero.Web/App/pages/settings/routes.js         |   1 +
 zero.Web/Controllers/LanguagesController.cs   |  95 ++++++++++++
 zero.Web/Controllers/TestController.cs        |  20 ++-
 zero.Web/Mapper/LanguageMapperConfig.cs       |  42 ++++++
 zero.Web/Models/CountryEditModel.cs           |   4 -
 zero.Web/Models/EditModel.cs                  |  10 ++
 zero.Web/Models/LanguageEditModel.cs          |  13 ++
 zero.Web/Models/LanguageListModel.cs          |  17 +++
 zero.Web/Models/TranslationEditModel.cs       |   2 -
 zero.Web/Models/UserEditModel.cs              |   4 -
 zero.Web/Models/UserRoleEditModel.cs          |   4 -
 .../Resources/Localization/zero.en-us.json    |  19 +++
 zero.Web/Sass/Canvas/_canvas.scss             |   6 +
 zero.Web/Sass/Core/_forms.scss                |  32 +++-
 zero.Web/Startup.cs                           |   1 +
 zero.Web/ZeroBuilder.cs                       |   7 +-
 zero.Web/ZeroVue.cs                           |   1 +
 27 files changed, 683 insertions(+), 33 deletions(-)
 create mode 100644 zero.Core/Api/LanguagesApi.cs
 create mode 100644 zero.Core/Entities/Language.cs
 create mode 100644 zero.Core/Validation/LanguageValidator.cs
 create mode 100644 zero.Web/App/Pages/settings/language.vue
 create mode 100644 zero.Web/App/Pages/settings/languages.vue
 create mode 100644 zero.Web/App/Resources/languages.js
 create mode 100644 zero.Web/Controllers/LanguagesController.cs
 create mode 100644 zero.Web/Mapper/LanguageMapperConfig.cs
 create mode 100644 zero.Web/Models/LanguageEditModel.cs
 create mode 100644 zero.Web/Models/LanguageListModel.cs

diff --git a/zero.Core/Api/LanguagesApi.cs b/zero.Core/Api/LanguagesApi.cs
new file mode 100644
index 00000000..d73a7367
--- /dev/null
+++ b/zero.Core/Api/LanguagesApi.cs
@@ -0,0 +1,137 @@
+using FluentValidation.Results;
+using Raven.Client.Documents;
+using Raven.Client.Documents.Linq;
+using Raven.Client.Documents.Session;
+using System;
+using System.Collections.Generic;
+using System.Threading.Tasks;
+using zero.Core.Entities;
+using zero.Core.Extensions;
+using zero.Core.Validation;
+
+namespace zero.Core.Api
+{
+  public class LanguagesApi : ILanguagesApi
+  {
+    protected IDocumentStore Raven { get; private set; }
+
+
+    public LanguagesApi(IDocumentStore raven)
+    {
+      Raven = raven;
+    }
+
+
+    /// <inheritdoc />
+    public async Task<Language> GetById(string id)
+    {
+      using (IAsyncDocumentSession session = Raven.OpenAsyncSession())
+      {
+        return await session.LoadAsync<Language>(id);
+      }
+    }
+
+
+    /// <inheritdoc />
+    public async Task<IList<Language>> GetAll()
+    {
+      using (IAsyncDocumentSession session = Raven.OpenAsyncSession())
+      {
+        return await session.Query<Language>()
+          .OrderByDescending(x => x.CreatedDate)
+          .ToListAsync();
+      }
+    }
+
+
+    /// <inheritdoc />
+    public async Task<ListResult<Language>> GetByQuery(ListQuery<Language> query)
+    {
+      query.SearchFor(entity => entity.Name);
+
+      using (IAsyncDocumentSession session = Raven.OpenAsyncSession())
+      {
+        return await session.Query<Language>()
+          .ToQueriedListAsync(query);
+      }
+    }
+
+
+    /// <inheritdoc />
+    public async Task<EntityResult<Language>> Save(Language model)
+    {
+      ValidationResult validation = await new LanguageValidator().ValidateAsync(model);
+
+      if (!validation.IsValid)
+      {
+        return EntityResult<Language>.Fail(validation);
+      }
+
+      if (model.Id.IsNullOrEmpty())
+      {
+        model.AppId = Constants.Database.SharedAppId;
+        model.CreatedDate = DateTimeOffset.Now;
+      }
+
+      model.Alias = Alias.Generate(model.Name);
+
+      using (IAsyncDocumentSession session = Raven.OpenAsyncSession())
+      {
+        await session.StoreAsync(model);
+        await session.SaveChangesAsync();
+      }
+
+      return EntityResult<Language>.Success(model);
+    }
+
+
+    /// <inheritdoc />
+    public async Task<EntityResult<Language>> Delete(string id)
+    {
+      using (IAsyncDocumentSession session = Raven.OpenAsyncSession())
+      {
+        Language entity = await session.LoadAsync<Language>(id);
+
+        if (entity == null)
+        {
+          return EntityResult<Language>.Fail("@errors.ondelete.idnotfound");
+        }
+
+        session.Delete(entity);
+
+        await session.SaveChangesAsync();
+      }
+
+      return EntityResult<Language>.Success();
+    }
+  }
+
+
+  public interface ILanguagesApi
+  {
+    /// <summary>
+    /// Get language by Id
+    /// </summary>
+    Task<Language> GetById(string id);
+
+    /// <summary>
+    /// Get all available languages
+    /// </summary>
+    Task<IList<Language>> GetAll();
+
+    /// <summary>
+    /// Get all available languages (with query)
+    /// </summary>
+    Task<ListResult<Language>> GetByQuery(ListQuery<Language> query);
+
+    /// <summary>
+    /// Creates or updates a language
+    /// </summary>
+    Task<EntityResult<Language>> Save(Language model);
+
+    /// <summary>
+    /// Deletes a language by Id
+    /// </summary>
+    Task<EntityResult<Language>> Delete(string id);
+  }
+}
diff --git a/zero.Core/Constants.cs b/zero.Core/Constants.cs
index 7db98a04..840e5c0c 100644
--- a/zero.Core/Constants.cs
+++ b/zero.Core/Constants.cs
@@ -48,6 +48,7 @@
       public const string Updates = "updates";
       public const string Applications = "applications";
       public const string Users = "users";
+      public const string Languages = "languages";
       public const string Translations = "translations";
       public const string Countries = "countries";
       public const string Logging = "logs";
diff --git a/zero.Core/Entities/Language.cs b/zero.Core/Entities/Language.cs
new file mode 100644
index 00000000..a9cddc77
--- /dev/null
+++ b/zero.Core/Entities/Language.cs
@@ -0,0 +1,20 @@
+namespace zero.Core.Entities
+{
+  public class Language : DatabaseEntity
+  {
+    /// <summary>
+    /// Language code (ISO 3166-1)
+    /// </summary>
+    public string Code { get; set; }
+
+    /// <summary>
+    /// Whether this is the default language
+    /// </summary>
+    public bool IsDefault { get; set; }
+
+    /// <summary>
+    /// If this language is inherited it gets all missing properties from its parent
+    /// </summary>
+    public string InheritedLanguageId { get; set; }
+  }
+}
\ No newline at end of file
diff --git a/zero.Core/Identity/Permissions.cs b/zero.Core/Identity/Permissions.cs
index 4ef2d0d0..81383856 100644
--- a/zero.Core/Identity/Permissions.cs
+++ b/zero.Core/Identity/Permissions.cs
@@ -15,6 +15,7 @@
       public const string Updates = PREFIX + Constants.Settings.Updates;
       public const string Applications = PREFIX + Constants.Settings.Applications;
       public const string Users = PREFIX + Constants.Settings.Users;
+      public const string Languages = PREFIX + Constants.Settings.Languages;
       public const string Translations = PREFIX + Constants.Settings.Translations;
       public const string Countries = PREFIX + Constants.Settings.Countries;
       public const string Logging = PREFIX + Constants.Settings.Logging;
diff --git a/zero.Core/Validation/LanguageValidator.cs b/zero.Core/Validation/LanguageValidator.cs
new file mode 100644
index 00000000..d4481e67
--- /dev/null
+++ b/zero.Core/Validation/LanguageValidator.cs
@@ -0,0 +1,16 @@
+using FluentValidation;
+using zero.Core.Entities;
+using zero.Core.Entities.Setup;
+using zero.Core.Extensions;
+
+namespace zero.Core.Validation
+{
+  public class LanguageValidator : AbstractValidator<Language>
+  {
+    public LanguageValidator()
+    {
+      //RuleFor(x => x.Code).Length(2);
+      //RuleFor(x => x.Name).Length(2, 120);
+    }
+  }
+}
diff --git a/zero.Web/App/Components/Forms/property.vue b/zero.Web/App/Components/Forms/property.vue
index 488fea0b..8d13d2e0 100644
--- a/zero.Web/App/Components/Forms/property.vue
+++ b/zero.Web/App/Components/Forms/property.vue
@@ -36,14 +36,7 @@
   .ui-property
   {
     position: relative;
-    display: flex;
-
-    & + .ui-property
-    {
-      padding-top: 25px;
-      margin-top: 25px;
-      /*border-top: 1px solid var(--color-line);*/
-    }
+    display: flex;  
 
     &.is-disabled
     {
@@ -51,6 +44,14 @@
     }
   }
 
+  .ui-split + .ui-property,
+  .ui-property + .ui-property
+  {
+    padding-top: 25px;
+    margin-top: 25px;
+    /*border-top: 1px solid var(--color-line);*/
+  }
+
   .ui-property.is-vertical
   {
     flex-direction: column;
diff --git a/zero.Web/App/Pages/settings/language.vue b/zero.Web/App/Pages/settings/language.vue
new file mode 100644
index 00000000..d6a3718a
--- /dev/null
+++ b/zero.Web/App/Pages/settings/language.vue
@@ -0,0 +1,139 @@
+<template>
+  <ui-form ref="form" class="language" v-slot="form" @submit="onSubmit" @load="onLoad">
+
+    <ui-header-bar :title="model.name" title-empty="@language.name" :back-button="true">
+      <ui-dropdown align="right" v-if="!disabled">
+        <template v-slot:button>
+          <ui-button type="light" label="@ui.actions" caret="down" />
+        </template>
+        <ui-dropdown-list v-model="actions" />
+      </ui-dropdown>
+      <ui-button :submit="true" label="@ui.save" :state="form.state" v-if="!disabled" />
+    </ui-header-bar>
+
+    <div class="ui-view-box has-sidebar">
+      <div>
+        <div class="ui-box">
+          <ui-property label="@ui.name" :required="true">
+            <input v-model="model.name" type="text" class="ui-input" maxlength="80" :readonly="disabled" />
+          </ui-property>
+          <ui-property label="@language.fields.locale" :required="true">
+            <div class="ui-native-select">
+              <select v-model="model.code">
+                <option v-for="culture in cultures" :value="culture.code">{{culture.name}}</option>
+              </select>
+            </div>
+          </ui-property>
+          <ui-property label="@language.fields.isDefault" description="@language.fields.isDefault_text">
+            <ui-toggle v-model="model.isDefault" />
+          </ui-property>
+        </div>
+      </div>
+
+      <aside class="ui-view-box-aside">
+        <ui-property label="@ui.id" :vertical="true" :is-text="true">
+          {{model.id}}
+        </ui-property>
+        <ui-property label="@ui.createdDate" :vertical="true" :is-text="true">
+          <ui-date v-model="model.createdDate" />
+        </ui-property>
+      </aside>
+    </div>
+  </ui-form>
+</template>
+
+
+<script>
+  import LanguagesApi from 'zero/resources/languages';
+  import Overlay from 'zero/services/overlay.js';
+
+  export default {
+    props: ['id'],
+
+    data: () => ({
+      actions: [],
+      model: { name: null },
+      disabled: false,
+      cultures: []
+    }),
+
+    created()
+    {
+      this.actions.push({
+        name: 'Delete',
+        icon: 'fth-trash',
+        action: this.onDelete
+      });
+    },
+
+
+    beforeRouteLeave(to, from, next) 
+    {
+      this.$refs.form.beforeRouteLeave(to, from, next);
+    },
+
+
+    methods: {
+
+      onLoad(form)
+      {
+        form.load(LanguagesApi.getById(this.id)).then(response =>
+        {
+          this.disabled = !response.canEdit;
+          this.model = response;
+        });
+
+        LanguagesApi.getAllCultures().then(res =>
+        {
+          this.cultures = res;
+        });
+      },
+
+
+      onSubmit(form)
+      {
+        form.handle(LanguagesApi.save(this.model)).then(response =>
+        {
+          console.info(response);
+        });
+      },
+
+      onDelete(item, opts)
+      {
+        opts.hide();
+
+        Overlay.confirmDelete().then((opts) =>
+        {
+          opts.state('loading');
+
+          LanguagesApi.delete(this.id).then(response =>
+          {
+            if (response.success)
+            {
+              opts.state('success');
+              opts.hide();
+              this.$router.go(-1);
+              // TODO show message
+            }
+            else
+            {
+              opts.errors(response.errors);
+            }
+          });
+        }); 
+      }
+    }
+  }
+</script>
+
+<style lang="scss">
+  /*.role-permission-toggle + .role-permission-toggle
+  {
+    padding-top: 0;
+  }
+
+  .role .ui-box + .ui-permissions
+  {
+    margin-top: var(--padding);
+  }*/
+</style>
\ No newline at end of file
diff --git a/zero.Web/App/Pages/settings/languages.vue b/zero.Web/App/Pages/settings/languages.vue
new file mode 100644
index 00000000..b49ca1ad
--- /dev/null
+++ b/zero.Web/App/Pages/settings/languages.vue
@@ -0,0 +1,56 @@
+<template>
+  <div class="languages">
+    <ui-header-bar title="@language.list" :back-button="true">
+      <ui-table-filter v-model="tableConfig" />
+      <ui-button label="Add" icon="fth-plus" />
+    </ui-header-bar>
+    <div class="ui-blank-box">
+      <ui-table v-model="tableConfig" />
+    </div>
+  </div>
+</template>
+
+
+<script>
+  import LanguagesApi from 'zero/resources/languages.js';
+
+  export default {
+    data: () => ({
+      tableConfig: {}
+    }),
+
+    created()
+    {
+      this.tableConfig = {
+        labelPrefix: '@language.fields.',
+        allowOrder: false,
+        search: null,
+        columns: {
+          name: {
+            label: '@ui.name',
+            as: 'text',
+            bold: true,
+            link: item =>
+            {
+              return {
+                name: zero.alias.sections.settings + '-' + zero.alias.settings.languages + '-edit',
+                params: { id: item.id }
+              };
+            }
+          },
+          code: 'text',
+          isActive: {
+            as: 'bool',
+            label: '@ui.active',
+            width: 200
+          },
+          isDefault: {
+            as: 'bool',
+            width: 200
+          }
+        },
+        items: LanguagesApi.getAll
+      };
+    }
+  }
+</script>
\ No newline at end of file
diff --git a/zero.Web/App/Pages/settings/translation.vue b/zero.Web/App/Pages/settings/translation.vue
index 407f2ff2..50164322 100644
--- a/zero.Web/App/Pages/settings/translation.vue
+++ b/zero.Web/App/Pages/settings/translation.vue
@@ -2,12 +2,14 @@
   <ui-form v-if="!loading" ref="form" class="translation" v-slot="form" @submit="onSubmit" @load="onLoad">
     <h2 class="ui-headline">Translation</h2>
     <div class="translation-items">
-      <ui-property label="@translation.fields.key" :required="true" :vertical="true">
-        <input v-model="item.key" type="text" class="ui-input" maxlength="200" :readonly="disabled" />
-      </ui-property>
-      <ui-property label="@translation.fields.display" :vertical="true">
-        <ui-state-button :disabled="disabled" :items="displayItems" v-model="item.display" />
-      </ui-property>
+      <div class="ui-split">
+        <ui-property label="@translation.fields.key" :required="true" :vertical="true">
+          <input v-model="item.key" type="text" class="ui-input" maxlength="200" :readonly="disabled" />
+        </ui-property>
+        <ui-property label="@translation.fields.display" :vertical="true">
+          <ui-state-button :disabled="disabled" :items="displayItems" v-model="item.display" />
+        </ui-property>
+      </div>
       <ui-property label="@translation.fields.value" :required="true" :vertical="true">
         <textarea v-model="item.value" class="ui-input" :readonly="disabled"></textarea>
       </ui-property>
@@ -99,7 +101,8 @@
   {
     margin-top: var(--padding);
 
-    .ui-property + .ui-property
+    .ui-property + .ui-property,
+    .ui-split + .ui-property
     {
       margin-top: 0;
     }
diff --git a/zero.Web/App/Resources/languages.js b/zero.Web/App/Resources/languages.js
new file mode 100644
index 00000000..49f89620
--- /dev/null
+++ b/zero.Web/App/Resources/languages.js
@@ -0,0 +1,34 @@
+import Axios from 'axios';
+
+export default {
+
+  // get language by id
+  getById(id)
+  {
+    return Axios.get('languages/getById', { params: { id } }).then(res => Promise.resolve(res.data));
+  },
+
+  // get all languages
+  getAll()
+  {
+    return Axios.get('languages/getAll').then(res => Promise.resolve(res.data));
+  },
+
+  // get all available cultures
+  getAllCultures()
+  {
+    return Axios.get('languages/getAllCultures').then(res => Promise.resolve(res.data));
+  },
+
+  // save a language
+  save(model)
+  {
+    return Axios.post('languages/save', model).then(res => Promise.resolve(res.data));
+  },
+
+  // deletes a language
+  delete(id)
+  {
+    return Axios.delete('languages/delete', { params: { id } }).then(res => Promise.resolve(res.data));
+  }
+};
\ No newline at end of file
diff --git a/zero.Web/App/pages/settings/routes.js b/zero.Web/App/pages/settings/routes.js
index f6140f55..776eb6fb 100644
--- a/zero.Web/App/pages/settings/routes.js
+++ b/zero.Web/App/pages/settings/routes.js
@@ -11,6 +11,7 @@ detailPages[zero.alias.settings.users] = [
 ];
 detailPages[zero.alias.settings.countries] = 'country';
 detailPages[zero.alias.settings.translations] = 'translations';
+detailPages[zero.alias.settings.languages] = 'language';
 
 if (section)
 {
diff --git a/zero.Web/Controllers/LanguagesController.cs b/zero.Web/Controllers/LanguagesController.cs
new file mode 100644
index 00000000..5b1e83d6
--- /dev/null
+++ b/zero.Web/Controllers/LanguagesController.cs
@@ -0,0 +1,95 @@
+using Microsoft.AspNetCore.Mvc;
+using Microsoft.Extensions.Options;
+using System.Globalization;
+using System.Linq;
+using System.Threading.Tasks;
+using zero.Core;
+using zero.Core.Api;
+using zero.Core.Entities;
+using zero.Core.Extensions;
+using zero.Core.Identity;
+using zero.Web.Mapper;
+using zero.Web.Models;
+
+namespace zero.Web.Controllers
+{
+  [ZeroAuthorize(Permissions.Settings.Languages, PermissionsValue.Read)]
+  public class LanguagesController : BackofficeController
+  {
+    private ILanguagesApi Api { get; set; }
+
+    private ZeroOptions Options { get; set; }
+
+
+    public LanguagesController(IZeroConfiguration config, ILanguagesApi api, IMapper mapper, IToken token, IOptionsMonitor<ZeroOptions> options) : base(config, mapper, token)
+    {
+      Api = api;
+      Options = options.CurrentValue;
+    }
+
+
+    /// <summary>
+    /// Get translation by id
+    /// </summary>  
+    public IActionResult GetEmpty()
+    {
+      return Json(new LanguageEditModel());
+    }
+
+
+    /// <summary>
+    /// Get translation by id
+    /// </summary>  
+    public async Task<IActionResult> GetById([FromQuery] string id)
+    {
+      return await As<Language, LanguageEditModel>(await Api.GetById(id));
+    }
+
+
+    /// <summary>
+    /// Get all translations
+    /// </summary>    
+    public async Task<IActionResult> GetAll([FromQuery] ListQuery<Language> query)
+    {
+      return await As<Language, LanguageListModel>(await Api.GetByQuery(query));
+    }
+
+
+    /// <summary>
+    /// Returns all cultures available for creating languages.
+    /// </summary>
+    public IActionResult GetAllCultures()
+    {
+      return Json(CultureInfo.GetCultures(CultureTypes.AllCultures)
+        .Where(x => !x.Name.IsNullOrWhiteSpace())
+        .Select(x => new CultureInfo(x.Name))
+        .OrderBy(x => x.DisplayName)
+        .Select(x => new
+        {
+          code = x.Name,
+          name = x.DisplayName
+        }));
+    }
+
+
+    /// <summary>
+    /// Save translation
+    /// </summary>
+    [ZeroAuthorize(Permissions.Settings.Languages, PermissionsValue.Write)]
+    public async Task<IActionResult> Save([FromBody] LanguageEditModel model)
+    {
+      Language entity = await Mapper.Map(model, await Api.GetById(model.Id));
+      return await As<Language, LanguageEditModel>(await Api.Save(entity));
+    }
+
+
+    /// <summary>
+    /// Deletes a translation
+    /// </summary>
+    [ZeroAuthorize(Permissions.Settings.Languages, PermissionsValue.Write)]
+    public async Task<IActionResult> Delete([FromQuery] string id)
+    {
+      return await As<Language, LanguageEditModel>(await Api.Delete(id));
+    }
+  }
+}
diff --git a/zero.Web/Controllers/TestController.cs b/zero.Web/Controllers/TestController.cs
index b8b7f021..708777a1 100644
--- a/zero.Web/Controllers/TestController.cs
+++ b/zero.Web/Controllers/TestController.cs
@@ -22,14 +22,17 @@ namespace zero.Web.Controllers
 
     private ISpacesApi SpacesApi { get; set; }
 
+    private ILanguagesApi LanguagesApi { get; set; }
+
     private SignInManager<User> SignInManager;
 
     private ZeroOptions Options;
 
-    public TestController(IZeroConfiguration config, IAuthenticationApi api, ISpacesApi spacesApi, SignInManager<User> signInManager, IOptionsMonitor<ZeroOptions> options) : base(config)
+    public TestController(IZeroConfiguration config, IAuthenticationApi api, ISpacesApi spacesApi, ILanguagesApi languagesApi, SignInManager<User> signInManager, IOptionsMonitor<ZeroOptions> options) : base(config)
     {
       Api = api;
       SpacesApi = spacesApi;
+      LanguagesApi = languagesApi;
       SignInManager = signInManager;
       Options = options.CurrentValue;
     }
@@ -69,6 +72,21 @@ namespace zero.Web.Controllers
     }
 
 
+    [HttpGet]
+    [ZeroAuthorize(false)]
+    public async Task<IActionResult> AddLanguage()
+    {
+      return Json(await LanguagesApi.Save(new Language()
+      {
+
+        IsActive = true,
+        Name = "English",
+        Code = "en-US",
+        IsDefault = true
+      }));
+    }
+
+
     [HttpGet]
     [ZeroAuthorize(false)]
     public async Task<IActionResult> GetSpaceList()
diff --git a/zero.Web/Mapper/LanguageMapperConfig.cs b/zero.Web/Mapper/LanguageMapperConfig.cs
new file mode 100644
index 00000000..5c59df97
--- /dev/null
+++ b/zero.Web/Mapper/LanguageMapperConfig.cs
@@ -0,0 +1,42 @@
+using zero.Core.Entities;
+using zero.Web.Models;
+
+namespace zero.Web.Mapper
+{
+  public class LanguageMapperConfig : IMapperConfig
+  {
+    /// <inheritdoc />
+    public void Configure(IMapper config)
+    {
+      config.CreateMap<Language, LanguageEditModel>((source, target) =>
+      {
+        target.Id = source.Id;
+        target.Name = source.Name;
+        target.IsActive = source.IsActive;
+        target.IsDefault = source.IsDefault;
+        target.InheritedLanguageId = source.InheritedLanguageId;
+        target.Code = source.Code;
+        target.CreatedDate = source.CreatedDate;
+      });
+
+      config.CreateMap<LanguageEditModel, Language>((source, target) =>
+      {
+        target.Name = source.Name;
+        target.IsActive = source.IsActive;
+        target.IsDefault = source.IsDefault;
+        target.InheritedLanguageId = source.InheritedLanguageId;
+        target.Code = source.Code;
+      });
+
+      config.CreateMap<Language, LanguageListModel>((source, target) =>
+      {
+        target.Id = source.Id;
+        target.Name = source.Name;
+        target.IsActive = source.IsActive;
+        target.IsDefault = source.IsDefault;
+        target.InheritedLanguageId = source.InheritedLanguageId;
+        target.Code = source.Code;
+      });
+    }
+  }
+}
diff --git a/zero.Web/Models/CountryEditModel.cs b/zero.Web/Models/CountryEditModel.cs
index 56c371f4..a038f967 100644
--- a/zero.Web/Models/CountryEditModel.cs
+++ b/zero.Web/Models/CountryEditModel.cs
@@ -6,10 +6,6 @@ namespace zero.Web.Models
   {
     public string Name { get; set; }
 
-    public bool IsActive { get; set; }
-
-    public DateTimeOffset CreatedDate { get; set; }
-
     public bool IsPreferred { get; set; }
 
     public string Code { get; set; }
diff --git a/zero.Web/Models/EditModel.cs b/zero.Web/Models/EditModel.cs
index 81b32cb1..1f932a4d 100644
--- a/zero.Web/Models/EditModel.cs
+++ b/zero.Web/Models/EditModel.cs
@@ -10,11 +10,21 @@ namespace zero.Web.Models
     /// </summary>
     public string Id { get; set; }
 
+    /// <summary>
+    /// Whether this entity is active
+    /// </summary>
+    public bool IsActive { get; set; }
+
     /// <summary>
     /// Whether this entity can be edited or only viewed
     /// </summary>
     public bool CanEdit { get; set; }
 
+    /// <summary>
+    /// Date of creation
+    /// </summary>
+    public DateTimeOffset CreatedDate { get; set; }
+
     /// <summary>
     /// Meta data for the entity
     /// </summary>
diff --git a/zero.Web/Models/LanguageEditModel.cs b/zero.Web/Models/LanguageEditModel.cs
new file mode 100644
index 00000000..f5c3c3d7
--- /dev/null
+++ b/zero.Web/Models/LanguageEditModel.cs
@@ -0,0 +1,13 @@
+namespace zero.Web.Models
+{
+  public class LanguageEditModel : EditModel
+  {
+    public string Name { get; set; }
+
+    public string Code { get; set; }
+
+    public bool IsDefault { get; set; }
+
+    public string InheritedLanguageId { get; set; }
+  }
+}
diff --git a/zero.Web/Models/LanguageListModel.cs b/zero.Web/Models/LanguageListModel.cs
new file mode 100644
index 00000000..0b44e928
--- /dev/null
+++ b/zero.Web/Models/LanguageListModel.cs
@@ -0,0 +1,17 @@
+using System;
+
+namespace zero.Web.Models
+{
+  public class LanguageListModel : ListModel
+  {
+    public string Name { get; set; }
+
+    public string Code { get; set; }
+
+    public bool IsDefault { get; set; }
+
+    public bool IsActive { get; set; }
+
+    public string InheritedLanguageId { get; set; }
+  }
+}
diff --git a/zero.Web/Models/TranslationEditModel.cs b/zero.Web/Models/TranslationEditModel.cs
index 065ae22c..9360aac7 100644
--- a/zero.Web/Models/TranslationEditModel.cs
+++ b/zero.Web/Models/TranslationEditModel.cs
@@ -11,7 +11,5 @@ namespace zero.Web.Models
     public string Value { get; set; }
 
     public TranslationDisplay Display { get; set; }
-
-    public DateTimeOffset CreatedDate { get; set; }
   }
 }
diff --git a/zero.Web/Models/UserEditModel.cs b/zero.Web/Models/UserEditModel.cs
index 169801fb..b366ec88 100644
--- a/zero.Web/Models/UserEditModel.cs
+++ b/zero.Web/Models/UserEditModel.cs
@@ -8,10 +8,6 @@ namespace zero.Web.Models
   {
     public string Name { get; set; }
 
-    public bool IsActive { get; set; }
-
-    public DateTimeOffset CreatedDate { get; set; }
-
     public bool IsSuper { get; set; }
 
     public string Email { get; set; }
diff --git a/zero.Web/Models/UserRoleEditModel.cs b/zero.Web/Models/UserRoleEditModel.cs
index 4d62d710..31065fea 100644
--- a/zero.Web/Models/UserRoleEditModel.cs
+++ b/zero.Web/Models/UserRoleEditModel.cs
@@ -8,10 +8,6 @@ namespace zero.Web.Models
   {
     public string Name { get; set; }
 
-    public bool IsActive { get; set; }
-
-    public DateTimeOffset CreatedDate { get; set; }
-
     public string Description { get; set; }
 
     public string Icon { get; set; }
diff --git a/zero.Web/Resources/Localization/zero.en-us.json b/zero.Web/Resources/Localization/zero.en-us.json
index 58c80bbc..cd0a2198 100644
--- a/zero.Web/Resources/Localization/zero.en-us.json
+++ b/zero.Web/Resources/Localization/zero.en-us.json
@@ -96,6 +96,10 @@
         "name": "Users & Permissions",
         "text": "Administration of backoffice users"
       },
+      "languages": {
+        "name": "Languages",
+        "text": "Frontend languages"
+      },
       "translations": {
         "name": "Translations",
         "text": "Frontend texts and translations"
@@ -223,6 +227,21 @@
     }
   },
 
+  "language": {
+    "list": "Languages",
+    "name": "Language",
+    "fields": {
+      "name": "Name",
+      "locale": "Locale",
+      "code": "ISO Code",
+      "code_text": "Code in ISO 3166-1 format",
+      "isDefault": "Default",
+      "isDefault_text": "Use as default language",
+      "inheritedLanguageId": "Inherit from",
+      "inheritedLanguageId_text": "To allow multi-lingual content to fall back to another language if not present in the requested language, select it here"
+    }
+  },
+
   "translation": {
     "list": "Translations",
     "name": "Translation",
diff --git a/zero.Web/Sass/Canvas/_canvas.scss b/zero.Web/Sass/Canvas/_canvas.scss
index ae5c0a8e..9e615960 100644
--- a/zero.Web/Sass/Canvas/_canvas.scss
+++ b/zero.Web/Sass/Canvas/_canvas.scss
@@ -63,4 +63,10 @@ body
   grid-gap: var(--padding);
   align-items: stretch;
   justify-content: stretch;
+
+  .ui-property + .ui-property
+  {
+    margin-top: 0;
+    padding-top: 0;
+  }
 }
\ No newline at end of file
diff --git a/zero.Web/Sass/Core/_forms.scss b/zero.Web/Sass/Core/_forms.scss
index 77e0ab13..e837e1e4 100644
--- a/zero.Web/Sass/Core/_forms.scss
+++ b/zero.Web/Sass/Core/_forms.scss
@@ -7,7 +7,7 @@
 
 input[type="text"], input[type="color"], input[type="date"], input[type="datetime"], input[type="email"], input[type="file"], input[type="month"], input[type="number"],
 input[type="password"], input[type="range"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], input[type="week"],
-textarea
+textarea, .ui-native-select
 {
   @extend %font;
   background: var(--color-bg-light);
@@ -40,4 +40,34 @@ textarea
 {
   resize: vertical;
   min-height: 80px;
+}
+
+.ui-native-select
+{
+  position: relative;
+
+  select
+  {
+    @extend %font;
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    width: 100%;
+    padding-left: 12px;
+    -webkit-appearance: none;
+    border: none;
+  }
+
+  &:after
+  {
+    @extend %font-icon;
+    content: "\e842";
+    position: absolute;
+    right: 12px;
+    top: 0;
+    height: 42px;
+    line-height: 40px;
+  }
 }
\ No newline at end of file
diff --git a/zero.Web/Startup.cs b/zero.Web/Startup.cs
index 148e302e..368e0811 100644
--- a/zero.Web/Startup.cs
+++ b/zero.Web/Startup.cs
@@ -162,6 +162,7 @@ namespace zero.Web
       services.AddTransient<IToken, Token>();
       services.AddTransient<ISpacesApi, SpacesApi>();
       services.AddTransient<ITranslationsApi, TranslationsApi>();
+      services.AddTransient<ILanguagesApi, LanguagesApi>();
     }
 
     /// <summary>
diff --git a/zero.Web/ZeroBuilder.cs b/zero.Web/ZeroBuilder.cs
index de587195..23f16404 100644
--- a/zero.Web/ZeroBuilder.cs
+++ b/zero.Web/ZeroBuilder.cs
@@ -32,6 +32,7 @@ namespace zero.Web
         opts.Add<UserMapperConfig>();
         opts.Add<CountryMapperConfig>();
         opts.Add<TranslationMapperConfig>();
+        opts.Add<LanguageMapperConfig>();
       });
 
       Services.AddIdentity<User, UserRole>(opts =>
@@ -102,8 +103,9 @@ namespace zero.Web
       systemSettings.Add(Constants.Settings.Updates, "@settings.system.updates.name", "@settings.system.updates.text", "fth-check-circle");
       systemSettings.Add(Constants.Settings.Applications, "@settings.system.applications.name", "@settings.system.applications.text", "fth-layers");
       systemSettings.Add(Constants.Settings.Users, "@settings.system.users.name", "@settings.system.users.text", "fth-users");
-      systemSettings.Add(Constants.Settings.Translations, "@settings.system.translations.name", "@settings.system.translations.text", "fth-type");
+      systemSettings.Add(Constants.Settings.Languages, "@settings.system.languages.name", "@settings.system.languages.text", "fth-globe");
       systemSettings.Add(Constants.Settings.Countries, "@settings.system.countries.name", "@settings.system.countries.text", "fth-map-pin");
+      systemSettings.Add(Constants.Settings.Translations, "@settings.system.translations.name", "@settings.system.translations.text", "fth-type");
       systemSettings.Add(Constants.Settings.Logging, "@settings.system.logs.name", "@settings.system.logs.text", "fth-file-text");
 
       SettingsGroup pluginSettings = new SettingsGroup("@settings.groups.plugins");
@@ -122,8 +124,9 @@ namespace zero.Web
       permissionSettings.Items.Add(new Permission(Permissions.Settings.Updates, "@settings.system.updates.name", "@settings.system.updates.text_default", PermissionValueType.ReadWrite));
       permissionSettings.Items.Add(new Permission(Permissions.Settings.Applications, "@settings.system.applications.name", "@settings.system.applications.text", PermissionValueType.ReadWrite));
       permissionSettings.Items.Add(new Permission(Permissions.Settings.Users, "@settings.system.users.name", "@settings.system.users.text", PermissionValueType.ReadWrite));
-      permissionSettings.Items.Add(new Permission(Permissions.Settings.Translations, "@settings.system.translations.name", "@settings.system.translations.text", PermissionValueType.ReadWrite));
+      permissionSettings.Items.Add(new Permission(Permissions.Settings.Languages, "@settings.system.languages.name", "@settings.system.languages.text", PermissionValueType.ReadWrite));
       permissionSettings.Items.Add(new Permission(Permissions.Settings.Countries, "@settings.system.countries.name", "@settings.system.countries.text", PermissionValueType.ReadWrite));
+      permissionSettings.Items.Add(new Permission(Permissions.Settings.Translations, "@settings.system.translations.name", "@settings.system.translations.text", PermissionValueType.ReadWrite));
       permissionSettings.Items.Add(new Permission(Permissions.Settings.Logging, "@settings.system.logs.name", "@settings.system.logs.text", PermissionValueType.ReadWrite));
       permissionSettings.Items.Add(new Permission(Permissions.Settings.Plugins, "@settings.plugins.installed.name", "@settings.plugins.installed.text_default", PermissionValueType.ReadWrite));
       permissionSettings.Items.Add(new Permission(Permissions.Settings.CreatePlugin, "@settings.plugins.create.name", "@settings.plugins.create.text", PermissionValueType.ReadWrite));
diff --git a/zero.Web/ZeroVue.cs b/zero.Web/ZeroVue.cs
index 6ec2c4e0..f666dcd2 100644
--- a/zero.Web/ZeroVue.cs
+++ b/zero.Web/ZeroVue.cs
@@ -137,6 +137,7 @@ namespace zero.Web
       settings.Add("applications", Constants.Settings.Applications);
       settings.Add("countries", Constants.Settings.Countries);
       settings.Add("logging", Constants.Settings.Logging);
+      settings.Add("languages", Constants.Settings.Languages);
       settings.Add("translations", Constants.Settings.Translations);
       settings.Add("updates", Constants.Settings.Updates);
       settings.Add("users", Constants.Settings.Users);