Initial commit

app/components/app-bar.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const { user, clear } = useUserSession();
+</script>
+
+<template>
+  <div class="w-full h-16 bg-black text-white flex">
+    <UContainer class="max-w-2xl flex justify-between items-center">
+      <div class="font-bold text-xl">Joyful</div>
+      <UDropdownMenu :items="[{ label: 'Log out', onSelect: () => clear() }]">
+        <UAvatar :src="user!.avatar" />
+      </UDropdownMenu>
+    </UContainer>
+  </div>
+</template>

app/components/app-footer.vue

@@ -0,0 +1,12 @@
+<template>
+  <UContainer
+    class="max-w-2xl py-8 text-sm text-slate-600 place-items-center grid gap-4"
+  >
+    <div class="text-center">
+      Built with 💪 in Athens, Greece 🇬🇷 by Marios Antonoudiou.
+      <ULink class="underline">Send feedback</ULink> or
+      <ULink class="underline">buy me a coffee</ULink>.
+    </div>
+    <NuxtImg src="/images/powered-by-strava.svg" width="80px" />
+  </UContainer>
+</template>

app/components/card-field.vue

@@ -0,0 +1,13 @@
+<template>
+  <div class="flex justify-between items-center gap-4">
+    <div>
+      <div class="font-semibold"><slot name="title" /></div>
+      <div class="text-slate-600 text-sm">
+        <slot name="description" />
+      </div>
+    </div>
+    <div class="text-nowrap flex items-end">
+      <slot name="value" />
+    </div>
+  </div>
+</template>

app/components/register.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import AppFooter from "./app-footer.vue";
+
+const { openInPopup } = useUserSession();
+</script>
+
+<template>
+  <UContainer class="flex justify-center w-full p-16">
+    <UCard class="w-md">
+      <div class="flex flex-col gap-4 items-center justify-center text-center">
+        <UIcon name="heroicons:user" class="size-16" />
+        <div class="font-bold text-xl">Joyful</div>
+        <div>
+          Welcome to Joyful. Use the button below to sign in with your Strava
+          account.
+        </div>
+        <div>
+          <div
+            aria-role="button"
+            @click="openInPopup('/auth/strava')"
+            class="cursor-pointer"
+          >
+            <NuxtImg src="/images/connect-with-strava.svg" />
+          </div>
+        </div>
+      </div>
+    </UCard>
+  </UContainer>
+  <AppFooter />
+</template>