Skip to content

Commit

Permalink
updates to landing page
Browse files Browse the repository at this point in the history
  • Loading branch information
Elias Crum authored and Elias Crum committed Oct 24, 2024
1 parent 0bf78cf commit 2b657bf
Show file tree
Hide file tree
Showing 3 changed files with 65 additions and 45 deletions.
28 changes: 23 additions & 5 deletions src/components/LandingPage.vue
View file
Original file line number Diff line number Diff line change
@@ -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>
Expand Down Expand Up @@ -62,8 +70,12 @@

<script>
import { handleRedirectAfterPageLoad, isLoggedin } from "./login";
import PodLogin from "./PodLogin.vue";
export default {
components: {
PodLogin,
},
data: () => ({
login_status: true,
}),
Expand All @@ -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 {
Expand Down Expand Up @@ -151,7 +169,7 @@ a:hover {
}
.container {
font-family: "Courier New", monospace;
font-family: "B612", monospace;
max-width: 900px;
margin: auto;
padding: 20px;
Expand Down
72 changes: 37 additions & 35 deletions src/components/PodLogin.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,41 +2,44 @@
<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 -->
<v-form>
<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>
Expand All @@ -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 -->
<!--
Expand All @@ -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!"
Expand All @@ -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 {
Expand All @@ -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: '',
Expand Down Expand Up @@ -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;
Expand Down
10 changes: 5 additions & 5 deletions src/components/Styling/TheHeader.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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>

0 comments on commit 2b657bf

Please sign in to comment.