Merge pull request #19 from whythawk/floating-magic-login

New floating magic login

{{cookiecutter.project_slug}}/frontend/components/authentication/MagicLoginCard.vue

@@ -0,0 +1,64 @@
+<template>
+  <div v-if="!auth.loggedIn" class="py-12 sm:py-20">
+    <div class="mx-auto max-w-7xl sm:px-6 lg:px-8">
+      <div
+        class="relative isolate flex flex-col gap-10 overflow-hidden bg-gray-900 px-6 py-16 shadow-2xl sm:rounded-xl sm:px-24 xl:flex-row xl:items-center xl:py-20">
+        <h2 class="max-w-2xl text-3xl font-bold tracking-tight text-white sm:text-4xl xl:max-w-none xl:flex-auto">
+          {{ props.cardText }}</h2>
+        <Form @submit="submit" :validation-schema="schema" class="w-full max-w-md">
+          <div class="flex gap-x-4">
+            <label for="email-address" class="sr-only">Email address</label>
+            <Field id="email" name="email" type="email" autocomplete="email" placeholder="Enter your email"
+              class="min-w-0 flex-auto rounded-md border-0 bg-white/5 px-3.5 py-2 text-white shadow-sm ring-1 ring-inset ring-white/10 focus:ring-2 focus:ring-inset focus:ring-white sm:text-sm sm:leading-6" />
+            <ErrorMessage name="email"
+              class="absolute left-5 top-5 translate-y-full w-48 px-2 py-1 bg-gray-700 rounded-lg text-center text-white text-sm after:content-[''] after:absolute after:left-1/2 after:bottom-[100%] after:-translate-x-1/2 after:border-8 after:border-x-transparent after:border-t-transparent after:border-b-gray-700" />
+            <button type="submit"
+              class="flex-none rounded-md bg-white py-2.5 px-3.5 text-sm font-semibold text-gray-900 shadow-sm hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">
+              Sign-up
+            </button>
+          </div>
+          <p class="mt-4 text-sm leading-6 text-gray-300">We care about your data. Read our <NuxtLink to="/privacy"
+              class="font-semibold text-white">privacy policy</NuxtLink>.</p>
+        </Form>
+        <svg viewBox="0 0 1024 1024" class="absolute top-1/2 left-1/2 -z-10 h-[64rem] w-[64rem] -translate-x-1/2"
+          aria-hidden="true">
+          <circle cx="512" cy="512" r="512" fill="url(#759c1415-0410-454c-8f7c-9a820de03641)" fill-opacity="0.7" />
+          <defs>
+            <radialGradient id="759c1415-0410-454c-8f7c-9a820de03641" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
+              gradientTransform="translate(512 512) rotate(90) scale(512)">
+              <stop stop-color="#932122" />
+              <stop offset="1" stop-color="#fbcdcd" stop-opacity="0" />
+            </radialGradient>
+          </defs>
+        </svg>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useAuthStore } from "@/stores"
+import { tokenParser, tokenIsTOTP } from "@/utilities"
+
+const props = defineProps({
+  cardText: String
+})
+
+const auth = useAuthStore()
+const redirectAfterMagic = "/magic"
+const redirectTOTP = "/totp"
+
+const schema = {
+  email: { email: true, required: true },
+  password: { min: 8, max: 64 },
+}
+
+async function submit(values: any) {
+  await auth.logIn({ username: values.email, password: values.password })
+  if (auth.authTokens.token && tokenIsTOTP(auth.authTokens.token))
+    return await navigateTo(redirectTOTP)
+  if (auth.authTokens.token &&
+    tokenParser(auth.authTokens.token).hasOwnProperty("fingerprint"))
+    return await navigateTo(redirectAfterMagic)
+}
+</script>

{{cookiecutter.project_slug}}/frontend/content/privacy.md

@@ -0,0 +1,29 @@
+---
+title: Your privacy
+description: "We at [Website Name] value your privacy as much as we value a cheap joke."
+navigation: false
+---
+
+# Your privacy and rights
+
+Welcome to [Website Name], the online version of a hallucination induced by eating too much cheese. Here's what you can expect when you use our website:
+
+## Privacy policy
+
+- We'll collect every piece of personal information you have, including your name, address, phone number, email, social security number, credit card details, and your mother's maiden name. We'll also peek into your browser history, your text messages, and your dreams (if we can find the right mushrooms).
+- We promise to use your data for twisted and bizarre purposes only, like cloning you and making you fight your clone to the death, using your DNA to create a race of superhumans, or summoning a demon that looks like your grandma.
+- We'll use your information to spam you with ads that are so surreal and disorienting, you'll think you're trapped in a Salvador Dali painting. We'll also use it to mess with your mind, make you question reality, and possibly even inspire you to start a cult (which we'll join, of course).
+- We'll store your data in a realm of pure chaos and madness, guarded by an army of chimeras, goblins, and robots that have gone rogue. We'll also share your data with our interdimensional overlords, who are always hungry for new sources of entertainment.
+- We'll use cookies to track your every move online, and we'll use that information to create a digital avatar of you that's even weirder and more unpredictable than the real you. We'll also use cookies to play pranks on you, like making your cursor turn into a banana or making your keyboard explode (don't worry, it's just a harmless little explosion).
+
+## GDPR
+
+We don't care about GDPR or any other earthly laws. Our website operates in a dimension beyond your feeble human concepts of order and justice. If you try to sue us, we'll just laugh and summon a horde of poltergeists to haunt you for eternity.
+
+## Liability
+
+By using our website, you agree to relinquish all control over your sanity, your identity, and your soul. You acknowledge that our website is a portal to a universe of madness and mayhem, and that you are entering at your own risk. We're not liable for any psychological, spiritual, or metaphysical damage that may result from using our website. But hey, at least you'll have a good story to tell the angels (or the demons, depending on how things turn out).
+
+Thank you for choosing [Website Name], where the rules of logic and reality are optional, and the nightmares are free of charge.
+
+_(Yes, generated by ChatGPT. Replace this with something meaningful.)