Labels

.env.example

@@ -1,2 +1,19 @@
-MICROSOFT_CLIENT_ID=
-MICROSOFT_CLIENT_SECRET=
+DATABASE_URL=mysql://root:@localhost:3306/bio
+
+NUXT_PUBLIC_URL=http://localhost:3000
+NUXT_PUBLIC_PREFIX=bio
+
+NUXT_SESSION_PASSWORD=
+
+NUXT_OAUTH_GOOGLE_CLIENT_ID=
+NUXT_OAUTH_GOOGLE_CLIENT_SECRET=
+
+NUXT_OAUTH_FACEBOOK_CLIENT_ID=
+NUXT_OAUTH_FACEBOOK_CLIENT_SECRET=
+
+NUXT_OAUTH_MICROSOFT_CLIENT_ID=
+NUXT_OAUTH_MICROSOFT_CLIENT_SECRET=
+NUXT_OAUTH_MICROSOFT_TENANT=
+
+NUXT_OAUTH_GITHUB_CLIENT_ID=
+NUXT_OAUTH_GITHUB_CLIENT_SECRET=

app/components/header/HeaderMain.vue

@@ -6,14 +6,15 @@ const { loggedIn } = useUserSession()
 <template>
   <u-header>
     <template #logo>
-      <div class="flex items-center">
-        <logo-bio class="w-12 h-12" />
+      <div class="flex items-center space-x-2">
+        <logo-bio class="w-10 h-10" />
         <logo-text class="text-3xl" />
       </div>
     </template>
     <template #right>
       <div class="flex items-center space-x-2">
         <header-profile v-if="loggedIn" />
+        <header-sign-in v-else />
         <u-color-mode-button />
       </div>
     </template>

