Redirecting dialog and authentication message

apps/auth/src/App.vue

@@ -5,17 +5,13 @@
     <router-view />
   </main>
 
-  <Card v-else style="width: 50%; margin-top: 2rem; display: block; margin-left: auto; margin-right: auto;">
-    <template #content>
-      <p style="text-align: center;">{{ $t("error.401-unauthenticated") }}</p>
-    </template>
-  </Card>
+  <UnauthenticatedCard v-else/>
 
   <Toast position="bottom-right" :breakpoints="{ '420px': { width: '100%', right: '0', left: '0' } }" />
 </template>
 
 <script setup lang="ts">
-import {AuthAppHeaderBar} from "@shared/components";
+import {AuthAppHeaderBar, UnauthenticatedCard} from "@shared/components";
 import {useSolidProfile, useSolidSession} from "@shared/composables";
 import Card from "primevue/card";
 import Toast from "primevue/toast";

apps/lisa/src/App.vue

@@ -5,11 +5,7 @@
   <div v-if="isLoggedIn && session.rdp !== ''">
     <router-view />
   </div>
-  <Card v-else style="width: 50%; margin-top: 2rem; display: block; margin-left: auto; margin-right: auto;height:100px" >
-    <template #content>
-      <p style="text-align: center;line-height:100px">401 Unauthenticated : Login using the button in the top-right corner!</p>
-    </template>
-  </Card>
+  <UnauthenticatedCard v-else/>
 
   <Dialog
     header="We updated the App!"
@@ -32,12 +28,11 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watch } from "vue";
-import {DacklHeaderBar, HeaderBar} from "@shared/components";
-import { useServiceWorkerUpdate, useSolidProfile, useSolidSession } from "@shared/composables";
+import {computed, ref, watch} from "vue";
+import {DacklHeaderBar, UnauthenticatedCard} from "@shared/components";
+import {useServiceWorkerUpdate, useSolidProfile, useSolidSession} from "@shared/composables";
 import Toast from "primevue/toast";
 import router from "./router";
-import Card from "primevue/card";
 
 const appLogo = require('@/assets/logo.svg');
 const { hasUpdatedAvailable, refreshApp } = useServiceWorkerUpdate();

apps/lisa/src/components/BusinessDataPanel.vue

