summaryrefslogtreecommitdiffstats
path: root/webapp/src/components/AccountModule.vue
diff options
context:
space:
mode:
Diffstat (limited to 'webapp/src/components/AccountModule.vue')
-rw-r--r--webapp/src/components/AccountModule.vue265
1 files changed, 131 insertions, 134 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 {