added Basic Status Messages to GoogleAuth
This commit is contained in:
parent
207b154035
commit
081d052443
@ -1,6 +1,5 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { onMount, tick } from 'svelte';
|
import { onMount, tick } from 'svelte';
|
||||||
import { createMessage } from '$lib/services/messages';
|
|
||||||
import {
|
import {
|
||||||
LitAuthClient,
|
LitAuthClient,
|
||||||
BaseProvider,
|
BaseProvider,
|
||||||
@ -12,6 +11,7 @@
|
|||||||
import { IRelayPKP } from '@lit-protocol/types';
|
import { IRelayPKP } from '@lit-protocol/types';
|
||||||
import { ProviderType } from '@lit-protocol/constants';
|
import { ProviderType } from '@lit-protocol/constants';
|
||||||
import { LitAccessControlConditionResource, LitAbility } from '@lit-protocol/auth-helpers';
|
import { LitAccessControlConditionResource, LitAbility } from '@lit-protocol/auth-helpers';
|
||||||
|
import { createMessage } from '$lib/services/messages';
|
||||||
|
|
||||||
const redirectUri = 'http://localhost:5173/';
|
const redirectUri = 'http://localhost:5173/';
|
||||||
let view = 'sign_in';
|
let view = 'sign_in';
|
||||||
@ -25,24 +25,14 @@
|
|||||||
let sessionSigs;
|
let sessionSigs;
|
||||||
let isLoading = false;
|
let isLoading = false;
|
||||||
|
|
||||||
// Add an array to store chat messages
|
|
||||||
let messages: string[] = [];
|
|
||||||
|
|
||||||
// Helper function to add a message to the chat
|
|
||||||
function addMessage(message: string) {
|
|
||||||
messages = [...messages, message];
|
|
||||||
}
|
|
||||||
async function authWithGoogle() {
|
async function authWithGoogle() {
|
||||||
isLoading = true;
|
isLoading = true;
|
||||||
error = null;
|
error = null;
|
||||||
addMessage('Starting authentication with Google...'); // Replace console.log
|
|
||||||
try {
|
try {
|
||||||
const provider = litAuthClient.initProvider<GoogleProvider>(ProviderType.Google);
|
const provider = litAuthClient.initProvider<GoogleProvider>(ProviderType.Google);
|
||||||
await provider.signIn();
|
await provider.signIn();
|
||||||
addMessage('Handling Google authentication...'); // Replace console.log
|
|
||||||
await handleRedirect(ProviderType.Google);
|
await handleRedirect(ProviderType.Google);
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
createMessage('Error: ' + err.message); // Use createMessage
|
|
||||||
error = err;
|
error = err;
|
||||||
view = 'ERROR';
|
view = 'ERROR';
|
||||||
} finally {
|
} finally {
|
||||||
@ -52,6 +42,11 @@
|
|||||||
|
|
||||||
async function handleRedirect(providerName: string) {
|
async function handleRedirect(providerName: string) {
|
||||||
isLoading = true;
|
isLoading = true;
|
||||||
|
createMessage({
|
||||||
|
text: `Handling redirect for ${providerName}`,
|
||||||
|
sender: '$lib/components/GoogleAuth.svelte',
|
||||||
|
type: 'SYSTEM'
|
||||||
|
});
|
||||||
try {
|
try {
|
||||||
console.log('Handling redirect...');
|
console.log('Handling redirect...');
|
||||||
let provider: BaseProvider | undefined;
|
let provider: BaseProvider | undefined;
|
||||||
@ -90,15 +85,22 @@
|
|||||||
}
|
}
|
||||||
console.log(`Handling redirect for ${providerName}`);
|
console.log(`Handling redirect for ${providerName}`);
|
||||||
console.log(`Fetched PKPs: ${pkps.length}`);
|
console.log(`Fetched PKPs: ${pkps.length}`);
|
||||||
// Add chat message updates
|
createMessage({
|
||||||
addMessage(`Handling redirect for ${providerName}`);
|
text: `Fetched PKPs: ${pkps.length}`,
|
||||||
addMessage(`Fetched PKPs: ${pkps.length}`);
|
sender: '$lib/components/GoogleAuth.svelte',
|
||||||
|
type: 'SYSTEM'
|
||||||
|
});
|
||||||
}
|
}
|
||||||
async function mint() {
|
async function mint() {
|
||||||
isLoading = true;
|
isLoading = true;
|
||||||
error = null;
|
error = null;
|
||||||
try {
|
try {
|
||||||
console.log('Minting started...');
|
console.log('Minting started...');
|
||||||
|
createMessage({
|
||||||
|
text: 'Minting started...',
|
||||||
|
sender: '$lib/components/GoogleAuth.svelte',
|
||||||
|
type: 'SYSTEM'
|
||||||
|
});
|
||||||
view = 'MINTING';
|
view = 'MINTING';
|
||||||
|
|
||||||
const provider = litAuthClient.getProvider(currentProviderType);
|
const provider = litAuthClient.getProvider(currentProviderType);
|
||||||
@ -125,6 +127,11 @@
|
|||||||
isLoading = false;
|
isLoading = false;
|
||||||
}
|
}
|
||||||
console.log('Minted a new PKP.');
|
console.log('Minted a new PKP.');
|
||||||
|
createMessage({
|
||||||
|
text: 'Minted a new PKP.',
|
||||||
|
sender: '$lib/components/GoogleAuth.svelte',
|
||||||
|
type: 'SYSTEM'
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
async function createSession(pkp: IRelayPKP) {
|
async function createSession(pkp: IRelayPKP) {
|
||||||
@ -132,6 +139,11 @@
|
|||||||
error = null;
|
error = null;
|
||||||
try {
|
try {
|
||||||
console.log('Creating session...');
|
console.log('Creating session...');
|
||||||
|
createMessage({
|
||||||
|
text: 'Creating session...',
|
||||||
|
sender: '$lib/components/GoogleAuth.svelte',
|
||||||
|
type: 'SYSTEM'
|
||||||
|
});
|
||||||
view = 'CREATING_SESSION';
|
view = 'CREATING_SESSION';
|
||||||
|
|
||||||
const litResource = new LitAccessControlConditionResource('*');
|
const litResource = new LitAccessControlConditionResource('*');
|
||||||
@ -150,6 +162,11 @@
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
currentPKP = pkp;
|
currentPKP = pkp;
|
||||||
|
createMessage({
|
||||||
|
text: 'Session created.',
|
||||||
|
sender: '$lib/components/GoogleAuth.svelte',
|
||||||
|
type: 'SYSTEM'
|
||||||
|
});
|
||||||
view = 'SESSION_CREATED';
|
view = 'SESSION_CREATED';
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
console.error(err);
|
console.error(err);
|
||||||
@ -166,7 +183,11 @@
|
|||||||
onMount(async () => {
|
onMount(async () => {
|
||||||
isLoading = true;
|
isLoading = true;
|
||||||
console.log('Component mounted.');
|
console.log('Component mounted.');
|
||||||
addMessage('MOUNTED.');
|
createMessage({
|
||||||
|
text: 'Component mounted.',
|
||||||
|
sender: '$lib/components/GoogleAuth.svelte',
|
||||||
|
type: 'SYSTEM'
|
||||||
|
});
|
||||||
try {
|
try {
|
||||||
litNodeClient = new LitNodeClient({
|
litNodeClient = new LitNodeClient({
|
||||||
litNetwork: 'serrano',
|
litNetwork: 'serrano',
|
||||||
@ -186,6 +207,11 @@
|
|||||||
console.log('Checking if isSignInRedirect...');
|
console.log('Checking if isSignInRedirect...');
|
||||||
if (!authMethod && isSignInRedirect(redirectUri)) {
|
if (!authMethod && isSignInRedirect(redirectUri)) {
|
||||||
console.log('Redirect detected, handling...');
|
console.log('Redirect detected, handling...');
|
||||||
|
createMessage({
|
||||||
|
text: 'Redirect detected, handling...',
|
||||||
|
sender: '$lib/components/GoogleAuth.svelte',
|
||||||
|
type: 'SYSTEM'
|
||||||
|
});
|
||||||
const providerName = getProviderFromUrl();
|
const providerName = getProviderFromUrl();
|
||||||
if (providerName) {
|
if (providerName) {
|
||||||
await handleRedirect(providerName);
|
await handleRedirect(providerName);
|
||||||
@ -194,6 +220,11 @@
|
|||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
console.log('No redirect detected.');
|
console.log('No redirect detected.');
|
||||||
|
createMessage({
|
||||||
|
text: 'No redirect detected.',
|
||||||
|
sender: '$lib/components/GoogleAuth.svelte',
|
||||||
|
type: 'SYSTEM'
|
||||||
|
});
|
||||||
}
|
}
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
console.error(err);
|
console.error(err);
|
@ -1,12 +1,18 @@
|
|||||||
<script>
|
<script>
|
||||||
import { createMessage, clearMessages } from '$lib/services/messages';
|
import { createMessage, clearMessages } from '$lib/services/messages';
|
||||||
|
|
||||||
|
createMessage({
|
||||||
|
text: 'Component loaded',
|
||||||
|
sender: '$lib/components/MessageInput.svelte',
|
||||||
|
type: 'SYSTEM'
|
||||||
|
});
|
||||||
|
|
||||||
let newMessageText = '';
|
let newMessageText = '';
|
||||||
|
|
||||||
function handleSend() {
|
function handleSend() {
|
||||||
if (newMessageText.trim() !== '') {
|
if (newMessageText.trim() !== '') {
|
||||||
// Create a new message with the default sender and type
|
// Create a new message with the default sender and type using an object
|
||||||
createMessage(newMessageText, 'user', 'chat');
|
createMessage({ text: newMessageText, sender: 'user', type: 'chat' });
|
||||||
newMessageText = '';
|
newMessageText = '';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -1,10 +1,23 @@
|
|||||||
<script>
|
<script>
|
||||||
import { messages } from '$lib/services/messages';
|
import { messages, createMessage } from '$lib/services/messages';
|
||||||
|
|
||||||
|
createMessage({
|
||||||
|
text: 'Component loaded',
|
||||||
|
sender: '$lib/components/Messages.svelte',
|
||||||
|
type: 'SYSTEM'
|
||||||
|
});
|
||||||
|
// Since messages is a store, we can subscribe to changes and store the latest messages in a variable
|
||||||
|
let latestMessages = [];
|
||||||
|
|
||||||
|
// Subscribe to the messages store to keep track of the latest messages
|
||||||
|
$: messages.subscribe((value) => {
|
||||||
|
latestMessages = value;
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<main class="p-4 flex flex-col-reverse overflow-y-auto h-[calc(100vh-70px)]">
|
<main class="p-4 flex flex-col-reverse overflow-y-auto h-[calc(100vh-70px)]">
|
||||||
<!-- Your messages, displayed in chronological order -->
|
<!-- Your messages, displayed in chronological order -->
|
||||||
{#each $messages as message}
|
{#each latestMessages as message}
|
||||||
<div class="bg-white p-3 rounded-lg shadow-lg mb-2">
|
<div class="bg-white p-3 rounded-lg shadow-lg mb-2">
|
||||||
<div class="flex items-center justify-between">
|
<div class="flex items-center justify-between">
|
||||||
<p class="text-sm text-gray-600">
|
<p class="text-sm text-gray-600">
|
||||||
|
@ -1,8 +0,0 @@
|
|||||||
interface Message {
|
|
||||||
message: string;
|
|
||||||
date: Date;
|
|
||||||
sender: string;
|
|
||||||
type: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Message;
|
|
@ -6,24 +6,24 @@ function isClientSide() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// Safely get item from localStorage
|
// Safely get item from localStorage
|
||||||
function getFromLocalStorage(key: string, defaultValue: any) {
|
function getFromLocalStorage(key, defaultValue) {
|
||||||
if (isClientSide()) {
|
if (isClientSide()) {
|
||||||
return localStorage.getItem(key)
|
return localStorage.getItem(key)
|
||||||
? JSON.parse(localStorage.getItem(key)!)
|
? JSON.parse(localStorage.getItem(key))
|
||||||
: defaultValue;
|
: defaultValue;
|
||||||
}
|
}
|
||||||
return defaultValue;
|
return defaultValue;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Safely set item to localStorage
|
// Safely set item to localStorage
|
||||||
function setToLocalStorage(key: string, value: any) {
|
function setToLocalStorage(key, value) {
|
||||||
if (isClientSide()) {
|
if (isClientSide()) {
|
||||||
localStorage.setItem(key, JSON.stringify(value));
|
localStorage.setItem(key, JSON.stringify(value));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Define the updated Message interface
|
// Define the updated Message interface
|
||||||
interface Message {
|
export interface Message {
|
||||||
text: string;
|
text: string;
|
||||||
timestamp: string;
|
timestamp: string;
|
||||||
sender: string;
|
sender: string;
|
||||||
@ -31,8 +31,9 @@ interface Message {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// Load messages from localStorage or set an empty array if not available
|
// Load messages from localStorage or set an empty array if not available
|
||||||
const initialMessages: Message[] = getFromLocalStorage('chat-messages', []);
|
const initialMessages = getFromLocalStorage('chat-messages', []);
|
||||||
|
|
||||||
|
// Convert the array to a writable store
|
||||||
export const messages = writable(initialMessages);
|
export const messages = writable(initialMessages);
|
||||||
|
|
||||||
// Subscribe to messages store to watch for changes and save them to localStorage
|
// Subscribe to messages store to watch for changes and save them to localStorage
|
||||||
@ -40,28 +41,14 @@ messages.subscribe(currentMessages => {
|
|||||||
setToLocalStorage('chat-messages', currentMessages);
|
setToLocalStorage('chat-messages', currentMessages);
|
||||||
});
|
});
|
||||||
|
|
||||||
// Dummy messages
|
|
||||||
const messagesList: Message[] = [
|
|
||||||
{ text: "Hello there!", timestamp: new Date().toLocaleString(), sender: "John", type: "text" },
|
|
||||||
{ text: "How are you?", timestamp: new Date().toLocaleString(), sender: "Alice", type: "text" },
|
|
||||||
// Add more dummy messages here with the timestamp and sender properties
|
|
||||||
];
|
|
||||||
|
|
||||||
export function addRandomMessage() {
|
export function createMessage(messageData) {
|
||||||
const randomMessage = messagesList[Math.floor(Math.random() * messagesList.length)];
|
|
||||||
messages.update(oldMessages => [
|
|
||||||
...oldMessages,
|
|
||||||
{ ...randomMessage, timestamp: new Date().toLocaleString(), sender: "Bot", type: "chat" }
|
|
||||||
]);
|
|
||||||
}
|
|
||||||
|
|
||||||
export function createMessage(text: string, sender: string, type: string) {
|
|
||||||
const currentDate = new Date().toLocaleString();
|
const currentDate = new Date().toLocaleString();
|
||||||
const newMessageObj: Message = {
|
const newMessageObj = {
|
||||||
text: text,
|
text: messageData.text,
|
||||||
timestamp: currentDate,
|
timestamp: currentDate,
|
||||||
sender: sender,
|
sender: messageData.sender,
|
||||||
type: type
|
type: messageData.type
|
||||||
};
|
};
|
||||||
messages.update(oldMessages => [...oldMessages, newMessageObj]);
|
messages.update(oldMessages => [...oldMessages, newMessageObj]);
|
||||||
}
|
}
|
||||||
@ -69,3 +56,10 @@ export function createMessage(text: string, sender: string, type: string) {
|
|||||||
export function clearMessages() {
|
export function clearMessages() {
|
||||||
messages.set([]);
|
messages.set([]);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Dummy messages
|
||||||
|
export const messagesList: Message[] = [
|
||||||
|
{ text: "Hello there!", timestamp: new Date().toLocaleString(), sender: "John", type: "text" },
|
||||||
|
{ text: "How are you?", timestamp: new Date().toLocaleString(), sender: "Alice", type: "text" },
|
||||||
|
// Add more dummy messages here with the timestamp and sender properties
|
||||||
|
];
|
||||||
|
@ -5,7 +5,7 @@
|
|||||||
import Send from '$lib/Send.svelte';
|
import Send from '$lib/Send.svelte';
|
||||||
import Balance from '$lib/Balance.svelte';
|
import Balance from '$lib/Balance.svelte';
|
||||||
import WalletConnect from '$lib/WalletConnect.svelte';
|
import WalletConnect from '$lib/WalletConnect.svelte';
|
||||||
import GoogleAuth from '$lib/GoogleAuth.svelte';
|
import GoogleAuth from '$lib/components/GoogleAuth.svelte';
|
||||||
import Messages from '$lib/components/Messages.svelte';
|
import Messages from '$lib/components/Messages.svelte';
|
||||||
import MessageInput from '$lib/components/MessageInput.svelte';
|
import MessageInput from '$lib/components/MessageInput.svelte';
|
||||||
let pkpWallet;
|
let pkpWallet;
|
||||||
|
Loading…
Reference in New Issue
Block a user