diff --git a/src/components/UserProfile/UserProfileForeignLayout.vue b/src/components/UserProfile/UserProfileForeignLayout.vue
new file mode 100644
index 0000000000000000000000000000000000000000..1f1b997ddb3cce515164e007987592a8d14ee830
--- /dev/null
+++ b/src/components/UserProfile/UserProfileForeignLayout.vue
@@ -0,0 +1,264 @@
+<script setup lang="ts">
+// A more limited view of a users profile
+import Menu from "@/components/BaseComponents/Menu.vue";
+import Footer from "@/components/BaseComponents/Footer.vue";
+import {useRoute, useRouter} from "vue-router";
+import {useUserInfoStore} from "../../stores/UserStore";
+import {UserControllerService} from "@/api";
+import {onMounted, ref} from "vue";
+
+let numberOfHistory = 6;
+
+
+
+let cardTitles = ["Spain tour", "Food waste", "Coffee", "Concert", "New book", "Pretty clothes"]
+
+let points = 0;
+let streak = 0;
+
+let username = ref()
+
+
+let id = ref()
+
+//Get the id from the url. viktor har eksempel
+
+let user = useRoute()
+id.value = user.params
+console.log(id.value.id)
+
+
+let route = useRouter()
+
+function toRoadmap(){
+ route.push('/roadmap')
+}
+//todo Make a store of a friend-instance
+onMounted(async () => {
+ try {
+ let response = await UserControllerService.getProfile({
+ userId: id.value.id
+ })
+ username.value = response.firstName
+ console.log(username)
+ } catch (error) {
+ console.error("Something went wrong getting the profile: ", error)
+ }
+})
+
+
+
+
+function toUpdateUserSettings(){
+ route.push('/update-user')
+}
+</script>
+
+<template>
+ <div class="container text-center">
+ <div class="row">
+ <div class="col">
+ <img src="/src/assets/userprofile.png" class="img-fluid">
+ <p class="h2">{{username}}</p>
+ </div>
+ </div>
+ <div class="row">
+ <div class="col">
+ <img src="/src/assets/icons/fire.png" class="img-fluid" style="width: 30px; height: 30px" alt="dollar">
+ <p>Streak: 10</p>
+ </div>
+ </div>
+ <div class="row">
+ <div class="col-12">
+ <img src="/src/assets/icons/dollar.png" class="img-fluid" style="width: 30px; height: 30px" alt="dollar">
+ <p class="">Points: 2000 </p>
+ </div>
+ </div>
+
+ <div class="row">
+ <div class="col">
+ total points earned
+ </div>
+ <div class="col">
+ total badges earned
+ </div>
+ </div>
+ <div class="row">
+ <div class="col">
+ <!-- Here is the badges of the user -->
+ <div class="container-fluid">
+ <h1 class="mt-5 text-start badges-text">Badges</h1>
+ <div class="scrolling-wrapper-badges row flex-row flex-nowrap mt-4 pb-4 pt-2">
+
+ <div class="col-5">
+ <div class="card badges-block card-1"></div>
+ </div>
+ <div class="col-5">
+ <div class="card badges-block card-2"></div>
+ </div>
+ <div class="col-5">
+ <div class="card badges-block card-3"></div>
+ </div>
+ <div class="col-5">
+ <div class="card badges-block card-4"></div>
+ </div>
+ <div class="col-5">
+ <div class="card badges-block card-5"></div>
+ </div>
+ <div class="col-5">
+ <div class="card badges-block card-6"></div>
+ </div>
+ <div class="col-5">
+ <div class="card badges-block card-7"></div>
+ </div>
+ <div class="col-5">
+ <div class="card badges-block card-8"></div>
+ </div>
+ <div class="col-5">
+ <div class="card badges-block card-9"></div>
+ </div>
+ <div class="col-5">
+ <div class="card badges-block card-10"></div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="row">
+ <div class="col">
+ <!-- Here is the history of saving target -->
+ <div class="container-fluid mb-5">
+ <h1 class="mt-5 text-start history-text">History</h1>
+ <div class="row scrolling-wrapper-history">
+ <div v-for="index in numberOfHistory" :key="index" class="col-md-4 col-sm-4 col-lg-4 col-xs-4 col-xl-4 control-label">
+ <div class="card history-block" >
+ <div class="card mb-3" style="max-width: 540px;">
+ <div class="row g-0">
+ <div class="col-md-4">
+ <img src="/src/assets/icons/piggybank.svg" class="img-fluid rounded-start h-40 mx-auto d-none d-md-block" alt="...">
+ </div>
+ <div class="col-md-8">
+ <div class="card-body">
+ <h5 class="card-title">{{cardTitles[index-1]}}</h5>
+ <p class="card-text">Money saved: 200 <br/>You are one challenge: 21</p>
+ <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
+ <a href="#" class="btn stretched-link" @click="toRoadmap"></a>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<style scoped>
+.scrolling-wrapper-badges{
+ overflow-x: auto;
+}
+
+.scrolling-wrapper-history{
+ max-height: 300px;
+ overflow: auto;
+}
+
+
+
+.badges-text{
+ font-weight: 500;
+ font-size: 2.0em;
+}
+
+.history-text{
+ font-weight: 500;
+ font-size: 2.0em;
+}
+
+.badges-block{
+ height: 200px;
+ background-color: #fff;
+ border: none;
+ background-position: center;
+ background-size: cover;
+ transition: all 0.2s ease-in-out !important;
+ border-radius: 24px;
+ &:hover{
+ transform: translateY(-5px);
+ box-shadow: none;
+ opacity: 0.9;
+ }
+}
+
+.history-block{
+ height: 200px;
+
+ background-color: #fff;
+ border: none;
+ background-position: center;
+ background-size: cover;
+ transition: all 0.2s ease-in-out !important;
+ border-radius: 24px;
+ margin: 20px;
+ &:hover{
+ transform: translateY(-5px);
+ box-shadow: none;
+ opacity: 0.9;
+ }
+}
+
+.card-1{
+ background-color: #4158D0;
+ background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
+}
+
+.card-2{
+ background-color: #0093E9;
+ background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
+}
+
+.card-3{
+ background-color: #00DBDE;
+ background-image: linear-gradient(90deg, #00DBDE 0%, #FC00FF 100%);
+}
+
+.card-4{
+ background-color: #FBAB7E;
+ background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
+}
+
+.card-5{
+ background-color: #85FFBD;
+ background-image: linear-gradient(45deg, #85FFBD 0%, #FFFB7D 100%);
+}
+
+.card-6{
+ background-color: #FA8BFF;
+ background-image: linear-gradient(45deg, #FA8BFF 0%, #2BD2FF 52%, #2BFF88 90%);
+}
+
+.card-7{
+ background-color: #FA8BFF;
+ background-image: linear-gradient(45deg, #FA8BFF 0%, #2BD2FF 52%, #2BFF88 90%);
+}
+
+.card-8{
+ background-color: #FBDA61;
+ background-image: linear-gradient(45deg, #FBDA61 0%, #FF5ACD 100%);
+}
+
+.card-9{
+ background-color: #4158D0;
+ background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
+}
+
+.card-10{
+ background-color: #FF3CAC;
+ background-image: linear-gradient(225deg, #FF3CAC 0%, #784BA0 50%, #2B86C5 100%);
+
+}
+</style>
\ No newline at end of file
diff --git a/src/router/index.ts b/src/router/index.ts
index 1f5b39ed6f608232c44060a8e73a7ace61d144ae..1e212e0da992f71c7e07e3fe5d3ba53df75ddd8f 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -64,6 +64,11 @@ const routes = [
name: 'profile',
component: UserProfileView
},
+ {
+ path: '/profile/:id',
+ name: 'friend-profile',
+ component: () => import('@/views/User/UserProfileForeignView.vue'),
+ },
{
path: 'friends',
name: 'friends',
diff --git a/src/views/User/UserFriendsView.vue b/src/views/User/UserFriendsView.vue
index bba374fd8064ec90d1971de1de640b38566042f1..e281c65b25970f4e7e29ddf897a8696f8db9a64d 100644
--- a/src/views/User/UserFriendsView.vue
+++ b/src/views/User/UserFriendsView.vue
@@ -1,4 +1,5 @@
<template>
+ <!-- Refactor with a for-loop -->
<div class="container">
<h1>Your Friends</h1>
<button class="btn btn-primary pull-right my-3" @click="addFriend">+ Add Friend</button>
@@ -11,6 +12,7 @@
</div>
</div>
<h3>Amillie Price</h3>
+ <a href="#" @click="navigateToFriend(46)" class="btn stretched-link"></a>
<div class="desc">
Lorem ipsum dolor sit amet, consectetur adipisicing elit et cupiditate deleniti.
</div>
@@ -358,8 +360,8 @@ function addFriend() {
}
// Define the navigateToQuiz method
-const navigateToFriend = (frinedID) => {
-
+const navigateToFriend = (friendID :string) => {
+router.push('/profile/' + friendID)
};
const removeFriend = (friendID) => {
diff --git a/src/views/User/UserProfileForeignView.vue b/src/views/User/UserProfileForeignView.vue
new file mode 100644
index 0000000000000000000000000000000000000000..0662a2c06dc7a47cea608f4172a11d009aafdefe
--- /dev/null
+++ b/src/views/User/UserProfileForeignView.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+
+import UserProfileForeignLayout from "@/components/UserProfile/UserProfileForeignLayout.vue";
+</script>
+<!-- The path to a foreign user is /{userId} || /profile/{userId}-->
+<template>
+<UserProfileForeignLayout></UserProfileForeignLayout>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file