From 087f8329d9a7d0ef158f0a73ae83b17d0a535e42 Mon Sep 17 00:00:00 2001
From: Stephen Gordon <n00202054@iadt.ie>
Date: Tue, 23 Apr 2024 11:26:32 +0100
Subject: [PATCH] cleaned up the login page

---
 src/app/@auth/(.)settings/page.tsx            | 58 ++++++++++++-------
 .../SendNotification/SendNotification.tsx     | 54 +++++++++--------
 2 files changed, 66 insertions(+), 46 deletions(-)

diff --git a/src/app/@auth/(.)settings/page.tsx b/src/app/@auth/(.)settings/page.tsx
index b18711a..7a1269b 100644
--- a/src/app/@auth/(.)settings/page.tsx
+++ b/src/app/@auth/(.)settings/page.tsx
@@ -10,46 +10,60 @@ import { useLogout } from '@privy-io/react-auth';
 import { useRouter } from 'next/navigation';
 
 import {motion }from 'framer-motion';
+import { usePrivySmartAccount } from '@zerodev/privy';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/app/components/ui/card';
 
 export default function Page() {
 
  // const { logout } = usePrivySmartAccount()
+   const { user } = usePrivySmartAccount();
+
 
  const router = useRouter();
 
 
   const { logout } = useLogout({
     onSuccess: () => {
-      console.log('User logged out');
       router.push('/login');
       localStorage.clear();
-      // Any logic you'd like to execute after a user successfully logs out
     },
   });
 
   return (
     <>
-      <motion.div
-      
-      className='grid space-y-6 p-4'>
+      <motion.div className='grid space-y-6 p-4'>
+        <p className='text-xl'> {user?.google?.name}</p>
+        <p className='text-base'> {user?.wallet?.address}</p>
+
         <SendNotification />
-        <Button
-          className='bg-red-500'
-          //variant={'destructive'}
-          onClick={() => {
-            logout();
-          }}
-        >
-          Log out
-        </Button>
-        <Button
-          variant={'destructive'}
-          onClick={() => {
-            localStorage.clear();
-          }}
-        >
-          Clear Local Storage
-        </Button>
+        <Card className='grid'>
+          <CardHeader>
+            <CardTitle>Account</CardTitle>
+            <CardDescription>
+              <p>Control your account settings </p>
+            </CardDescription>
+          </CardHeader>
+          <CardContent className=' space-y-6'>
+
+            <Button
+              className='bg-red-500'
+              onClick={() => {
+                localStorage.clear();
+              }}
+            >
+              Clear Local Storage
+            </Button>
+
+            <Button
+              className='bg-red-500'
+              onClick={() => {
+                logout();
+              }}
+            >
+              Log out
+            </Button>
+          </CardContent>
+        </Card>
       </motion.div>
     </>
   );
diff --git a/src/app/components/SendNotification/SendNotification.tsx b/src/app/components/SendNotification/SendNotification.tsx
index d64d4db..63c0ca4 100644
--- a/src/app/components/SendNotification/SendNotification.tsx
+++ b/src/app/components/SendNotification/SendNotification.tsx
@@ -3,6 +3,9 @@
 import useGetAddress from '@/app/hooks/useGetAddress';
 import type { MouseEventHandler } from 'react';
 import { useEffect, useState } from 'react';
+import { Button } from '../ui/button';
+import { usePrivySmartAccount } from '@zerodev/privy';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card';
 
 const base64ToUint8Array = (base64: string) => {
   const padding = '='.repeat((4 - (base64.length % 4)) % 4);
@@ -18,10 +21,14 @@ const base64ToUint8Array = (base64: string) => {
 };
 
 export default function SendNotification() {
+  
+  
   const [isSubscribed, setIsSubscribed] = useState(false);
   const [subscription, setSubscription] = useState<PushSubscription | null>(
     null
   );
+
+
   const [text, setText] = useState('');
   const [registration, setRegistration] =
     useState<ServiceWorkerRegistration | null>(null);
@@ -160,30 +167,29 @@ export default function SendNotification() {
 
   return (
     <>
-      <div className='grid'>
-        <p>{text}</p>
-        <button
-          type='button'
-          onClick={subscribeButtonOnClick}
-          disabled={isSubscribed}
-        >
-          Subscribe
-        </button>
-        <button
-          type='button'
-          onClick={unsubscribeButtonOnClick}
-          disabled={!isSubscribed}
-        >
-          Unsubscribe
-        </button>
-        <button
-          type='button'
-          onClick={sendNotificationButtonOnClick}
-          disabled={!isSubscribed}
-        >
-          Send Notification
-        </button>
-      </div>
+      <Card className='grid'>
+        <CardHeader>
+          <CardTitle>Notification Center</CardTitle>
+          <CardDescription>
+            <p>Control your Push Notifications</p>
+          </CardDescription>
+        </CardHeader>
+        <CardContent className=' space-y-6'>
+          <Button onClick={subscribeButtonOnClick}>
+            Turn Notifications on
+          </Button>
+          <Button onClick={unsubscribeButtonOnClick}>
+            Turn Notifications off
+          </Button>
+
+          <Button
+            onClick={sendNotificationButtonOnClick}
+            disabled={!isSubscribed}
+          >
+            Send Test Notification
+          </Button>
+        </CardContent>
+      </Card>
     </>
   );
 }