some work at profile component
This commit is contained in:
rchrist
parent
e76581f128
commit
52b04a90a2
@ -61,35 +61,45 @@
|
||||
</q-list>
|
||||
</q-btn-dropdown>
|
||||
</div>
|
||||
<p class="text-h5"> Teammitglieder </p>
|
||||
<q-table
|
||||
:data="teamData"
|
||||
:columns="teamColumns"
|
||||
row-key="name"
|
||||
table-class="my-custom"
|
||||
hide-bottom
|
||||
:pagination.sync="pagination"
|
||||
/>
|
||||
<br/>
|
||||
<p class="text-h5"> Einladungen </p>
|
||||
<q-input outlined filled stack-label v-model="inviteMail"
|
||||
type="text" label="Email des Nutzers"
|
||||
:rules="[val=>validateEmail(val)||'Bitte Email verwenden']"/>
|
||||
<div align="center">
|
||||
<q-btn label="Einladung versenden"
|
||||
color="primary"
|
||||
type="submit"/>
|
||||
<div v-show="boolMyTeam">
|
||||
<p class="text-h5"> Teammitglieder </p>
|
||||
<q-table
|
||||
:data="teamData"
|
||||
:columns="teamColumns"
|
||||
row-key="name"
|
||||
table-class="my-custom"
|
||||
hide-bottom
|
||||
:pagination.sync="pagination"
|
||||
/>
|
||||
<br/>
|
||||
<p class="text-h5"> Einladungen </p>
|
||||
<q-input outlined filled stack-label v-model="inviteMail"
|
||||
type="text" label="Email des Nutzers"
|
||||
:rules="[val=>validateEmail(val)||'Bitte Email verwenden']"/>
|
||||
<div align="center">
|
||||
<q-btn label="Einladung versenden"
|
||||
color="primary"
|
||||
type="submit"/>
|
||||
</div>
|
||||
<br/>
|
||||
<p class="text-h5"> Teamstatus </p>
|
||||
<p>{{currentTeamStatus}}</p>
|
||||
<q-input outlined filled stack-label v-model="teamStatus"
|
||||
type="text" label="Neuer Teamstatus"
|
||||
:rules="[val=>val.length<=160||'Status zu lang!']"/>
|
||||
<div align="center">
|
||||
<q-btn label="Teamstatus aktualisieren"
|
||||
color="primary"
|
||||
type="submit"/>
|
||||
</div>
|
||||
</div>
|
||||
<br/>
|
||||
<p class="text-h5"> Teamstatus </p>
|
||||
<p>{{currentTeamStatus}}</p>
|
||||
<q-input outlined filled stack-label v-model="teamStatus"
|
||||
type="text" label="Neuer Teamstatus"
|
||||
:rules="[val=>val.length<=160||'Status zu lang!']"/>
|
||||
<div align="center">
|
||||
<q-btn label="Teamstatus aktualisieren"
|
||||
color="primary"
|
||||
type="submit"/>
|
||||
<div v-show="boolInvites">
|
||||
|
||||
</div>
|
||||
<div v-show="boolCreateTeam">
|
||||
<q-input outlined filled stack-label v-model="newTeamName" type="text"
|
||||
label="Teamname eingeben"
|
||||
:rules="[val=>val.length>=2||'Name muss mindestens 5 Zeichen lang sein!']"/>
|
||||
</div>
|
||||
</q-tab-panel>
|
||||
|
||||
@ -119,7 +129,6 @@
|
||||
data() {
|
||||
return {
|
||||
tab: 'profile',
|
||||
startedCaches: [],
|
||||
inviteMail: "",
|
||||
currentTeamStatus: "Dienstag 15:00 Treffen zum Blumencache",
|
||||
teamStatus: "",
|
||||
@ -129,6 +138,10 @@
|
||||
teamName: null,
|
||||
teamRanking: null,
|
||||
dropDownSelectedItem: null,
|
||||
boolMyTeam: true,
|
||||
boolInvites: false,
|
||||
boolCreateTeam: false,
|
||||
newTeamName: "",
|
||||
columns: [
|
||||
{
|
||||
name: 'desc',
|
||||
@ -233,12 +246,12 @@
|
||||
this.data[0].userData = this.userName;
|
||||
this.email = JSON.parse(localStorage.getItem('userMail'));
|
||||
this.data[1].userData = this.email;
|
||||
this.getPersonalRanking();
|
||||
this.userRanking = 1234;
|
||||
this.data[2].userData = this.userRanking;
|
||||
this.teamName = "BuGa19Community";
|
||||
this.data[3].userData = this.teamName;
|
||||
this.dropDownSelectedItem = this.teamName;
|
||||
this.teamRanking = "2019";
|
||||
this.teamRanking = 2019;
|
||||
this.data[4].userData = this.teamRanking;
|
||||
},
|
||||
methods: {
|
||||
@ -248,7 +261,7 @@
|
||||
},
|
||||
getPersonalRanking() {
|
||||
const token = JSON.parse(localStorage.getItem('userToken')).token;
|
||||
this.$axios.get('/api/getRankingPlace', {params: {token}})
|
||||
this.$axios.get('/api/getRankingPlace', {token})
|
||||
.then((response) => {
|
||||
this.userRanking = response.data;
|
||||
console.log(response.data);
|
||||
@ -308,8 +321,19 @@
|
||||
dropDownSelectItem(item) {
|
||||
if (item === 'team') {
|
||||
this.dropDownSelectedItem = this.teamName;
|
||||
this.boolMyTeam = true;
|
||||
this.boolInvites = false;
|
||||
this.boolCreateTeam = false;
|
||||
} else if (item === 'Offene Teameinladungen') {
|
||||
this.dropDownSelectedItem = item;
|
||||
this.boolMyTeam = false;
|
||||
this.boolInvites = true;
|
||||
this.boolCreateTeam = false;
|
||||
} else {
|
||||
this.dropDownSelectedItem = item;
|
||||
this.boolMyTeam = false;
|
||||
this.boolInvites = false;
|
||||
this.boolCreateTeam = true;
|
||||
}
|
||||
},
|
||||
}
|
||||
|
||||
@ -7,57 +7,62 @@
|
||||
<div class="">
|
||||
<div class="" style="max-width: 440px">
|
||||
<q-input outlined filled stack-label v-model="user.name" type="text"
|
||||
label="Nutzername eingeben" :rules="[val=>val.length>=2||'Name muss mindestens 2 Zeichen lang sein!']"/>
|
||||
label="Nutzername eingeben"
|
||||
:rules="[val=>val.length>=2||'Name muss mindestens 2 Zeichen lang sein!']"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="">
|
||||
<div class="" style="max-width: 440px">
|
||||
<q-input outlined filled stack-label v-model="user.email" type="text" label="Email eingeben" :rules="[val=>validateEmail(val)||'Email muss valide sein']"/>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="">
|
||||
<div class="" style="max-width: 440px">
|
||||
<q-input outlined filled stack-label v-model="user.email" type="text" label="Email eingeben"
|
||||
:rules="[val=>validateEmail(val)||'Email muss valide sein']"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="">
|
||||
<div class="" style="max-width: 440px">
|
||||
<q-input outlined filled stack-label v-model="user.checkemail" type="text"
|
||||
label="Email erneut eingeben" placeholer="Email" :rules="[val=>val===user.email||'Email stimmt nicht überein']"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="">
|
||||
<div class="" style="max-width: 440px">
|
||||
<q-input outlined filled stack-label v-model="user.checkemail" type="text"
|
||||
label="Email erneut eingeben" placeholer="Email"
|
||||
:rules="[val=>val===user.email||'Email stimmt nicht überein']"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="">
|
||||
<div class="" style="max-width: 440px">
|
||||
<q-input outlined filled stack-label v-model="user.password" type="password"
|
||||
label="Passwort eingeben" :rules="[val=>val.length>=8||'Passwort muss mindestens 8 Zeichen lang sein!']"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="">
|
||||
<div class="" style="max-width: 440px">
|
||||
<q-input outlined filled stack-label v-model="user.password" type="password"
|
||||
label="Passwort eingeben"
|
||||
:rules="[val=>val.length>=8||'Passwort muss mindestens 8 Zeichen lang sein!']"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="">
|
||||
<div class="" style="max-width: 440px">
|
||||
<q-input outlined filled stack-label v-model="user.checkpassword" type="password"
|
||||
label="Passwort erneut eingeben" :rules="[val=>val===user.password||'Passwort stimmt nicht überein']"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="">
|
||||
<div class="" style="max-width: 440px">
|
||||
<q-input outlined filled stack-label v-model="user.checkpassword" type="password"
|
||||
label="Passwort erneut eingeben"
|
||||
:rules="[val=>val===user.password||'Passwort stimmt nicht überein']"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="">
|
||||
<div class="" style="max-width: 440px">
|
||||
<q-btn
|
||||
:disabled="!validationSuccesful"
|
||||
label="Registrieren"
|
||||
color="primary"
|
||||
class="full-width"
|
||||
@click="register()"
|
||||
unelevated
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="">
|
||||
<div class="" style="max-width: 440px">
|
||||
<q-btn
|
||||
:disabled="!validationSuccesful"
|
||||
label="Registrieren"
|
||||
color="primary"
|
||||
class="full-width"
|
||||
@click="register()"
|
||||
unelevated
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
@ -65,23 +70,23 @@
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return{
|
||||
return {
|
||||
user: {
|
||||
name:"",
|
||||
email:"",
|
||||
checkemail:"",
|
||||
name: "",
|
||||
email: "",
|
||||
checkemail: "",
|
||||
password: "",
|
||||
checkpassword: "",
|
||||
},
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
validationSuccesful(){
|
||||
if(this.user.name.length>=2
|
||||
&&this.validateEmail(this.user.email)
|
||||
&&this.user.email===this.user.checkemail
|
||||
&&this.user.password.length>=8
|
||||
&&this.user.password===this.user.checkpassword){
|
||||
validationSuccesful() {
|
||||
if (this.user.name.length >= 2
|
||||
&& this.validateEmail(this.user.email)
|
||||
&& this.user.email === this.user.checkemail
|
||||
&& this.user.password.length >= 8
|
||||
&& this.user.password === this.user.checkpassword) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
@ -97,7 +102,7 @@
|
||||
},
|
||||
register: function () {
|
||||
|
||||
if(this.user.email===this.user.checkemail&&this.user.password===this.user.checkpassword){
|
||||
if (this.user.email === this.user.checkemail && this.user.password === this.user.checkpassword) {
|
||||
const data = {
|
||||
name: this.user.name,
|
||||
password: this.user.password,
|
||||
@ -109,18 +114,19 @@
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
console.log("POST /api/register/ - json: " + JSON.stringify(data));
|
||||
const token = JSON.parse(localStorage.getItem('registerToken')).token;
|
||||
this.$axios.post(process.env.USER_API+'/account/register', data,{
|
||||
this.$axios.post(process.env.USER_API + '/account/register', data, {
|
||||
headers: {
|
||||
'Authorization': 'Bearer ' + token,
|
||||
}
|
||||
})
|
||||
.then((response) => {
|
||||
console.log(response.data);
|
||||
if(response.status === 201){
|
||||
this.$store.commit('dialog/NEW_MESSAGE_DIALOG', { message: "Deine Registrierung war erfolgreich!", title: "Registrierungsprozess", color: "blue"});
|
||||
if (response.status === 201) {
|
||||
this.$store.commit('dialog/NEW_MESSAGE_DIALOG', {
|
||||
message: "Deine Registrierung war erfolgreich!",
|
||||
title: "Registrierungsprozess",
|
||||
color: "blue"
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
@ -147,12 +153,12 @@
|
||||
})
|
||||
} else {
|
||||
|
||||
if(this.user.email!=this.user.checkemail) {
|
||||
if (this.user.email != this.user.checkemail) {
|
||||
this.$store.commit('dialog/NEW_MESSAGE_DIALOG', {
|
||||
message: "Email stimmt nicht überein",
|
||||
title: "Fehler",
|
||||
});
|
||||
} else if (this.user.password!=this.user.checkpassword){
|
||||
} else if (this.user.password != this.user.checkpassword) {
|
||||
this.$store.commit('dialog/NEW_MESSAGE_DIALOG', {
|
||||
message: "Passwort stimmt nicht überein",
|
||||
title: "Fehler",
|
||||
@ -169,7 +175,7 @@
|
||||
|
||||
console.log("GET /api/login/ - json: " + JSON.stringify(logindata));
|
||||
|
||||
this.$axios.post(process.env.USER_API+'/account/login', logindata)
|
||||
this.$axios.post(process.env.USER_API + '/account/login', logindata)
|
||||
.then((response) => {
|
||||
localStorage.setItem('registerToken', JSON.stringify(response.data));
|
||||
})
|
||||
@ -193,7 +199,7 @@
|
||||
message = error.message;
|
||||
}
|
||||
console.log(error.config);
|
||||
this.$store.commit('dialog/NEW_MESSAGE_DIALOG', { message: message, title: header, });
|
||||
this.$store.commit('dialog/NEW_MESSAGE_DIALOG', {message: message, title: header,});
|
||||
})
|
||||
},
|
||||
},
|
||||
|
||||
Loading…
Reference in New Issue
Block a user