From b24b8e1170b1828c4176f4ae2ade7aab032d2309 Mon Sep 17 00:00:00 2001
From: Zelzahn <friedrich@friedrichvdb.be>
Date: Thu, 18 Jul 2024 16:46:46 +0200
Subject: [PATCH] Resolve remarks

---
 loama/.env.example                 |  1 +
 loama/README.md                    |  4 ++++
 loama/src/App.vue                  |  1 +
 loama/src/components/InfoPopup.vue | 13 ++++++++-----
 loama/src/components/LoButton.vue  |  9 ++-------
 loama/src/components/LoginForm.vue | 10 +++-------
 loama/src/components/SidePanel.vue |  4 ++--
 7 files changed, 21 insertions(+), 21 deletions(-)
 create mode 100644 loama/.env.example

diff --git a/loama/.env.example b/loama/.env.example
new file mode 100644
index 0000000..9464dc2
--- /dev/null
+++ b/loama/.env.example
@@ -0,0 +1 @@
+VITE_DEFAULT_IDP=https://example.podprovider.com/
\ No newline at end of file
diff --git a/loama/README.md b/loama/README.md
index 6d6253f..665bc72 100644
--- a/loama/README.md
+++ b/loama/README.md
@@ -2,6 +2,10 @@
 
 This is the actual Access Management App, written in Vue.
 
+## IDP Provider
+
+Authentication works by providing the URL to the pod provider. To ease the experience a default URL is used, this is specified in the `.env` and used in `components/LoginForm.vue`. An example can be found in `.env.example`.
+
 ## How to run
 
 Make sure to **first build the controller!**
diff --git a/loama/src/App.vue b/loama/src/App.vue
index 87fb468..eed0da4 100644
--- a/loama/src/App.vue
+++ b/loama/src/App.vue
@@ -44,6 +44,7 @@ p {
   --off-white: #F7F7F7;
   --off-black: #170D33;
   --lama-gray: #DADADA;
+  --lama-red: #DE4C59;
   --base-unit: 0.5rem;
   --base-corner: 0.5rem;
 }
diff --git a/loama/src/components/InfoPopup.vue b/loama/src/components/InfoPopup.vue
index 61b79bf..bf5b4e4 100644
--- a/loama/src/components/InfoPopup.vue
+++ b/loama/src/components/InfoPopup.vue
@@ -1,11 +1,14 @@
 <template>
-    <span>
+    <div>
         <h3>Solid Pod URL</h3>
         <p>A URL that links to the pod that you want to use.</p>
         <aside>
-            <PhQuestion :size="24" />In order to authenticate, you'll be redirected to the provider's website.
+            <PhQuestion :size="24" />
+            <span>
+                In order to authenticate, you'll be redirected to the provider's website.
+            </span>
         </aside>
-    </span>
+    </div>
 </template>
 
 <script setup lang="ts">
@@ -14,10 +17,10 @@ import { PhQuestion } from '@phosphor-icons/vue';
 </script>
 
 <style scoped>
-span {
+div {
     position: absolute;
     left: calc(var(--base-unit) * 4);
-    border: .2em solid var(--solid-purple);
+    border: 0.25rem solid var(--solid-purple);
     background-color: var(--off-white);
     padding: var(--base-unit);
     border-radius: var(--base-corner);
diff --git a/loama/src/components/LoButton.vue b/loama/src/components/LoButton.vue
index 2426caf..46e3d17 100644
--- a/loama/src/components/LoButton.vue
+++ b/loama/src/components/LoButton.vue
@@ -51,15 +51,10 @@ button {
     height: fit-content;
     border: none;
     cursor: pointer;
-    border: .2em solid;
+    border: 0.25rem solid;
 }
 
-button[disabled] {
-    background-color: grey;
-    cursor: not-allowed;
-}
-
-button:hover:not([disabled]) {
+button:hover {
     background-color: var(--off-black);
     border-color: var(--off-black);
     color: var(--off-white);
diff --git a/loama/src/components/LoginForm.vue b/loama/src/components/LoginForm.vue
index b43d768..e1e70d6 100644
--- a/loama/src/components/LoginForm.vue
+++ b/loama/src/components/LoginForm.vue
@@ -6,7 +6,7 @@
   <form @submit.prevent="login">
     <fieldset>
       <legend>
-        Solid Pod URL
+        <span>Solid Pod URL</span>
         <PhQuestion :size="24" @mouseover="showPopup = true;" @mouseleave="showPopup = false" />
       </legend>
       <label for="solid-pod-url">
@@ -16,7 +16,7 @@
       <p v-if="showWarning" class="warning">Invalid Solid Pod URL. Please check and try again.</p>
     </fieldset>
     <fieldset>
-      <LoButton @click.prevent="noPod" :disabled="isLoading" class="secondary" :left-icon="PhQuestion">
+      <LoButton @click.prevent="noPod" :disabled="isLoading" variant="secondary" :left-icon="PhQuestion">
         No Pod?
       </LoButton>
       <LoButton type="submit" :disabled="isLoading" :right-icon="PhArrowRight">
@@ -114,11 +114,7 @@ input[type="url"] {
 }
 
 .warning {
-  color: red;
-}
-
-.loading {
-  color: blue;
+  color: var(--lama-red);
 }
 
 label,
diff --git a/loama/src/components/SidePanel.vue b/loama/src/components/SidePanel.vue
index 643bd14..4c5693f 100644
--- a/loama/src/components/SidePanel.vue
+++ b/loama/src/components/SidePanel.vue
@@ -8,7 +8,7 @@
         {{ pod.name }}
       </LoButton>
     </div>
-    <LoButton :left-icon="PhX" class="secondary" @click="emit('toggleProvider')">Close Panel</LoButton>
+    <LoButton :left-icon="PhX" variant="secondary" @click="emit('toggleProvider')">Close Panel</LoButton>
   </div>
 </template>
 
@@ -40,7 +40,7 @@ const openPodUrl = (pod: { name: string; url: string }) => {
 .extra-panel {
   width: 100%;
   margin-top: 10px;
-  border-right: .2em solid var(--solid-purple);
+  border-right: 0.25rem solid var(--solid-purple);
 }
 
 h2 {