cherryontech · novellac · Apr 29, 2025
diff --git a/app/frontend/components/BaseIcon.vue b/app/frontend/components/BaseIcon.vue
@@ -1,6 +1,6 @@
 <template>
-  <svg v-if="icon === 'cog'" :alt="iconAlt" width="32" height="32" viewBox="0 0 32 32" fill="none"
-    xmlns="http://www.w3.org/2000/svg">
+  <svg v-if="icon === 'cog'" :aria-hidden="!iconAlt || undefined" :title="iconAlt || undefined" width="32" height="32"
+    viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
     <g clip-path="url(#clip0_79_155)">
       <path
         d="M0.83606 19.8131L2.994 20.0579C3.24632 20.845 3.56644 21.6057 3.95434 22.3364L2.59856 24.0424C2.30105 24.4152 2.33118 24.9538 2.67012 25.2927L6.71861 29.3525C7.05755 29.6914 7.59609 29.7215 7.96893 29.424L9.67494 28.057C10.4056 28.4411 11.1663 28.7574 11.9534 29.006L12.1982 31.1639C12.2509 31.6422 12.6576 32 13.1359 32H18.8754C19.3537 32 19.7604 31.6422 19.8131 31.1639L20.0579 29.006C20.845 28.7574 21.6057 28.4411 22.3364 28.057L24.0424 29.4127C24.4152 29.7103 24.9538 29.6801 25.2927 29.3412L29.3525 25.2927C29.6914 24.9538 29.7215 24.4152 29.424 24.0424L28.057 22.3364C28.4411 21.6057 28.7574 20.845 29.006 20.0579L31.1639 19.8131C31.6422 19.7604 32 19.3537 32 18.8754V13.1359C32 12.6576 31.6422 12.2509 31.1639 12.1982L29.006 11.9534C28.7574 11.1663 28.4411 10.4056 28.057 9.67494L29.4127 7.96893C29.7103 7.59609 29.6801 7.05755 29.3412 6.71861L25.2927 2.65882C24.9538 2.31988 24.4152 2.28975 24.0424 2.58727L22.3364 3.95434C21.6057 3.5702 20.845 3.25385 20.0579 3.0053L19.8131 0.847358C19.7642 0.365305 19.3574 0 18.8754 0H13.1359C12.6576 0 12.2509 0.357773 12.1982 0.83606L11.9534 2.994C11.1663 3.24632 10.4056 3.56644 9.67494 3.95434L7.96893 2.59856C7.59609 2.30105 7.05755 2.33118 6.71861 2.67012L2.65882 6.71861C2.31988 7.05755 2.28975 7.59609 2.58727 7.96893L3.95434 9.67494C3.5702 10.4056 3.25385 11.1663 3.0053 11.9534L0.847358 12.1982C0.365305 12.2471 0 12.6539 0 13.1359V18.8754C0 19.3537 0.357773 19.7604 0.83606 19.8131ZM1.88302 13.9758L3.83382 13.746C4.22173 13.7046 4.5456 13.4259 4.63976 13.0455C4.91468 11.9948 5.33271 10.9855 5.88255 10.0515C6.08215 9.71637 6.05202 9.29081 5.81099 8.98576L4.58326 7.44545L7.45298 4.57573L8.99329 5.80346C9.29834 6.04449 9.7239 6.07462 10.0591 5.87501C10.9931 5.32517 12.0024 4.90714 13.0531 4.63222C13.4259 4.53431 13.7008 4.21796 13.746 3.83382L13.9682 1.88302H18.0355L18.2653 3.83382C18.3067 4.22173 18.5854 4.5456 18.9658 4.63976C20.024 4.91091 21.0371 5.32894 21.9786 5.88255C22.3138 6.08215 22.7393 6.05202 23.0444 5.81099L24.5847 4.58326L27.4544 7.45298L26.2267 8.99329C25.9856 9.29834 25.9555 9.7239 26.1551 10.0591C26.705 10.9931 27.123 12.0024 27.3979 13.0531C27.4921 13.4221 27.8009 13.6933 28.1775 13.746L30.1283 13.9682V18.0355L28.1775 18.2653C27.7896 18.3067 27.4657 18.5854 27.3715 18.9658C27.1004 20.024 26.6824 21.0371 26.1287 21.9786C25.9292 22.3138 25.9593 22.7393 26.2003 23.0444L27.428 24.5847L24.5583 27.4544L23.018 26.2267C22.713 25.9856 22.2874 25.9555 21.9522 26.1551C21.0107 26.7087 19.9976 27.1268 18.9394 27.3979C18.5779 27.4996 18.3142 27.8046 18.2653 28.1775L18.0431 30.1283H13.9758L13.746 28.1775C13.7046 27.7896 13.4259 27.4657 13.0455 27.3715C11.9948 27.0966 10.9855 26.6786 10.0515 26.1287C9.71637 25.9292 9.29081 25.9593 8.98576 26.2003L7.44545 27.428L4.57573 24.5583L5.80346 23.018C6.04449 22.713 6.07462 22.2874 5.87501 21.9522C5.32141 21.0107 4.90338 19.9976 4.63222 18.9394C4.52677 18.5741 4.21419 18.3067 3.83382 18.2653L1.88302 18.0431V13.9758Z"
