profile data-database

src/__routes.svelte

@@ -4,6 +4,7 @@
 	import Layout from '$src/__layout.svelte'
 	import Loading from '$src/__loading.svelte'
 	import Error from '$src/__error.svelte'
+	import NavigationBarLayout from '$lib/components/Layouts/NavigationBarLayout.svelte'
 </script>
 
 <Router
@@ -36,11 +37,16 @@
 			component: () => import('$routes/explore/explore.svelte'),
 		},
 		{
-			path: '/profile',
+			path: '/profile/',
-			component: () => import('$routes/profile/profile.svelte'),
+			component: () => import('$src/__error.svelte'),
 		},
 		{
-			path: '/profile/:function',
+			path: '/profile/:erantId',
+			component: () => import('$routes/profile/profile.svelte'),
+			layout: NavigationBarLayout,
+		},
+		{
+			path: '/profile/setting/:function',
 			component: () => import('$routes/profile/profile-functions.svelte'),
 		},
 		{

src/lib/collections.ts

@@ -1,7 +1,9 @@
 import { Collection } from './appwrite'
 
-const expiriences = new Collection('63cef30d6da945dd4250', '63cef4bd210fdf2e5888')
+const experiences = new Collection('63cef30d6da945dd4250', '63cef4bd210fdf2e5888')
+const users = new Collection('63ded6c18e8493bffc83', 'Users')
 
 export default {
-	expiriences,
+	experiences,
+	users,
 }

src/lib/components/Layouts/NavigationBarLayout.svelte

@@ -1,8 +1,13 @@
 <script>
+	import { user } from '$lib/appwrite'
+	import collections from '$lib/collections'
+	import { Query } from 'appwrite'
 	import { navigate } from 'svelte-routing'
 	import FooterItem from '../Common/NavBar_Item.svelte'
 
-	let items = [
+	$: [userInfo] = collections.users.getDocument([Query.equal('userId', $user.$id)])
+
+	$: items = [
 		{
 			name: 'Home',
 			url: '/',
@@ -23,7 +28,7 @@
 		},
 		{
 			name: 'Profile',
-			url: '/profile',
+			url: `/profile/${$userInfo?.erantId}`,
 			image_url:
 				"data:image/svg+xml,%3Csvg width='19' height='24' viewBox='0 0 19 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_1515_2027' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='14' width='19' height='10'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.166626 14.9121H18.6465V23.5151H0.166626V14.9121Z' fill='white'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_1515_2027)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.40767 16.6621C4.4365 16.6621 1.9165 17.5161 1.9165 19.2019C1.9165 20.9029 4.4365 21.7651 9.40767 21.7651C14.3777 21.7651 16.8965 20.9111 16.8965 19.2253C16.8965 17.5243 14.3777 16.6621 9.40767 16.6621ZM9.40767 23.5151C7.12217 23.5151 0.166504 23.5151 0.166504 19.2019C0.166504 15.3566 5.441 14.9121 9.40767 14.9121C11.6932 14.9121 18.6465 14.9121 18.6465 19.2253C18.6465 23.0706 13.3732 23.5151 9.40767 23.5151Z' fill='%2361646B'/%3E%3C/g%3E%3Cmask id='mask1_1515_2027' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='3' y='0' width='13' height='13'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.21143 0.333008H15.6015V12.7214H3.21143V0.333008Z' fill='white'/%3E%3C/mask%3E%3Cg mask='url(%23mask1_1515_2027)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.40763 1.99901C6.9098 1.99901 4.87746 4.03017 4.87746 6.52801C4.8693 9.01767 6.88646 11.0477 9.3738 11.057L9.40763 11.89V11.057C11.9043 11.057 13.9355 9.02467 13.9355 6.52801C13.9355 4.03017 11.9043 1.99901 9.40763 1.99901ZM9.40763 12.7218H9.3703C5.9613 12.7113 3.1998 9.93117 3.21146 6.52451C3.21146 3.11201 5.99046 0.333008 9.40763 0.333008C12.8236 0.333008 15.6015 3.11201 15.6015 6.52801C15.6015 9.94401 12.8236 12.7218 9.40763 12.7218Z' fill='%2361646B'/%3E%3C/g%3E%3C/svg%3E ",
 		},
@@ -32,14 +37,13 @@
 	let className = ''
 
 	export { className as class }
-	
 </script>
 
 <div class="h-full w-full absolute">
 	<div class={'section w-full h-[calc(100%-100px)] overflow-auto ' + className}><slot /></div>
 	<div class="footer">
 		{#each items as { name, url, image_url }}
-			{#if location.pathname === url || location.pathname.includes(url + "/")}
+			{#if location.pathname === url || location.pathname.includes(url + '/')}
 				<FooterItem on:click={() => navigate(url)} active={true} {name} {url}>
 					<img alt="" style="filter: invert(44%) sepia(66%) saturate(6619%) hue-rotate(222deg) brightness(98%) contrast(88%);" src={image_url} />
 				</FooterItem>

src/routes/profile/functions/Profile-Update.svelte

@@ -1,29 +1,30 @@
 <script lang="ts">
+	import { user } from '$lib/appwrite'
+	import collections from '$lib/collections'
 	import HiddenInput from '$lib/components/Inputs/Hidden_Input_type2.svelte'
+	import { Query } from 'appwrite'
 
 	let c_password: string = ''
 	let n_password: string = ''
 	let nr_password: string = ''
+
+	$: userName = $userInfo?.userName
+	$: [userInfo] = collections.users.getDocument([Query.equal('userId', $user.$id)])
 </script>
 
 <div class="container">
 	<div class="photo">
-        <div class="currentPhoto">
+		<div class="currentPhoto" />
-
+		<button class="changePhoto"> Update your photo </button>
-        </div>
-        <button class="changePhoto">
-            Update your photo
-        </button>
 	</div>
 
 	<form class="inputs">
-        <input type="text" placeholder="Your name">
+		<input type="text" bind:value={userName} placeholder="Your name" />
-        <input type="email" placeholder="Your email">
+		<input type="email" placeholder="Your email" />
 
 		<HiddenInput bind:value={c_password} placeholder="Your current password" />
 		<HiddenInput bind:value={n_password} placeholder="New password" />
 		<HiddenInput bind:value={nr_password} placeholder="Re-type new password" />
-
 	</form>
 </div>
 
@@ -45,10 +46,10 @@
 				aspect-ratio: 1/1;
 				/* background */
 
-                background: #EFEFF0;
+				background: #efeff0;
 				/* subtle-light */
 
-                border: 2px solid #AFB1B6;
+				border: 2px solid #afb1b6;
 				border-radius: 200px;
 				background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_1380_1768' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='20' height='20'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.000488281 0H19.9601V19.9498H0.000488281V0Z' fill='white'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_1380_1768)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.65049 1.5C3.12949 1.5 1.50049 3.227 1.50049 5.899V14.051C1.50049 16.724 3.12949 18.45 5.65049 18.45H14.3005C16.8275 18.45 18.4605 16.724 18.4605 14.051V5.899C18.4605 3.227 16.8275 1.5 14.3005 1.5H5.65049ZM14.3005 19.95H5.65049C2.27049 19.95 0.000488281 17.579 0.000488281 14.051V5.899C0.000488281 2.371 2.27049 0 5.65049 0H14.3005C17.6855 0 19.9605 2.371 19.9605 5.899V14.051C19.9605 17.579 17.6855 19.95 14.3005 19.95Z' fill='%23AFB1B6'/%3E%3C/g%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.28126 15.1799C3.09526 15.1799 2.91026 15.1119 2.76526 14.9739C2.46426 14.6899 2.45226 14.2139 2.73726 13.9149L4.26526 12.3019C5.07426 11.4429 6.43926 11.4009 7.30226 12.2109L8.26026 13.1829C8.52726 13.4529 8.96126 13.4579 9.22926 13.1939C9.33026 13.0749 11.5083 10.4299 11.5083 10.4299C11.9223 9.92789 12.5063 9.61789 13.1553 9.55389C13.8053 9.49689 14.4363 9.68589 14.9393 10.0989C14.9823 10.1339 15.0213 10.1679 17.2173 12.4229C17.5063 12.7189 17.5013 13.1939 17.2043 13.4829C16.9083 13.7739 16.4323 13.7649 16.1433 13.4689C16.1433 13.4689 14.0943 11.3659 13.9483 11.2239C13.7933 11.0969 13.5443 11.0229 13.2993 11.0469C13.0503 11.0719 12.8263 11.1909 12.6673 11.3839C10.3433 14.2029 10.3153 14.2299 10.2773 14.2669C9.41926 15.1089 8.03426 15.0949 7.19126 14.2349C7.19126 14.2349 6.26126 13.2909 6.24526 13.2719C6.01426 13.0579 5.60226 13.0719 5.35526 13.3329L3.82526 14.9459C3.67726 15.1019 3.47926 15.1799 3.28126 15.1799Z' fill='%23AFB1B6'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.55769 6.12891C6.00469 6.12891 5.55469 6.57891 5.55469 7.13291C5.55469 7.68691 6.00469 8.13791 6.55869 8.13791C7.11269 8.13791 7.56369 7.68691 7.56369 7.13291C7.56369 6.57991 7.11269 6.12991 6.55769 6.12891ZM6.55869 9.63791C5.17769 9.63791 4.05469 8.51391 4.05469 7.13291C4.05469 5.75191 5.17769 4.62891 6.55869 4.62891C7.94069 4.62991 9.06369 5.75391 9.06369 7.13291C9.06369 8.51391 7.93969 9.63791 6.55869 9.63791Z' fill='%23AFB1B6'/%3E%3C/svg%3E");
 				background-repeat: no-repeat;
@@ -57,7 +58,7 @@
 			.changePhoto {
 				font-weight: 600;
 				font-size: 14px;
-                color: #FFFFFF;
+				color: #ffffff;
 				padding: 8px 12px;
 
 				background: #110042;
@@ -76,17 +77,16 @@
 
 			gap: 16px;
 
-            input[type='text'], input[type='email']{
+			input[type='text'],
+			input[type='email'] {
 				padding: 12px 24px;
-                background: #EEEEEE;
+				background: #eeeeee;
 				width: 100%;
 				border-radius: 15px;
 
-                
 				font-weight: 600;
 				font-size: 18px;
 			}
 		}
 	}
-
 </style>

src/routes/profile/profile.svelte

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
 	import Logout from './../../lib/svg/Logout.svelte'
 	import Help from './../../lib/svg/Help.svelte'
 	import Line from '$lib/components/Common/Line.svelte'
@@ -13,41 +13,43 @@
 	import PointSmall from '$lib/svg/PointSmall.svelte'
 	import InputPicture from '$lib/components/Inputs/InputPicture.svelte'
 	import { account, user } from '$lib/appwrite'
+	import collections from '$lib/collections'
+	import { Query } from 'appwrite'
 
-	$: console.log($user)
+	export let params: { erantId: string }
+	$: [userInfo] = collections.users.getDocument([Query.equal('erantId', params.erantId)])
 
 	const items = [
 		{
 			title: 'Account',
 			itms: [
-				{ icon: Profile, text: 'Update Your Profile', link:"/profile/profile_update"},
+				{ icon: Profile, text: 'Update Your Profile', link: '/profile/setting/profile_update' },
-				{ icon: Pen, text: 'Update Your Interests', link:"/profile/interests_update"},
+				{ icon: Pen, text: 'Update Your Interests', link: '/profile/setting/interests_update' },
 			],
 		},
 		{
 			title: 'Settings',
 			itms: [
-				{ icon: Setting2, text: 'Setting', link:"/profile/settings"},
+				{ icon: Setting2, text: 'Setting', link: '/profile/setting/settings' },
-				{ icon: CookieMonster, text: 'Cookies', link:"/profile/cookies"}
+				{ icon: CookieMonster, text: 'Cookies', link: '/profile/setting/cookies' },
 			],
 		},
 		{
 			title: 'Legal',
 			itms: [
-				{ icon: Help, text: 'Help', link:"/"},
+				{ icon: Help, text: 'Help', link: '/' },
-				{ icon: Warning, text: 'Terms & Condition', link:"/"},
+				{ icon: Warning, text: 'Terms & Condition', link: '/' },
-				{ icon: Logout, text: 'Log out', link: () => user.deleteSessions() },,
+				{ icon: Logout, text: 'Log out', link: () => user.deleteSessions() },
+				,
 			],
 		},
 	]
-
-
 </script>
 
-<NavigationBarLayout class="p-4">
+{#if $userInfo}
 	<div class="w-full h-[188px] flex flex-wrap flex-col gap-4 justify-center items-center mb-8">
 		<InputPicture />
-		<span class="font-semibold text-[24px]">User name</span>
+		<span class="font-semibold text-[24px]">{$userInfo.userName}</span>
 		<SettingRow class="w-auto gap-2">
 			<PointSmall />
 			<span class="text-[16px] text-[#61646B]">Prague, Czechia</span>
@@ -59,7 +61,7 @@
 		{#each items as { title, itms }}
 			<div class="mb-4 text-[18px] text-[#61646B]">{title}</div>
 			{#each itms as { icon, text, link }}
-				{#if (typeof link === 'function')}
+				{#if typeof link === 'function'}
 					<SettingRow>
 						<svelte:component this={icon} />
 						<button class="font-semibold text-[18px]" on:click={() => link()}>{text}</button>
@@ -71,8 +73,7 @@
 					</SettingRow>
 					<Line />
 				{/if}
-				
 			{/each}
 		{/each}
 	</div>
-</NavigationBarLayout>
+{/if}

src/routes/register/register.svelte

@@ -5,8 +5,6 @@
 	import GoogleLogo from '../../lib/svg/GoogleLogo.svelte'
 	import TopImage from '../../lib/svg/Top-Image.svelte'
 
-	export let purpose = 'register' //possible values login, register
-
 	let email = ''
 	let password = ''
 	let repeatPassword = ''
@@ -33,29 +31,13 @@
 </script>
 
 <div class="main">
-	<!--Top image static link form lib/svg-->
 	<div class="top-image">
 		<TopImage />
 	</div>
 
-	<!--Welcome sign 2 options for Log in and for register-->
+	<h1 class="headline">Register</h1>
-	<h1 class="headline">
-		{#if purpose === 'login'}
-			Welcome Back
-		{:else}
-			Register
-		{/if}
-	</h1>
 
-	<!--2 forms from components-->
 	<div class="form">
-		{#if purpose === 'login'}
-			<form>
-				<input type="text" placeholder="E-mail" autocomplete="email" required />
-				<HiddenInput placeholder="Password" />
-				<input type="submit" value="Sign in" />
-			</form>
-		{:else}
 		<form>
 			<input bind:value={name} type="text" placeholder="Name" autocomplete="full-name" required />
 			<input bind:value={email} type="text" placeholder="E-mail" autocomplete="email" required />
@@ -63,7 +45,6 @@
 			<HiddenInput bind:value={repeatPassword} placeholder="Re-type password" />
 			<input class="cursor-pointer" on:click={() => register()} type="submit" value="Sign up" />
 		</form>
-		{/if}
 	</div>
 
 	<div class="continue_with">
@@ -78,12 +59,7 @@
 	</div>
 
 	<div class="LR_switch">
-		<!--LR switch = login / register switch-->
-		{#if purpose === 'login'}
-			<p>Don’t have an account? <a href="/register">Sign-up</a></p>
-		{:else}
 		<p>Already have an account? <a href="/login">Log In</a></p>
-		{/if}
 	</div>
 </div>