mirror of
https://github.com/notherealmarco/WASAPhoto.git
synced 2025-03-14 14:16:15 +01:00
Add comments under posts and fix user profile
This commit is contained in:
parent
4c4481393d
commit
e86526761c
13 changed files with 201 additions and 42 deletions
|
@ -89,14 +89,14 @@ func (rt *_router) PostComment(w http.ResponseWriter, r *http.Request, ps httpro
|
||||||
}
|
}
|
||||||
|
|
||||||
// check if the comment is valid (should not contain newlines and at be between 5 and 255 characters)
|
// check if the comment is valid (should not contain newlines and at be between 5 and 255 characters)
|
||||||
stat, err := regexp.Match(`^[*]{5, 255}$`, []byte(request_body.Comment))
|
stat, err := regexp.Match(`^(.*)*`, []byte(request_body.Comment))
|
||||||
|
|
||||||
if err != nil {
|
if err != nil {
|
||||||
helpers.SendInternalError(err, "Error matching regex", w, rt.baseLogger)
|
helpers.SendInternalError(err, "Error matching regex", w, rt.baseLogger)
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
if !stat {
|
if !stat || len(request_body.Comment) < 5 || len(request_body.Comment) > 255 {
|
||||||
helpers.SendBadRequest(w, "Invalid comment", rt.baseLogger)
|
helpers.SendBadRequest(w, "Invalid comment", rt.baseLogger)
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
|
@ -103,6 +103,7 @@ func (db *appdbimpl) GetComments(uid string, photo_id int64, requesting_uid stri
|
||||||
AND "bans"."ban" = ?
|
AND "bans"."ban" = ?
|
||||||
)
|
)
|
||||||
AND "u"."uid" = "c"."user"
|
AND "u"."uid" = "c"."user"
|
||||||
|
ORDER BY "c"."date" DESC
|
||||||
LIMIT ?
|
LIMIT ?
|
||||||
OFFSET ?`, photo_id, requesting_uid, limit, start_index)
|
OFFSET ?`, photo_id, requesting_uid, limit, start_index)
|
||||||
|
|
||||||
|
|
|
@ -1,13 +1,28 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import { RouterLink, RouterView } from 'vue-router'
|
import { RouterLink, RouterView } from 'vue-router'
|
||||||
|
import getCurrentSession from './services/authentication';
|
||||||
|
import { updateToken } from './services/axios';
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
my_id: sessionStorage.getItem("token"),
|
currentSession: "",
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
created() {
|
||||||
|
if (!this.getCurrentSession()) {
|
||||||
|
this.$router.push({ path: "/login" });
|
||||||
|
} else {
|
||||||
|
updateToken()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
linkTo() {
|
||||||
|
return "/profile/" + this.getCurrentSession();
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
@ -69,7 +84,7 @@ export default {
|
||||||
<RouterLink to="/search" class="col-4 text-center">
|
<RouterLink to="/search" class="col-4 text-center">
|
||||||
<i class="bi bi-search text-dark" style="font-size: 2em"></i>
|
<i class="bi bi-search text-dark" style="font-size: 2em"></i>
|
||||||
</RouterLink>
|
</RouterLink>
|
||||||
<RouterLink :to="'/profile/' + my_id" class="col-4 text-center">
|
<RouterLink to="/profile/me" class="col-4 text-center">
|
||||||
<i class="bi bi-person text-dark" style="font-size: 2em"></i>
|
<i class="bi bi-person text-dark" style="font-size: 2em"></i>
|
||||||
</RouterLink>
|
</RouterLink>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
27
webui/src/components/Modal.vue
Normal file
27
webui/src/components/Modal.vue
Normal file
|
@ -0,0 +1,27 @@
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: ["message", "title"],
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<!-- Button trigger modal -->
|
||||||
|
<!-- Modal -->
|
||||||
|
<div class="modal fade" id="modal" tabindex="-1" aria-labelledby="modalLabel" aria-hidden="true">
|
||||||
|
<div class="modal-dialog">
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="modal-header">
|
||||||
|
<h5 class="modal-title" id="modalLabel">{{ title }}</h5>
|
||||||
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
{{ message }}
|
||||||
|
</div>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
||||||
|
<!--<button type="button" class="btn btn-primary">Save changes</button>-->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
|
@ -1,18 +1,53 @@
|
||||||
<script>
|
<script>
|
||||||
|
import getCurrentSession from '../services/authentication';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
props: ["user_id", "name", "date", "comments", "likes", "photo_id", "liked", "my_id"],
|
props: ["user_id", "name", "date", "comments", "likes", "photo_id", "liked"],
|
||||||
data: function() {
|
data: function() {
|
||||||
return {
|
return {
|
||||||
imageSrc: "",
|
imageSrc: "",
|
||||||
errorMsg: null,
|
errorMsg: null,
|
||||||
post_liked: this.liked,
|
post_liked: this.liked,
|
||||||
post_like_cnt: this.likes,
|
post_like_cnt: this.likes,
|
||||||
|
comments_data: [],
|
||||||
|
comments_start_idx: 0,
|
||||||
|
comments_shown: false,
|
||||||
|
commentMsg: "",
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
postComment() {
|
||||||
|
this.$axios.post("/users/" + this.user_id + "/photos/" + this.photo_id + "/comments", {
|
||||||
|
"comment": this.commentMsg,
|
||||||
|
"user_id": getCurrentSession(),
|
||||||
|
}).then(response => {
|
||||||
|
this.commentMsg = "";
|
||||||
|
|
||||||
|
this.comments_data = [];
|
||||||
|
this.comments_start_idx = 0;
|
||||||
|
this.getComments();
|
||||||
|
}).catch(error => {
|
||||||
|
console.log(error);
|
||||||
|
this.errorMsg = error.toString();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
getComments() {
|
||||||
|
this.$axios.get("/users/" + this.user_id + "/photos/" + this.photo_id +
|
||||||
|
"/comments?limit=2&start_index=" + this.comments_start_idx).then(response => {
|
||||||
|
|
||||||
|
if (response.data.length == 0) this.data_ended = true;
|
||||||
|
else this.comments_start_idx += 2;
|
||||||
|
|
||||||
|
this.comments_data = this.comments_data.concat(response.data);
|
||||||
|
this.comments_shown = true;
|
||||||
|
//alert(this.comments[0]["comment"]);
|
||||||
|
}).catch(error => {
|
||||||
|
console.log(error);
|
||||||
|
this.errorMsg = error.toString();
|
||||||
|
});
|
||||||
|
},
|
||||||
like() {
|
like() {
|
||||||
this.$axios.put("/users/" + this.user_id + "/photos/" + this.photo_id + "/likes/" + this.my_id).then(response => {
|
this.$axios.put("/users/" + this.user_id + "/photos/" + this.photo_id + "/likes/" + getCurrentSession()).then(response => {
|
||||||
this.post_liked = true;
|
this.post_liked = true;
|
||||||
this.post_like_cnt++;
|
this.post_like_cnt++;
|
||||||
}).catch(error => {
|
}).catch(error => {
|
||||||
|
@ -21,7 +56,7 @@ export default {
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
unlike() {
|
unlike() {
|
||||||
this.$axios.delete("/users/" + this.user_id + "/photos/" + this.photo_id + "/likes/" + this.my_id).then(response => {
|
this.$axios.delete("/users/" + this.user_id + "/photos/" + this.photo_id + "/likes/" + getCurrentSession()).then(response => {
|
||||||
this.post_liked = false;
|
this.post_liked = false;
|
||||||
this.post_like_cnt--;
|
this.post_like_cnt--;
|
||||||
}).catch(error => {
|
}).catch(error => {
|
||||||
|
@ -60,7 +95,7 @@ export default {
|
||||||
|
|
||||||
<div class="col-2">
|
<div class="col-2">
|
||||||
<div class="card-body d-flex justify-content-end" style="display: inline-flex"> <!-- not quite sure flex is the right property, but it works -->
|
<div class="card-body d-flex justify-content-end" style="display: inline-flex"> <!-- not quite sure flex is the right property, but it works -->
|
||||||
<a><h5><i class="card-title bi bi-chat-right pe-1"></i></h5></a>
|
<a @click="getComments"><h5><i class="card-title bi bi-chat-right pe-1"></i></h5></a>
|
||||||
<h6 class="card-text d-flex align-items-end text-muted">{{ comments }}</h6>
|
<h6 class="card-text d-flex align-items-end text-muted">{{ comments }}</h6>
|
||||||
<a v-if="!post_liked" @click="like"><h5><i class="card-title bi bi-suit-heart ps-2 pe-1 like-icon"></i></h5></a>
|
<a v-if="!post_liked" @click="like"><h5><i class="card-title bi bi-suit-heart ps-2 pe-1 like-icon"></i></h5></a>
|
||||||
<a v-if="post_liked" @click="unlike"><h5><i class="card-title bi bi-heart-fill ps-2 pe-1 like-icon like-red"></i></h5></a>
|
<a v-if="post_liked" @click="unlike"><h5><i class="card-title bi bi-heart-fill ps-2 pe-1 like-icon like-red"></i></h5></a>
|
||||||
|
@ -69,6 +104,27 @@ export default {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div v-if="comments_shown">
|
||||||
|
<div v-for="item of comments_data" class="row">
|
||||||
|
<div class="col-7 card-body border-top">
|
||||||
|
<b>{{ item.name }}:</b> {{ item.comment }}
|
||||||
|
</div>
|
||||||
|
<div class="col-5 card-body border-top text-end text-secondary">
|
||||||
|
{{ new Date(Date.parse(item.date)).toDateString() }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-if="!data_ended" class="col-12 card-body text-end pt-0 pb-1 px-0">
|
||||||
|
<a @click="getComments" class="text-primary">Mostra altro...</a>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-10 card-body border-top text-end">
|
||||||
|
<input v-model="commentMsg" type="text" class="form-control" placeholder="Commenta...">
|
||||||
|
</div>
|
||||||
|
<div class="col-1 card-body border-top text-end ps-0 d-flex">
|
||||||
|
<button style="width: 100%" type="button" class="btn btn-primary" @click="postComment">Go</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!--<ul class="list-group list-group-light list-group-small">
|
<!--<ul class="list-group list-group-light list-group-small">
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
<script>
|
<script>
|
||||||
|
import getCurrentSession from '../services/authentication';
|
||||||
export default {
|
export default {
|
||||||
props: ["user_id", "name", "followed", "banned", "my_id", "show_new_post"],
|
props: ["user_id", "name", "followed", "banned", "show_new_post"],
|
||||||
watch: {
|
watch: {
|
||||||
banned: function(new_val, old_val) {
|
banned: function(new_val, old_val) {
|
||||||
this.user_banned = new_val;
|
this.user_banned = new_val;
|
||||||
|
@ -15,17 +15,24 @@ export default {
|
||||||
errorMsg: "aaa",
|
errorMsg: "aaa",
|
||||||
user_followed: this.followed,
|
user_followed: this.followed,
|
||||||
user_banned: this.banned,
|
user_banned: this.banned,
|
||||||
myself: this.my_id == this.user_id,
|
myself: getCurrentSession() == this.user_id,
|
||||||
show_post_form: false,
|
show_post_form: false,
|
||||||
|
show_username_form: false,
|
||||||
|
newUsername: "",
|
||||||
upload_file: null,
|
upload_file: null,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
logout() {
|
||||||
|
localStorage.removeItem("token");
|
||||||
|
sessionStorage.removeItem("token");
|
||||||
|
this.$router.push({ path: "/login" });
|
||||||
|
},
|
||||||
visit() {
|
visit() {
|
||||||
this.$router.push({ path: "/profile/" + this.user_id });
|
this.$router.push({ path: "/profile/" + this.user_id });
|
||||||
},
|
},
|
||||||
follow() {
|
follow() {
|
||||||
this.$axios.put("/users/" + this.user_id + "/followers/" + this.my_id)
|
this.$axios.put("/users/" + this.user_id + "/followers/" + getCurrentSession())
|
||||||
.then(response => {
|
.then(response => {
|
||||||
this.user_followed = true
|
this.user_followed = true
|
||||||
this.$emit('updateInfo')
|
this.$emit('updateInfo')
|
||||||
|
@ -33,7 +40,7 @@ export default {
|
||||||
.catch(error => alert(error.toString()));
|
.catch(error => alert(error.toString()));
|
||||||
},
|
},
|
||||||
unfollow() {
|
unfollow() {
|
||||||
this.$axios.delete("/users/" + this.user_id + "/followers/" + this.my_id)
|
this.$axios.delete("/users/" + this.user_id + "/followers/" + getCurrentSession())
|
||||||
.then(response => {
|
.then(response => {
|
||||||
this.user_followed = false
|
this.user_followed = false
|
||||||
this.$emit('updateInfo')
|
this.$emit('updateInfo')
|
||||||
|
@ -41,7 +48,7 @@ export default {
|
||||||
.catch(error => alert(error.toString()));
|
.catch(error => alert(error.toString()));
|
||||||
},
|
},
|
||||||
ban() {
|
ban() {
|
||||||
this.$axios.put("/users/" + this.my_id + "/bans/" + this.user_id)
|
this.$axios.put("/users/" + getCurrentSession() + "/bans/" + this.user_id)
|
||||||
.then(response => {
|
.then(response => {
|
||||||
this.user_banned = true
|
this.user_banned = true
|
||||||
this.$emit('updateInfo')
|
this.$emit('updateInfo')
|
||||||
|
@ -49,7 +56,7 @@ export default {
|
||||||
.catch(error => alert(error.toString()));
|
.catch(error => alert(error.toString()));
|
||||||
},
|
},
|
||||||
unban() {
|
unban() {
|
||||||
this.$axios.delete("/users/" + this.my_id + "/bans/" + this.user_id)
|
this.$axios.delete("/users/" + getCurrentSession() + "/bans/" + this.user_id)
|
||||||
.then(response => {
|
.then(response => {
|
||||||
this.user_banned = false
|
this.user_banned = false
|
||||||
this.$emit('updateInfo')
|
this.$emit('updateInfo')
|
||||||
|
@ -62,22 +69,35 @@ export default {
|
||||||
this.upload_file = files[0];
|
this.upload_file = files[0];
|
||||||
},
|
},
|
||||||
submit_file() {
|
submit_file() {
|
||||||
this.$axios.post("/users/" + this.my_id + "/photos", this.upload_file)
|
this.$axios.post("/users/" + getCurrentSession() + "/photos", this.upload_file)
|
||||||
.then(response => {
|
.then(response => {
|
||||||
this.show_post_form = false
|
this.show_post_form = false
|
||||||
this.$emit('updatePosts')
|
this.$emit('updatePosts')
|
||||||
})
|
})
|
||||||
.catch(error => alert(error.toString()));
|
.catch(error => alert(error.toString()));
|
||||||
},
|
},
|
||||||
|
updateUsername() {
|
||||||
|
this.$axios.put("/users/" + getCurrentSession() + "/username", {name: this.newUsername})
|
||||||
|
.then(response => {
|
||||||
|
this.show_username_form = false
|
||||||
|
this.$emit('updateInfo')
|
||||||
|
this.name = this.newUsername
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
if (error.response.status == 409) {
|
||||||
|
this.$refs.openModal.click()
|
||||||
|
} else {
|
||||||
|
alert(error.toString())
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="card mb-3">
|
<div class="card mb-3">
|
||||||
|
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-10">
|
<div class="col-10">
|
||||||
|
@ -97,6 +117,12 @@ export default {
|
||||||
<div v-if="(myself && !show_new_post)">
|
<div v-if="(myself && !show_new_post)">
|
||||||
<button disabled type="button" class="btn btn-secondary">Yourself</button>
|
<button disabled type="button" class="btn btn-secondary">Yourself</button>
|
||||||
</div>
|
</div>
|
||||||
|
<div v-if="(myself && show_new_post)" class="d-flex">
|
||||||
|
<button type="button" class="btn btn-outline-danger me-2" @click="logout">Logout</button>
|
||||||
|
</div>
|
||||||
|
<div v-if="(myself && show_new_post)" class="d-flex">
|
||||||
|
<button v-if="!show_username_form" type="button" class="btn btn-outline-secondary me-2" @click="show_username_form = true">Username</button>
|
||||||
|
</div>
|
||||||
<div v-if="(myself && show_new_post)" class="d-flex">
|
<div v-if="(myself && show_new_post)" class="d-flex">
|
||||||
<button v-if="!show_post_form" type="button" class="btn btn-primary" @click="show_post_form = true">Post</button>
|
<button v-if="!show_post_form" type="button" class="btn btn-primary" @click="show_post_form = true">Post</button>
|
||||||
</div>
|
</div>
|
||||||
|
@ -116,6 +142,21 @@ export default {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="row" v-if="show_username_form">
|
||||||
|
<button ref="openModal" type="button" class="btn btn-primary" style="display: none" data-bs-toggle="modal" data-bs-target="#modal" />
|
||||||
|
<Modal title="Error" message="The chosen username is already taken" />
|
||||||
|
<div class="col-10">
|
||||||
|
<div class="card-body h-100 d-flex align-items-center">
|
||||||
|
<input v-model="newUsername" class="form-control form-control-lg" id="formUsername" placeholder="Your new fantastic username! 😜" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-2">
|
||||||
|
<div class="card-body d-flex justify-content-end">
|
||||||
|
<button type="button" class="btn btn-primary btn-lg" @click="updateUsername">Set</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
|
@ -6,6 +6,7 @@ import ErrorMsg from './components/ErrorMsg.vue'
|
||||||
import LoadingSpinner from './components/LoadingSpinner.vue'
|
import LoadingSpinner from './components/LoadingSpinner.vue'
|
||||||
import PostCard from './components/PostCard.vue'
|
import PostCard from './components/PostCard.vue'
|
||||||
import UserCard from './components/UserCard.vue'
|
import UserCard from './components/UserCard.vue'
|
||||||
|
import Modal from './components/Modal.vue'
|
||||||
import 'bootstrap-icons/font/bootstrap-icons.css'
|
import 'bootstrap-icons/font/bootstrap-icons.css'
|
||||||
|
|
||||||
import './assets/dashboard.css'
|
import './assets/dashboard.css'
|
||||||
|
@ -18,5 +19,6 @@ app.component("ErrorMsg", ErrorMsg);
|
||||||
app.component("LoadingSpinner", LoadingSpinner);
|
app.component("LoadingSpinner", LoadingSpinner);
|
||||||
app.component("PostCard", PostCard);
|
app.component("PostCard", PostCard);
|
||||||
app.component("UserCard", UserCard);
|
app.component("UserCard", UserCard);
|
||||||
|
app.component("Modal", Modal);
|
||||||
app.use(router)
|
app.use(router)
|
||||||
app.mount('#app')
|
app.mount('#app')
|
4
webui/src/services/authentication.js
Normal file
4
webui/src/services/authentication.js
Normal file
|
@ -0,0 +1,4 @@
|
||||||
|
export default function getCurrentSession() {
|
||||||
|
if (localStorage.getItem('token') == null) return sessionStorage.getItem('token');
|
||||||
|
return localStorage.getItem('token');
|
||||||
|
}
|
|
@ -1,4 +1,5 @@
|
||||||
import axios from "axios";
|
import axios from "axios";
|
||||||
|
import getCurrentSession from "./authentication";
|
||||||
|
|
||||||
const instance = axios.create({
|
const instance = axios.create({
|
||||||
baseURL: __API_URL__,
|
baseURL: __API_URL__,
|
||||||
|
@ -13,7 +14,7 @@ const instance = axios.create({
|
||||||
//});
|
//});
|
||||||
|
|
||||||
const updateToken = () => {
|
const updateToken = () => {
|
||||||
instance.defaults.headers.common['Authorization'] = 'Bearer ' + sessionStorage.getItem('token');
|
instance.defaults.headers.common['Authorization'] = 'Bearer ' + getCurrentSession();
|
||||||
}
|
}
|
||||||
|
|
||||||
export {
|
export {
|
||||||
|
|
|
@ -1,4 +1,5 @@
|
||||||
<script>
|
<script>
|
||||||
|
import getCurrentSession from '../services/authentication';
|
||||||
export default {
|
export default {
|
||||||
data: function() {
|
data: function() {
|
||||||
return {
|
return {
|
||||||
|
@ -8,7 +9,6 @@ export default {
|
||||||
data_ended: false,
|
data_ended: false,
|
||||||
start_idx: 0,
|
start_idx: 0,
|
||||||
limit: 1,
|
limit: 1,
|
||||||
my_id: sessionStorage.getItem("token"),
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
@ -76,8 +76,7 @@ export default {
|
||||||
:date="item.date"
|
:date="item.date"
|
||||||
:comments="item.comments"
|
:comments="item.comments"
|
||||||
:likes="item.likes"
|
:likes="item.likes"
|
||||||
:liked="item.liked"
|
:liked="item.liked" />
|
||||||
:my_id="my_id" />
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div v-if="data_ended" class="alert alert-secondary text-center" role="alert">
|
<div v-if="data_ended" class="alert alert-secondary text-center" role="alert">
|
||||||
|
|
|
@ -8,6 +8,7 @@ export default {
|
||||||
loading: false,
|
loading: false,
|
||||||
some_data: null,
|
some_data: null,
|
||||||
field_username: "",
|
field_username: "",
|
||||||
|
rememberLogin: false,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
@ -20,9 +21,16 @@ export default {
|
||||||
});
|
});
|
||||||
//this.$router.push({ name: "home" });
|
//this.$router.push({ name: "home" });
|
||||||
if (response.status == 201 || response.status == 200) {
|
if (response.status == 201 || response.status == 200) {
|
||||||
// Save the token in the session storage
|
// Save the token in the local storage if the user wants to be remembered
|
||||||
|
if (this.rememberLogin) {
|
||||||
|
localStorage.setItem("token", response.data["user_id"])
|
||||||
|
sessionStorage.removeItem("token");
|
||||||
|
}
|
||||||
|
// Else save the token in the session storage
|
||||||
|
else {
|
||||||
sessionStorage.setItem("token", response.data["user_id"]);
|
sessionStorage.setItem("token", response.data["user_id"]);
|
||||||
|
localStorage.removeItem("token");
|
||||||
|
}
|
||||||
// Update the header
|
// Update the header
|
||||||
this.$axiosUpdate();
|
this.$axiosUpdate();
|
||||||
|
|
||||||
|
@ -75,8 +83,8 @@ export default {
|
||||||
|
|
||||||
<!-- Password input -->
|
<!-- Password input -->
|
||||||
<div class="form-floating mb-4">
|
<div class="form-floating mb-4">
|
||||||
<input disabled type="password" id="formPassword" class="form-control" placeholder="gattina12"/>
|
<input style="display: none" disabled type="password" id="formPassword" class="form-control" placeholder="gattina12"/>
|
||||||
<label class="form-label" for="formPassword">Password</label>
|
<label style="display: none" class="form-label" for="formPassword">Password</label>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 2 column grid layout for inline styling -->
|
<!-- 2 column grid layout for inline styling -->
|
||||||
|
@ -84,7 +92,7 @@ export default {
|
||||||
<div class="col d-flex justify-content-center">
|
<div class="col d-flex justify-content-center">
|
||||||
<!-- Checkbox -->
|
<!-- Checkbox -->
|
||||||
<div class="form-check">
|
<div class="form-check">
|
||||||
<input class="form-check-input" type="checkbox" value="" id="form2Example31" checked />
|
<input v-model="rememberLogin" class="form-check-input" type="checkbox" value="" id="form2Example31" />
|
||||||
<label class="form-check-label" for="form2Example31">Remember me</label>
|
<label class="form-check-label" for="form2Example31">Remember me</label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,15 +1,15 @@
|
||||||
<script>
|
<script>
|
||||||
|
import getCurrentSession from "../services/authentication";
|
||||||
export default {
|
export default {
|
||||||
data: function() {
|
data: function() {
|
||||||
return {
|
return {
|
||||||
|
requestedProfile: this.$route.params.user_id,
|
||||||
errormsg: null,
|
errormsg: null,
|
||||||
loading: false,
|
loading: false,
|
||||||
stream_data: [],
|
stream_data: [],
|
||||||
data_ended: false,
|
data_ended: false,
|
||||||
start_idx: 0,
|
start_idx: 0,
|
||||||
limit: 1,
|
limit: 1,
|
||||||
my_id: sessionStorage.getItem("token"),
|
|
||||||
|
|
||||||
user_data: [],
|
user_data: [],
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
@ -23,10 +23,9 @@ export default {
|
||||||
this.loadContent();
|
this.loadContent();
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
async getMainData() {
|
async getMainData() {
|
||||||
try {
|
try {
|
||||||
let response = await this.$axios.get("/users/" + this.$route.params.user_id);
|
let response = await this.$axios.get("/users/" + this.requestedProfile);
|
||||||
this.user_data = response.data;
|
this.user_data = response.data;
|
||||||
} catch(e) {
|
} catch(e) {
|
||||||
this.errormsg = e.toString();
|
this.errormsg = e.toString();
|
||||||
|
@ -37,7 +36,7 @@ export default {
|
||||||
this.loading = true;
|
this.loading = true;
|
||||||
this.errormsg = null;
|
this.errormsg = null;
|
||||||
try {
|
try {
|
||||||
let response = await this.$axios.get("/users/" + this.$route.params.user_id + "/photos" + "?start_index=" + this.start_idx + "&limit=" + this.limit);
|
let response = await this.$axios.get("/users/" + this.requestedProfile + "/photos" + "?start_index=" + this.start_idx + "&limit=" + this.limit);
|
||||||
if (response.data.length == 0) this.data_ended = true;
|
if (response.data.length == 0) this.data_ended = true;
|
||||||
else this.stream_data = this.stream_data.concat(response.data);
|
else this.stream_data = this.stream_data.concat(response.data);
|
||||||
this.loading = false;
|
this.loading = false;
|
||||||
|
@ -58,10 +57,18 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
mounted() {
|
created() {
|
||||||
// this way we are sure that we fill the first page
|
// this way we are sure that we fill the first page
|
||||||
// 450 is a bit more of the max height of a post
|
// 450 is a bit more of the max height of a post
|
||||||
// todo: may not work in 4k screens :/
|
// todo: may not work in 4k screens :/
|
||||||
|
|
||||||
|
if (this.$route.params.user_id == "me") {
|
||||||
|
//this.$router.replace({ path: "/profile/" + });
|
||||||
|
this.requestedProfile = getCurrentSession();
|
||||||
|
}else {
|
||||||
|
this.requestedProfile = this.$route.params.user_id;
|
||||||
|
}
|
||||||
|
|
||||||
this.getMainData();
|
this.getMainData();
|
||||||
this.limit = Math.round(window.innerHeight / 450);
|
this.limit = Math.round(window.innerHeight / 450);
|
||||||
this.scroll();
|
this.scroll();
|
||||||
|
@ -79,11 +86,11 @@ export default {
|
||||||
|
|
||||||
<ErrorMsg v-if="errormsg" :msg="errormsg"></ErrorMsg>
|
<ErrorMsg v-if="errormsg" :msg="errormsg"></ErrorMsg>
|
||||||
|
|
||||||
<UserCard :user_id = "$route.params.user_id"
|
<UserCard :user_id = "requestedProfile"
|
||||||
:name = "user_data['name']"
|
:name = "user_data['name']"
|
||||||
:followed = "user_data['followed']"
|
:followed = "user_data['followed']"
|
||||||
:banned = "user_data['banned']"
|
:banned = "user_data['banned']"
|
||||||
:my_id = "my_id"
|
:my_id = "getCurrentSession"
|
||||||
:show_new_post = "true"
|
:show_new_post = "true"
|
||||||
@updateInfo = "getMainData"
|
@updateInfo = "getMainData"
|
||||||
@updatePosts = "refresh" />
|
@updatePosts = "refresh" />
|
||||||
|
@ -104,14 +111,13 @@ export default {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="main-content" v-for="item of stream_data">
|
<div id="main-content" v-for="item of stream_data">
|
||||||
<PostCard :user_id = "$route.params.user_id"
|
<PostCard :user_id = "requestedProfile"
|
||||||
:photo_id = "item.photo_id"
|
:photo_id = "item.photo_id"
|
||||||
:name = "user_data['name']"
|
:name = "user_data['name']"
|
||||||
:date = "item.date"
|
:date = "item.date"
|
||||||
:comments = "item.comments"
|
:comments = "item.comments"
|
||||||
:likes = "item.likes"
|
:likes = "item.likes"
|
||||||
:liked = "item.liked"
|
:liked = "item.liked" />
|
||||||
:my_id = "my_id" />
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div v-if="data_ended" class="alert alert-secondary text-center" role="alert">
|
<div v-if="data_ended" class="alert alert-secondary text-center" role="alert">
|
||||||
|
|
|
@ -1,4 +1,5 @@
|
||||||
<script>
|
<script>
|
||||||
|
import getCurrentSession from '../services/authentication';
|
||||||
export default {
|
export default {
|
||||||
data: function() {
|
data: function() {
|
||||||
return {
|
return {
|
||||||
|
@ -9,7 +10,6 @@ export default {
|
||||||
start_idx: 0,
|
start_idx: 0,
|
||||||
limit: 1,
|
limit: 1,
|
||||||
field_username: "",
|
field_username: "",
|
||||||
my_id: sessionStorage.getItem("token"),
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
@ -80,8 +80,7 @@ export default {
|
||||||
:user_id="item.user_id"
|
:user_id="item.user_id"
|
||||||
:name="item.name"
|
:name="item.name"
|
||||||
:followed="item.followed"
|
:followed="item.followed"
|
||||||
:banned="item.banned"
|
:banned="item.banned" />
|
||||||
:my_id="my_id" />
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<LoadingSpinner :loading="loading" /><br />
|
<LoadingSpinner :loading="loading" /><br />
|
||||||
|
|
Loading…
Reference in a new issue