@@ -15,8 +15,8 @@
       </clipPath>
     </defs>
   </svg>
-  <svg v-if="icon === 'sun'" :alt="iconAlt" width="38" height="38" viewBox="0 0 38 38" fill="none"
-    xmlns="http://www.w3.org/2000/svg">
+  <svg v-if="icon === 'sun'" :aria-hidden="!iconAlt || undefined" :title="iconAlt || undefined" width="38" height="38"
+    viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
     <g clip-path="url(#clip0_79_158)">
       <path
         d="M19 29.2271C24.6296 29.2271 29.2271 24.6296 29.2271 19C29.2271 13.3704 24.6296 8.77283 19 8.77283C13.3704 8.77283 8.77283 13.3704 8.77283 19C8.77283 24.6296 13.3704 29.2271 19 29.2271ZM19 9.99258C23.9728 9.99258 28.0074 14.0271 28.0074 19C28.0074 23.9728 23.9728 28.0074 19 28.0074C14.0271 28.0074 9.99258 23.9728 9.99258 19C9.99258 14.0271 14.0271 9.99258 19 9.99258Z"
@@ -100,17 +100,24 @@
       </clipPath>
     </defs>
   </svg>
-  <svg v-if="icon === 'thermometer'" :alt="iconAlt" width="75" height="25" viewBox="0 0 75 11" fill="none"
-    xmlns="http://www.w3.org/2000/svg">
+  <svg v-if="icon === 'thermometer'" :aria-hidden="!iconAlt || undefined" :title="iconAlt || undefined" width="75"
+    height="25" viewBox="0 0 75 11" fill="none" xmlns="http://www.w3.org/2000/svg">
     <rect width="74" height="11" rx="5.5" fill="#FAFAFA" />
     <path d="M0 5.5C0 2.46243 2.46243 0 5.5 0H51V11H5.5C2.46244 11 0 8.53757 0 5.5Z" fill="black" />
   </svg>
-  <svg v-if="icon === 'arrowRight'" xmlns="http://www.w3.org/2000/svg" width="8" height="17" viewBox="0 0 8 17" fill="none">
+  <svg v-if="icon === 'arrowRight'" :aria-hidden="!iconAlt || undefined" :title="iconAlt || undefined"
+    xmlns="http://www.w3.org/2000/svg" width="8" height="17" viewBox="0 0 8 17" fill="none">
     <path d="M1.00004 1L7.0813 8.86987L1.00004 16.0243" stroke="#FAFAFA" />
   </svg>
-  <svg v-if="icon === 'arrowLeft'" xmlns="http://www.w3.org/2000/svg" width="8" height="17" viewBox="0 0 8 17" fill="none">
+  <svg v-if="icon === 'arrowLeft'" :aria-hidden="!iconAlt || undefined" :title="iconAlt || undefined"
+    xmlns="http://www.w3.org/2000/svg" width="8" height="17" viewBox="0 0 8 17" fill="none">
     <path d="M7.08126 1.0199L0.999999 8.88976L7.08126 16.0442" stroke="#FAFAFA" />
   </svg>
