From 2b657bf744aa0b4cfbcb365f35be52353d26f894 Mon Sep 17 00:00:00 2001
From: Elias Crum <eliascrum@OS-Bessje.local>
Date: Thu, 24 Oct 2024 20:13:07 +0200
Subject: [PATCH] updates to landing page

---
 src/components/LandingPage.vue       | 28 +++++++++--
 src/components/PodLogin.vue          | 72 ++++++++++++++--------------
 src/components/Styling/TheHeader.vue | 10 ++--
 3 files changed, 65 insertions(+), 45 deletions(-)
diff --git a/src/components/LandingPage.vue b/src/components/LandingPage.vue
index 7d8eda5..045b802 100644
--- a/src/components/LandingPage.vue
+++ b/src/components/LandingPage.vue
@@ -1,23 +1,31 @@
 <template>
   <v-container>
     <v-col cols="12">
+      <img
+          :src="require('../assets/full-sc-logo.png')"
+          alt="Full Solid Cockpit logo"
+        />
       <v-card
         variant="tonal"
         justify="center"
         class="mx-auto"
         color="blue-grey-darken-1"
       >
+      
         <div class="entry">
-          <h1>Welcome to Solid Cockpit!</h1>
-          <h2>Below are some resources for setting up a Solid Pod <br /> (if you don't already have one)</h2>
+          <h2>Below are some resources if you are new</h2>
           <!-- Make these drop downs (with more in-depth guides for non-experts)-->
-          <h3>Hosting service (SolidCommunity.net etc)</h3>
+          <h3>README</h3>
           <h3>Community Solid Server (local Solid pod)</h3>
         </div>
       </v-card>
     </v-col>
   </v-container>
 
+  <div>
+    <pod-login />
+  </div>
+
   <body>
     <div class="container">
       <h1 class="guide">What can this application do?</h1>
@@ -62,8 +70,12 @@
 
 <script>
 import { handleRedirectAfterPageLoad, isLoggedin } from "./login";
+import PodLogin from "./PodLogin.vue";
 
 export default {
+  components: {
+    PodLogin,
+  },
   data: () => ({
     login_status: true,
   }),
@@ -86,9 +98,15 @@ export default {
 </script>
 
 <style scoped>
+img {
+  max-width: 850px;
+  height: auto;
+}
+
 .entry {
-  font-family: "Courier New", monospace;
+  font-family: "B612", monospace;
   text-align: center;
+  margin-top: 20px;
 }
 
 .guide {
@@ -151,7 +169,7 @@ a:hover {
 }
 
 .container {
-  font-family: "Courier New", monospace;
+  font-family: "B612", monospace;
   max-width: 900px;
   margin: auto;
   padding: 20px;
diff --git a/src/components/PodLogin.vue b/src/components/PodLogin.vue
index d98e427..41f8eff 100644
--- a/src/components/PodLogin.vue
+++ b/src/components/PodLogin.vue
@@ -2,12 +2,11 @@
   <v-container>
     <!-- The card that conatins the login fields -->
     <v-card
-      title="Solid Pod Login"
-      variant="tonal"
+      id="card"
       justify="center"
       class="mx-auto"
-      color="indigo-darken-3"
-    >
+      color="#445560"
+    ><h2>Solid Pod Login</h2>
       <v-col cols="12">
         <div v-show="!loggedIn">
           <!-- This login portion disappears after logging in -->
@@ -15,28 +14,32 @@
             <v-container>
               <v-row>
                 <!-- Portion for entering the "Pod Provider URL" -->
-                <v-text-field
+                <v-combobox 
                   v-model="userUrl"
-                  label="Pod Provider:"
-                  type="url"
-                  variant="outlined"
                   clearable
                   required
+                  variant="outlined"
+                  density="comfortable"
+                  auto-select-first="exact"
+                  label="Pod Provider:"
+                  type="url"
+                  :items="['https://triple.ilabt.imec.be/', 'https://solidcommunity.net/', 'https://solidweb.org/', 'https://inrupt.net/', 'https://auth.inrupt.com/', 'http://localhost:3000/']"
                 >
+
                   <!-- Info button -->
                   <template v-slot:prepend>
                     <v-tooltip location="top">
                       <template v-slot:activator="{ props }">
-                        <v-icon fab v-bind="props" color="info" size="small" icon="mdi-information">mdi-information</v-icon>
+                        <v-icon fab v-bind="props" color="white" size="small" icon="mdi-information">mdi-information</v-icon>
                       </template>
-                      Please offer the URL of your Pod Provider (Eg: http://localhost:3000/)
+                      Please offer the URL of your Pod Provider (Format: https://example.com/)
                     </v-tooltip>
                   </template>
                   <!-- "Login" button + form submission -->
                   <template v-slot:append>
-                    <v-btn class="mx-right" color="surface-variant" name="btnLogin" @click="handleLogin">Login</v-btn>
+                    <v-btn class="mx-right" color="#EDE7F6" name="btnLogin" @click="handleLogin">Login</v-btn>
                   </template>
-                </v-text-field>
+                </v-combobox>
               </v-row>
             </v-container>
           </v-form>
@@ -51,17 +54,13 @@
             ></v-alert>
           </div>
 
-          <!-- "Create new pod" button redirects back to homepage -->
-          <v-dialog max-width="500">
-            <template v-slot:activator="{ props: activatorProps }">
+          <!-- "Create new pod" button redirects to Pod Provider site -->
               <v-btn
-                v-bind="activatorProps"
-                color="surface-variant"
-                text="Create New Pod?"
+                color="#EDE7F6"
+                text="Don't have a pod?"
                 variant="flat"
-                @click="homepageRedir"
+                @click="newpodRedir"
                 ></v-btn>
-            </template>
 
             <!-- "Create new pod" directions pop-up -- not in use anymore -->
             <!--
@@ -80,13 +79,12 @@
               </v-card>
             </template>
             -->
-          </v-dialog>
         
         </div>
       </v-col>
 
       <!-- Message that indicates a successful login -->
-      <div id="loggedIn" v-show="loggedIn">
+      <div class="logged-in" v-show="loggedIn">
         <v-alert
           class="mx-auto"
           title="Successfully logged-in!"
@@ -101,7 +99,7 @@
 
 
 <script lang="ts">
-import { startLogin, isLoggedin, currentWebId, redirectToHomepage, session } from "./login";
+import { startLogin, isLoggedin, currentWebId, session } from "./login";
 import { provide } from 'vue';
 
 export default {
@@ -111,7 +109,7 @@ export default {
   },
   data() {
     return {
-      userUrl: "http://localhost:3000/", // sets default url (if nothing is entered)
+      userUrl: "", // sets default url (if nothing is entered)
       loggedIn: false,
       isError: false,
       error: '',
@@ -139,39 +137,43 @@ export default {
       this.webId = currentWebId();
     },
     /* 
-    Redirects user back to homepage (for "create a pod" directions)
-    uses href to handle the redirect
+    Redirects user to page with Pod Providers
     */
-    homepageRedir() {
-      redirectToHomepage()
+    newpodRedir() {
+      window.open('https://solidproject.org/for-developers#hosted-pod-services', '_blank');
     }
   },
   mounted() {
     // Delays the execution loginCheck() on page reload (to avoid async-related errors)
     setTimeout(() => {
       this.loginCheck();
-    }, 200); // Delay of 2 seconds
+    }, 500); // Delay of 2 seconds
   },
 };
 </script>
 
 
 <style scoped>
+#card {
+  font-family: "B612", monospace;
+  font-size: larger;
+}
+
+h2 {
+  margin-left: 10px;
+  margin-top: 10px;
+}
 #errorIndicator {
   padding: 2px 2px;
-  margin-bottom: 10px;
-  margin-right: 2rem;
   border: 2px solid #d72920;
   border-radius: 5px;
   font-size: 14px;
   font-style: italic;
-  background-color: #ffcccc; /* Highlighted background color */
+  background-color: #ffcccc;
 }
 
-#loggedIn {
+.logged-in {
   padding: 2px 2px;
-  margin-bottom: 10px;
-  margin-right: 2rem;
   border: 2px solid #307104;
   border-radius: 5px;
   font-size: 14px;
diff --git a/src/components/Styling/TheHeader.vue b/src/components/Styling/TheHeader.vue
index ef72667..cb65bbd 100644
--- a/src/components/Styling/TheHeader.vue
+++ b/src/components/Styling/TheHeader.vue
@@ -32,11 +32,11 @@
                 <v-btn
                   icon
                   size="large"
-                  color="grey-darken-4"
+                  color="#445560"
                   justify="end"
                   v-bind="props"
                   @click="loginCheck"
-                ><v-icon size="36px">mdi-account</v-icon></v-btn>
+                ><v-icon size="36px" color="#EDE7F6">mdi-account</v-icon></v-btn>
               </template>
 
               <v-card>
@@ -51,7 +51,7 @@
 
                 <v-divider></v-divider>
 
-                <v-list class="text-center align-self-start">
+                <v-list class="text-right align-self-start">
                   <div v-if="!loggedIn">
                     <v-list-item>
                       <v-btn
@@ -82,7 +82,7 @@
                 <v-card-actions>
                   <v-spacer></v-spacer>
                   <v-btn
-                    class="text-center"
+                    class="text-right"
                     height="30"
                     min-width="40"
                     variant="text"
@@ -172,7 +172,7 @@ img {
 .account {
   position: absolute;
   right: 0;
-  text-align: center;
+  text-align: right;
   padding: 15px; /* Optional: adjust the padding as needed */
 }
 </style>
