Skip to content

Commit

Permalink
Merge branch '25-login-page' into 33-ama-create-file-structure
Browse files Browse the repository at this point in the history
  • Loading branch information
Zelzahn committed Jul 22, 2024
2 parents eeb0e75 + b24b8e1 commit 4350059
Show file tree
Hide file tree
Showing 12 changed files with 497 additions and 44 deletions.
1 change: 1 addition & 0 deletions loama/.env
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
VITE_DEFAULT_IDP=https://css12.onto-deside.ilabt.imec.be/
1 change: 1 addition & 0 deletions loama/.env.example
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
VITE_DEFAULT_IDP=https://example.podprovider.com/
4 changes: 4 additions & 0 deletions loama/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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!**
Expand Down
68 changes: 61 additions & 7 deletions loama/src/App.vue
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,45 @@
</script>

<style>
h1,
h2,
h3 {
font-family: "JetBrains Mono", system-ui;
font-style: normal;
line-height: normal;
}
h1 {
font-size: calc(var(--base-unit)*8);
font-weight: 700;
color: var(--solid-purple);
text-transform: uppercase;
}
h2 {
color: var(--Solid-Purple);
font-weight: 700;
}
h3 {
font-size: calc(var(--base-unit)*4);
color: var(--off-black);
}
label,
input,
p {
font-size: calc(var(--base-unit)*2);
font-weight: 400;
}
/* Variables */
:root {
--solid-purple: #7C4DFF;
--off-white: #F7F7F7;
--off-black: #170D33;
--lama-gray: #DADADA;
--lama-red: #DE4C59;
--base-unit: 0.5rem;
--base-corner: 0.5rem;
}
Expand All @@ -20,15 +53,19 @@
/*
1. Use a more-intuitive box-sizing model.
*/
*, *::before, *::after {
*,
*::before,
*::after {
box-sizing: border-box;
}
/*
2. Remove default margin
*/
* {
margin: 0;
}
/*
Typographic tweaks!
3. Add accessible line-height
Expand All @@ -38,34 +75,52 @@ body {
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
/*
5. Improve media defaults
*/
img, picture, video, canvas, svg {
img,
picture,
video,
canvas,
svg {
display: block;
max-width: 100%;
}
/*
6. Remove built-in form typography styles
*/
input, button, textarea, select {
input,
button,
textarea,
select {
font: inherit;
}
/*
7. Avoid text overflows
*/
p, h1, h2, h3, h4, h5, h6 {
p,
h1,
h2,
h3,
h4,
h5,
h6 {
overflow-wrap: break-word;
}
/*
8. Create a root stacking context
*/
#root, #__next {
#root,
#__next {
isolation: isolate;
}
/* Global styles */
html{
html {
background-color: var(--off-white);
font-family: "Raleway", sans-serif;
font-optical-sizing: auto;
Expand All @@ -84,5 +139,4 @@ select {
select:active {
border-color: var(--solid-purple);
}
</style>
51 changes: 51 additions & 0 deletions loama/src/components/InfoPopup.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
<template>
<div>
<h3>Solid Pod URL</h3>
<p>A URL that links to the pod that you want to use.</p>
<aside>
<PhQuestion :size="24" />
<span>
In order to authenticate, you'll be redirected to the provider's website.
</span>
</aside>
</div>
</template>

<script setup lang="ts">
import { PhQuestion } from '@phosphor-icons/vue';
</script>

<style scoped>
div {
position: absolute;
left: calc(var(--base-unit) * 4);
border: 0.25rem solid var(--solid-purple);
background-color: var(--off-white);
padding: var(--base-unit);
border-radius: var(--base-corner);
display: flex;
flex-direction: column;
align-items: flex-start;
width: 30rem;
}
h2 {
margin-bottom: calc(var(--base-unit) * 2);
}
p {
margin-bottom: calc(var(--base-unit));
}
aside {
display: flex;
padding: 8px;
justify-content: center;
align-items: center;
gap: 8px;
border-radius: var(--base-corner);
background-color: var(--solid-purple);
color: var(--off-white);
}
</style>
19 changes: 15 additions & 4 deletions loama/src/components/LoButton.vue
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
<template>
<button :class="classList">
<component :v-if="leftIcon" :is="leftIcon" :size="24"/>
<span><slot></slot></span>
<component :v-if="rightIcon" :is="rightIcon" :size="24"/>
<component :v-if="leftIcon" :is="leftIcon" :size="24" />
<span>
<slot></slot>
</span>
<component :v-if="rightIcon" :is="rightIcon" :size="24" />
</button>
</template>

Expand Down Expand Up @@ -48,16 +50,25 @@ button {
border-radius: var(--base-corner);
height: fit-content;
border: none;
cursor: pointer;
border: 0.25rem solid;
}
button:hover {
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);
}
</style>
152 changes: 152 additions & 0 deletions loama/src/components/LoginForm.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,152 @@
<template>
<header>
<h1>{{ title }}</h1>
<p class="tagline" v-if="subtitle">{{ subtitle }}</p>
</header>
<form @submit.prevent="login">
<fieldset>
<legend>
<span>Solid Pod URL</span>
<PhQuestion :size="24" @mouseover="showPopup = true;" @mouseleave="showPopup = false" />
</legend>
<label for="solid-pod-url">
<PhLink :size="24" class="icon" />
<input type="url" id="solid-pod-url" v-model="solidPodUrl" :placeholder="defaultSolidPodUrl" />
</label>
<p v-if="showWarning" class="warning">Invalid Solid Pod URL. Please check and try again.</p>
</fieldset>
<fieldset>
<LoButton @click.prevent="noPod" :disabled="isLoading" variant="secondary" :left-icon="PhQuestion">
No Pod?
</LoButton>
<LoButton type="submit" :disabled="isLoading" :right-icon="PhArrowRight">
<span v-if="isLoading">Loading...</span>
<span v-else>Login</span>
</LoButton>
</fieldset>
</form>
</template>

<script setup lang="ts">
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<boolean>('showPopup');
const emit = defineEmits<{
toggleProvider: []
}>()
const solidPodUrl = ref<string>('');
const defaultSolidPodUrl = import.meta.env.VITE_DEFAULT_IDP;
const showWarning = ref<boolean>(false);
const isLoading = ref<boolean>(false);
const login = () => {
isLoading.value = true;
const issuer = solidPodUrl.value.trim() || defaultSolidPodUrl;
store.session.login({
oidcIssuer: issuer,
redirectUrl: new URL('/home', window.location.href).toString(),
clientName: 'LOAMA',
})
.then(() => {
showWarning.value = false;
isLoading.value = false;
})
.catch(() => {
showWarning.value = true;
isLoading.value = false;
});
};
const noPod = () => {
emit('toggleProvider');
};
</script>

<style scoped>
.tagline {
color: var(--off-black);
font-size: calc(var(--base-unit)*4);
font-style: normal;
font-weight: 600;
line-height: normal;
}
legend {
display: flex;
justify-content: space-between;
width: 100%;
}
span {
display: flex;
flex-direction: row;
justify-content: center;
font-weight: 700;
gap: var(--base-unit);
}
label {
display: flex;
position: relative;
flex-grow: 1;
}
.icon {
position: absolute;
left: var(--base-unit);
top: 50%;
margin-top: calc(-1 * var(--base-unit));
}
input[type="url"] {
padding: 1rem calc(var(--base-unit) + 24px);
width: 100%;
border-color: var(--off-black);
border-radius: var(--base-corner);
}
.warning {
color: var(--lama-red);
}
label,
p,
input {
color: var(--off-black, #170D33);
}
h1,
h2 {
text-align: center;
}
form {
width: 100%;
}
form div {
margin-bottom: 4rem;
}
fieldset {
border: none;
}
fieldset:has(button) {
display: flex;
justify-content: space-between;
}
button {
width: 45%;
justify-content: center;
}
</style>
Loading

0 comments on commit 4350059

Please sign in to comment.