Testing basic tenant styling

walt-id · Nov 30, 2023 · 28fca19 · 28fca19
1 parent 3a118d6
commit 28fca19
Show file tree

Hide file tree

Showing 9 changed files with 89 additions and 51 deletions.
diff --git a/build.gradle.kts b/build.gradle.kts
@@ -112,7 +112,7 @@ dependencies {
     implementation("org.jetbrains.exposed:exposed-dao:0.44.1")
     implementation("org.jetbrains.exposed:exposed-java-time:0.44.1")
     implementation("org.jetbrains.exposed:exposed-json:0.44.1")
-    implementation("org.xerial:sqlite-jdbc:3.42.0.0")
+    implementation("org.xerial:sqlite-jdbc:3.44.1.0")
     implementation("org.postgresql:postgresql:42.6.0")
     // migration
     implementation("org.flywaydb:flyway-core:9.22.2")

diff --git a/src/main/kotlin/id/walt/db/Db.kt b/src/main/kotlin/id/walt/db/Db.kt
@@ -61,7 +61,7 @@ object Db {
                 Accounts,
                 Web3Wallets
             )
-            /*SchemaUtils.create(
+            SchemaUtils.create(
                 Web3Wallets,
                 Accounts,
                 //AccountWeb3WalletMappings,
@@ -72,9 +72,9 @@ object Db {
                 WalletDids,
                 WalletOperationHistories,
                 Issuers
-            )*/
+            )
 