@@ -34,7 +34,7 @@ if (props.store) {
 
 <style scoped>
 .success-message{
-  padding:1rem;
+  padding:0 1rem 0 1rem;
   margin-top:1rem;
   border:2px solid rgba(32, 151, 12, 1);
   background-color:rgba(230, 252, 197, 1);

apps/lisa/src/components/DemandProcessor.vue

@@ -2,6 +2,7 @@
   <div v-show="tabState === currentDemandState" v-if="currentState!== STATES.NoOperation">
     <Card>
       <template #content>
+        <div class="card-container">
         <div class="grid">
           <div class="col-12" v-if ="currentState === STATES.Terminated" >
             <StatusChip :status="STATES.Terminated"></StatusChip>
@@ -68,6 +69,7 @@
         </Button>
         <Button v-else-if="currentState !== STATES.Terminated" class="step-button" :disabled="isCreateOfferBtnDisabled"
                 @click="createOfferResource(props.demandUri, accessRequestUri!)">Create Offer and grant Access</Button>
+        </div>
       </template>
     </Card>
   </div>
@@ -92,6 +94,7 @@
       </div>
     </div>
   </Dialog>
+  <LoadingDialog :isVisible="isLoadingDialogVisible"></LoadingDialog>
 </template>
 
 <script setup lang="ts">
@@ -118,7 +121,7 @@ import {Literal, NamedNode, Store, Writer} from 'n3';
 import {useToast} from 'primevue/usetoast';
 import {computed, reactive, Ref, ref, watch} from 'vue';
 import Card from "primevue/card";
-import {DacklTextInput} from "@shared/components";
+import {DacklTextInput, LoadingDialog} from "@shared/components";
 import {STATES} from "@/enums/states";
 import {TAB_STATE} from "@/enums/tabsState";
 import {
@@ -148,6 +151,7 @@ let businessDataFetched = ref(false);
 const enteredAnnualPercentageRate = ref(1.08);
 const selectedLoanTerm = ref({label: "60 months", value: "5"});
 const isDialogVisible = ref(false);
+const isLoadingDialogVisible = ref(false);
 const loanTerms = [
   {label: "6 months", value: "0.5"},
   {label: "12 months", value: "1"},
@@ -515,6 +519,7 @@ async function patchOfferInDemand(demandURI: string, offerURI: string): Promise<
 }
 
 async function createOfferResource(demand: string, dataAccessRequest: string) {
+  isLoadingDialogVisible.value =true;
   const businessAssessmentRegistrations = await getDataRegistrationContainers(demanderUri!.value!, selectedShapeTree.value.value, session);
   const derivedFromData = businessAssessmentRegistrations.map(r => "<" + r + ">").join(", ");
   const body = getCreateOfferResourceBody(
@@ -530,6 +535,7 @@ async function createOfferResource(demand: string, dataAccessRequest: string) {
   );
   const offerLocation = await createResourceInAnyRegistrationOfShape(memberOf.value!, offerShapeTreeUri, body, session)
       .catch((err) => {
+        isLoadingDialogVisible.value = false;
         toast.add({
           severity: "error",
           summary: "Error on create offer!",
@@ -574,6 +580,7 @@ async function requestAccessBeingSet(resource: string, forAgent: string) {
 }
 
 function handleAuthorizationRequest(inspectedAccessRequestURI: string) {
+  isLoadingDialogVisible.value =false;
   window.open(
       `${authAgent.value}?uri=${encodeURIComponent(
           inspectedAccessRequestURI
@@ -637,16 +644,13 @@ setTimeout(()=>{
 },1000);
 </script>
 
-<style>
-.p-card {
-  .p-card-content {
-    padding: 0;
-  }
-  .p-card-body {
-    padding-top:0px;
-  }
+<style scoped>
+.p-component :deep(.p-card-body){
+  padding-top:0px
+}
+.p-component :deep(.p-card-content ){
+  padding-top:0px
 }
-
 
 
 .p-disabled{

apps/lisa/src/components/StatusChip.vue

@@ -18,7 +18,7 @@ watch(()=> props.status,()=> {
 }, {immediate:true});
 </script>
 
-<style>
+<style scoped>
 .offer-accepted{
   background-color:rgba(32, 151, 12, 1);
   color:white;

apps/max/src/App.vue

@@ -7,12 +7,7 @@
     <router-view />
   </div>
 
-  <Card v-else style="width: 50%; margin-top: 2rem; display: block; margin-left: auto; margin-right: auto;" >
-    <template #content>
-      <p style="text-align: center;">401 Unauthenticated : Login using the button in the top-right corner!</p>
-    </template>
-  </Card>
-
+  <UnauthenticatedCard v-else/>
   <Dialog header="We updated the App!" v-model:visible="isOpen" position="bottomright">
     <div>Please save your progress.</div>
     <div>Use the latest version.</div>
@@ -30,9 +25,8 @@
 import { computed, ref, watch } from "vue";
 import Toast from "primevue/toast";
 import { useServiceWorkerUpdate, useSolidProfile, useSolidSession } from "@shared/composables";
-import {DacklHeaderBar, HeaderBar} from "@shared/components";
+import {DacklHeaderBar, UnauthenticatedCard} from "@shared/components";
 import router from "./router";
-import Card from "primevue/card";
 
 const appLogo = require('@/assets/logo.png');
 const { hasUpdatedAvailable, refreshApp } = useServiceWorkerUpdate();

apps/tom/src/App.vue

@@ -8,12 +8,7 @@
   <div v-if="isLoggedIn && session.rdp" class="m-1 lg:m-5">
     <router-view />
   </div>
-  <Card v-else class="w-6 mt-5 block mx-auto">
-    <template #content>
-      <p class="text-center">401 Unauthenticated:<br/>Login using the button in the top-right corner!</p>
-    </template>
-  </Card>
-
+  <UnauthenticatedCard v-else />
   <!-- This div is a buffer area for the bottom navigation tool (speeddial or other) -->
   <div style="height: 75px" />
 
@@ -39,10 +34,9 @@
 </template>
 
 <script lang="ts" setup>
-import {DacklHeaderBar, TabItemType, TabList} from "@shared/components";
+import {DacklHeaderBar, TabItemType, TabList, UnauthenticatedCard} from "@shared/components";
 import {useIsLoggedIn, useServiceWorkerUpdate, useSolidProfile, useSolidSession} from "@shared/composables";
 import Button from "primevue/button";
-import Card from "primevue/card";
 import Toast from "primevue/toast";
 import {computed, ref, watch} from "vue";
 import {useRoute} from "vue-router";

libs/components/index.ts

@@ -15,6 +15,8 @@ import SmeCard from "./src/SmeCard.vue";
 import SmeCardHeadline from "./src/SmeCardHeadline.vue";
 import TabList from './src/tabs/TabList.vue';
 import DacklTextInput from './src/DacklTextInput.vue';
+import UnauthenticatedCard from "./src/UnauthenticatedCard.vue";
+import LoadingDialog from "./src/LoadingDialog.vue";
 
 export * from './src/tabs/TabItemType';
 
@@ -36,4 +38,6 @@ export {
     PageHeadline,
     SmeCardHeadline,
     DacklTextInput,
+    UnauthenticatedCard,
+    LoadingDialog
 };

libs/components/src/LoadingDialog.vue

@@ -0,0 +1,23 @@
+<template>
+  <Dialog v-model:visible="isVisible" modal header="Redirecting to the AuthApp" center style="width: 50%; margin-top: 2rem; display: block; margin-left: auto; margin-right: auto">
+    <p style="margin-bottom: 2rem">Please wait. You will be redirecting to the AuthApp...</p>
+  </Dialog>
+</template>
+<style scoped>
+.p-dialog-title {
+  text-align: center;
+  width: 100%;
+}
+</style>
+<script setup lang="ts">
+
+import {ref, watch} from "vue";
+
+const isVisible = ref(false);
+
+const props = defineProps<{ isVisible: boolean }>();
+
+watch(()=> props.isVisible,()=> {
+  isVisible.value = props.isVisible;
+}, {immediate:true});
+</script>

libs/components/src/UnauthenticatedCard.vue

@@ -0,0 +1,24 @@
+<template>
+  <Card class="mt-6" style="width: 50%; margin-top: 2rem; display: block; margin-left: auto; margin-right: auto;" >
+    <template #content>
+      <p style="text-align: center;">401 Unauthenticated :  Click <span class="redirect" @click="redirectToLogin()">here</span> to login or use the button in the top-right corner!</p>
+    </template>
+  </Card>
+</template>
+<style scoped>
+.redirect{
+  color: #007577;
+  cursor: pointer;
+  font-style:italic;
+}
+</style>
+<script setup lang="ts">
+import {useSolidSession} from "@shared/composables";
+const {session} = useSolidSession();
+const redirect_uri = window.location.href;
+
+function redirectToLogin(){
+  const idp = 'https://solid.aifb.kit.edu';
+  session.login(idp, redirect_uri);
+}
+</script>