Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

draft: Profile page #136

Open
wants to merge 3 commits into
base: demo-dev
Choose a base branch
from
Open

draft: Profile page #136

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
01dfc75
started on profile page
rasmusregnell Feb 20, 2024
ba2fbc5
small fixes
rasmusregnell Feb 20, 2024
474526f
profile page is now more responsive(not perfect)
rasmusregnell Feb 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion apps/frontend/components/base/input-field.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,10 @@ const props = defineProps({
id: String,
wrapperClass: String,
modelValue: String,
bg: {
type: String,
default: "bg-white",
},
});
defineEmits(["update:modelValue"]);

Expand Down Expand Up @@ -35,7 +39,7 @@ function toggleShowPass() {
v-bind="$attrs"
:id="id"
ref="input"
class="py-2.5 px-4 !bg-white text-[16px] font-family2"
:class="`py-2.5 px-4 ${bg} text-[16px] font-family2`"
placeholder=" "
:value="modelValue || value"
@input="update"
Expand Down
225 changes: 225 additions & 0 deletions apps/frontend/pages/dash/profile.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,225 @@
<script setup lang="ts">
// Mock up data for subscription information
const subscription = {
title: "Prenumeration",
text: "Bridge to Bridge erbjuder dig att testa ett visst antal övningar gratis. För att kunna träna och lära dig ännu mer behövs en prenumeration. Prenumerationer förnyas automatiskt i slutet av prenumerationsperioden. För att använda sajten behöver du godkänna användarvillkoren för Bridge to Bridge. Där finns också mer information om hur betalningar och uppgifter hanteras.",
purchaceInfo:
"Eventuell kampanjkod anges i kassan (på mobil eller surfplatta kan du behöva klicka på menyn Uppgifter högst upp till höger i kassan).",
stripe:
"Vi använder Stripe för att sköta betalningar på ett smidigt och säkert sätt.",
buttons: [
{ title: "1 månad", price: 150 },
{ title: "3 månader", price: 400 },
{ title: "12 månader", price: 1200 },
],
};

// Mock up data for friends list
const friends = [
{ name: "Kalle", email: "[email protected]" },
{ name: "Pelle", email: "[email protected]" },
{ name: "Carin", email: "[email protected]" },
];

// Mock up data for user details
const userDetails = {
first_name: "Kalle",
last_name: "Anka",
email: "[email protected]",
password: "password",
};

const buttonIsPressed = ref([false, false, false]);
const editProfile = ref(false);

function press(type: string) {
switch (type) {
case "1 månad":
buttonIsPressed.value = [true, false, false];
break;
case "3 månader":
buttonIsPressed.value = [false, true, false];
break;
case "12 månader":
buttonIsPressed.value = [false, false, true];
break;
}
}

// Function to toggle edit profile
function edit() {
editProfile.value = !editProfile.value;
}

// Function to submit changes to profile, needs to call api to update user details
function submit() {
editProfile.value = !editProfile.value;
}

function subscribe() {
const index = buttonIsPressed.value.findIndex((value) => value);
// navigate to stripe checkout with subscription.buttons[index]
console.log("Subscribed on " + subscription.buttons[index].title);
}
</script>

<template>
<div class="w-full h-full flex flex-col items-center space-y-4">
<!-- Subscription block -->
<div
class="flex flex-row w-[95%] lg:w-3/4 lg:min-w-[600px] max-w-[900px] h-[400px] rounded-xl bg-white dark:bg-dark-100"
>
<div class="w-full flex flex-col items-center">
<span class="text-[#15b497] text-[25px] xl:text-[28px] font-bold">{{
subscription.title
}}</span>
<span
class="text-dark dark:text-white text-[14px] lg:text-[16px] xl:text-[16px] px-5 text-center"
>{{ subscription.text }}</span
>
<div
:class="`w-[80%] flex flex-row justify-between ${
!buttonIsPressed ? 'mt-[50px]' : 'mt-5'
} `"
>
<div
v-for="(b, index) in subscription.buttons"
:key="b.title"
:class="`w-[30%] h-[50px] xl:h-[70px] flex flex-col items-center cursor-pointer rounded-xl ${
buttonIsPressed[index] ? 'bg-secondary' : ''
}`"
@click="press(b.title)"
>
<span
class="text-[#15b497] font-bold text-[15px] lg:text-[17px] xl:text-[20px]"
>{{ b.title }}</span
>
<span
:class="` text-[15px] lg:text-[17px] xl:text-[20px] ${
buttonIsPressed[index]
? 'text-white'
: 'text-dark dark:text-white'
}`"
>{{ b.price }} sek</span
>
</div>
</div>
<div
v-if="buttonIsPressed.find((b) => b)"
class="flex flex-col items-center"
>
<span
class="text-dark dark:text-white text-[12px] lg:text-[14px] xl:text-[18px] px-10 text-center mt-5"
>{{ subscription.purchaceInfo }}
</span>
<div class="w-full flex flex-row justify-center">
<button
class="mt-2 bg-secondary text-white w-[30%] h-[25px] lg:text-[15px] lg:h-[30px] xl:h-[40px] xl:text-[20px] font-semibold rounded-full"
@click="subscribe"
>
Gå till kassan
</button>
</div>
<span class="text-[12px] text-dark dark:text-white mt-2">{{
subscription.stripe
}}</span>
</div>
</div>
</div>
<!-- Lower two blocks -->
<div
class="flex flex-row w-[95%] lg:w-3/4 lg:min-w-[600px] max-w-[900px] justify-between"
>
<!-- Friends block -->
<div
class="flex flex-col items-center dark:bg-dark-100 bg-white rounded-xl w-[49%] max-w-[440px] h-[400px]"
>
<span
class="text-[22px] lg:text-[25px] xl:text-[30px] dark:text-white text-dark font-bold"
>Vänner</span
>
<div class="w-full flex flex-col items-center mt-10">
<div class="w-2/3 flex flex-row justify-center">
<div class="dark:text-white text-dark w-1/2">Namn</div>
<div class="dark:text-white text-dark w-1/2">E-post</div>
</div>
<div
class="w-[90%] h-[2px] bg-dark-500 dark:bg-dark-400 self-center"
></div>
<div class="flex flex-col w-2/3 space-y-[1px] mt-2">
<div
v-for="friend in friends"
:key="friend.name"
class="w-full flex flex-row"
>
<div class="dark:text-white text-dark w-1/2">
{{ friend.name }}
</div>
<div class="dark:text-white text-dark w-1/2">
{{ friend.email }}
</div>
</div>
</div>
</div>
</div>
<!-- User details block -->
<div
class="flex flex-col items-center dark:bg-dark-100 bg-white rounded-xl w-[49%] max-w-[440px] h-[400px]"
>
<span
class="text-[22px] lg:text-[25px] xl:text-[30px] dark:text-white text-dark font-bold"
>Användardetaljer</span
>
<div class="w-[92%] flex flex-col items-center mt-3">
<div class="w-full flex flex-row justify-end mb-5">
<button
v-if="!editProfile"
class="text-white bg-secondary text-[12px] lg:text-[15px] p-2 rounded-xl"
@click="edit"
>
Edit profile
</button>
<button
v-else
class="text-white bg-secondary text-[15px] p-2 rounded-xl"
@click="submit"
>
Save changes
</button>
</div>
<div class="flex flex-col items-start space-y-8 w-full">
<div
v-for="(key, index) in Object.keys(userDetails)"
:key="index"
class="w-[80%] justify-between flex flex-row text-white pl-1"
>
<div class="w-1/2 font-semibold h-[50px] flex items-center">
<span class="font-semibold dark:text-white text-dark">{{
key
}}</span>
</div>
<div
v-if="
!editProfile || key === 'first_name' || key === 'last_name'
"
class="w-1/2 flex items-center h-[50px]"
>
<span
class="dark:text-white text-dark text-[13px] lg:text-[15px]"
>{{ userDetails[key] }}</span
>
</div>
<base-input-field
v-else
:id="key.replace('_', '-')"
wrapperClass="w-1/2 h-[30px] dark:bg-dark-100"
:placeholder="key"
bg="dark:bg-dark-100"
/>
</div>
</div>
</div>
</div>
</div>
</div>
</template>