+  <svg v-bind="$attrs" v-if="icon === 'check'" :aria-hidden="!iconAlt || undefined" :title="iconAlt || undefined"
+    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill="current">
+    <path
+      d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z" />
+  </svg>
 </template>
 
 <script setup lang="ts">

diff --git a/app/frontend/layouts/PublicLayout.vue b/app/frontend/layouts/PublicLayout.vue
@@ -0,0 +1,8 @@
+<template>
+  <main class="flex flex-col min-h-screen p-4 appBg">
+    <article class="grow">
+
+      <slot />
+    </article>
+  </main>
+</template>
diff --git a/app/frontend/locales/en.json b/app/frontend/locales/en.json
@@ -4,6 +4,7 @@
     "youGotThis": "You got this!"
   },
   "labels": {
+    "appName": "Do Five Things",
     "completed": "Completed",
     "calendar": {
       "backMonth": "Go to previous month",
@@ -15,10 +16,22 @@
     "task": "Task",
     "toDo": "To do"
   },
+  "login": {
+    "intro": "Ready to tackle 5 simple tasks every day?",
+    "loginInput": {
+      "label": "Email address",
+      "button": "Login"
+    },
+    "signUpCta": {
+      "intro": "Not a member yet?",
+      "linkText": "Sign up!"
+    }
+  },
   "pageTitles": {
+    "login": "Welcome!",
+    "progress": "Progress",
     "settings": "Settings",
-    "today": "Today",
-    "progress": "Progress"
+    "today": "Today"
   },
   "nav": {
     "settings": "Settings",

diff --git a/app/frontend/pages/LoginPage.vue b/app/frontend/pages/LoginPage.vue
@@ -1,5 +1,50 @@
 <template>
-  <div style="background-color: blueviolet;">
-    <input type="text"/>
+  <div class="mx-auto max-w-sm">
+    <div class="my-12 flex gap-2 justify-center items-end flex-wrap">
+      <span class="bg-dft-primary w-14 h-14 rounded-lg inline-block text-dft-grey">
+        <BaseIcon class="fill-dft-grey" icon="check" />
+      </span>
+      <h1 class="text-dft-primary text-4xl text-center -mb-1">
+        {{ $t('labels.appName') }}
+      </h1>
+    </div>
+    <p class="text-center">{{ $t('login.intro') }}</p>
+
+    <div class="flex flex-col gap-2 mt-10">
+      <div :class="loginHasError ? 'border-dft-error ring-dft-error' : 'border-dft-primary ring-dft-primary'"
+        class="transition ease-in-out focus-within:ring-4 ring-inset flex flex-col items-baseline gap-4 py-5 px-9 border-2 rounded-dft-input">
+
+        <label for="loginInput" class="flex items-center text-xl" :class="{ 'text-dft-error': loginHasError }">
+          <span>{{ $t('login.loginInput.label') }}</span>
+          <span v-if="loginHasError">*</span>
+        </label>
+
+        <input :aria-invalid="loginHasError || undefined" placeholder="ada@example.com"
+          class="placeholder:text-gray-400 placeholder:italic w-full p-0 leading-none bg-transparent border-0 border-b" id="loginInput" type="text"
+          :class="loginHasError ? 'border-dft-error' : 'border-dft-white'" v-model="loginEmail" />
+
+        <BaseButton data-test="saveButton" class="my-5 ml-auto block" :hasError="loginHasError">
+          {{ $t('login.loginInput.button') }}
+        </BaseButton>
+      </div>
+    </div>
+
+    <p class="mt-4 text-right">{{ $t('login.signUpCta.intro') }} <a href="/signup" class="underline">{{
+      $t('login.signUpCta.linkText') }}</a></p>
   </div>
 </template>
+
+<script setup lang="ts">
+import PublicLayout from '../layouts/PublicLayout.vue';
+import BaseButton from '../components/BaseButton.vue'
+
+import { ref } from 'vue'
+import BaseIcon from '../components/BaseIcon.vue';
+
+defineOptions({
+  layout: PublicLayout
+})
+
+const loginHasError = ref(false)
+const loginEmail = ref('')
+</script>