diff --git a/examples/vue-app/public/assets/web3auth.svg b/examples/vue-app/public/assets/web3auth.svg new file mode 100644 index 00000000..1828f673 --- /dev/null +++ b/examples/vue-app/public/assets/web3auth.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/examples/vue-app/src/App.vue b/examples/vue-app/src/App.vue index 85e41f6b..2d227f35 100644 --- a/examples/vue-app/src/App.vue +++ b/examples/vue-app/src/App.vue @@ -1,5 +1,6 @@ @@ -13,3 +14,7 @@ body, font-family: "Poppins", sans-serif !important; } + + \ No newline at end of file diff --git a/examples/vue-app/src/HomePage.vue b/examples/vue-app/src/HomePage.vue deleted file mode 100644 index 22f5ad29..00000000 --- a/examples/vue-app/src/HomePage.vue +++ /dev/null @@ -1,165 +0,0 @@ - - - - - diff --git a/examples/vue-app/src/assets/web3auth.svg b/examples/vue-app/src/assets/web3auth.svg new file mode 100644 index 00000000..410d7672 --- /dev/null +++ b/examples/vue-app/src/assets/web3auth.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/examples/vue-app/src/components/Navbar/Navbar.vue b/examples/vue-app/src/components/Navbar/Navbar.vue new file mode 100644 index 00000000..f952f877 --- /dev/null +++ b/examples/vue-app/src/components/Navbar/Navbar.vue @@ -0,0 +1,32 @@ + + + \ No newline at end of file diff --git a/examples/vue-app/src/components/Navbar/index.ts b/examples/vue-app/src/components/Navbar/index.ts new file mode 100644 index 00000000..605d9660 --- /dev/null +++ b/examples/vue-app/src/components/Navbar/index.ts @@ -0,0 +1 @@ +export { default } from "./Navbar.vue"; diff --git a/examples/vue-app/src/constants/index.ts b/examples/vue-app/src/constants/index.ts index 7657637e..c3df8c26 100644 --- a/examples/vue-app/src/constants/index.ts +++ b/examples/vue-app/src/constants/index.ts @@ -1,3 +1,8 @@ +export const ROUTES = { + HOME: "Home", + LOGIN: "Login", +}; + export const GOOGLE = "google"; export const FACEBOOK = "facebook"; export const REDDIT = "reddit"; diff --git a/examples/vue-app/src/main.ts b/examples/vue-app/src/main.ts index 82f71465..d7de818a 100644 --- a/examples/vue-app/src/main.ts +++ b/examples/vue-app/src/main.ts @@ -1,9 +1,7 @@ import "./tailwind.css"; - import { createApp } from "vue"; - -import App from "./App.vue"; -import router from "./router"; -import createIcons from "./plugins/iconPlugin"; +import App from "@/App.vue"; +import router from "@/router"; +import createIcons from "@/plugins/iconPlugin"; createApp(App).use(router).use(createIcons).mount("#app"); diff --git a/examples/vue-app/src/router.ts b/examples/vue-app/src/router.ts new file mode 100644 index 00000000..3d1f6da0 --- /dev/null +++ b/examples/vue-app/src/router.ts @@ -0,0 +1,18 @@ +import { createRouter, createWebHistory } from "vue-router"; + +const Home = () => import("@/views/Home.vue"); +const PopupLogin = () => import("@/views/PopupMode/Login.vue"); +const RedirectLogin = () => import("@/views/RedirectMode/Login.vue"); +const Dashboard = () => import("@/views/RedirectMode/Auth.vue"); + +const router = createRouter({ + history: createWebHistory(import.meta.env.BASE_URL), + routes: [ + { path: "/", component: Home }, + { path: "/popupMode", component: PopupLogin }, + { path: "/redirectMode", component: RedirectLogin }, + { path: "/auth", component: Dashboard }, + ], +}); + +export default router; diff --git a/examples/vue-app/src/router/index.ts b/examples/vue-app/src/router/index.ts deleted file mode 100644 index 812fedd8..00000000 --- a/examples/vue-app/src/router/index.ts +++ /dev/null @@ -1,34 +0,0 @@ -import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router"; - -const routes: RouteRecordRaw[] = [ - { - path: "/popupMode", - name: "PopupLogin", - component: () => import(/* webpackChunkName: "popupmode" */ "../views/PopupMode/Login.vue"), - }, - { - path: "/redirectMode", - name: "RedirectLogin", - component: () => import(/* webpackChunkName: "redirectmode" */ "../views/RedirectMode/Login.vue"), - }, - { - path: "/auth", - name: "Auth", - // route level code-splitting - // this generates a separate chunk (about.[hash].js) for this route - // which is lazy-loaded when the route is visited. - component: () => import(/* webpackChunkName: "auth" */ "../views/RedirectMode/Auth.vue"), - }, - { - path: "/", - name: "HomePage", - component: () => import(/* webpackChunkName: "root" */ "../HomePage.vue"), - }, -]; - -const router = createRouter({ - history: createWebHistory(import.meta.env.BASE_URL), - routes, -}); - -export default router; diff --git a/examples/vue-app/src/router/vue-shim.d.ts b/examples/vue-app/src/router/vue-shim.d.ts deleted file mode 100644 index 0660bd67..00000000 --- a/examples/vue-app/src/router/vue-shim.d.ts +++ /dev/null @@ -1,4 +0,0 @@ -declare module "*.vue" { - import Vue from "vue"; - export default Vue; -} diff --git a/examples/vue-app/src/store/index.ts b/examples/vue-app/src/store/index.ts new file mode 100644 index 00000000..6de4a0ec --- /dev/null +++ b/examples/vue-app/src/store/index.ts @@ -0,0 +1,29 @@ +import { reactive, ref } from "vue"; +import { LOCAL_NETWORK } from "@/constants"; +import router from "@/router"; + +export const isLoggedIn = reactive(ref(true)); +export const logout = () => { + isLoggedIn.value = false; + setPrivKey(""); + localStorage.removeItem(LOCAL_NETWORK); + router.push("/"); +}; +export const privKey = reactive(ref("" as string | null)); +export const setPrivKey = (newKey: string) => { + privKey.value = newKey; + localStorage.setItem("privateKey", newKey); +}; + +export const store = reactive({ + loginMode: "" as string, + isLoggedIn: true, + privateKey: "", + selectedVerifier: "google" as string, + changeKey(newKey: string) { + this.privateKey = newKey; + }, + login() { + this.isLoggedIn = true; + }, +}); diff --git a/examples/vue-app/src/tailwind.css b/examples/vue-app/src/tailwind.css index b5c61c95..bd6213e1 100644 --- a/examples/vue-app/src/tailwind.css +++ b/examples/vue-app/src/tailwind.css @@ -1,3 +1,3 @@ @tailwind base; @tailwind components; -@tailwind utilities; +@tailwind utilities; \ No newline at end of file diff --git a/examples/vue-app/src/views/Home.vue b/examples/vue-app/src/views/Home.vue new file mode 100644 index 00000000..0e3dbfb7 --- /dev/null +++ b/examples/vue-app/src/views/Home.vue @@ -0,0 +1,37 @@ + + + diff --git a/examples/vue-app/src/views/PopupMode/Login.vue b/examples/vue-app/src/views/PopupMode/Login.vue index 69e9ee34..1b2f12be 100644 --- a/examples/vue-app/src/views/PopupMode/Login.vue +++ b/examples/vue-app/src/views/PopupMode/Login.vue @@ -219,6 +219,20 @@ const loginToConnectionMap = computed((): Record => ({ connection: "sms", }, })); +const _console = (args: unknown[]): void => { + const el = document.querySelector("#console>pre"); + const h1 = document.querySelector("#console>h1"); + const consoleBtn = document.querySelector("#console>div.clear-console-btn"); + if (h1) { + h1.innerHTML = args[0] as string; + } + if (el) { + el.innerHTML = JSON.stringify(args[1] || {}, (_, v) => (typeof v === "bigint" ? v.toString() : v), 2); + } + if (consoleBtn) { + consoleBtn.style.display = "block"; + } +}; const login = async (hash?: string, queryParameters?: Record) => { try { diff --git a/examples/vue-app/src/views/RedirectMode/Auth.css b/examples/vue-app/src/views/RedirectMode/Auth.css index 307bdead..b5d0ae8a 100644 --- a/examples/vue-app/src/views/RedirectMode/Auth.css +++ b/examples/vue-app/src/views/RedirectMode/Auth.css @@ -52,7 +52,7 @@ body, } .dashboard-container { - padding: 1.75rem; + padding: 1rem; background-color: #f9f9fb; min-height: 100vh; } @@ -149,8 +149,7 @@ body, .dashboard-details-container { display: flex; - column-gap: 2rem; - margin-top: 1rem; + column-gap: 1rem; @media (width < 780px) { flex-direction: column; @@ -168,7 +167,7 @@ body, display: flex; flex-direction: column; height: calc(100vh - 186px); - width: 582px; + width: 350px; @media (width < 780px) { width: 100%; @@ -177,7 +176,6 @@ body, } .dashboard-details-console-container { - background: #f3f3f4; border-radius: 20px; padding: 2rem; display: flex; diff --git a/examples/vue-app/src/views/RedirectMode/Auth.vue b/examples/vue-app/src/views/RedirectMode/Auth.vue index 2ebe3ea5..18cc6144 100644 --- a/examples/vue-app/src/views/RedirectMode/Auth.vue +++ b/examples/vue-app/src/views/RedirectMode/Auth.vue @@ -1,40 +1,26 @@ - + \ No newline at end of file diff --git a/examples/vue-app/src/vue-shim.d.ts b/examples/vue-app/src/vue-shim.d.ts deleted file mode 100644 index 50e7eb0d..00000000 --- a/examples/vue-app/src/vue-shim.d.ts +++ /dev/null @@ -1,19 +0,0 @@ -declare module "*.vue" { - import { DefineComponent } from "vue"; - /** - * TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. - * In VSCode, Volar is configured to get actual prop types in `.vue` imports and provides Intellisense. - */ - const Component: DefineComponent, Record, unknown>; - export default Component; -} - -declare module "*.svg" { - const url: string; - export default url; -} - -declare module "*.png" { - const content: string; - export default content; -} diff --git a/examples/vue-app/vite.config.js b/examples/vue-app/vite.config.js index 33ad773d..f553c6f4 100644 --- a/examples/vue-app/vite.config.js +++ b/examples/vue-app/vite.config.js @@ -1,3 +1,4 @@ +import { fileURLToPath, URL } from "url"; import { defineConfig } from "vite"; import vue from "@vitejs/plugin-vue"; @@ -10,4 +11,20 @@ export default defineConfig({ define: { global: "globalThis", }, + resolve: { + alias: { + "@": fileURLToPath(new URL("./src", import.meta.url)), + }, + }, + build: { + rollupOptions: { + // https://rollupjs.org/guide/en/#outputmanualchunks + output: { + manualChunks: { + popupMode: ["./src/PopupMode"], + redirectMode: ["./src/RedirectMode"], + }, + }, + }, + }, });