diff --git a/frontend/www/profile.html b/frontend/www/profile.html
index f5eef61ff0510de744177a25604df1cf15a09e13..257cedc9b80ec14c56f382413161aa567626e1f9 100644
--- a/frontend/www/profile.html
+++ b/frontend/www/profile.html
@@ -1,67 +1,79 @@
<!DOCTYPE html>
<html lang="en">
+
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Profile</title>
+ <title>Register</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
-
<script src="https://kit.fontawesome.com/0ce6c392ca.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="styles/style.css">
<script src="scripts/navbar.js" type="text/javascript" defer></script>
</head>
+
<body>
<navbar-el></navbar-el>
+<!-- Adapted from https://bootsnipp.com/snippets/z8699 START -->
<div class="container">
- <div class="row">
- <div class="col-lg">
- <h3 class="mt-3">Profile settings</h3>
- </div>
- </div>
- <form class="row g-3" id="form-exercise">
- <div class="col-lg-6 ">
- <label for="inputName" class="form-label">Name</label>
- <input type="text" class="form-control" id="inputName" name="name" readonly>
- </div>
- <div class="col-lg-6"></div>
- <div class="col-lg-6">
- </div>
- <div class="col-lg-6"></div>
- <div class="col-lg-6 ">
- <label for="inputName" class="form-label">Favourite Exercise</label>
- <input type="text" class="form-control" id="inputFavouriteExercise" name="favouriteExercise" readonly>
- </div>
-
- <div class="col-lg-6"></div>
- <div class="col-lg-6">
+ <div class="card mt-3 border-0">
+ <article class="card-body mx-auto">
+ <h4 class="card-title mt-3 text-center">Edit profile</h4>
+ <form id="form-edit-user">
+ <div class="input-group mb-2">
+ <span class="input-group-text"> <i class="fas fa-user"></i> </span>
+ <input name="username" id="username" class="form-control" placeholder="User name" type="text" disabled>
+ </div> <!-- form-group// -->
+ <div class="input-group mb-2">
+ <span class="input-group-text"> <i class="fas fa-envelope"></i> </span>
+ <input name="email" id="email" class="form-control" placeholder="Email address" type="email" required>
+ </div>
+ <div class="input-group mb-2">
+ <span class="input-group-text"> <i class="fas fa-mobile"></i> </span>
+ <input class="form-control" id="phone_number" name="phone_number" placeholder="Phone number" type="text"
+ required>
+ </div> <!-- form-group// -->
+ <div class="input-group mb-2">
+ <span class="input-group-text"> <i class="fas fa-globe"></i> </span>
+ <input class="form-control" id="country" name="country" placeholder="Country" type="text"
+ required>
+ </div> <!-- form-group// -->
+ <div class="input-group mb-2">
+ <span class="input-group-text"> <i class="fas fa-building"></i> </span>
+ <input class="form-control" id="city" name="city" placeholder="City" type="text"
+ required>
+ </div> <!-- form-group// -->
+ <div class="input-group mb-2">
+ <span class="input-group-text"> <i class="fas fa-hotel"></i> </span>
+ <input class="form-control" id="street_address" name="street_address" placeholder="Street address" type="text"
+ required>
+ </div> <!-- form-group// -->
+ <div class="input-group mb-2">
+ <span class="input-group-text"> <i class="fas fa-hotel"></i> </span>
+ <input class="form-control" id="main_gym" name="main_gym" placeholder="Main gym" type="text"
+ required>
+ </div> <!-- form-group// -->
+ <div class="input-group mb-2">
+ <span class="input-group-text"> <i class="fas fa-hotel"></i> </span>
+ <input class="form-control" id="favourite_exercise" name="favourite_exercise" placeholder="Favourite exercise" type="text"
+ required>
+ </div> <!-- form-group// -->
+ <div class="d-grid">
+ <input type="button" class="btn btn-primary" id="btn-create-account"
+ value=" Create Account ">
+ </div> <!-- form-group// -->
+ </form>
+ </article>
+ </div> <!-- card.// -->
- </div>
- <div class="col-lg-6"></div>
- <div class="col-lg-6">
- <label for="inputMuscles" class="form-label">Main gym</label>
- <select class="form-select" name="gymGroup" disabled="true">
- <option value="Legs">SIT</option>
- <option value="Chest">IMPULS</option>
- <option value="Back">3T</option>
- <option value="Arms">STAMINA</option>
- </select>
- </div>
- <div class="col-lg-6"></div>
- <div class="col-lg-6">
- <input type="button" class="btn btn-primary hide" id="btn-ok-exercise" value=" OK ">
- <input type="button" class="btn btn-primary" id="btn-edit-exercise" value=" Edit ">
- <input type="button" class="btn btn-secondary hide" id="btn-cancel-exercise" value="Cancel">
- <input type="button" class="btn btn-danger float-end hide" id="btn-delete-exercise" value="Delete">
- </div>
- <div class="col-lg-6">
-
- </div>
- </form>
</div>
+<!--container end.//-->
+<!-- Adapted from https://bootsnipp.com/snippets/z8699 END -->
+
<script src="scripts/defaults.js"></script>
<script src="scripts/scripts.js"></script>
<script src="scripts/profile.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
</body>
+
</html>
diff --git a/frontend/www/scripts/profile.js b/frontend/www/scripts/profile.js
index ef93e5f775ecbf66b5df2c10a9597ca3bb468a02..66fe64c702d6c2a38b6c59bb500abc10f19971d6 100644
--- a/frontend/www/scripts/profile.js
+++ b/frontend/www/scripts/profile.js
@@ -1,216 +1,71 @@
-let cancelButton;
-let okButton;
-let deleteButton;
-let editButton;
-let oldFormData;
-class MuscleGroup {
- constructor(type) {
- this.isValidType = false;
- this.validTypes = ["SIT", "IMPULS", "3T", "STAMINA"];
- this.type = this.validTypes.includes(type) ? type : undefined;
- };
-
- setMuscleGroupType = (newType) => {
- this.isValidType = false;
-
- if(this.validTypes.includes(newType)){
- this.isValidType = true;
- this.type = newType;
- }
- else{
- alert("Invalid muscle group!");
+async function init() {
+ console.log("Running init")
+ const username = sessionStorage.getItem("username");
+ let userResponse = await sendRequest("GET", `${HOST}/api/users/${username}/`);
+ let user = await userResponse.json().then((val) => {
+ if(val){
+ console.log(val);
+ document.getElementById("username").placeholder = `${val.username}`;
+ document.getElementById("email").placeholder = `${val.email}`;
+ document.getElementById("phone_number").placeholder = `${val.phone_number}`;
+ document.getElementById("country").placeholder = `${val.country}`;
+ document.getElementById("city").placeholder = `${val.city}`;
+ document.getElementById("street_address").placeholder = `${val.street_address}`;
+ document.getElementById("main_gym").placeholder = `${val.main_gym}`;
+ document.getElementById("favourite_exercise").placeholder = `${val.favourite_exercise}`;
}
- };
-
- getMuscleGroupType = () => {
- console.log(this.type, "SWIOEFIWEUFH")
- return this.type;
- }
-}
-
-function handleCancelButtonDuringEdit() {
- console.log("fjpfjhpisdfhøidksfho")
- /*
- setReadOnly(true, "#form-exercise");
- document.querySelector("select").setAttribute("disabled", "")
- okButton.className += " hide";
- deleteButton.className += " hide";
- cancelButton.className += " hide";
- editButton.className = editButton.className.replace(" hide", "");
-
- cancelButton.removeEventListener("click", handleCancelButtonDuringEdit);
-
- let form = document.querySelector("#form-exercise");
- if (oldFormData.has("name")) form.name.value = oldFormData.get("name");
- if (oldFormData.has("favouriteExercise")) form.name.value = oldFormData.get("favouriteExercise");
- if (oldFormData.has("gymGroup")) form.muscleGroup.value = oldFormData.get("gymGroup");
-
- oldFormData.delete("name");
- oldFormData.delete("favouriteExercise");
- oldFormData.delete("gymGroup");
- */
+ }).catch(console.log)
-}
-function handleCancelButtonDuringCreate() {
- window.location.replace("profile.html");
}
-async function createExercise() {
- document.querySelector("select").removeAttribute("disabled")
- console.log("dasdadasda")
- let form = document.querySelector("#form-exercise");
- let formData = new FormData(form);
- let body = {"name": formData.get("name"),
- "description": formData.get("description"),
- "duration": formData.get("duration"),
- "calories": formData.get("calories"),
- "muscleGroup": formData.get("muscleGroup"),
- "unit": formData.get("unit")};
-
- let response = await sendRequest("POST", `${HOST}/api/exercises/`, body);
-
- if (response.ok) {
- window.location.replace("exercises.html");
- } else {
- let data = await response.json();
- let alert = createAlert("Coulds not create new exercise!", data);
- document.body.prepend(alert);
- }
-
+async function createNewUser(event) {
const username = sessionStorage.getItem("username");
- console.log("USERNAME:", username);
- let response2 = await sendRequest("GET", `${HOST}/api/users/${username}/`);
- let data2 = await response2.json();
- console.log("*USER", data2)
- //console.log("USER:", data2.results.map((item) => console.log(item)));
-}
-
-function handleEditExerciseButtonClick() {
- setReadOnly(false, "#form-exercise");
+ let userResponse = await sendRequest("GET", `${HOST}/api/users/${username}/`);
+ let user = await userResponse.json();
- document.querySelector("select").removeAttribute("disabled")
-
- editButton.className += " hide";
- okButton.className = okButton.className.replace(" hide", "");
- cancelButton.className = cancelButton.className.replace(" hide", "");
- deleteButton.className = deleteButton.className.replace(" hide", "");
-
- cancelButton.addEventListener("click", handleCancelButtonDuringEdit);
-
- let form = document.querySelector("#form-exercise");
- oldFormData = new FormData(form);
-}
+ let form = document.querySelector("#form-edit-user");
+ console.log(form);
+ let formData = new FormData(form);
+ /*
+ let response = await sendRequest("POST", `${HOST}/api/users/`, formData, "");
-async function deleteExercise(id) {
- let response = await sendRequest("DELETE", `${HOST}/api/exercises/${id}/`);
if (!response.ok) {
let data = await response.json();
- let alert = createAlert(`Could not delete exercise ${id}`, data);
+ let alert = createAlert("Registration failed!", data);
document.body.prepend(alert);
- } else {
- window.location.replace("exercises.html");
- }
-}
-
-async function retrieveExercise(id) {
- let response = await sendRequest("GET", `${HOST}/api/exercises/${id}/`);
-
- console.log(response.ok)
- if (!response.ok) {
- let data = await response.json();
- let alert = createAlert("Could not retrieve exercise data!", data);
- document.body.prepend(alert);
} else {
- document.querySelector("select").removeAttribute("disabled")
- let exerciseData = await response.json();
- let form = document.querySelector("#form-exercise");
- let formData = new FormData(form);
-
- for (let key of formData.keys()) {
- let selector
- key !== "muscleGroup" ? selector = `input[name="${key}"], textarea[name="${key}"]` : selector = `select[name=${key}]`
- let input = form.querySelector(selector);
- let newVal = exerciseData[key];
- input.value = newVal;
+ let body = {
+ username: formData.get("username"),
+ password: formData.get("password"),
+ phone_number: formData.get("phone_number"),
+ country: formData.get("country"),
+ city: formData.get("city"),
+ street_address: formData.get("street_address"),
+ main_gym: formData.get("main_gym"),
+ favourite_exercise: formData.get("favourite_exercise")
+ };
+ response = await sendRequest("POST", `${HOST}/api/token/`, body);
+ if (response.ok) {
+ let data = await response.json();
+ setCookie("access", data.access, 86400, "/");
+ setCookie("refresh", data.refresh, 86400, "/");
+ sessionStorage.setItem("username", formData.get("username"));
+ } else {
+ console.log("CAN'T GET JWT TOKEN ON REGISTRATION");
+ let data = await response.json();
+ let alert = createAlert("Registration could not complete. Try again!", data);
+ document.body.prepend(alert);
}
- document.querySelector("select").setAttribute("disabled", "")
- }
-}
-
-async function updateExercise(id) {
- let form = document.querySelector("#form-exercise");
- let formData = new FormData(form);
-
- let muscleGroupSelector = document.querySelector("select")
- muscleGroupSelector.removeAttribute("disabled")
-
- let selectedMuscleGroup = new MuscleGroup(formData.get("muscleGroup"));
-
- let body = {"name": formData.get("name"),
- "description": formData.get("description"),
- "duration": formData.get("duration"),
- "calories": formData.get("calories"),
- "muscleGroup": selectedMuscleGroup.getMuscleGroupType(),
- "unit": formData.get("unit")};
- let response = await sendRequest("PUT", `${HOST}/api/exercises/${id}/`, body);
-
- if (!response.ok) {
- let data = await response.json();
- let alert = createAlert(`Could not update exercise ${id}`, data);
- document.body.prepend(alert);
- } else {
- muscleGroupSelector.setAttribute("disabled", "")
- // duplicate code from handleCancelButtonDuringEdit
- // you should refactor this
- setReadOnly(true, "#form-exercise");
- okButton.className += " hide";
- deleteButton.className += " hide";
- cancelButton.className += " hide";
- editButton.className = editButton.className.replace(" hide", "");
-
- cancelButton.removeEventListener("click", handleCancelButtonDuringEdit);
-
- oldFormData.delete("name");
- oldFormData.delete("description");
- oldFormData.delete("duration");
- oldFormData.delete("calories");
- oldFormData.delete("muscleGroup");
- oldFormData.delete("unit");
+ form.reset();
+ //window.location.replace("workouts.html");
}
+ */
}
-window.addEventListener("DOMContentLoaded", async () => {
- cancelButton = document.querySelector("#btn-cancel-exercise");
- okButton = document.querySelector("#btn-ok-exercise");
- deleteButton = document.querySelector("#btn-delete-exercise");
- editButton = document.querySelector("#btn-edit-exercise");
- oldFormData = null;
-
- const urlParams = new URLSearchParams(window.location.search);
-
- // view/edit
- if (urlParams.has('id')) {
- const exerciseId = urlParams.get('id');
- await retrieveExercise(exerciseId);
-
- editButton.addEventListener("click", handleEditExerciseButtonClick);
- deleteButton.addEventListener("click", (async (id) => await deleteExercise(id)).bind(undefined, exerciseId));
- okButton.addEventListener("click", (async (id) => await updateExercise(id)).bind(undefined, exerciseId));
- }
- //create
- else {
- setReadOnly(false, "#form-exercise");
-
- editButton.className += " hide";
- okButton.className = okButton.className.replace(" hide", "");
- cancelButton.className = cancelButton.className.replace(" hide", "");
-
- okButton.addEventListener("click", async () => await createExercise());
- cancelButton.addEventListener("click", handleCancelButtonDuringCreate);
- }
-});
+document.querySelector("#btn-create-account").addEventListener("click", async (event) => await createNewUser(event));
+init();