adm_tueit/TueIT_App
2
0
Fork 0
Code Issues 3 Pull Requests 3 Packages Projects Releases Wiki Activity

implemented connection to the backend

Browse Source
This commit is contained in:
selina.mail
2024-02-06 17:18:37 +01:00
parent 876d066f3d
commit 73d0b89b4d
11 changed files with 409 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

211
components/LoginForm.vue
View File

@ -32,47 +32,198 @@
</div>
</div>
</div>
<div v-if="isError" class="form-field-error-msg" id="password-field">
<label>
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']"> {{ errorMsg }} </div>
</label>
</div>
<input type="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="login-button" value="Login"
@click="handleLogin">
<input type="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="login-button" value="Signup"
@click="testFunctionSignup">
</form>
</template>
<script setup>
import { ref } from 'vue';
// import LoginService from '../server/loginService.js';
import Axios from '../axios.config.js';
import serversideConfig from '../serversideConfig.js';
const darkMode = ref(true);
const isError = ref(false);
const errorMsg = ref('');
const handleLogin = async () => {
isError.value = false;
errorMsg.value = '';
const username = document.getElementById('username-input').value;
const password = document.getElementById('password-input').value;
const requestBody = {
username: username,
password: password,
}
try {
let res = await Axios.post(`https://${serversideConfig.url}:3000/api/login`, requestBody);
// something to do with the res?
console.log(res.data)
// sucessfully logged in
this.$router.push('/')
} catch (err) {
// handle the error
console.log(err.response.statusText)
isError.value = true;
errorMsg.value = err.response.statusText;
}
}
const testFunctionSignup = async () => {
isError.value = false;
errorMsg.value = '';
const username = 'maria'
const password = 'maria123'
const password_repeat = 'maria123'
const fullName = 'hallo'
const email = 'test.sdj@web.de'
const phonenumber = '015736283729'
const address = 'Strasse'
const city = 'tuebingen'
const postcode = '72121'
const adminBool = false
const technician1Bool = false
const technician2Bool = false
const technicianMonitoringBool = false
const merchantBool = false
const internBool = true
const requestBody = {
username: username,
password: password,
password_repeat: password_repeat,
fullName: fullName,
email: email,
phonenumber: phonenumber,
address: address,
city: city,
postcode: postcode,
adminBool: adminBool,
technician1Bool: technician1Bool,
technician2Bool: technician2Bool,
technicianMonitoringBool: technicianMonitoringBool,
merchantBool: merchantBool,
internBool: internBool,
}
try {
let res = await Axios.post(`https://${serversideConfig.url}:3000/api/signup`, requestBody);
// something to do with the res?
console.log(res.data)
} catch (err) {
// handle the error
console.log(err.response.statusText)
isError.value = true;
errorMsg.value = err.response.statusText;
}
}
</script>
<script>
export default {
name: "LoginForm",
methods: {
async handleLogin() {
const username = document.getElementById('username-input').value;
const password = document.getElementById('password-input').value;
const requestBody = {
username: username,
password: password,
}
try {
let res = await Axios.post('/api/login', requestBody);
// something to do with the res?
console.log(res)
// sucessfully logged in
this.$router.push('/')
} catch (err) {
// handle the error
console.log(err.message)
}
data() {
return {
// isError: false,
// errorMsg: '',
}
}
},
// methods: {
// async handleLogin() {
// this.isError = false;
// this.errorMsg = '';
// const username = document.getElementById('username-input').value;
// const password = document.getElementById('password-input').value;
// const requestBody = {
// username: username,
// password: password,
// }
// try {
// let res = await Axios.post(`https://${serversideConfig.url}:3000/api/login`, requestBody);
// // something to do with the res?
// console.log(res.data)
// // sucessfully logged in
// this.$router.push('/')
// } catch (err) {
// // handle the error
// console.log(err.response.statusText)
// this.isError = true;
// this.errorMsg = err.response.statusText;
// }
// },
// async testFunctionSignup() {
// this.isError = false;
// this.errorMsg = '';
// const username = 'maria'
// const password = 'maria123'
// const password_repeat = 'maria123'
// const fullName = 'hallo'
// const email = 'test.sdj@web.de'
// const phonenumber = '015736283729'
// const address = 'Strasse'
// const city = 'tuebingen'
// const postcode = '72121'
// const adminBool = false
// const technician1Bool = false
// const technician2Bool = false
// const technicianMonitoringBool = false
// const merchantBool = false
// const internBool = true
// const requestBody = {
// username: username,
// password: password,
// password_repeat: password_repeat,
// fullName: fullName,
// email: email,
// phonenumber: phonenumber,
// address: address,
// city: city,
// postcode: postcode,
// adminBool: adminBool,
// technician1Bool: technician1Bool,
// technician2Bool: technician2Bool,
// technicianMonitoringBool: technicianMonitoringBool,
// merchantBool: merchantBool,
// internBool: internBool,
// }
// try {
// let res = await Axios.post(`https://${serversideConfig.url}:3000/api/signup`, requestBody);
// // something to do with the res?
// console.log(res.data)
// } catch (err) {
// // handle the error
// console.log(err.response.statusText)
// this.isError = true;
// this.errorMsg = err.response.statusText;
// }
// }
// }
}
</script>
@ -89,7 +240,7 @@ export default {
align-items: center;
justify-content: center;
width: 31.25rem;
height: 31.25rem;
height: 33rem;
border-radius: 0.625rem;
padding: 2.5rem 1.875rem;
gap: 1.875rem;
@ -165,6 +316,16 @@ export default {
gap: 0.625rem;
}
.form-field-error-msg {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
width: 25rem;
height: 3rem;
gap: 0.4rem;
}
label {
display: flex;
flex-direction: row;