From 36c8e406229112e93eccc252a3618cf75f2f1ad9 Mon Sep 17 00:00:00 2001 From: Tobias Kurze Date: Thu, 15 Aug 2019 14:34:32 +0200 Subject: [PATCH] added a lot of translations and fixed profile and navbar --- src/App.vue | 81 ++++++++++++-------- src/components/Login.vue | 2 +- src/components/Profile.vue | 36 ++++++++- src/components/Recorders.vue | 45 ++++++----- src/components/Rooms.vue | 13 ++-- src/main.ts | 3 +- src/plugins/i18n.ts | 143 ++++++++++++++++++++++++++++++++++- src/views/Home.vue | 25 +----- src/views/NotFound.vue | 2 +- 9 files changed, 263 insertions(+), 87 deletions(-) diff --git a/src/App.vue b/src/App.vue index 30bca30..bcd62ef 100644 --- a/src/App.vue +++ b/src/App.vue @@ -6,36 +6,53 @@ @@ -59,6 +76,7 @@ refreshTokenValidity: -1, showAlert: true, alertMessage: 'NO MESSAGE PROVIDED', + langs: ['de', 'en', 'es'], }; }, methods: { @@ -81,6 +99,9 @@ this.tokenValidity = getRemainingJwtValiditySeconds(this.$store.state.access_token); this.refreshTokenValidity = getRemainingJwtValiditySeconds(this.$store.state.refresh_token); // this.$log.debug(this.$store.state); + if (this.tokenValidity < 50 && this.refreshTokenValidity > 30) { + this.$store.dispatch('refreshToken'); // renew access token + } }, 1000); }); diff --git a/src/components/Login.vue b/src/components/Login.vue index d80de32..cccf398 100644 --- a/src/components/Login.vue +++ b/src/components/Login.vue @@ -21,7 +21,7 @@ - OIDC with redirect + OIDC with redirect
diff --git a/src/components/Profile.vue b/src/components/Profile.vue index 26581f0..acba739 100644 --- a/src/components/Profile.vue +++ b/src/components/Profile.vue @@ -18,12 +18,16 @@

-

{{$t('nickname')}}: {{profile.nickname}}

+

 {{profile.nickname}} + + +

+ :placeholder="$t('set_your_nickname') + ' ('+profile.nickname +')'"> + +
+ +

Token validity ({{tokenValidity}})

Refresh token validity ({{refreshTokenValidity}})

access_token ({{access_token}})

@@ -68,6 +79,12 @@ errorMsg: '', tokenValidity: -1, refreshTokenValidity: -1, + formEditField: {}, + languages: [ + {flag: 'us', language: 'en', title: 'English'}, + {flag: 'es', language: 'es', title: 'Español'}, + {flag: 'de', language: 'de', title: 'Deutsch'}, + ], form: { first_name: '', last_name: '', @@ -83,17 +100,22 @@ }, updateProfile(fieldName) { this.$parent.$data.isLoading = true; + this.$set(this.formEditField, fieldName, false); const data = {}; - data[fieldName]= this.form[fieldName]; + data[fieldName] = this.form[fieldName]; this.$log.debug(this.form); userRepository.updateProfile(data) .then(() => { - this.$store.dispatch('loadRecorders') + this.$store.dispatch('loadProfile') .then(() => { this.$parent.$data.isLoading = false; }); }); }, + changeLocale(locale) { + this.$i18n.locale = locale; + // Vue.$moment.locale(locale); + } }, mounted() { this.$log.debug('Profile: mounting...'); @@ -131,4 +153,10 @@ color: red; font-weight: bold; } + .lang-btn { + padding: 15px; + border: 2px solid green; + font-size: 18px; + margin: 15px; + } diff --git a/src/components/Recorders.vue b/src/components/Recorders.vue index 7b47b8e..c25259c 100644 --- a/src/components/Recorders.vue +++ b/src/components/Recorders.vue @@ -4,9 +4,9 @@
-

{{ $t('Manage recorders') }}

+

{{ $t('Manage_recorders') }}

- {{ $t('List, create and delete') }} {{ $t('recorders') }} and {{ $t('recordermodels') + {{ $t('List_create_and_delete') }} {{ $t('recorders') }} {{$t('and')}} {{ $t('recorder_models') }}


@@ -15,9 +15,9 @@ -

{{ $t('There are')}} {{recorders.length}} {{ $t('recorders defined')}}:

+

{{ $tc('recorders_defined', recorders.length, {num: recorders.length})}}:

- {{ $t('Virtual commands') }}:  + {{ $t('virtual_commands') }}:  - + {{command.name}} @@ -345,7 +346,7 @@ {{ $t('Recorder') }} -

{{ $t('Create a new recorder')}}:

+

{{ $t('Create_a_new_recorder')}}:

@@ -357,7 +358,7 @@ v-model="form.name" v-validate="'required|min:3'" v-bind:class="{'is-danger': errors.has('name'), 'is-invalid': errors.has('name')}" - class="form-control" type="text" placeholder="Recorder name" + class="form-control" type="text" :placeholder="$t('Recorder_name')" required>

@@ -370,7 +371,7 @@

@@ -398,7 +399,7 @@ v-validate="'ip'" v-model="form.ip" v-bind:class="{'is-danger': errors.has('ip'), 'is-invalid': errors.has('ip')}" - class="form-control" type="text" placeholder="Recorder IP"> + class="form-control" type="text" :placeholder="$t('Recorder') + ' ' + $t('ip')">

{{ errors.first('ip') }} @@ -406,13 +407,13 @@

- +
+ class="form-control" type="text" :placeholder="$t('Recorder') + ' ' + $t('ipv6')">

{{ errors.first('ip6') }} @@ -450,10 +451,10 @@

- +
diff --git a/src/main.ts b/src/main.ts index d356f88..8786f53 100644 --- a/src/main.ts +++ b/src/main.ts @@ -32,6 +32,7 @@ import { faAt, faUser, faEnvelope, + faUserTag, } from '@fortawesome/free-solid-svg-icons'; import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome'; @@ -45,7 +46,7 @@ import 'bootstrap-vue/dist/bootstrap-vue.css'; const isProduction = process.env.NODE_ENV === 'production'; library.add(faCoffee, faTrash, faPencilAlt, faScroll, faCheck, faCircle, faList, faPlus, faDoorOpen, faCogs, faAt, - faUser, faEnvelope); + faUser, faEnvelope, faUserTag); Vue.component('font-awesome-icon', FontAwesomeIcon); diff --git a/src/plugins/i18n.ts b/src/plugins/i18n.ts index bcd2863..34e4e50 100644 --- a/src/plugins/i18n.ts +++ b/src/plugins/i18n.ts @@ -5,6 +5,81 @@ Vue.use(VueI18n); const messages = { + de: { + welcomeMsg: 'Willkommen zu deiner Vue.js + TypeScript App', + guide: 'For a guide and recipes on how to configure / customize this project,', + checkout: 'check out the', + plugins: 'Installed CLI Plugins', + links: 'Essential Links', + ecosystem: 'Ecosystem', + Building_number: 'Gebäudenummer', + building_number: 'Gebäude #', + building_name: 'Gebäude', + Manage_rooms: 'Räume verwalten', + Manage_recorders: 'Aufzeichnungsgeräte verwalten', + Create_a_new_recorder: 'Ein neues Aufzeichnungsgerät anlegen', + Create_a_new_room: 'Einen neuen Raum anlegen', + Recorder_name: 'Name des Aufzeichnungsgerätes', + Recorder: 'Aufzeichnungsgerät', + recorder: 'Aufzeichnungsgerät', + Recorders: 'Aufzeichnungsgeräte', + recorders: 'Aufzeichnungsgeräte', + command: 'Befehl', + commands: 'Befehle', + Commands: 'Befehle', + virtual_commands: 'virtuelle Befehle', + admin: 'Admin', + name: 'Name', + alternate_name: 'alternativer Name', + group: 'Gruppe', + created: 'erstellt', + Comments: 'Kommentare', + Comment: 'Kommentar', + comment: 'Kommentar', + Room: 'Raum', + room: 'Raum', + Rooms: 'Räume', + rooms: 'Räume', + Room_number: 'Raumnummer', + room_number: 'Raumnummer', + user: 'Benutzer', + username: 'Benutzername', + password: 'Passwort', + first_name: 'Vorname', + last_name: 'Nachname', + nickname: 'Spitzname', + set_your_nickname: 'Lege deinen Spitznamen fest', + notes: 'Anmerkungen', + List_create_and_delete: 'Auflisten, anlegen und löschen von', + no_recorder_defined: 'Kein Aufzeichnungsgerät definiert', + No_recorder_selected: 'Kein Aufzeichnungsgerät ausgewählt', + No_recorder_model_selected: 'Kein Aufzeichnungsgerätemodell ausgewählt', + Model: 'Modell', + list: 'Liste', + recorder_model: 'Aufzeichnungsgerätemodell', + recorder_models: 'Aufzeichnungsgerätemodellen', + description: 'Beschreibung', + network_name: 'Netzwerkname', + ip: 'IP (v4)', + ipv6: 'IP v6', + may_be_left_blank: 'kann ggf. leer gelassen werden', + rooms_defined: 'Es ist kein Raum definiert! | Ein Raum ist definiert | {num} Räume sind definiert', + recorders_defined: 'Es ist kein Aufzeichnungsgerät definiert! | Ein Aufzeichnungsgerät ist definiert | ' + + '{num} Aufzeichnungsgeräte sind definiert', + recorder_models_defined: 'Es ist kein Aufzeichnungsgerätemodell definiert | ' + + 'Ein Aufzeichnungsgerätemodell ist definiert' + + ' | {num} Aufzeichnungsgerätemodelle sind definiert', + no: 'nein', + yes: 'ja', + create: 'anlegen', + and: 'und', + number: 'Nummer', + delete: 'löschen', + requires_username: 'Nutzername benötigt', + requires_password: 'Passwort benötigt', + ssh_port: 'SSH Port', + telnet_port: 'Telnet Port', + }, en: { welcomeMsg: 'Welcome to Your Vue.js + TypeScript App', guide: 'For a guide and recipes on how to configure / customize this project,', @@ -12,8 +87,72 @@ const messages = { plugins: 'Installed CLI Plugins', links: 'Essential Links', ecosystem: 'Ecosystem', + Building_number: 'Building number', building_number: 'Building #', building_name: 'Building', + Manage_rooms: 'Manage rooms', + Manage_recorders: 'Manage recorders', + Create_a_new_recorder: 'Create a new recorder', + Create_a_new_room: 'Create a new room', + Recorder_name: 'Recorder name', + Recorder: 'Recorder', + recorder: 'recorder', + Recorders: 'Recorders', + recorders: 'recorders', + command: 'command', + commands: 'commands', + Commands: 'Commands', + virtual_commands: 'virtual commands', + admin: 'admin', + name: 'name', + alternate_name: 'alternate name', + group: 'group', + created: 'created', + Comments: 'comments', + comments: 'comments', + comment: 'comment', + Room: 'room', + room: 'room', + Rooms: 'Rooms', + rooms: 'rooms', + Room_number: 'Room number', + room_number: 'room number', + user: 'user', + username: 'username', + password: 'password', + first_name: 'first name', + last_name: 'last name', + nickname: 'nickname', + set_your_nickname: 'Set your nickname', + notes: 'notes', + List_create_and_delete: 'List_create_and_delete', + no_recorder_defined: 'no recorder defined', + No_recorder_selected: 'No recorder selected', + No_recorder_model_selected: 'No recorder model selected', + Model: 'Model', + list: 'list', + recorder_model: 'recorder model', + recorder_models: 'recorder models', + description: 'description', + network_name: 'network name', + ip: 'IP (v4)', + ipv6: 'IP v6', + may_be_left_blank: 'may be left blank', + rooms_defined: 'No room defined yet! | There is one room defined | There are {num} rooms defined', + recorders_defined: 'No recorder defined yet! | There is one recorder defined | ' + + 'There are {num} recorders defined', + recorder_models_defined: 'No recorder model defined yet! | There is one recorder model defined | ' + + 'There are {num} recorder models defined', + no: 'no', + yes: 'yes', + and: 'and', + delete: 'delete', + create: 'create', + number: 'number', + requires_username: 'requires username', + requires_password: 'requires password', + ssh_port: 'SSH Port', + telnet_port: 'Telnet Port', }, es: { welcomeMsg: 'Bienvenido a tu aplicación Vue.js + TypeScript', @@ -27,7 +166,7 @@ const messages = { export default new VueI18n({ - locale: 'en', // set locale - fallbackLocale: 'es', // set fallback locale + locale: 'de', // set locale + fallbackLocale: 'en', // set fallback locale messages, // set locale messages }); diff --git a/src/views/Home.vue b/src/views/Home.vue index 52befe0..9662021 100644 --- a/src/views/Home.vue +++ b/src/views/Home.vue @@ -1,12 +1,7 @@