Merge pull request #1 from wwi21seb-projekt/second_iteration

Draft second iteration [might contain mistakes]
wwi21seb-projekt · Jan 16, 2024 · 835ee45 · 835ee45
2 parents 6e0b1ba + 09540f3
commit 835ee45
Show file tree

Hide file tree

Showing 18 changed files with 765 additions and 2 deletions.
diff --git a/src/1_login-registration/login.js b/src/1_login-registration/login.js
@@ -25,6 +25,10 @@ function login() {
             document.getElementById('response').innerHTML =
                 '<strong>Status Code:</strong> ' + status + '<br>' +
                 '<pre>' + JSON.stringify(json, null, 2) + '</pre>';
+
+            if (status === 200) {
+                localStorage.setItem('token', json.token); // store token in local storage
+            }
         })
         .catch(error => console.error('Error:', error));
 }
diff --git a/src/2_account-configuration/change_password.html b/src/2_account-configuration/change_password.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Change Password</title>
+    <style>
+        .container {
+            display: flex;
+            justify-content: space-between;
+        }
+        .form-section, .response-section {
+            width: 45%;
+        }
+    </style>
+</head>
+<body>
+<div class="container">
+    <div class="form-section">
+        <h1>Change Password</h1>
+        <label for="oldPassword"></label><input type="password" id="oldPassword" placeholder="Old Password"><br>
+        <label for="newPassword"></label><input type="password" id="newPassword" placeholder="New Password"><br>
+        <button id="changePassword">Change Password</button>
+    </div>
+    <div class="response-section">
+        <h1>Response</h1>
+        <div id="response"></div>
+    </div>
+</div>
+
+<script type="module" src="change_password.js"></script>
+</body>
+</html>
+
diff --git a/src/2_account-configuration/change_password.js b/src/2_account-configuration/change_password.js
@@ -0,0 +1,33 @@
+import { GlobalSettings } from '../global_settings.js';
+
+document.getElementById("changePassword").addEventListener("click", login)
+
+function login() {
+    const changePasswordDTO = {
+        oldPassword: document.getElementById('oldPassword').value,
+        newPassword: document.getElementById('newPassword').value,
+    };
+
+    const token = localStorage.getItem('token')
+
+    fetch(GlobalSettings.apiUrl+'/users', {
+        method: 'PATCH',
+        headers: {
+            'Content-Type': 'application/json',
+            'Authorization': 'Bearer ' + token
+        },
+        body: JSON.stringify(changePasswordDTO)
+    })
+        .then(response => {
+            return response.json().then(json => ({
+                status: response.status,
+                json
+            }));
+        })
+        .then(({ status, json }) => {
+            document.getElementById('response').innerHTML =
+                '<strong>Status Code:</strong> ' + status + '<br>' +
+                '<pre>' + JSON.stringify(json, null, 2) + '</pre>';
+        })
+        .catch(error => console.error('Error:', error));
+}
diff --git a/src/2_account-configuration/change_trivial_information.html b/src/2_account-configuration/change_trivial_information.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Change Trivial Information</title>
+    <style>
+        .container {
+            display: flex;
+            justify-content: space-between;
+        }
+        .form-section, .response-section {
+            width: 45%;
+        }
+    </style>
+</head>
+<body>
+<div class="container">
+    <div class="form-section">
+        <h1>Change Trivial Information</h1>
+        <label for="nickname"></label><input type="text" id="nickname" placeholder="Nickname"><br>
+        <label for="status"></label><input type="text" id="status" placeholder="Status"><br>
+        <button id="changeInformation">Change information</button>
+    </div>
+    <div class="response-section">
+        <h1>Response</h1>
+        <div id="response"></div>
+    </div>
+</div>
+
+<script type="module" src="change_trivial_information.js"></script>
+</body>
+</html>
+
diff --git a/src/2_account-configuration/change_trivial_information.js b/src/2_account-configuration/change_trivial_information.js
@@ -0,0 +1,33 @@
+import { GlobalSettings } from '../global_settings.js';
+
+document.getElementById("changeInformation").addEventListener("click", login)
+
+function login() {
+    const changeInformationDTO = {
+        nickname: document.getElementById('nickname').value,
+        status: document.getElementById('status').value,
+    };
+
+    const token = localStorage.getItem('token')
+
+    fetch(GlobalSettings.apiUrl+'/users', {
+        method: 'PUT',
+        headers: {
+            'Content-Type': 'application/json',
+            'Authorization': 'Bearer ' + token
+        },
+        body: JSON.stringify(changeInformationDTO)
+    })
+        .then(response => {
+            return response.json().then(json => ({
+                status: response.status,
+                json
+            }));
+        })
+        .then(({ status, json }) => {
+            document.getElementById('response').innerHTML =
+                '<strong>Status Code:</strong> ' + status + '<br>' +
+                '<pre>' + JSON.stringify(json, null, 2) + '</pre>';
+        })
+        .catch(error => console.error('Error:', error));
+}
diff --git a/src/2_personal-global-feed/personal_global_feed.html b/src/2_personal-global-feed/personal_global_feed.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Global or Personal Feed</title>
+    <style>
+        .container {
+            display: flex;
+            justify-content: space-between;
+        }
+        .form-section, .response-section {
+            width: 45%;
+        }
+    </style>
+</head>
+<body>
+<div class="container">
+    <div class="form-section">
+        <h1>Global or Personal Feed</h1>
+        <label for="personalFeed">
+            <input type="checkbox" id="personalFeed" name="feedType"> Show Personal Feed (Auth needed)
+        </label><br>
+        <button id="getFeedButton">Get Feed</button>
+    </div>
+
+    <div class="response-section">
+        <h1>Response</h1>
+        <div id="response"></div>
+        <button id="nextPage">Next Page →</button>
+    </div>
+</div>
+
+<script type="module" src="personal_global_feed.js"></script>
+</body>
+</html>
diff --git a/src/2_personal-global-feed/personal_global_feed.js b/src/2_personal-global-feed/personal_global_feed.js
@@ -0,0 +1,94 @@
+import { GlobalSettings } from '../global_settings.js';
+
+document.getElementById("personalFeed").checked = false
+let lastPostId = null
+let limit = 10
+let loggedIn = false
+let personalFeed = false
+let token = ""
+
+document.getElementById("personalFeed").addEventListener("change", function () {
+    token = localStorage.getItem('token')
+    console.log(token)
+    if (token === null) { // if user is not logged in, no personal feed
+        personalFeed = false
+        document.getElementById("personalFeed").checked = false
+    } else {
+        loggedIn = true
+        personalFeed = document.getElementById("personalFeed").checked;
+    }
+
+    resetResponse()
+})
+
+
+document.getElementById("getFeedButton").addEventListener("click", function () {
+    resetResponse()
+    getFeed()
+})
+
+document.getElementById("nextPage").addEventListener("click", function () {
+    getFeed()
+})
+
+function resetResponse() {
+    lastPostId = null
+    document.getElementById('response').innerHTML = ''
+}
+
+function getFeed() {
+
+    // Construct URL
+    let baseUrl = GlobalSettings.apiUrl + '/feed'
+    let paginationUrl
+    let feedTypeUrl
+    if (lastPostId == null) {
+        paginationUrl = '?limit=' + limit
+    } else {
+        paginationUrl = '?postId=' + lastPostId + '&limit=' + limit
+    }
+    if (loggedIn && personalFeed) {
+        feedTypeUrl += '&feedType=personal'
+    } else {
+        feedTypeUrl += '&feedType=global'
+    }
+
+    const url = baseUrl + paginationUrl + feedTypeUrl
+
+    // Fetch data
+    fetch(url, {
+        method: 'GET',
+        headers: {
+            'Content-Type': 'application/json',
+            'Authorization': 'Bearer ' + token
+        },
+    })
+        .then(response => {
+            return response.json()
+        })
+        .then(data => {
+            displayResults(data);
+        })
+        .catch(error => console.error('Error:', error));
+}
+
+function displayResults(data) {
+    const responseDiv = document.getElementById('response')
+    responseDiv.innerHTML = ''
+
+    if (data.records && data.records.length > 0) {
+
+        responseDiv.innerHTML += 'Shown records ' + data.pagination.limit + ' - Total number of records ' + data.pagination.records + '<br><br>'
+
+        data.records.forEach(post => {
+            const postDiv = document.createElement('div');
+            postDiv.innerHTML = `PostId: ${post.postId} Content: ${post.content}, Creation Date: ${post.creationDate}`;
+            responseDiv.appendChild(postDiv);
+
+            lastPostId = post.postId
+        });
+    } else {
+        responseDiv.innerHTML = 'No users found';
+    }
+
+}
diff --git a/src/2_posts/create_post.js b/src/2_posts/create_post.js
@@ -0,0 +1,64 @@
+import { GlobalSettings } from '../global_settings.js';
+
+document.getElementById("createPost").addEventListener("click", create_post)
+
+function create_post() {
+    const content = document.getElementById('content').value;
+    const image = document.getElementById('image').files[0];
+    const token = localStorage.getItem('token')
+
+    if (image == null) {
+        const postCreateRequestDTO = {
+            content: content
+        };
+
+        fetch(GlobalSettings.apiUrl+'/posts', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'Authorization': 'Bearer ' + token
+            },
+            body: JSON.stringify(postCreateRequestDTO)
+        })
+            .then(response => {
+                return response.json().then(json => ({
+                    status: response.status,
+                    json
+                }));
+            })
+            .then(({ status, json }) => {
+                document.getElementById('response').innerHTML =
+                    '<strong>Status Code:</strong> ' + status + '<br>' +
+                    '<pre>' + JSON.stringify(json, null, 2) + '</pre>';
+            })
+            .catch(error => console.error('Error:', error));
+    }
+    else {
+        // Create FormData object
+        let formData = new FormData();
+        formData.append('content', content);
+        if (image) {
+            formData.append('image', image);
+        }
+
+        fetch(GlobalSettings.apiUrl+'/posts', {
+            method: 'POST',
+            headers: {
+                'Authorization': 'Bearer ' + token
+            },
+            body: formData
+        })
+            .then(response => {
+                return response.json().then(json => ({
+                    status: response.status,
+                    json
+                }));
+            })
+            .then(({ status, json }) => {
+                document.getElementById('response').innerHTML =
+                    '<strong>Status Code:</strong> ' + status + '<br>' +
+                    '<pre>' + JSON.stringify(json, null, 2) + '</pre>';
+            })
+            .catch(error => console.error('Error:', error));
+    }
+}
diff --git a/src/2_posts/create_posts.html b/src/2_posts/create_posts.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Create Posts</title>
+    <style>
+        .container {
+            display: flex;
+            justify-content: space-between;
+        }
+        .form-section, .response-section {
+            width: 45%;
+        }
+    </style>
+</head>
+<body>
+<div class="container">
+    <div class="form-section">
+        <h1>Create Posts</h1>
+        <label for="content"></label><input type="text" id="content" placeholder="Content"><br>
+        <input type="file" id="image" accept="image/*"><br>
+        <button id="createPost">Create Post</button>
+    </div>
+    <div class="response-section">
+        <h1>Response</h1>
+        <div id="response"></div>
+    </div>
+</div>
+
+<script type="module" src="create_post.js"></script>
+</body>
+</html>
+