Remove the page-id capsule on tbpro keycloak theme (Fixes #503) (#505)

Author: MelissaAutumn

keycloak/themes/tbpro/assets/css/main.css

@@ -37,11 +37,3 @@ body {
   white-space: nowrap;
   border-width: 0;
 }
-
-@keyframes wiggle {
-    0% { transform: rotate(0deg); }
-   25% { transform: rotate(-5deg); }
-   50% { transform: rotate(5deg); }
-   75% { transform: rotate(-5deg); }
-  100% { transform: rotate(0deg); }
-}

keycloak/themes/tbpro/assets/vue/App.vue

@@ -6,7 +6,11 @@ import BaseTemplate from '@kc/vue/BaseTemplate.vue';
 // Match routes based on pageId / route name
 const pageId = ref(window._page.pageId);
 const routeName = pageId.value && router.hasRoute(pageId.value) ? pageId.value : 'route-not-implemented';
-console.log('route:', routeName);
+// Information for easier debugging
+console.info({
+  route: routeName,
+  pageId: pageId.value,
+});
 router.replace({ name: routeName });
 </script>
 

keycloak/themes/tbpro/assets/vue/BaseTemplate.vue

@@ -1,22 +1,10 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 import OrbGraphic from '@kc/images/orb-graphic.png';
-
-const pageId = ref(window._page.pageId);
-
-const playingAnimation = ref(false);
-const onWiggle = async () => {
-  playingAnimation.value = true;
-  window.setTimeout(() => {
-    playingAnimation.value = false;
-  }, 1000);
-};
 </script>
 
 <template>
   <section class="bolt-defaults">
-    <div class="debug-page-id" @click="onWiggle" :class="{ wiggle: playingAnimation }">{{ pageId }}</div>
-
     <div class="card">
       <!-- Left side: Orb graphic -->
       <div class="left-side">
@@ -34,22 +22,6 @@ const onWiggle = async () => {
 </template>
 
 <style scoped>
-.wiggle {
-  animation: wiggle 1s;
-}
-
-.debug-page-id {
-  cursor: pointer;
-  position: absolute;
-  top: 1rem;
-  left: 1rem;
-  background-color: black;
-  color: white;
-  border-radius: 1rem;
-  padding: 0.5rem;
-  z-index: 2;
-}
-
 section {
   min-height: 100vh;
   display: flex;