app/components/header/HeaderProfile.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 const { user, clear } = await useUserSession()
-const { fromLink } = useCrumb()
 
 const logout = async () => {
   clear()

app/components/header/HeaderSignIn.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+const loginModal = ref(false)
+</script>
+
+<template>
+  <div>
+    <u-button
+      icon="i-mdi-login"
+      label="Sign In"
+      color="white"
+      @click="loginModal = !loginModal"
+    />
+    <u-dashboard-modal v-model="loginModal" title="Sign In" description="Authenticate using one of the following providers ">
+      <layout-login />
+    </u-dashboard-modal>
+  </div>
+</template>
+
+<style scoped></style>

app/components/layout/LayoutLogin.vue

@@ -17,6 +17,14 @@ const providers = reactive<Provider[]>([
     color: 'white',
     click: async () => await navigateTo('/api/oauth/google', { external: true }),
   },
+  {
+    name: 'facebook',
+    label: 'Facebook',
+    icon: 'i-mdi-facebook',
+    color: 'white',
+    click: async () => await navigateTo('/api/oauth/facebook', { external: true }),
+  },
+
   {
     name: 'microsoft',
     label: 'Microsoft',
@@ -35,7 +43,14 @@ const providers = reactive<Provider[]>([
 </script>
 
 <template>
-  <u-button-group>
-    <u-button v-for="provider in providers" :key="provider.name" v-bind="provider" @click="provider.click" />
-  </u-button-group>
+  <div class="flex flex-col space-y-4">
+    <u-button
+      v-for="provider in providers"
+      :key="provider.name"
+      v-bind="provider"
+      block
+      size="lg"
+      @click="provider.click"
+    />
+  </div>
 </template>

app/components/logo/LogoBio.vue

@@ -1,5 +1,3 @@
-<script setup lang="ts"></script>
-
 <template>
   <div class="relative">
     <logo-fume />

app/components/logo/LogoFume.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="logo">
-    <svg viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <svg viewBox="2 2 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
       <g id="Icon-F" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <path
           id="container"

app/components/logo/LogoText.vue

@@ -1,6 +1,12 @@
+<script lang="ts" setup>
+defineProps<{ large?: boolean }>()
+</script>
+
 <template>
-  <div class="flex items-center">
-    <div class="font-extrabold text-primary-900 dark:text-primary-100">fume</div>
-    <div class="font-extrabold text-primary-600 dark:text-primary-300 -ml-1">bio</div>
+  <div class="flex items-end">
+    <div class="font-extrabold text-primary-900 dark:text-primary-200">fume</div>
+    <u-icon v-if="large" name="i-mdi-circle" class="w-12 h-12 text-primary-900 dark:text-primary-100 mb-2" />
+    <div v-else class="text-primary-900 dark:text-primary-100">.</div>
+    <div class="font-extrabold text-primary-600 dark:text-primary-300">bio</div>
   </div>
 </template>

app/layouts/default.vue

@@ -1,7 +1,3 @@
-<script setup lang="ts">
-
-</script>
-
 <template>
   <div>
     <header-main />

app/pages/home.vue

@@ -29,13 +29,15 @@ const reload = async () => {
 </script>
 
 <template>
-  <div v-if="loggedIn && pens?.data.length === 0" class="w-full max-w-md mx-auto">
-    <u-alert
-      icon="i-mdi-clock"
-      title="Awaiting Implementation"
-      description="We are still setting up your account, check back soon!"
-      :actions="[{ label: 'Refresh', icon: 'i-mdi-refresh', onClick: reload, variant: 'solid' }]"
-    />
+  <div>
+    <div v-if="loggedIn && pens?.data.length === 0" class="w-full max-w-md mx-auto">
+      <u-alert
+        icon="i-mdi-clock"
+        title="Awaiting Implementation"
+        description="We are still setting up your account, check back soon!"
+        :actions="[{ label: 'Refresh', icon: 'i-mdi-refresh', onClick: reload, variant: 'solid' }]"
+      />
+    </div>
+    <pen-list v-else-if="pens && cartridges" :pens="pens?.data" :cartridges="cartridges?.data" readonly @reload="reload" />
   </div>
-  <pen-list v-else-if="pens && cartridges" :pens="pens?.data" :cartridges="cartridges?.data" readonly @reload="reload" />
 </template>

app/pages/index.vue

@@ -1,17 +1,9 @@
 <script setup lang="ts">
-definePageMeta({ layout: 'bare' })
 const { loggedIn } = useUserSession()
-
-if (loggedIn.value) await navigateTo('/home')
 </script>
 
 <template>
-  <div class="flex flex-col w-screen h-screen items-center justify-center">
-    <logo-bio class="w-64 h-64" />
-    <logo-text class="text-5xl mb-8" />
-    <layout-login v-if="!loggedIn" />
-    <u-button v-else class="w-28" icon="i-mdi-home" label="Home" to="/home" size="lg" color="gray" />
-  </div>
+  <layout-login />
 </template>
 
 <style scoped></style>

app/pages/label/[type]/[mg].vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+definePageMeta({ layout: 'bare' })
+const dims = { width: 45, height: 20 }
+const route = useRoute()
+const { type, mg } = route.params
+</script>
+
+<template>
+  <div class="w-screen h-screen flex items-center justify-center">
+    <div
+      class="flex flex-col justify-center items-center space-y-3"
+      :style="`width: ${dims.width * 5}mm; height: ${dims.height * 5}mm;`"
+    >
+      <div class="flex items-center space-x-3">
+        <logo-bio class="w-52 h-52" />
+        <div class="flex flex-col space-y-3">
+          <logo-text class="text-9xl" large />
+          <div class="flex text-5xl font-extrabold">
+            <span class="text-sky-900 flex-1 text-center bg-sky-200 py-2 px-6"> {{ type }} </span>
+            <span class="text-sky-200 bg-sky-900 py-2 px-6"> {{ mg }}mg </span>
+          </div>
+        </div>
+      </div>
+      <div class="uppercase font-semibold tracking-wider text-xs">
+        IN-VITRO LABORATORY RESEARCH USE ONLY.  NOT FOR HUMAN OR ANIMAL USE OR CONSUMPTION OF ANY KIND.
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped></style>

nuxt.config.ts

@@ -1,6 +1,6 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
-  devtools: { enabled: true },
+  // devtools: { enabled: true },
   extends: ['@nuxt/ui-pro'],
   modules: [
     '@nuxt/ui',

server/api/[...slug].ts

@@ -1,13 +1,13 @@
 import { createRouter, useBase } from 'h3'
+import { facebookHandler, githubHandler, googleHandler, microsoftHandler } from '../controllers/oauth'
+import { withApiUtils } from '../lib/api'
 import token from '../controllers/token'
 import pen from '../controllers/pen'
 import cartridge from '../controllers/cartridge'
 import shot from '../controllers/shot'
 import user from '../controllers/user'
-import { withApiUtils } from '../lib/api'
 import test from '../controllers/test'
 import logout from '../controllers/logout'
-import { githubHandler, googleHandler, microsoftHandler } from '../controllers/oauth'
 import type { Cartridge, Pen, Shot, Token, User } from '~/types/models'
 
 const router = withApiUtils(createRouter())
@@ -22,12 +22,12 @@ if (useRuntimeConfig().appEnv === 'test')
   router.post('/test/session', test.create)
 
 router.get('/oauth/google', googleHandler)
+router.get('/oauth/facebook', facebookHandler)
 router.get('/oauth/github', githubHandler)
 router.get('/oauth/microsoft', microsoftHandler)
 router.get('/logout', logout)
 
 router.apiResource<{ token: Token }>('/token', token)
-
 router.apiResource<{ user: User, pen: Pen }>('/user/{user}/pen', pen)
 router.apiResource<{ user: User, cartridge: Cartridge }>('/user/{user}/cartridge', cartridge)
 router.apiResource<{ user: User, shot: Shot }>('/user/{user}/shot', shot)

server/controllers/oauth.ts

@@ -55,3 +55,12 @@ export const githubHandler = oauthGitHubEventHandler({
     return sendRedirect(event, '/home')
   },
 })
+
+export const facebookHandler = oauthFacebookEventHandler({
+  async onSuccess(event: H3Event<EventHandlerRequest>, { user }: { user: any }) {
+    console.log('facebook', user)
+    const dbUser = await signIn(event, user, 'facebook')
+    await setUserSession(event, { user: dbUser })
+    return sendRedirect(event, '/home')
+  },
+})