summaryrefslogtreecommitdiffstats
path: root/webapp
diff options
context:
space:
mode:
authorUdo Walter2019-03-31 00:19:15 +0100
committerUdo Walter2019-03-31 00:19:15 +0100
commitec64d08ede734d745821405c2820ac1f4c30b500 (patch)
treec623a782874d374cb5b50a9c599a931ef9387935 /webapp
parent[docs] small text changes (diff)
downloadbas-ec64d08ede734d745821405c2820ac1f4c30b500.tar.gz
bas-ec64d08ede734d745821405c2820ac1f4c30b500.tar.xz
bas-ec64d08ede734d745821405c2820ac1f4c30b500.zip
[webapp] small polishing fixes
Diffstat (limited to 'webapp')
-rw-r--r--webapp/src/components/AccountModule.vue265
-rw-r--r--webapp/src/components/DashboardPage.vue6
-rw-r--r--webapp/src/components/SettingsModule.vue110
3 files changed, 219 insertions, 162 deletions
diff --git a/webapp/src/components/AccountModule.vue b/webapp/src/components/AccountModule.vue
index 1e6511a..2594967 100644
--- a/webapp/src/components/AccountModule.vue
+++ b/webapp/src/components/AccountModule.vue
@@ -1,7 +1,8 @@
<i18n>
{
"en": {
- "accountInfo": "Info",
+ "account": "User Account",
+ "info": "Info",
"deleteAccount": "Delete Account",
"deleteAccountMsg": "Are you sure you want to permnanently delete your account?",
"deleteAccountMsg2": "This action cannot be undone",
@@ -29,7 +30,8 @@
"userInfoChanged": "User informations successfully changed."
},
"de": {
- "accountInfo": "Info",
+ "account": "Benutzerkonto",
+ "info": "Info",
"deleteAccount": "Account Löschen",
"deleteAccountMsg": "Sind sie sicher, dass sie ihren Account entgültig Löschen wollen?",
"deleteAccountMsg2": "Diese Aktion kann nicht rückgängig gemacht werden.",
@@ -71,157 +73,154 @@
>
<v-tab>
<v-icon class="tabbar-tabicon">assignment_ind</v-icon>
- {{ $t('accountInfo') }}
+ {{ $t('account') }}
</v-tab>
</v-tabs>
</v-card>
<v-tabs-items v-model="tab">
<v-tab-item>
- <v-subheader>{{ $t('accountInfo') }}</v-subheader>
- <v-card>
- <v-card-text>
- <v-layout wrap>
+ <v-subheader>{{ $t('info') }}</v-subheader>
+ <v-card>
+ <v-card-text>
+ <v-layout wrap>
- <v-flex lg3 md6 sm6 xs12 order-lg2 order-xs2>
- <v-layout column>
- <div class="info-input">
- <div class="body-2 info-heading"><v-icon>account_circle</v-icon><span>{{ $t('username') }}</span></div>
- <div class="info-text">{{ user.username }}</div>
- </div>
- </v-layout>
- </v-flex>
-
- <v-flex lg3 md6 sm6 xs12 order-lg4 order-xs4>
- <v-layout column>
- <div class="info-input">
- <div class="body-2 info-heading"><v-icon>label</v-icon><span>{{ $t('name') }}</span></div>
- <div v-if="!editInfoMode" class="info-text">{{ user.name }}</div>
- <v-text-field v-else v-model="infoName"></v-text-field>
- </div>
- </v-layout>
- </v-flex>
-
- <v-flex lg3 md6 sm6 xs12 order-lg6 order-xs6>
- <v-layout column>
- <div class="info-input">
- <div class="body-2 info-heading"><v-icon>email</v-icon><span>{{ $t('email') }}</span></div>
- <div v-if="!editInfoMode" class="info-text">{{ user.email }}</div>
- <v-text-field v-else v-model="infoEmail" :rules="emailRules" ref="emailField" validate-on-blur></v-text-field>
- </div>
- </v-layout>
- </v-flex>
+ <v-flex lg3 md6 sm6 xs12 order-lg2 order-xs2>
+ <v-layout column>
+ <div class="info-input">
+ <div class="body-2 info-heading"><v-icon>account_circle</v-icon><span>{{ $t('username') }}</span></div>
+ <div class="info-text">{{ user.username }}</div>
+ </div>
+ </v-layout>
+ </v-flex>
- <v-flex lg3 md6 sm6 xs12 order-lg7 order-md3 order-sm3 order-xs1 class="text-xs-right">
+ <v-flex lg3 md6 sm6 xs12 order-lg4 order-xs4>
+ <v-layout column>
<div class="info-input">
- <div v-if="!editInfoMode">
- <v-btn color="primary" flat @click="editInfo" class="info-buttons">
- <v-icon left>create</v-icon>{{ $t('edit') }}
- </v-btn>
- </div>
- <div v-else>
- <v-btn color="primary" flat @click="cancelEditInfo" class="info-buttons">{{ $t('cancel') }}</v-btn>
- <v-btn color="primary" @click="submitInfo" class="info-buttons">
- <v-icon left>save</v-icon>{{ $t('save') }}
- </v-btn>
- </div>
+ <div class="body-2 info-heading"><v-icon>label</v-icon><span>{{ $t('name') }}</span></div>
+ <div v-if="!editInfoMode" class="info-text">{{ user.name }}</div>
+ <v-text-field v-else v-model="infoName" class="info-text pa-0" hide-details></v-text-field>
</div>
- </v-flex>
+ </v-layout>
+ </v-flex>
- </v-layout>
- </v-card-text>
- </v-card>
+ <v-flex lg3 md6 sm6 xs12 order-lg6 order-xs6>
+ <v-layout column>
+ <div class="info-input">
+ <div class="body-2 info-heading"><v-icon>email</v-icon><span>{{ $t('email') }}</span></div>
+ <div v-if="!editInfoMode" class="info-text">{{ user.email }}</div>
+ <v-text-field
+ v-else
+ v-model="infoEmail"
+ :rules="emailRules"
+ ref="emailField"
+ validate-on-blur
+ class="info-text pa-0"
+ hide-details
+ ></v-text-field>
+ </div>
+ </v-layout>
+ </v-flex>
- <v-subheader>{{ $t('security') }}</v-subheader>
- <v-card>
- <v-card-text>
- <v-layout wrap>
+ <v-flex lg3 md6 sm6 xs12 order-lg7 order-md3 order-sm3 order-xs1 class="text-xs-right">
+ <div class="info-input">
+ <div v-if="!editInfoMode">
+ <v-btn color="primary" flat @click="editInfo" class="info-buttons">
+ <v-icon left>create</v-icon>{{ $t('edit') }}
+ </v-btn>
+ </div>
+ <div v-else>
+ <v-btn color="primary" flat @click="cancelEditInfo" class="info-buttons">{{ $t('cancel') }}</v-btn>
+ <v-btn color="primary" @click="submitInfo" class="info-buttons">
+ <v-icon left>save</v-icon>{{ $t('save') }}
+ </v-btn>
+ </div>
+ </div>
+ </v-flex>
- <v-flex lg4 md6 sm6 xs12 order-lg1 order-xs2>
- <v-layout column>
- <div class="info-input">
- <div class="body-2 info-heading"><v-icon>lock</v-icon><span>{{ $t('password') }}</span></div>
- <div v-if="!editPasswordMode" class="info-text">********</div>
- <div v-else>
- <v-form ref="passwordForm" v-model="valid" lazy-validation>
- <v-text-field
- type="password"
- v-model="passwordCurrent"
- :rules="currentPasswordRules"
- @input="clearCurrentPasswordErrors"
- >
- <template slot="label">{{ $t('passwordCurrent') }} <label class="error--text">*</label></template>
- </v-text-field>
- <v-text-field
- validate-on-blur
- type="password"
- v-model="passwordNew"
- :rules="passwordRules"
- >
- <template slot="label">{{ $t('passwordNew') }} <label class="error--text">*</label></template>
- </v-text-field>
- <v-text-field
- validate-on-blur
- type="password"
- v-model="passwordConfirm"
- :rules="confirmPasswordRules"
- >
- <template slot="label">{{ $t('passwordConfirm') }} <label class="error--text">*</label></template>
- </v-text-field>
- </v-form>
- </div>
- </div>
- </v-layout>
- </v-flex>
+ </v-layout>
+ </v-card-text>
+ </v-card>
- <v-flex lg4 md6 sm6 xs12 order-lg1 order-xs3 v-if="editPasswordMode">
- <v-layout column>
- <div class="info-input">
- <div class="body-2 info-heading"><v-icon>ballot</v-icon><span>{{ $t('passwordRequirements') }}</span></div>
- <div class="info-text">{{ $t('passwordRequirement1') }}</div>
- <div class="info-text">{{ $t('passwordRequirement2') }}</div>
- <div class="info-text">{{ $t('passwordRequirement3') }}</div>
- <div class="info-text">{{ $t('passwordRequirement4') }}</div>
- <div class="info-text">{{ $t('passwordRequirement5') }}</div>
- </div>
- </v-layout>
- </v-flex>
+ <v-subheader>{{ $t('security') }}</v-subheader>
+ <v-card>
+ <v-card-text>
+ <v-layout wrap>
- <v-flex v-if="!editPasswordMode" lg8 sm6 xs12 order-lg3 order-sm2 order-xs1 class="text-xs-right">
+ <v-flex lg4 md6 sm6 xs12 order-lg1 order-xs2>
+ <v-layout column>
<div class="info-input">
- <v-btn color="primary" flat @click="editPassword" class="info-buttons">
- <v-icon left>create</v-icon>{{ $t('edit') }}
- </v-btn>
+ <div class="body-2 info-heading"><v-icon>lock</v-icon><span>{{ $t('password') }}</span></div>
+ <div v-if="!editPasswordMode" class="info-text">********</div>
+ <div v-else class="info-text">
+ <v-form ref="passwordForm" v-model="valid" lazy-validation>
+ <v-text-field
+ type="password"
+ v-model="passwordCurrent"
+ :rules="currentPasswordRules"
+ @input="clearCurrentPasswordErrors"
+ >
+ <template slot="label">{{ $t('passwordCurrent') }} <label class="error--text">*</label></template>
+ </v-text-field>
+ <v-text-field
+ validate-on-blur
+ type="password"
+ v-model="passwordNew"
+ :rules="passwordRules"
+ >
+ <template slot="label">{{ $t('passwordNew') }} <label class="error--text">*</label></template>
+ </v-text-field>
+ <v-text-field
+ validate-on-blur
+ type="password"
+ v-model="passwordConfirm"
+ :rules="confirmPasswordRules"
+ >
+ <template slot="label">{{ $t('passwordConfirm') }} <label class="error--text">*</label></template>
+ </v-text-field>
+ </v-form>
+ </div>
</div>
- </v-flex>
+ </v-layout>
+ </v-flex>
- <v-flex v-else lg4 sm12 xs12 order-lg3 order-sm1 order-xs1 class="text-xs-right">
+ <v-flex lg4 md6 sm6 xs12 order-lg1 order-xs3 v-if="editPasswordMode">
+ <v-layout column>
<div class="info-input">
- <v-btn color="primary" flat @click="cancelEditPassword" class="info-buttons">{{ $t('cancel') }}</v-btn>
- <v-btn color="primary" @click="submitPassword" class="info-buttons">
- <v-icon left>save</v-icon>{{ $t('save') }}
- </v-btn>
+ <div class="body-2 info-heading"><v-icon>ballot</v-icon><span>{{ $t('passwordRequirements') }}</span></div>
+ <div class="info-text">{{ $t('passwordRequirement1') }}</div>
+ <div class="info-text">{{ $t('passwordRequirement2') }}</div>
+ <div class="info-text">{{ $t('passwordRequirement3') }}</div>
+ <div class="info-text">{{ $t('passwordRequirement4') }}</div>
+ <div class="info-text">{{ $t('passwordRequirement5') }}</div>
</div>
- </v-flex>
+ </v-layout>
+ </v-flex>
- </v-layout>
- </v-card-text>
- </v-card>
+ <v-flex v-if="!editPasswordMode" lg8 sm6 xs12 order-lg3 order-sm2 order-xs1 class="text-xs-right">
+ <div class="info-input">
+ <v-btn color="primary" flat @click="editPassword" class="info-buttons">
+ <v-icon left>create</v-icon>{{ $t('edit') }}
+ </v-btn>
+ </div>
+ </v-flex>
- <v-subheader>{{ $t('TODO REMOVE: Testing stuff') }}</v-subheader>
- <v-card>
- <div style="display: flex; justify-content: center;">
- <v-btn color="primary" @click="newAlert">New Alert</v-btn>
- </div>
- </v-card>
-
- <v-subheader>{{ $t('delete') }}</v-subheader>
- <v-card>
- <div style="display: flex; justify-content: center;">
- <v-btn color="error" class="button" @click="dialog = true"><v-icon left>delete</v-icon>{{ $t('deleteAccount') }}</v-btn>
- </div>
- </v-card>
+ <v-flex v-else lg4 sm12 xs12 order-lg3 order-sm1 order-xs1 class="text-xs-right">
+ <div class="info-input">
+ <v-btn color="primary" flat @click="cancelEditPassword" class="info-buttons">{{ $t('cancel') }}</v-btn>
+ <v-btn color="primary" @click="submitPassword" class="info-buttons">
+ <v-icon left>save</v-icon>{{ $t('save') }}
+ </v-btn>
+ </div>
+ </v-flex>
+ </v-layout>
+ </v-card-text>
+ </v-card>
+ <v-spacer></v-spacer>
+ <div style="display: flex; justify-content: center;">
+ <v-btn color="error" class="delete-button" @click="dialog = true"><v-icon left>delete</v-icon>{{ $t('deleteAccount') }}</v-btn>
+ </div>
</v-tab-item>
</v-tabs-items>
</v-flex>
@@ -356,10 +355,8 @@ export default {
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
-.button {
- margin-top: 20px;
- margin-bottom: 20px;
- width: 95%;
+.delete-button {
+ margin-top: 40px;
}
.info-buttons {
diff --git a/webapp/src/components/DashboardPage.vue b/webapp/src/components/DashboardPage.vue
index 7e3a4c3..1751840 100644
--- a/webapp/src/components/DashboardPage.vue
+++ b/webapp/src/components/DashboardPage.vue
@@ -2,13 +2,13 @@
{
"en": {
"title": "Boot Selection Server",
- "account": "Account",
+ "user": "User",
"settings": "Settings",
"logout": "Logout"
},
"de": {
"title": "Boot Auswahl Server",
- "account": "Konto",
+ "user": "Benutzer",
"settings": "Einstellungen",
"logout": "Abmelden"
}
@@ -80,7 +80,7 @@
<v-list>
<v-list-tile to="/dashboard/account" active-class="">
<v-icon class="user-menu-icon">perm_identity</v-icon>
- <v-list-tile-title>{{ $t('account') }}</v-list-tile-title>
+ <v-list-tile-title>{{ $t('user') }}</v-list-tile-title>
</v-list-tile>
<v-list-tile to="/dashboard/settings" active-class="">
<v-icon class="user-menu-icon">settings</v-icon>
diff --git a/webapp/src/components/SettingsModule.vue b/webapp/src/components/SettingsModule.vue
index a1c2909..8fea4d2 100644
--- a/webapp/src/components/SettingsModule.vue
+++ b/webapp/src/components/SettingsModule.vue
@@ -1,24 +1,24 @@
<i18n>
{
"en": {
+ "ui": "User Interface",
"darkTheme": "Dark Theme",
"coloredTabs": "Colored tabpanels",
"clipped": "Show menu under the top bar",
"mini": "Show icons in collapsed menu",
"language": "Language",
"general": "General",
- "generalSettings": "General settings",
"appearance": "Appearance",
"noAnimations": "Disable animations"
},
"de": {
+ "ui": "Benutzeroberfläche",
"darkTheme": "Dunkles Design",
"coloredTabs": "Tab-Panels einfärben",
"clipped": "Menü an die Hauptleiste andocken",
"mini": "Symbole im eingeklappten Menü anzeigen",
"language": "Sprache",
"general": "Allgemein",
- "generalSettings": "Allgemeine Einstellungen",
"appearance": "Aussehen",
"noAnimations": "Animationen ausschalten"
}
@@ -26,7 +26,7 @@
</i18n>
<template>
- <v-container fill-height :key="key">
+ <v-container :key="key">
<v-layout>
<v-flex xl10 offset-xl1 lg12>
<v-card class="tabbar-card">
@@ -34,35 +34,98 @@
v-model="tab"
centered
grow
+ hide-slider
>
<v-tab>
- <v-icon class="tabbar-tabicon">settings_applications</v-icon>{{ $t('general') }}
- </v-tab>
- <v-tab>
- <v-icon class="tabbar-tabicon">color_lens</v-icon>{{ $t('appearance') }}
+ <v-icon class="tabbar-tabicon">desktop_windows</v-icon>{{ $t('ui') }}
</v-tab>
</v-tabs>
</v-card>
<v-tabs-items v-model="tab">
<v-tab-item>
- <v-subheader>{{ $t('generalSettings') }}</v-subheader>
- <v-card>
- <div class="element-container">
- <v-select :value="store.locale" @input="save('locale', $event)" :items="langChoices" :label="$t('language')" prepend-icon="language" :menu-props="{ offsetY: '' }"></v-select>
+ <v-layout wrap>
+ <v-flex xs12 md6>
+ <div :class="{ 'mr-3': $vuetify.breakpoint.mdAndUp }">
+ <v-subheader>{{ $t('general') }}</v-subheader>
+ <v-card>
+ <v-card-text>
+ <v-select
+ style="max-width: 240px"
+ class="ma-3"
+ :value="store.locale"
+ @input="save('locale', $event)"
+ :items="langChoices"
+ :label="$t('language')"
+ prepend-icon="language"
+ :menu-props="{ offsetY: '' }"
+ hide-details
+ ></v-select>
+ </v-card-text>
+ </v-card>
+ </div>
+ </v-flex>
+ <v-flex xs12 md6>
+ <div :class="{ 'ml-3': $vuetify.breakpoint.mdAndUp }">
+ <v-subheader>{{ $t('appearance') }}</v-subheader>
+ <v-card>
+ <v-card-text>
+ <v-switch
+ class="mx-3 my-3"
+ :input-value="store.dark"
+ @change="save('dark', $event)"
+ :label="$t('darkTheme')" color="primary"
+ prepend-icon="style"
+ hide-details
+ ></v-switch>
+ <v-switch
+ class="mx-3 my-4"
+ :input-value="store.coloredTabs"
+ @change="save('coloredTabs', $event)"
+ :label="$t('coloredTabs')"
+ color="primary"
+ prepend-icon="format_color_fill"
+ hide-details
+ ></v-switch>
+ <v-switch
+ class="mx-3 my-4 hidden-md-and-down"
+ :input-value="store.clipped"
+ @change="save('clipped', $event)"
+ :label="$t('clipped')"
+ color="primary"
+ prepend-icon="view_quilt"
+ hide-details
+ ></v-switch>
+ <v-switch
+ class="mx-3 my-4 hidden-md-and-down"
+ :input-value="store.mini"
+ @change="save('mini', $event)"
+ :label="$t('mini')"
+ color="primary"
+ prepend-icon="view_list"
+ hide-details
+ ></v-switch>
+ <v-switch
+ class="mx-3 my-3"
+ :input-value="store.noAnimations"
+ @change="save('noAnimations', $event)"
+ :label="$t('noAnimations')"
+ color="primary"
+ prepend-icon="visibility_off"
+ hide-details
+ ></v-switch>
+ </v-card-text>
+ </v-card>
</div>
- </v-card>
+ </v-flex>
+ </v-layout>
</v-tab-item>
<v-tab-item>
- <v-subheader>{{ $t('generalSettings') }}</v-subheader>
- <v-card>
- <div class="element-container">
- <v-switch :input-value="store.dark" @change="save('dark', $event)" :label="$t('darkTheme')" color="primary" prepend-icon="style"></v-switch>
- <v-switch :input-value="store.coloredTabs" @change="save('coloredTabs', $event)" :label="$t('coloredTabs')" color="primary" prepend-icon="format_color_fill"></v-switch>
- <v-switch :input-value="store.clipped" @change="save('clipped', $event)" :label="$t('clipped')" color="primary" class="hidden-md-and-down" prepend-icon="view_quilt"></v-switch>
- <v-switch :input-value="store.mini" @change="save('mini', $event)" :label="$t('mini')" color="primary" class="hidden-md-and-down" prepend-icon="view_list"></v-switch>
- <v-switch :input-value="store.noAnimations" @change="save('noAnimations', $event)" :label="$t('noAnimations')" color="primary" prepend-icon="visibility_off"></v-switch>
- </div>
- </v-card>
+ <v-subheader>{{ $t('general') }}</v-subheader>
+ <v-card>
+ <v-card-text>
+ TODO
+ </v-card-text>
+ </v-card>
</v-tab-item>
</v-tabs-items>
</v-flex>
@@ -97,7 +160,4 @@ export default {
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
-.element-container {
- padding: 26px;
-}
</style>