From 91a3976c9b84efe74a86cf9e1c4c557b3f0137df Mon Sep 17 00:00:00 2001 From: Zelzahn Date: Tue, 16 Jul 2024 17:04:59 +0200 Subject: [PATCH 1/7] Init --- loama/src/App.vue | 53 +++++++++-- loama/src/assets/bg-login.jpg | Bin 0 -> 851311 bytes loama/src/components/LoginForm.vue | 136 +++++++++++++++++++++++++++++ loama/src/components/SidePanel.vue | 76 ++++++++++++++++ loama/src/router/index.ts | 10 +-- loama/src/utils/podlist.json | 64 ++++++++++++++ loama/src/views/LandingView.vue | 25 ------ loama/src/views/LoginView.vue | 72 +++++++++++++++ 8 files changed, 400 insertions(+), 36 deletions(-) create mode 100644 loama/src/assets/bg-login.jpg create mode 100644 loama/src/components/LoginForm.vue create mode 100644 loama/src/components/SidePanel.vue create mode 100644 loama/src/utils/podlist.json delete mode 100644 loama/src/views/LandingView.vue create mode 100644 loama/src/views/LoginView.vue diff --git a/loama/src/App.vue b/loama/src/App.vue index c461d46..1122701 100644 --- a/loama/src/App.vue +++ b/loama/src/App.vue @@ -6,6 +6,25 @@ diff --git a/loama/src/components/SidePanel.vue b/loama/src/components/SidePanel.vue new file mode 100644 index 0000000..8f765a1 --- /dev/null +++ b/loama/src/components/SidePanel.vue @@ -0,0 +1,76 @@ + + + + + + \ No newline at end of file diff --git a/loama/src/router/index.ts b/loama/src/router/index.ts index f9fa8cd..a0e381e 100644 --- a/loama/src/router/index.ts +++ b/loama/src/router/index.ts @@ -1,6 +1,6 @@ import { createRouter, createWebHistory } from 'vue-router' import HomeView from '@/views/HomeView.vue' -import LandingView from '@/views/LandingView.vue' +import LoginView from '@/views/LoginView.vue' import { store } from '@/store' const router = createRouter({ @@ -8,8 +8,8 @@ const router = createRouter({ routes: [ { path: '/', - name: 'landing', - component: LandingView + name: 'login', + component: LoginView }, { path: '/home', @@ -24,8 +24,8 @@ router.beforeEach(async (to) => { if (!store.session.info.isLoggedIn) { await store.session.handleIncomingRedirect() - if (!store.session.info.isLoggedIn && to.name !== 'landing') { - return { name: 'landing' } + if (!store.session.info.isLoggedIn && to.name !== 'login') { + return { name: 'login' } } } }) diff --git a/loama/src/utils/podlist.json b/loama/src/utils/podlist.json new file mode 100644 index 0000000..730abf0 --- /dev/null +++ b/loama/src/utils/podlist.json @@ -0,0 +1,64 @@ +{ + "podList": [ + { + "name": "Data Pod", + "url": "https://igrant.io/datapod.html", + "owner": "iGrant.io.Sweden", + "location": "EU" + }, + { + "name": "Inrupt Pod Spaces", + "url": "https://start.inrupt.com/profile", + "owner": "Inrupt Inc.", + "location": "EU" + }, + { + "name": "redpencil.io", + "url": "https://solid.redpencil.io/", + "owner": "redpencil.io", + "location": "EU" + }, + { + "name": "solidcommunity.net", + "url": "https://solidcommunity.net/register", + "owner": "Solid Project", + "location": "UK" + }, + { + "name": "solidweb.me", + "url": "https://solidweb.me/.account/login/password/register/", + "owner": "Meisdata", + "location": "EU" + }, + { + "name": "solidweb.org", + "url": "https://solidweb.org/register", + "owner": "Solid Grassoots", + "location": "EU" + }, + { + "name": "teamid.live", + "url": "https://teamid.live/.account/login/password/register/", + "owner": "Meisdata", + "location": "EU" + }, + { + "name": "trinpod.eu", + "url": "https://trinpod.eu/", + "owner": "Graphmetrix", + "location": "EU" + }, + { + "name": "trinpod.us", + "url": "https://trinpod.us/", + "owner": "Graphmetrix", + "location": "USA" + }, + { + "name": "use.id", + "url": "https://get.use.id/people", + "owner": "Digita", + "location": "EU" + } + ] +} diff --git a/loama/src/views/LandingView.vue b/loama/src/views/LandingView.vue deleted file mode 100644 index 2272279..0000000 --- a/loama/src/views/LandingView.vue +++ /dev/null @@ -1,25 +0,0 @@ - - - \ No newline at end of file diff --git a/loama/src/views/LoginView.vue b/loama/src/views/LoginView.vue new file mode 100644 index 0000000..53b8c04 --- /dev/null +++ b/loama/src/views/LoginView.vue @@ -0,0 +1,72 @@ + + + + + + From 02076605d46465da2d2dab5c5bb118fb84f90b3b Mon Sep 17 00:00:00 2001 From: Zelzahn Date: Wed, 17 Jul 2024 11:42:23 +0200 Subject: [PATCH 2/7] Progress --- loama/package.json | 1 + loama/pnpm-lock.yaml | 13 +++++ loama/src/App.vue | 16 ++++- loama/src/components/InfoPopup.vue | 48 +++++++++++++++ loama/src/components/LoginForm.vue | 94 ++++++++++++++++++++++-------- loama/src/views/LoginView.vue | 7 ++- 6 files changed, 151 insertions(+), 28 deletions(-) create mode 100644 loama/src/components/InfoPopup.vue diff --git a/loama/package.json b/loama/package.json index f4631ba..0c79e8d 100644 --- a/loama/package.json +++ b/loama/package.json @@ -18,6 +18,7 @@ "packageManager": "pnpm@9.5.0+sha512.140036830124618d624a2187b50d04289d5a087f326c9edfc0ccd733d76c4f52c3a313d4fc148794a2a9d81553016004e6742e8cf850670268a7387fc220c903", "dependencies": { "@inrupt/solid-client-authn-browser": "^2.2.4", + "@phosphor-icons/vue": "^2.2.1", "loama-controller": "link:../controller", "vite-svg-loader": "^5.1.0", "vue": "^3.4.29", diff --git a/loama/pnpm-lock.yaml b/loama/pnpm-lock.yaml index 09a4bd3..79025cf 100644 --- a/loama/pnpm-lock.yaml +++ b/loama/pnpm-lock.yaml @@ -11,6 +11,9 @@ importers: '@inrupt/solid-client-authn-browser': specifier: ^2.2.4 version: 2.2.4 + '@phosphor-icons/vue': + specifier: ^2.2.1 + version: 2.2.1(vue@3.4.31(typescript@5.4.5)) loama-controller: specifier: link:../controller version: link:../controller @@ -455,6 +458,12 @@ packages: resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==} engines: {node: '>= 8'} + '@phosphor-icons/vue@2.2.1': + resolution: {integrity: sha512-3RNg1utc2Z5RwPKWFkW3eXI/0BfQAwXgtFxPUPeSzi55jGYUq16b+UqcgbKLazWFlwg5R92OCLKjDiJjeiJcnA==} + engines: {node: '>=14'} + peerDependencies: + vue: '>=3.2.39' + '@pkgr/core@0.1.1': resolution: {integrity: sha512-cq8o4cWH0ibXh9VGi5P20Tu9XF/0fFXl9EUinr9QfTM7a7p0oTA4iJRCQWppXR1Pg8dSM0UCItCkPwsk9qWWYA==} engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0} @@ -2125,6 +2134,10 @@ snapshots: '@nodelib/fs.scandir': 2.1.5 fastq: 1.17.1 + '@phosphor-icons/vue@2.2.1(vue@3.4.31(typescript@5.4.5))': + dependencies: + vue: 3.4.31(typescript@5.4.5) + '@pkgr/core@0.1.1': {} '@polka/url@1.0.0-next.25': {} diff --git a/loama/src/App.vue b/loama/src/App.vue index 1122701..e83e3fa 100644 --- a/loama/src/App.vue +++ b/loama/src/App.vue @@ -17,11 +17,21 @@ h1 { } h2 { - color: var(--Off-Black, #170D33); - font-family: Raleway; + font-family: "JetBrains Mono"; font-size: calc(var(--base-unit)*4); font-style: normal; - font-weight: 600; + font-weight: 700; + line-height: normal; + color: var(--off-black); +} + +label, +input, +p { + font-family: Raleway; + font-size: calc(var(--base-unit)*2); + font-style: normal; + font-weight: 400; line-height: normal; } diff --git a/loama/src/components/InfoPopup.vue b/loama/src/components/InfoPopup.vue new file mode 100644 index 0000000..d43c3f2 --- /dev/null +++ b/loama/src/components/InfoPopup.vue @@ -0,0 +1,48 @@ + + + + + \ No newline at end of file diff --git a/loama/src/components/LoginForm.vue b/loama/src/components/LoginForm.vue index 4cf6de2..92660d2 100644 --- a/loama/src/components/LoginForm.vue +++ b/loama/src/components/LoginForm.vue @@ -1,30 +1,42 @@ diff --git a/loama/src/components/LoButton.vue b/loama/src/components/LoButton.vue index d678051..6ba695b 100644 --- a/loama/src/components/LoButton.vue +++ b/loama/src/components/LoButton.vue @@ -1,8 +1,10 @@ @@ -21,7 +23,7 @@ const props = withDefaults(defineProps<{ /** * The variant of the button; defaults to primary. */ - variant?: "primary" | "secondary" + variant?: "primary" | "secondary" | "outlined" }>(), { variant: "primary" }) @@ -29,7 +31,8 @@ const props = withDefaults(defineProps<{ const classList = computed(() => { return { primary: props.variant === "primary", - secondary: props.variant === "secondary" + secondary: props.variant === "secondary", + outlined: props.variant === "outlined" } }) @@ -48,16 +51,40 @@ button { border-radius: var(--base-corner); height: fit-content; border: none; + cursor: pointer; + border: .2em solid; +} + +button[disabled] { + background-color: grey; + cursor: not-allowed; +} + +button:hover:not([disabled]) { + background-color: var(--off-black); + border-color: var(--off-black); + color: var(--off-white); } .primary { background-color: var(--solid-purple); + border-color: var(--solid-purple); color: var(--off-white); } .secondary { background-color: var(--solid-white); color: var(--off-black); - border: 0.25rem solid var(--solid-purple); + border-color: var(--solid-purple); +} + +.outlined { + border-color: var(--solid-purple); + background-color: var(--solid-white); + color: var(--off-black); +} + +.outlined:hover { + color: var(--solid-white); } \ No newline at end of file diff --git a/loama/src/components/LoginForm.vue b/loama/src/components/LoginForm.vue index 8b1b0cf..90e213b 100644 --- a/loama/src/components/LoginForm.vue +++ b/loama/src/components/LoginForm.vue @@ -16,15 +16,13 @@

Invalid Solid Pod URL. Please check and try again.

- - + Login +
@@ -33,11 +31,16 @@ import { ref } from 'vue'; import { store } from '@/store'; import { PhArrowRight, PhLink, PhQuestion } from '@phosphor-icons/vue'; +import LoButton from './LoButton.vue'; defineProps<{ title: string, subtitle?: string }>(); const showPopup = defineModel('showPopup'); +const emit = defineEmits<{ + toggleProvider: [] +}>() + const solidPodUrl = ref(''); const defaultSolidPodUrl = import.meta.env.VITE_DEFAULT_IDP; const showWarning = ref(false); @@ -61,6 +64,10 @@ const login = () => { isLoading.value = false; }); }; + +const noPod = () => { + emit('toggleProvider'); +}; diff --git a/loama/src/components/SidePanel.vue b/loama/src/components/SidePanel.vue index acdeaa6..1a2b102 100644 --- a/loama/src/components/SidePanel.vue +++ b/loama/src/components/SidePanel.vue @@ -4,16 +4,18 @@

No Pod yet?

No worries, you can create a pod with a pod provider or even host one yourself! We'll give you some recommendations of hosts you can use:

- + - + Close Panel @@ -77,14 +76,4 @@ button:hover:not([disabled]) { color: var(--off-black); border-color: var(--solid-purple); } - -.outlined { - border-color: var(--solid-purple); - background-color: var(--solid-white); - color: var(--off-black); -} - -.outlined:hover { - color: var(--solid-white); -} \ No newline at end of file diff --git a/loama/src/components/LoginForm.vue b/loama/src/components/LoginForm.vue index 90e213b..b43d768 100644 --- a/loama/src/components/LoginForm.vue +++ b/loama/src/components/LoginForm.vue @@ -16,7 +16,7 @@

Invalid Solid Pod URL. Please check and try again.

- + No Pod? diff --git a/loama/src/components/SidePanel.vue b/loama/src/components/SidePanel.vue index 1a2b102..643bd14 100644 --- a/loama/src/components/SidePanel.vue +++ b/loama/src/components/SidePanel.vue @@ -8,7 +8,7 @@ {{ pod.name }} - Close Panel + Close Panel @@ -40,6 +40,7 @@ const openPodUrl = (pod: { name: string; url: string }) => { .extra-panel { width: 100%; margin-top: 10px; + border-right: .2em solid var(--solid-purple); } h2 { From b24b8e1170b1828c4176f4ae2ade7aab032d2309 Mon Sep 17 00:00:00 2001 From: Zelzahn Date: Thu, 18 Jul 2024 16:46:46 +0200 Subject: [PATCH 7/7] 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 @@