dressly: add parse cookies and jwt decoded

dressly/.env

@@ -0,0 +1 @@
+PUBLIC_CF_ACCESS=khafidprayoga.cloudflareaccess.com

dressly/package.json

@@ -11,6 +11,9 @@
     "svelte-check": "svelte-check --tsconfig ./tsconfig.json"
   },
   "dependencies": {
+    "axios": "^1.7.7",
+    "js-cookie": "^3.0.5",
+    "jwt-decode": "^4.0.0",
     "lucide-svelte": "^0.447.0",
     "svelte": "^4.2.19",
     "vanilla-lazyload": "^19.1.3"
@@ -21,6 +24,7 @@
     "@rsbuild/plugin-image-compress": "^1.0.2",
     "@rsbuild/plugin-svelte": "^1.0.1",
     "@selemondev/svelte-marquee": "^0.0.2",
+    "@types/js-cookie": "^3.0.6",
     "add": "^2.0.6",
     "autoprefixer": "^10.4.20",
     "eslint": "^9.10.0",

dressly/rsbuild.config.ts

@@ -1,7 +1,10 @@
-import { defineConfig } from '@rsbuild/core';
+import { RsbuildConfig, defineConfig, loadEnv } from '@rsbuild/core';
 import { pluginSvelte, PluginSvelteOptions } from '@rsbuild/plugin-svelte';
 import { pluginImageCompress } from "@rsbuild/plugin-image-compress";
 
+const { parsed, publicVars } = loadEnv();
+
+
 const svelteConfig: PluginSvelteOptions = {
   svelteLoaderOptions: {},
   preprocessOptions: {
@@ -10,7 +13,7 @@ const svelteConfig: PluginSvelteOptions = {
 };
 
 
-export default defineConfig({
+const Config: RsbuildConfig = {
   plugins: [pluginSvelte(svelteConfig), pluginImageCompress(['png','svg'])],
   html: {
     title: 'DressLy - Discover the Latest Fashion Trends',
@@ -29,5 +32,10 @@ export default defineConfig({
   },
   output:{
     polyfill: 'usage',
-  }
-});
+  },
+  source: {
+    define: parsed,
+  },
+}
+
+export default defineConfig(Config);

dressly/src/components/Header/ActionIcon.svelte

@@ -1,20 +1,32 @@
-<script>
-  import { search, cart, account, menu } from '@icons/index';    
+<script lang="ts">
+  import { search, cart, account,  } from '@icons/index';
+  import { userData } from '@store/auth';
+
+  $: userName = $userData.email;
 </script>
+
 <div class="flex items-center space-x-4">
   <button
     class="hidden md:block text-gray-700 hover:text-gray-900 hover:bg-gray-100 px-3 py-2 rounded-md"
     aria-label="Search"
   >
     <img src={search} alt="Search" class="h-6 w-6" />
   </button>
-  <button class="text-gray-700 hover:text-gray-900 hover:bg-gray-200 px-3 py-2 rounded-md" aria-label="Shopping cart">
+  <button
+    class="text-gray-700 hover:text-gray-900 hover:bg-gray-200 px-3 py-2 rounded-md"
+    aria-label="Shopping cart"
+  >
     <img src={cart} alt="Shopping cart" class="h-6 w-6" />
   </button>
   <button
     class="hidden md:block text-gray-700 hover:text-gray-900 hover:bg-gray-200 px-3 py-2 rounded-md"
     aria-label="User account"
   >
-    <img src={account} alt="User Account Login" class="w-6 h-6" />
+    <img src={account} alt="User Account " class="w-6 h-6" />
   </button>
+  {#if userName}
+    <span class="hidden sm:inline-block font-thin font-OpenSans"
+      >{userName}</span
+    >
+  {/if}
 </div>

dressly/src/config/session/cloudflare.ts

@@ -0,0 +1,29 @@
+export interface SessionData {
+    id: number
+    name: string
+    email: string
+    groups: any[]
+    idp: Idp
+    geo: Geo
+    user_uuid: string
+    account_id: string
+    iat: number
+    ip: string
+    auth_status: string
+    common_name: string
+    service_token_id: string
+    service_token_status: boolean
+    is_warp: boolean
+    is_gateway: boolean
+    version: number
+}
+
+export interface Idp {
+    id: string
+    type: string
+}
+
+export interface Geo {
+    country: string
+}
+

dressly/src/index.ts

@@ -1,5 +1,11 @@
 import App from './App.svelte';
 import './index.css';
+import { getAuthorizationToken, userData } from '@store/auth';
+
+let creds = getAuthorizationToken();
+if (creds) {
+  userData.set(creds);
+}
 
 const app = new App({
   target: document.body,

dressly/src/store/auth.ts

@@ -0,0 +1,33 @@
+import Cookies from "js-cookie";
+import { jwtDecode } from 'jwt-decode';
+
+import { writable } from 'svelte/store';
+let defaultUserData = {} as JWTPayload;
+export const userData = writable(defaultUserData);
+export function getAuthorizationToken() {
+  let jwt = Cookies.get("CF_Authorization") || null;
+  if (!jwt) {
+    return null;
+  }
+
+  const decoded: JWTPayload = jwtDecode(jwt, );
+
+  return decoded
+}
+
+
+export interface JWTPayload {
+  aud: string[]
+  email: string
+  exp: number
+  iat: number
+  nbf: number
+  iss: string
+  type: string
+  identity_nonce: string
+  sub: string
+  pathCookie: boolean
+  pathText: string
+  country: string
+}
+

dressly/tsconfig.json

@@ -20,7 +20,8 @@
       "@brand/*": ["./src/assets/brand/*"],
       "@icons/*": ["./src/assets/icons/*"],
       "@components/*": ["./src/components/*"],
-      "@store/*": ["./src/store/*"]
+      "@store/*": ["./src/store/*"],
+      "@config/*": ["./src/config/*"]
     }
   },
   "include": ["src"]