ptoal/oysqn.app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: implement basic auth workflow

Browse Source
This commit is contained in:
Patrick Toal
2026-04-11 21:36:50 -04:00
parent 652ac1e2af
commit 355f3c5dfa
4 changed files with 158 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
app/pages/index.vue
View File

@@ -1,22 +1,65 @@
<template>
<IonPage>
<IonHeader>
<IonToolbar color="primary">
<IonButtons slot="start">
<IonMenuButton />
</IonButtons>
<IonTitle>Home</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent class="ion-padding">
<h2>Welcome to OYS Borrow a Boat</h2>
</IonContent>
<!-- Splash: unauthenticated -->
<template v-if="!user">
<IonContent class="splash-content">
<div class="splash-center">
<img src="/oysqn_logo.png" alt="OYS Borrow a Boat" class="splash-logo" />
<IonButton expand="block" router-link="/login" class="splash-btn">Log In</IonButton>
</div>
</IonContent>
</template>
<!-- Home: authenticated -->
<template v-else>
<IonHeader>
<IonToolbar color="primary">
<IonButtons slot="start">
<IonMenuButton />
</IonButtons>
<IonTitle>Home</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent class="ion-padding">
<h2>Welcome to OYS Borrow a Boat</h2>
</IonContent>
</template>
</IonPage>
</template>
<script setup lang="ts">
import {
IonPage, IonHeader, IonToolbar, IonTitle, IonContent,
IonButtons, IonMenuButton,
IonButtons, IonMenuButton, IonButton,
} from '@ionic/vue'
const user = useSupabaseUser()
definePageMeta({ layout: false })
</script>
<style scoped>
.splash-content {
--background: var(--ion-color-light);
}
.splash-center {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
padding: 2rem;
gap: 2rem;
}
.splash-logo {
max-width: 280px;
width: 100%;
}
.splash-btn {
width: 100%;
max-width: 280px;
}
</style>