-            SchemaUtils.create(Web3Wallets)
+            /*SchemaUtils.create(Web3Wallets)
             SchemaUtils.create(Accounts)
             //AccountWeb3WalletMappings,
             SchemaUtils.create(Wallets)
@@ -83,8 +83,7 @@ object Db {
             SchemaUtils.create(WalletKeys)
             SchemaUtils.create(WalletDids)
             SchemaUtils.create(WalletOperationHistories)
-            SchemaUtils.create(Issuers)
-
+            SchemaUtils.create(Issuers)*/
 
             runBlocking {
                 AccountsService.register(EmailAccountRequest("Max Mustermann", "[email protected]", "string"))

diff --git a/src/main/kotlin/id/walt/service/SSIKit2WalletService.kt b/src/main/kotlin/id/walt/service/SSIKit2WalletService.kt
@@ -10,11 +10,12 @@ import id.walt.db.models.WalletKeys
 import id.walt.db.models.WalletOperationHistories
 import id.walt.db.models.WalletOperationHistory
 import id.walt.did.dids.DidService
+import id.walt.did.dids.registrar.LocalRegistrar
 import id.walt.did.dids.registrar.dids.DidCheqdCreateOptions
 import id.walt.did.dids.registrar.dids.DidJwkCreateOptions
 import id.walt.did.dids.registrar.dids.DidKeyCreateOptions
 import id.walt.did.dids.registrar.dids.DidWebCreateOptions
-import id.walt.did.helpers.WaltidServices
+import id.walt.did.dids.resolver.LocalResolver
 import id.walt.did.utils.EnumUtils.enumValueIgnoreCase
 import id.walt.oid4vc.data.GrantType
 import id.walt.oid4vc.data.OpenIDProviderMetadata
@@ -63,7 +64,13 @@ class SSIKit2WalletService(accountId: UUID, walletId: UUID) : WalletService(acco
     companion object {
         init {
             runBlocking {
-                WaltidServices.init()
+                //WaltidServices.init()
+                DidService.apply {
+                    registerResolver(LocalResolver())
+                    updateResolversForMethods()
+                    registerRegistrar(LocalRegistrar())
+                    updateRegistrarsForMethods()
+                }
             }
         }
     }

diff --git a/web/src/app.vue b/web/src/app.vue
@@ -1,15 +1,7 @@
-<script lang="ts" setup>
-import { InitApp } from "~/utils/initApp";
-import ModalBase from "~/components/modals/ModalBase.vue";
-
-InitApp();
-const locale = useState<string>("locale.i18n");
-</script>
-
 <template>
     <Html :lang="locale" class="h-full">
         <Head>
-            <Link href="/svg/walt-s.svg" rel="icon" type="text/xml" />
+            <Link :href="logoImg" rel="icon" type="text/xml" />
         </Head>
         <!--<head>
           <link rel="icon" type="text/xml" href="/svg/walt-s.svg">
@@ -19,13 +11,30 @@ const locale = useState<string>("locale.i18n");
             <ModalBase />
             <VitePwaManifest />
             <NuxtLoadingIndicator />
+<!--            {{ tenant }}-->
             <NuxtLayout class="h-full">
                 <NuxtPage class="h-full" />
             </NuxtLayout>
         </Body>
     </Html>
 </template>
 
+<script lang="ts" setup>
+import { InitApp } from "~/utils/initApp";
+import ModalBase from "~/components/modals/ModalBase.vue";
+import { $fetch } from "ofetch";
+import { useTenant } from "~/composables/tenants";
+
+InitApp();
+const locale = useState<string>("locale.i18n");
+
+const tenant = await (useTenant()).value
+const bgImg = tenant?.bgImg
+const name = tenant?.name
+const logoImg = tenant?.logoImage
+const showWaltidLoadingSpinner = tenant?.showWaltidLoadingSpinner
+</script>
+
 <style lang="postcss">
 /*body {
     @apply bg-gray-50 dark:bg-gray-800;

diff --git a/web/src/composables/tenants.ts b/web/src/composables/tenants.ts
@@ -0,0 +1,20 @@
+export function useTenant() {
+    return useState("tenant-config", async () => {
+        const baseTenantDomain = useRequestURL().host.replace(":3000", ":8080");
+        console.log("Base tenant domain is: ", baseTenantDomain)
+
+        const { data , error } = await useFetch("http://" + baseTenantDomain + "/config/wallet");
+        console.log("Tenant configuration: ", data.value)
+
+        if (error.value) {
+            console.log("Tenant error: ", error.value.message)
+            throw createError({
+                statusCode: 404,
+                statusMessage: "Tenant error: " + error.value?.data?.message,
+                fatal: true
+            })
+        }
+
+        return data.value;
+    });
+}
diff --git a/web/src/layouts/default-reduced-nav.vue b/web/src/layouts/default-reduced-nav.vue
@@ -60,14 +60,7 @@
                                 </div>
                             </TransitionChild>
                             <div class="flex flex-shrink-0 items-center px-4">
-                                <svg class="h-14 w-auto border-white border-4 rounded-full" fill="none" height="141" viewBox="0 0 141 141" width="141" xmlns="http://www.w3.org/2000/svg">
-                                    <circle cx="70.5" cy="70.5" fill="#2563EB" r="70.5" />
-                                    <rect fill="#FFFFFF" height="8.67692" width="30.3692" x="39.0461" y="45.5538" />
-                                    <path
-                                        d="M112.8 74.8385L105.208 73.7538C99.7846 103.038 68.3308 103.038 68.3308 103.038L67.2462 111.715C100.218 112.583 111.354 87.4923 112.8 74.8385Z"
-                                        fill="#FFFFFF"
-                                    />
-                                </svg>
+                                <img alt="" class="h-14 w-auto" :src="inWalletLogoImage" />
                             </div>
 
                             <nav aria-label="Sidebar" class="mt-5 h-full flex-shrink-0 divide-y divide-blue-800 overflow-y-auto">
@@ -99,11 +92,7 @@
             <!-- Sidebar component, swap this element with another sidebar if you like -->
             <div class="flex flex-grow flex-col overflow-y-auto bg-blue-600 pb-4 pt-5" style="color: rgb(37, 99, 235)">
                 <div class="flex flex-shrink-0 items-center px-4">
-                    <svg class="h-14 w-auto border-white rounded-full" fill="none" height="141" style="border-width: 0.225em" viewBox="0 0 141 141" width="141" xmlns="http://www.w3.org/2000/svg">
-                        <circle cx="70.5" cy="70.5" fill="#2563EB" r="70.5" />
-                        <rect fill="#FFFFFF" height="8.67692" width="30.3692" x="39.0461" y="45.5538" />
-                        <path d="M112.8 74.8385L105.208 73.7538C99.7846 103.038 68.3308 103.038 68.3308 103.038L67.2462 111.715C100.218 112.583 111.354 87.4923 112.8 74.8385Z" fill="#FFFFFF" />
-                    </svg>
+                    <img alt="" class="h-14 w-auto" :src="inWalletLogoImage" />
                 </div>
                 <nav aria-label="Sidebar" class="mt-5 flex flex-1 flex-col divide-y divide-blue-800 overflow-y-auto">
                     <div class="mt-2 pt-2">
@@ -214,6 +203,12 @@ import { ChevronDownIcon, MagnifyingGlassIcon } from "@heroicons/vue/20/solid";
 import { useUserStore } from "~/stores/user";
 import { storeToRefs } from "pinia";
 import * as nearAPI from "near-api-js";
+import { useTenant } from "~/composables/tenants";
+
+const tenant = await (useTenant()).value
+const name = tenant?.name
+const logoImg = tenant?.logoImage
+const inWalletLogoImage = tenant?.inWalletLogoImage
 
 const userStore = useUserStore();
 const { user } = storeToRefs(userStore);

diff --git a/web/src/layouts/default.vue b/web/src/layouts/default.vue
@@ -60,14 +60,7 @@
                                 </div>
                             </TransitionChild>
                             <div class="flex flex-shrink-0 items-center px-4">
-                                <svg class="h-14 w-auto border-white border-4 rounded-full" fill="none" height="141" viewBox="0 0 141 141" width="141" xmlns="http://www.w3.org/2000/svg">
-                                    <circle cx="70.5" cy="70.5" fill="#2563EB" r="70.5" />
-                                    <rect fill="#FFFFFF" height="8.67692" width="30.3692" x="39.0461" y="45.5538" />
-                                    <path
-                                        d="M112.8 74.8385L105.208 73.7538C99.7846 103.038 68.3308 103.038 68.3308 103.038L67.2462 111.715C100.218 112.583 111.354 87.4923 112.8 74.8385Z"
-                                        fill="#FFFFFF"
-                                    />
-                                </svg>
+                                <img alt="" class="h-14 w-auto" :src="inWalletLogoImage" />
                             </div>
 
                             <nav aria-label="Sidebar" class="mt-5 h-full flex-shrink-0 divide-y divide-blue-800 overflow-y-auto">
@@ -112,11 +105,7 @@
             <!-- Sidebar component, swap this element with another sidebar if you like -->
             <div class="flex flex-grow flex-col overflow-y-auto bg-blue-600 pb-4 pt-5" style="color: rgb(37, 99, 235)">
                 <div class="flex flex-shrink-0 items-center px-4">
-                    <svg class="h-14 w-auto border-white rounded-full" fill="none" height="141" style="border-width: 0.225em" viewBox="0 0 141 141" width="141" xmlns="http://www.w3.org/2000/svg">
-                        <circle cx="70.5" cy="70.5" fill="#2563EB" r="70.5" />
-                        <rect fill="#FFFFFF" height="8.67692" width="30.3692" x="39.0461" y="45.5538" />
-                        <path d="M112.8 74.8385L105.208 73.7538C99.7846 103.038 68.3308 103.038 68.3308 103.038L67.2462 111.715C100.218 112.583 111.354 87.4923 112.8 74.8385Z" fill="#FFFFFF" />
-                    </svg>
+                    <img alt="" class="h-14 w-auto" :src="inWalletLogoImage" />
                 </div>
                 <nav aria-label="Sidebar" class="mt-5 flex flex-1 flex-col divide-y divide-blue-800 overflow-y-auto">
                     <div class="space-y-1 px-2">
@@ -242,6 +231,12 @@ import { useUserStore } from "~/stores/user";
 import { storeToRefs } from "pinia";
 import * as nearAPI from "near-api-js";
 import { useCurrentWallet } from "~/composables/accountWallet";
+import { useTenant } from "~/composables/tenants";
+
+const tenant = await (useTenant()).value
+const name = tenant?.name
+const logoImg = tenant?.logoImage
+const inWalletLogoImage = tenant?.inWalletLogoImage
 
 const userStore = useUserStore();
 const { user } = storeToRefs(userStore);

diff --git a/web/src/pages/login.vue b/web/src/pages/login.vue
@@ -3,12 +3,11 @@
         <div class="flex flex-1 flex-col justify-center px-4 py-12 sm:px-6 lg:flex-none lg:px-20 xl:px-24 lg:bg-white lg:bg-opacity-50">
             <div class="mx-auto w-full max-w-sm lg:w-96 p-3 lg:backdrop-blur-md lg:rounded-3xl lg:shadow lg:bg-neutral-100 lg:bg-opacity-40">
                 <div class="">
-                    <img alt="walt.id logo" class="h-24 lg:h-16 w-auto mx-auto mt-2" src="/svg/waltid.svg" />
+                    <img alt="walt.id logo" class="h-24 lg:h-16 w-auto mx-auto mt-2" :src="logoImg" />
                     <h2 class="mt-4 text-3xl font-bold tracking-tight text-gray-800">Sign in to your SSI wallet</h2>
                     <p class="mt-2 text-sm text-gray-600">
                         Or {{ " " }}
-                        <NuxtLink class="font-medium text-blue-600 hover:text-blue-500" to="/signup">sign up for your SSI wallet </NuxtLink>
-                        !
+                        <NuxtLink class="font-medium text-blue-600 hover:text-blue-500" to="/signup">sign up for your SSI wallet</NuxtLink>!
                     </p>
                 </div>
 
@@ -129,7 +128,7 @@
             </div>
         </div>
         <div class="overflow-hidden max-h-screen absolute left-0 w-full h-full -z-10 hidden lg:block">
-            <img ref="container" :class="[isLoggingIn ? 'zoom-in' : 'zoom-out']" alt="" class="absolute inset-0 h-full w-full object-cover hidden lg:block -z-10" src="/images/start-page-background.png" />
+            <img ref="container" :class="[isLoggingIn ? 'zoom-in' : 'zoom-out']" alt="" class="absolute inset-0 h-full w-full object-cover hidden lg:block -z-10" :src="bgImg" />
             <!-- src="https://images.unsplash.com/photo-1529144415895-6aaf8be872fb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1980&q=80"/> -->
 
             <!--<div class="relative hidden w-0 flex-1 lg:block">-->
@@ -139,7 +138,7 @@
             <!--</div>-->
         </div>
 
-        <div :class="[isLoggingIn ? 'animate-spin' : '']" :style="cardStyle" class="absolute bottom-3.5 right-3.5 w-10 lg:w-16 h-10 lg:h-16 overflow-hidden">
+        <div v-if="showWaltidLoadingSpinner" :class="[isLoggingIn ? 'animate-spin' : '']" :style="cardStyle" class="absolute bottom-3.5 right-3.5 w-10 lg:w-16 h-10 lg:h-16 overflow-hidden">
             <img class="overflow-hidden" src="/svg/walt-s.svg" />
         </div>
 
@@ -213,9 +212,16 @@ import ConnectWalletModal from "~/components/modals/ConnectWalletModal.vue";
 import useModalStore from "~/stores/useModalStore";
 import { useUserStore } from "~/stores/user";
 import { storeToRefs } from "pinia";
+import { useTenant } from "~/composables/tenants";
 
 const store = useModalStore();
 
+const tenant = await (useTenant()).value
+const bgImg = tenant?.bgImage
+const name = tenant?.name
+const logoImg = tenant?.logoImage
+const showWaltidLoadingSpinner = tenant?.showWaltidLoadingSpinner
+
 const isLoggingIn = ref(false);
 const error = ref({});
 const success = ref(false);

diff --git a/web/src/pages/signup.vue b/web/src/pages/signup.vue
@@ -3,7 +3,7 @@
         <div class="flex flex-1 flex-col justify-center px-4 py-12 sm:px-6 lg:flex-none lg:px-20 xl:px-24 lg:bg-white lg:bg-opacity-50">
             <div class="mx-auto w-full max-w-sm lg:w-96 p-3 lg:backdrop-blur-md lg:rounded-3xl lg:shadow lg:bg-neutral-100 lg:bg-opacity-40">
                 <div class="">
-                    <img alt="walt.id logo" class="h-24 lg:h-16 w-auto mx-auto mt-2" src="/svg/waltid.svg" />
+                    <img alt="walt.id logo" class="h-24 lg:h-16 w-auto mx-auto mt-2" :src="logoImg" />
                     <h2 class="mt-4 text-3xl font-bold tracking-tight text-gray-800">Sign up for your SSI wallet</h2>
                 </div>
 
@@ -123,11 +123,11 @@
                 :class="[isProgress ? 'zoom-in' : 'zoom-out']"
                 alt=""
                 class="absolute inset-0 h-full w-full object-cover hidden lg:block -z-10"
-                src="/images/start-page-background.png"
+                :src="bgImg"
             />
         </div>
 
-        <div :class="[isProgress ? 'animate-spin' : '']" :style="cardStyle" class="absolute bottom-3.5 right-3.5 w-10 lg:w-16 h-10 lg:h-16 overflow-hidden">
+        <div v-if="showWaltidLoadingSpinner" :class="[isProgress ? 'animate-spin' : '']" :style="cardStyle" class="absolute bottom-3.5 right-3.5 w-10 lg:w-16 h-10 lg:h-16 overflow-hidden">
             <img class="overflow-hidden" src="/svg/walt-s.svg" />
         </div>
     </div>
@@ -137,6 +137,13 @@
 import { ArrowRightOnRectangleIcon, EnvelopeIcon, IdentificationIcon, KeyIcon } from "@heroicons/vue/20/solid";
 import ActionResultModal from "~/components/modals/ActionResultModal.vue";
 import useModalStore from "~/stores/useModalStore";
+import { useTenant } from "~/composables/tenants";
+
+const tenant = await (useTenant()).value
+const bgImg = tenant?.bgImage
+const name = tenant?.name
+const logoImg = tenant?.logoImage
+const showWaltidLoadingSpinner = tenant?.showWaltidLoadingSpinner
 
 const isProgress = ref(false);
 const success = ref(false);