From 772ffb2db53e7b0905fe03b3f2a685108f5e6b98 Mon Sep 17 00:00:00 2001 From: "selina.mail" Date: Mon, 22 Jan 2024 19:43:20 +0100 Subject: [PATCH 1/2] communication from client to nuxt server --- components/LoginForm.vue | 61 ++++++++++++++++++++++++++++++++++++++-- server/api/login.ts | 15 ++++++++++ 2 files changed, 73 insertions(+), 3 deletions(-) create mode 100644 server/api/login.ts diff --git a/components/LoginForm.vue b/components/LoginForm.vue index ede85ec..371f95e 100644 --- a/components/LoginForm.vue +++ b/components/LoginForm.vue @@ -32,21 +32,76 @@ - + diff --git a/server/api/login.ts b/server/api/login.ts new file mode 100644 index 0000000..8e5504a --- /dev/null +++ b/server/api/login.ts @@ -0,0 +1,15 @@ +export default defineEventHandler(async (event) => { + const body = await readBody(event) + + if ((body.username == 'test') && (body.password == 'asd')) { + setResponseStatus(event, 202) + return { + login: 'successful' + } + } else { + throw createError({ + statusCode: 400, + statusMessage: 'Login failed', + }) + } +}) From 0c589e3ae02d444511eb59484eacb46e64e55631 Mon Sep 17 00:00:00 2001 From: "selina.mail" Date: Fri, 26 Jan 2024 18:25:46 +0100 Subject: [PATCH 2/2] tried it with axios --- axios.config.js | 15 ++++++++++ components/LoginForm.vue | 56 ++++++++++---------------------------- server/api/login.ts | 29 +++++++++++++++----- server/middleware/login.ts | 17 ++++++++++++ serversideConfig.js | 8 ++++++ 5 files changed, 76 insertions(+), 49 deletions(-) create mode 100644 axios.config.js create mode 100644 server/middleware/login.ts create mode 100644 serversideConfig.js diff --git a/axios.config.js b/axios.config.js new file mode 100644 index 0000000..1b22387 --- /dev/null +++ b/axios.config.js @@ -0,0 +1,15 @@ +import axios from 'axios'; +import serversideConfig from './serversideConfig.js' + +//create axios instance +const Axios = axios.create({ + baseURL: `http://${serversideConfig.url}:${serversideConfig.port}`, + headers: { + // 'Accept': 'application/json', + 'Content-Type': 'application/json', + //Authorization: `Bearer`, + Accept: "*", + }, +}) + +export default Axios; diff --git a/components/LoginForm.vue b/components/LoginForm.vue index 371f95e..61d3f4e 100644 --- a/components/LoginForm.vue +++ b/components/LoginForm.vue @@ -41,6 +41,7 @@ @@ -53,52 +54,23 @@ export default { const username = document.getElementById('username-input').value; const password = document.getElementById('password-input').value; - const { data, error } = await useFetch('/api/login', { - method: 'post', - body: { - username: username, - password: password - } - }) - if (!data.value) { - console.log(error.value) - } else { - console.log(data.value) + const requestBody = { + username: username, + password: password, } - // }).then(res => { - // const data = res.data.value - // const error = res.error.value - // if (error) { - // // dealing error - // // console.log(error) - // } else { - // console.log(data) - // } - // }, error => { - // console.log('exception...') - // console.log(error) - // }) - // console.log(data.value) - // console.log(error) - // } + try { + let res = await Axios.post('/api/login', requestBody); - // // const response = await LoginService.login(data); - // const { response } = await useFetch('/api/login') - // console.log(response) + // something to do with the res? + console.log(res) - - // Axios.post('/api/login', data, { - // headers: { - // 'Content-Type': 'application/json' - // } - // }) - // .then(function (response) { - // console.log(response); - // }) - // .catch(function (error) { - // console.log(error); - // }); + // sucessfully logged in + this.$router.push('/') + } catch (err) { + // handle the error + console.log(err.message) + } } } } diff --git a/server/api/login.ts b/server/api/login.ts index 8e5504a..42f79b5 100644 --- a/server/api/login.ts +++ b/server/api/login.ts @@ -1,15 +1,30 @@ +import { globalUserObject } from "../middleware/login"; + export default defineEventHandler(async (event) => { + const body = await readBody(event) - if ((body.username == 'test') && (body.password == 'asd')) { - setResponseStatus(event, 202) - return { - login: 'successful' - } - } else { + let correctUsername; + let correctPassword; + if (globalUserObject !== null) { + correctUsername = globalUserObject.username; + correctPassword = globalUserObject.password; + } + + let authorized = false; + + if (body.username == correctUsername && body.password == correctPassword) { + authorized = true; + } + + if (!authorized) { throw createError({ statusCode: 400, - statusMessage: 'Login failed', + statusMessage: 'Username or password not valid.', }) } + + setResponseStatus(event, 202) + return 'Successfully logged in.' + }) diff --git a/server/middleware/login.ts b/server/middleware/login.ts new file mode 100644 index 0000000..2ce49b5 --- /dev/null +++ b/server/middleware/login.ts @@ -0,0 +1,17 @@ +let globalUserObject: { [key: string]: any } | null = null; +// let globalUserObject = null; + +export default defineEventHandler((event) => { + + if (event.path.startsWith("/api/login")) { + + // get user object from backend + const userObject = { + username: "test", + password: "asd" + } + globalUserObject = userObject; + } +}) + +export { globalUserObject }; \ No newline at end of file diff --git a/serversideConfig.js b/serversideConfig.js new file mode 100644 index 0000000..427ae6f --- /dev/null +++ b/serversideConfig.js @@ -0,0 +1,8 @@ +const serversideConfig = { + // url: 'tueitapp.tueit.de', + // port: 8000, + url: 'localhost', + port: 3000, +}; + +export default serversideConfig; \ No newline at end of file