diff --git a/dmp-frontend/src/app/ui/language-editor/language-editor.component.html b/dmp-frontend/src/app/ui/language-editor/language-editor.component.html
new file mode 100644
index 000000000..b9eaa1621
--- /dev/null
+++ b/dmp-frontend/src/app/ui/language-editor/language-editor.component.html
@@ -0,0 +1,26 @@
+
diff --git a/dmp-frontend/src/app/ui/language-editor/language-editor.component.scss b/dmp-frontend/src/app/ui/language-editor/language-editor.component.scss
new file mode 100644
index 000000000..39e04d644
--- /dev/null
+++ b/dmp-frontend/src/app/ui/language-editor/language-editor.component.scss
@@ -0,0 +1,17 @@
+.language-editor {
+ padding-top: 5em;
+ padding-bottom: 2em;
+
+ .language-area {
+ box-sizing: content-box;
+ }
+
+ .save-btn {
+ padding-top: inherit !important;
+ top: auto !important;
+ width: 56px !important;
+ bottom: 10px;
+ position: fixed;
+ right: 10px;
+ }
+}
diff --git a/dmp-frontend/src/app/ui/language-editor/language-editor.component.ts b/dmp-frontend/src/app/ui/language-editor/language-editor.component.ts
new file mode 100644
index 000000000..68050e652
--- /dev/null
+++ b/dmp-frontend/src/app/ui/language-editor/language-editor.component.ts
@@ -0,0 +1,91 @@
+import { Component, OnInit } from '@angular/core';
+import { LanguageService } from '@app/core/services/language/language.service';
+import { BaseComponent } from '@common/base/base.component';
+import { takeUntil } from 'rxjs/operators';
+import { FormGroup, FormBuilder } from '@angular/forms';
+import { TranslateService } from '@ngx-translate/core';
+import { UiNotificationService, SnackBarNotificationLevel } from '@app/core/services/notification/ui-notification-service';
+import { Router } from '@angular/router';
+
+@Component({
+ selector: 'app-language-editor',
+ templateUrl: './language-editor.component.html',
+ styleUrls: ['./language-editor.component.scss']
+})
+export class LanguageEditorComponent extends BaseComponent implements OnInit {
+ keys = [];
+ parseFinished = false;
+ currentLang: string;
+ formGroup: FormGroup;
+ formBuilder: FormBuilder;
+
+ constructor(
+ private language: LanguageService,
+ private uiNotificationService: UiNotificationService,
+ private translate: TranslateService,
+ private router: Router,
+ ) { super(); }
+
+ ngOnInit() {
+ this.formBuilder = new FormBuilder();
+ this.formGroup = this.formBuilder.group({});
+ this.language.getCurrentLanguageJSON()
+ .pipe(takeUntil(this._destroyed))
+ .subscribe(response => {
+ const blob = new Blob([response.body], { type: 'application/json' });
+ this.convertBlobToJSON(blob);
+
+ });
+ }
+
+ convertBlobToJSON(blob: Blob) {
+ const fr = new FileReader();
+ fr.onload = ev => {
+ const langObj = JSON.parse(fr.result as string);
+ this.convertObjectToForm(langObj, '', this.formGroup);
+ this.currentLang = this.language.getCurrentLanguageName();
+ this.parseFinished = true;
+ };
+ fr.readAsText(blob);
+ }
+
+ convertObjectToForm(obj: any, parentKey: string, form: FormGroup) {
+ for (let prop in obj) {
+ const key = parentKey !== '' ? `${parentKey}.${prop}` : prop;
+ if (typeof obj[prop] === 'object') {
+ form.addControl(prop, this.formBuilder.group({}));
+ this.convertObjectToForm(obj[prop], key, form.get(prop) as FormGroup);
+ continue;
+ } else {
+ form.addControl(prop, this.formBuilder.control(obj[prop]));
+ this.keys.push(key);
+ }
+ }
+ return;
+ }
+
+ updateLang() {
+ const json = JSON.stringify(this.formGroup.value);
+ this.language.updateLanguage(json).pipe(takeUntil(this._destroyed))
+ .subscribe(
+ complete => {
+ this.onCallbackSuccess(complete);
+ },
+ error => {
+ this.onCallbackError(error);
+ }
+ );
+
+ }
+
+ onCallbackSuccess(id?: String): void {
+ this.uiNotificationService.snackBarNotification( this.translate.instant('GENERAL.SNACK-BAR.SUCCESSFUL-UPDATE'), SnackBarNotificationLevel.Success);
+ this.router.navigate(['/reload']).then(() => this.router.navigate(['/language-editor']));
+}
+
+onCallbackError(error: any) {
+ this.uiNotificationService.snackBarNotification( error, SnackBarNotificationLevel.Error);
+ //this.validateAllFormFields(this.formGroup);
+}
+
+}
diff --git a/dmp-frontend/src/app/ui/language-editor/language-editor.module.ts b/dmp-frontend/src/app/ui/language-editor/language-editor.module.ts
new file mode 100644
index 000000000..ff38b4929
--- /dev/null
+++ b/dmp-frontend/src/app/ui/language-editor/language-editor.module.ts
@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { LanguageEditorComponent } from './language-editor.component';
+import { LanguageEditorRoutingModule } from './language-editor.routing';
+import { CommonUiModule } from '@common/ui/common-ui.module';
+import { CommonFormsModule } from '@common/forms/common-forms.module';
+import { ConfirmationDialogModule } from '@common/modules/confirmation-dialog/confirmation-dialog.module';
+
+
+
+@NgModule({
+ declarations: [LanguageEditorComponent],
+ imports: [
+ CommonUiModule,
+ CommonFormsModule,
+ ConfirmationDialogModule,
+ LanguageEditorRoutingModule
+ ]
+})
+export class LanguageEditorModule { }
diff --git a/dmp-frontend/src/app/ui/language-editor/language-editor.routing.ts b/dmp-frontend/src/app/ui/language-editor/language-editor.routing.ts
new file mode 100644
index 000000000..423d8dd32
--- /dev/null
+++ b/dmp-frontend/src/app/ui/language-editor/language-editor.routing.ts
@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { LanguageEditorComponent } from './language-editor.component';
+
+const routes: Routes = [
+ { path: '', component: LanguageEditorComponent },
+ // { path: ':id', component: UserProfileComponent }
+];
+
+@NgModule({
+ imports: [RouterModule.forChild(routes)],
+ exports: [RouterModule]
+})
+export class LanguageEditorRoutingModule { }