feature: gradido member profil page step 1

This commit is contained in:
ogerly 2021-05-20 16:30:18 +02:00
parent 747e8b66a7
commit 09ec072d2e
4 changed files with 137 additions and 74 deletions

View File

@ -19,17 +19,25 @@
"en": "English" "en": "English"
}, },
"form": { "form": {
"cancel":"Abbrechen", "cancel": "Abbrechen",
"reset": "Zurücksetzen", "reset": "Zurücksetzen",
"close":"schließen", "close": "schließen",
"edit": "bearbeiten",
"save": "speichern",
"receiver":"Empfänger", "receiver":"Empfänger",
"sender":"Absender", "sender":"Absender",
"username":"Username",
"firstname":"Vorname", "firstname":"Vorname",
"lastname":"Nachname", "lastname":"Nachname",
"description": "Beschreibung",
"email":"E-Mail", "email":"E-Mail",
"email_repeat":"eMail wiederholen", "email_repeat":"eMail wiederholen",
"password":"Passwort", "password":"Passwort",
"password_repeat":"Passwort wiederholen", "password_repeat":"Passwort wiederholen",
"password_old":"altes Passwort",
"password_new":"neues Passwort",
"password_new_repeat":"neues Passwort wiederholen",
"change": "ändern",
"amount":"Betrag", "amount":"Betrag",
"memo":"Nachricht für den Empfänger", "memo":"Nachricht für den Empfänger",
"message":"Nachricht", "message":"Nachricht",
@ -49,7 +57,8 @@
"validation": { "validation": {
"double": "Das Feld {field} muss eine Dezimalzahl mit zwei Nachkommastellen sein", "double": "Das Feld {field} muss eine Dezimalzahl mit zwei Nachkommastellen sein",
"is-not": "Du kannst Dir selbst keine Gradidos überweisen" "is-not": "Du kannst Dir selbst keine Gradidos überweisen"
} },
"change_username_info": "Das ändern des Usernamens bedarf mehrerer Schritte."
}, },
"error": { "error": {
"error":"Fehler" "error":"Fehler"
@ -93,7 +102,9 @@
"add_work":"neuer Gemeinschaftsbeitrag" "add_work":"neuer Gemeinschaftsbeitrag"
}, },
"profil": { "profil": {
"transactions":"transactions", "edit": {
},
"activity": { "activity": {
"chart":"Gemeinschaftsstunden Chart", "chart":"Gemeinschaftsstunden Chart",
"new":"Neue Gemeinschaftsstunden eintragen", "new":"Neue Gemeinschaftsstunden eintragen",

View File

@ -1,7 +1,7 @@
{ {
"message": "hello gradido !!", "message": "hello gradido !!",
"welcome":"Welcome!", "welcome":"Welcome!",
"community": "Gemeinschaft", "community": "Community",
"logout":"Logout", "logout":"Logout",
"login":"Login", "login":"Login",
"signup": "Sign up", "signup": "Sign up",
@ -22,14 +22,22 @@
"cancel":"Cancel", "cancel":"Cancel",
"reset": "Reset", "reset": "Reset",
"close":"Close", "close":"Close",
"edit": "Edit",
"save": "save",
"receiver":"Receiver", "receiver":"Receiver",
"sender":"Sender", "sender":"Sender",
"username":"Username",
"firstname":"Firstname", "firstname":"Firstname",
"lastname":"Lastname", "lastname":"Lastname",
"description": "Description",
"email":"Email", "email":"Email",
"email_repeat":"Repeat Email", "email_repeat":"Repeat Email",
"password":"Password", "password":"Password",
"password_repeat":"Repeat password", "password_repeat":"Repeat password",
"password_old":"Old password",
"password_new":"New password",
"password_new_repeat":"Repeat new password",
"change": "change",
"amount":"Amount", "amount":"Amount",
"memo":"Message for the recipient", "memo":"Message for the recipient",
"message":"Message", "message":"Message",
@ -49,7 +57,8 @@
"validation": { "validation": {
"double": "The {field} field must be a decimal with two digits", "double": "The {field} field must be a decimal with two digits",
"is-not": "You cannot send Gradidos to yourself" "is-not": "You cannot send Gradidos to yourself"
} },
"change_username_info": "Changing the username requires several steps."
}, },
"error": { "error": {
"error":"Error" "error":"Error"

View File

@ -94,11 +94,11 @@ export default {
transactionCount: 0, transactionCount: 0,
pending: true, pending: true,
UserProfileTestData: { UserProfileTestData: {
username: 'Mustermax',
name: 'Max', name: 'Max',
lastname: 'Mustermann', lastname: 'Mustermann',
desc: desc:
'Max Mustermann seine Beschreibung. Max Mustermann seine Beschreibung. Max Mustermann seine Beschreibung. Max Mustermann seine Beschreibung. ', 'Max Mustermann seine Beschreibung. Max Mustermann seine Beschreibung. Max Mustermann seine Beschreibung. Max Mustermann seine Beschreibung. ',
img: '12345.png',
}, },
} }
}, },

View File

@ -15,25 +15,25 @@
</div> </div>
<div> <div>
<span class="heading">{{ $n(transactionCount) }}</span> <span class="heading">{{ $n(transactionCount) }}</span>
<span class="description">Transactions</span> <span class="description">{{ $t('transactions') }}</span>
</div> </div>
<div> <div>
<span class="heading">--</span> <span class="heading">--</span>
<span class="description">Community</span> <span class="description">{{ $t('community') }}</span>
</div> </div>
</div> </div>
</b-col> </b-col>
</b-row> </b-row>
<b-container> <b-container>
<b-row class="mb-4 text-right"> <b-row class="mb-4 text-right">
<b-col class="text-right" @click="edit = !edit"> <b-col class="text-right" @click="edit_userdata = !edit_userdata">
<span v-if="edit">bearbeiten</span> <span v-if="edit_userdata">{{ $t('form.edit') }}</span>
<div v-else> <div v-else>
<span> <span>
bearbeiten {{ $t('form.edit') }}
<b>abbrechen</b> <b>{{ $t('form.cancel') }}</b>
</span> </span>
<span class="ml-4 text-success display-4">speichern</span> <span class="ml-4 text-success display-4">{{ $t('form.save') }}</span>
</div> </div>
</b-col> </b-col>
</b-row> </b-row>
@ -41,27 +41,33 @@
<div> <div>
<b-row class="mb-3"> <b-row class="mb-3">
<b-col class="col-lg-3 col-md-10 col-sm-10 text-md-left text-lg-right"> <b-col class="col-lg-3 col-md-10 col-sm-10 text-md-left text-lg-right">
<small>Vorname</small> <small>{{ $t('form.firstname') }}</small>
</b-col>
<b-col v-if="edit_userdata" class="col-md-9 col-sm-10">
{{ UserProfileTestData.name }}
</b-col> </b-col>
<b-col v-if="edit" class="col-md-9 col-sm-10">{{ UserProfileTestData.name }}</b-col>
<b-col v-else class="col-md-9 col-sm-10"> <b-col v-else class="col-md-9 col-sm-10">
<b-input type="text" v-model="UserProfileTestData.name"></b-input> <b-input type="text" v-model="UserProfileTestData.name"></b-input>
</b-col> </b-col>
</b-row> </b-row>
<b-row class="mb-3"> <b-row class="mb-3">
<b-col class="col-lg-3 col-md-10 col-sm-10 text-md-left text-lg-right"> <b-col class="col-lg-3 col-md-10 col-sm-10 text-md-left text-lg-right">
<small>Nachname</small> <small>{{ $t('form.lastname') }}</small>
</b-col>
<b-col v-if="edit_userdata" class="col-md-9 col-sm-10">
{{ UserProfileTestData.lastname }}
</b-col> </b-col>
<b-col v-if="edit" class="col-md-9 col-sm-10">{{ UserProfileTestData.lastname }}</b-col>
<b-col v-else class="col-md-9 col-sm-10"> <b-col v-else class="col-md-9 col-sm-10">
<b-input type="text" v-model="UserProfileTestData.lastname"></b-input> <b-input type="text" v-model="UserProfileTestData.lastname"></b-input>
</b-col> </b-col>
</b-row> </b-row>
<b-row class="mb-3"> <b-row class="mb-3">
<b-col class="col-lg-3 col-md-10 col-sm-10 text-md-left text-lg-right"> <b-col class="col-lg-3 col-md-10 col-sm-10 text-md-left text-lg-right">
<small>Beschreibung</small> <small>{{ $t('form.description') }}</small>
</b-col>
<b-col v-if="edit_userdata" class="col-md-9 col-sm-10">
{{ UserProfileTestData.desc }}
</b-col> </b-col>
<b-col v-if="edit" class="col-md-9 col-sm-10">{{ UserProfileTestData.desc }}</b-col>
<b-col v-else class="col-md-9 col-sm-10"> <b-col v-else class="col-md-9 col-sm-10">
<b-textarea <b-textarea
v-value="UserProfileTestData.dec" v-value="UserProfileTestData.dec"
@ -71,72 +77,107 @@
></b-textarea> ></b-textarea>
</b-col> </b-col>
</b-row> </b-row>
<b-row class="mb-3">
<b-col class="col-lg-3 col-md-10 col-sm-10 text-md-left text-lg-right">
<small>UserBild</small>
</b-col>
<b-col v-if="edit" class="col-md-9 col-sm-10">{{ UserProfileTestData.img }}</b-col>
<b-col v-else class="col-md-9 col-sm-10">
<vue-qrcode :value="$store.state.email" type="image/png"></vue-qrcode>
<b-form-file accept="image/jpeg, image/png, image/gif" v-model="UserProfileTestData.img"></b-form-file>
</b-col>
</b-row>
<b-row class="mb-3">
<b-col class="col-lg-3 col-md-10 col-sm-10 text-md-left text-lg-right">
<small>E-Mail</small>
</b-col>
<b-col v-if="edit" class="col-md-9 col-sm-10">{{ $store.state.email }}</b-col>
<b-col v-else class="col-md-9 col-sm-10">
<b-input type="text" v-model="$store.state.email"></b-input>
</b-col>
</b-row>
</div> </div>
<hr /> <hr />
<b-container> <b-container>
<b-row class="mb-4 text-right"> <b-row class="mb-4 text-right">
<b-col class="text-right" @click="editpwd = !editpwd"> <b-col class="text-right" @click="edit_email = !edit_email">
<span v-if="editpwd">Passwort ändern</span> <span v-if="edit_email">E-Mail {{ $t('form.change') }}</span>
<div v-else> <div v-else>
<span> <span>
Passwort ändern E-Mail {{ $t('form.change') }}
<b>abbrechen</b> <b>{{ $t('form.cancel') }}</b>
</span> </span>
<span class="ml-4 text-success display-4">speichern</span> <span class="ml-4 text-success display-4">{{ $t('form.save') }}</span>
</div>
</b-col>
</b-row>
</b-container>
<b-row class="mb-3">
<b-col class="col-lg-3 col-md-10 col-sm-10 text-md-left text-lg-right">
<small>E-Mail</small>
</b-col>
<b-col v-if="edit_email" class="col-md-9 col-sm-10">{{ $store.state.email }}</b-col>
<b-col v-else class="col-md-9 col-sm-10">
<b-input type="text" v-model="$store.state.email"></b-input>
</b-col>
</b-row>
<hr />
<b-container>
<b-row class="mb-4 text-right">
<b-col class="text-right" @click="edit_username = !edit_username">
<span v-if="edit_username">{{ $t('form.username') }} {{ $t('form.change') }}</span>
<div v-else>
<span>
{{ $t('form.username') }} {{ $t('form.change') }}
<b>{{ $t('form.cancel') }}</b>
</span>
<span class="ml-4 text-success display-4">{{ $t('form.save') }}</span>
</div>
</b-col>
</b-row>
</b-container>
<b-row class="mb-3">
<b-col class="col-lg-3 col-md-10 col-sm-10 text-md-left text-lg-right">
<small>{{ $t('form.username') }}</small>
</b-col>
<b-col v-if="edit_username" class="col-md-9 col-sm-10">
@{{ UserProfileTestData.username }}
</b-col>
<b-col v-else class="col-md-9 col-sm-10">
<b-input type="text" v-model="UserProfileTestData.username"></b-input>
<div>
{{ $t('form.change_username_info') }}
</div>
</b-col>
</b-row>
<hr />
<b-container>
<b-row class="mb-4 text-right">
<b-col class="text-right" @click="edit_pwd = !edit_pwd">
<span v-if="edit_pwd">{{ $t('form.password') }} {{ $t('form.change') }}</span>
<div v-else>
<span>
{{ $t('form.password') }} {{ $t('form.change') }}
<b>{{ $t('form.cancel') }}</b>
</span>
<span class="ml-4 text-success display-4">{{ $t('form.save') }}</span>
</div> </div>
</b-col> </b-col>
</b-row> </b-row>
<div v-if="!editpwd"> <div v-if="!edit_pwd">
<b-row class="mb-3"> <b-row class="mb-3">
<b-col class="col-lg-3 col-md-10 col-sm-10 text-md-left text-lg-right"> <b-col class="col-lg-3 col-md-10 col-sm-10 text-md-left text-lg-right">
<small>altes Passwort</small> <small>{{ $t('form.password_old') }}</small>
</b-col> </b-col>
<b-col class="col-md-9 col-sm-10"> <b-col class="col-md-9 col-sm-10">
<b-input type="text" placeholder="altes Passwort"></b-input> <b-input type="text" :placeholder="$t('form.password_old')"></b-input>
</b-col>
</b-col> </b-row>
</b-row> <b-row class="mb-3">
<b-row class="mb-3"> <b-col class="col-lg-3 col-md-10 col-sm-10 text-md-left text-lg-right">
<b-col class="col-lg-3 col-md-10 col-sm-10 text-md-left text-lg-right"> <small>{{ $t('form.password_new') }}</small>
<small>neues Passwort</small> </b-col>
</b-col>
<b-col class="col-md-9 col-sm-10"> <b-col class="col-md-9 col-sm-10">
<b-input type="text" :placeholder="$t('form.password_new')"></b-input>
<b-input type="text" placeholder="neues Passwort"></b-input> </b-col>
</b-row>
</b-col> <b-row class="mb-3">
</b-row> <b-col class="col-lg-3 col-md-10 col-sm-10 text-md-left text-lg-right">
<b-row class="mb-3"> <small>{{ $t('form.password_new_repeat') }}</small>
<b-col class="col-lg-3 col-md-10 col-sm-10 text-md-left text-lg-right"> </b-col>
<small>neues Passwort wiederholen</small>
</b-col>
<b-col class="col-md-9 col-sm-10"> <b-col class="col-md-9 col-sm-10">
<b-input type="text" placeholder="neues Passwort wiederholen"></b-input> <b-input type="text" :placeholder="$t('form.password_new_repeat')"></b-input>
</b-col> </b-col>
</b-row> </b-row>
</div> </div>
</b-container> </b-container>
</b-card> </b-card>
</template> </template>
@ -150,8 +191,10 @@ export default {
}, },
data() { data() {
return { return {
edit: true, edit_userdata: true,
editpwd: true, edit_pwd: true,
edit_email: true,
edit_username: true,
edit_button_text: 'edit', edit_button_text: 'edit',
} }
}, },