env variables usage, more form elements

This commit is contained in:
scammo 2021-06-14 15:02:53 +02:00
parent 7a616b5083
commit 897f0390ec
4 changed files with 81 additions and 19 deletions

View File

@ -9,12 +9,12 @@ npm install
### Compiles and hot-reloads for development ### Compiles and hot-reloads for development
``` ```
npm run serve VUE_APP_API_URL=localhost:8000 npm run serve
``` ```
### Compiles and minifies for production ### Compiles and minifies for production
``` ```
npm run build VUE_APP_API_URL=localhost:8000 npm run build
``` ```
### Lints and fixes files ### Lints and fixes files
@ -26,3 +26,6 @@ npm run lint
See [Configuration Reference](https://cli.vuejs.org/config/). See [Configuration Reference](https://cli.vuejs.org/config/).
Vorraussetzung: Node & NPM Vorraussetzung: Node & NPM
### Enviroment Variable
VUE_APP_API_URL ist die Enviroment Variable mit der die Adresse der API übergeben wird

View File

@ -26,6 +26,7 @@
</div> </div>
<button type="submit" class="btn btn-primary mb-4">Login</button> <button type="submit" class="btn btn-primary mb-4">Login</button>
</form> </form>
<a href="https://resetpw.wtf-eg.de/">Globales WTF Passwort zurücksetzen</a>
<div class="alert alert-danger mb-4 mt-4" role="alert" v-if="showErrorMessage"> <div class="alert alert-danger mb-4 mt-4" role="alert" v-if="showErrorMessage">
Mit deinen Login Daten ist ein Fehler aufgetreten. Versuch es nochmal oder <a href="https://resetpw.wtf-eg.de/">erzeuge ein neues Passwort</a>. Mit deinen Login Daten ist ein Fehler aufgetreten. Versuch es nochmal oder <a href="https://resetpw.wtf-eg.de/">erzeuge ein neues Passwort</a>.
</div> </div>
@ -40,12 +41,19 @@ import axios from 'axios'
export default { export default {
name: "Index", name: "Index",
data(){
return {
showErrorMessage: false,
email: '',
password: ''
}
},
methods: { methods: {
async submitLogin(){ async submitLogin(){
this.showErrorMessage = false this.showErrorMessage = false
try{ try{
const loginResult = await axios.post( const loginResult = await axios.post(
`${this.apiUrl}/login`, `${process.env.VUE_APP_API_URL}/users/login`,
{ {
email: this.email, email: this.email,
password: this.password password: this.password
@ -63,13 +71,6 @@ export default {
} }
} }
},
data(){
return {
showErrorMessage: false,
email: '',
password: ''
}
} }
} }
</script> </script>

View File

@ -36,14 +36,14 @@ export default {
this.showErrorMessage = false this.showErrorMessage = false
try{ try{
const loginResult = await axios.post( const loginResult = await axios.post(
`${this.apiUrl}/search`, `${process.env.VUE_APP_API_URL}/search`,
// Beispiel Hafte Daten // Beispiel Hafte Daten
{ {
searchText: this.searchText, searchText: this.searchText,
}) })
if(loginResult.status === 200){ if(loginResult.status === 200){
//success login //success login
router.push({path: 's/search'}) this.router.push({path: 's/search'})
} }
else{ else{
this.showErrorMessage = true this.showErrorMessage = true

View File

@ -1,11 +1,69 @@
<template> <template>
<div class="container"> <div class="container">
<h1>Profil Ändern</h1> <h1>Profil Ändern</h1>
<form @submit.prevent="submitForm()">
<div class="row">
<div class="col-6 col-xs-12">
<label for="nickname" class="form-label">Nickname:</label>
<input
type="text"
class="form-control"
id="nickname"
v-model="nickname"
required
/>
</div>
<div class="col-6 col-xs-12">
<label for="nickname" class="form-label">Pronomen:</label>
<input
type="text"
class="form-control"
id="pronouns"
v-model="pronouns"
required
/>
<div id="emailHelp" class="form-text">Z.B.: Er/Ihn, Sie/Ihr, Es etc..</div>
</div>
</div>
<div class="row">
<div class="col-12 col-xs-12">
<label for="freetext" class="form-label">Freitext Vorstellung:</label>
<textarea class="form-control" id="freetext" rows="3" v-model="freetext"></textarea>
</div>
<div class="col-12 col-xs-12">
<label for="freetext" class="form-label">Ehrentamtliche Arbeit:</label>
<textarea class="form-control" id="freetext" rows="3" v-model="freetext"></textarea>
</div>
</div> </div>
<button type="submit" class="btn btn-primary mb-4">Speichern</button>
<div
class="alert alert-danger mb-4 mt-4"
role="alert"
v-if="showErrorMessage"
>
Es ist Fehler aufgetreten
</div>
</form>
</div>
</template> </template>
<script> <script>
export default { export default {
name: 'profileEdit' name: "profileEdit",
} created() {
// get user profile by jwt tocken and fill the form details
},
data() {
return {
showErrorMessage: false,
nickname: "",
pronouns: "",
freetext: "",
freetext: "",
};
},
methods: {
submitForm() {},
},
};
</script> </script>