From f63da5484a4a74023b692cde0244a171297d154c Mon Sep 17 00:00:00 2001
From: Grady Ward <grady.b.ward@gmail.com>
Date: Tue, 15 Oct 2024 17:54:27 -0400
Subject: [PATCH] Modernizes the Login Page, adds branding

---
 frontend/assets/scss/_reco.scss               |   4 +
 frontend/components/ProfileEditor.vue         |  74 -------
 frontend/components/category/Option.vue       |  15 ++
 frontend/components/{ => company}/Logo.vue    |   0
 .../components/{ => company}/LogoButton.vue   |   2 +-
 frontend/components/company/NameMark.vue      |  17 ++
 frontend/components/standard/Page.vue         |   2 +-
 frontend/lib/categories/index.ts              |   7 +
 frontend/pages/index.vue                      |   4 +-
 frontend/pages/recommend.vue                  |  88 +++++---
 .../pages/{request.vue => request/index.vue}  |   0
 .../request/new.vue}                          |  30 +--
 frontend/pages/sign-in.vue                    | 208 ++++++++++--------
 13 files changed, 235 insertions(+), 216 deletions(-)
 delete mode 100644 frontend/components/ProfileEditor.vue
 create mode 100644 frontend/components/category/Option.vue
 rename frontend/components/{ => company}/Logo.vue (100%)
 rename frontend/components/{ => company}/LogoButton.vue (95%)
 create mode 100644 frontend/components/company/NameMark.vue
 create mode 100644 frontend/lib/categories/index.ts
 rename frontend/pages/{request.vue => request/index.vue} (100%)
 rename frontend/{components/RequestCreator.vue => pages/request/new.vue} (64%)

diff --git a/frontend/assets/scss/_reco.scss b/frontend/assets/scss/_reco.scss
index 0fd5143..f04282d 100644
--- a/frontend/assets/scss/_reco.scss
+++ b/frontend/assets/scss/_reco.scss
@@ -10,3 +10,7 @@ body,
 .border-standard {
   border-color: var(--p-surface-300);
 }
+
+body {
+  color: var(--p-text-color);
+}
diff --git a/frontend/components/ProfileEditor.vue b/frontend/components/ProfileEditor.vue
deleted file mode 100644
index 2be8442..0000000
--- a/frontend/components/ProfileEditor.vue
+++ /dev/null
@@ -1,74 +0,0 @@
-<script setup lang="ts">
-const {
-  appState,
-  userProfileName,
-  userProfileIcon,
-  userProfileColorA,
-  userProfileColorB,
-} = useAppState()
-const { primeVueIcons: icons } = usePrimevueIcons()
-</script>
-
-<template>
-  <FlexRow>
-    <FlexCol class="w-fit">
-      <IftaLabel>
-        <label for="profileName">Username</label>
-        <InputText
-          id="username"
-          v-model="userProfileName"
-        />
-      </IftaLabel>
-      <IftaLabel>
-        <label for="profileIcon">Icon</label>
-        <Select
-          id="profileIcon"
-          v-model="userProfileIcon"
-          :options="icons"
-          filter
-          show-clear
-        >
-          <template #value="slotProps">
-            <FlexRow>
-              <i
-                v-if="userProfileIcon"
-                :class="`pi ${slotProps.value}`"
-              />
-              <div>{{ slotProps.value }}</div>
-            </FlexRow> 
-          </template>
-          <template #option="slotProps">
-            <FlexRow>
-              <i
-                v-if="userProfileIcon"
-                :class="`pi ${slotProps.option}`"
-              />
-              <div>{{ slotProps.option }}</div>
-            </FlexRow>
-          </template>
-        </Select>
-      </IftaLabel>
-      <IftaLabel>
-        <label for="colorA">Primary Color</label>
-        <ColorPicker
-          id="colorA"
-          v-model="userProfileColorA"
-        />
-      </IftaLabel>
-      <IftaLabel>
-        <label for="colorB">Secondary Color</label>
-        <ColorPicker
-          id="colorB"
-          v-model="userProfileColorB"
-        />
-      </IftaLabel>
-    </FlexCol>
-    <FlexCol>
-      <ButtonUserMe
-        :user="appState.me"
-        @click="() => {}"
-      />
-      <StandardDebug :value="appState.me" />
-    </FlexCol>
-  </FlexRow>
-</template>
diff --git a/frontend/components/category/Option.vue b/frontend/components/category/Option.vue
new file mode 100644
index 0000000..a319d51
--- /dev/null
+++ b/frontend/components/category/Option.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { CategoryOption } from '@/lib/categories'
+
+interface Props {
+  value: CategoryOption
+}
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <FlexRow v-if="props.value">
+    <i :class="props.value.icon" />
+    <div>{{ props.value.label }}</div>
+  </FlexRow>
+</template>
diff --git a/frontend/components/Logo.vue b/frontend/components/company/Logo.vue
similarity index 100%
rename from frontend/components/Logo.vue
rename to frontend/components/company/Logo.vue
diff --git a/frontend/components/LogoButton.vue b/frontend/components/company/LogoButton.vue
similarity index 95%
rename from frontend/components/LogoButton.vue
rename to frontend/components/company/LogoButton.vue
index 2497e8c..fa4c00e 100644
--- a/frontend/components/LogoButton.vue
+++ b/frontend/components/company/LogoButton.vue
@@ -15,7 +15,7 @@ const classes = computed(() => isHome.value ? '' : 'p-button-outlined')
     :disabled="disabled"
     @click="click"
   >
-    <Logo /> 
+    <CompanyLogo /> 
   </Button>
 </template>
 
diff --git a/frontend/components/company/NameMark.vue b/frontend/components/company/NameMark.vue
new file mode 100644
index 0000000..1e617b3
--- /dev/null
+++ b/frontend/components/company/NameMark.vue
@@ -0,0 +1,17 @@
+<template>
+  <div class="flex flex-column justify-content-stretch">
+    <div>reco</div>
+    <div
+      class="font-bold"
+      style="margin-top: -0.25em; margin-bottom: -0.45em;"
+    >
+      friend
+    </div> 
+    <div
+      class="text-right"
+      style="margin-right: -0.025em;"
+    >
+      .org
+    </div>
+  </div>
+</template>
\ No newline at end of file
diff --git a/frontend/components/standard/Page.vue b/frontend/components/standard/Page.vue
index 4db221b..b46fc76 100644
--- a/frontend/components/standard/Page.vue
+++ b/frontend/components/standard/Page.vue
@@ -30,7 +30,7 @@ const footerButtonClasses = 'p-button-text p-button-sm'
           @click="back"
         />
         <FlexRow>
-          <LogoButton /> 
+          <CompanyLogoButton /> 
           <h1>{{ props.title }}</h1>
         </FlexRow>
         <ButtonUserMe />
diff --git a/frontend/lib/categories/index.ts b/frontend/lib/categories/index.ts
new file mode 100644
index 0000000..4e683cd
--- /dev/null
+++ b/frontend/lib/categories/index.ts
@@ -0,0 +1,7 @@
+import { Category } from '@/graphql/generated'
+
+export type CategoryOption = { label: string, icon: string, value: Category }
+export const categoryOptions = [
+  { label: 'Book', value: Category.Book, icon: 'pi pi-book' },
+  { label: 'Movie', value: Category.Movie, icon: 'pi pi-play' },
+]
\ No newline at end of file
diff --git a/frontend/pages/index.vue b/frontend/pages/index.vue
index cbcf397..9dd825e 100644
--- a/frontend/pages/index.vue
+++ b/frontend/pages/index.vue
@@ -8,7 +8,7 @@ const menuButtonClasses = {
 
 <template>
   <StandardPage
-    title="RECO.ING"
+    title="recofriend.org"
     sticky
   >
     <FlexCol>
@@ -17,7 +17,7 @@ const menuButtonClasses = {
           class="border-1 p-3 border-round"
           style="color: #e2e8f0;"
         >
-          <Logo style="font-size: 2.625rem; color: #334155;" />
+          <CompanyLogo style="font-size: 2.625rem;" />
         </div>
         <FlexCol class="flex-1">
           <ButtonLink
diff --git a/frontend/pages/recommend.vue b/frontend/pages/recommend.vue
index f504993..bc8a785 100644
--- a/frontend/pages/recommend.vue
+++ b/frontend/pages/recommend.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { Category } from '@/graphql/generated'
+import { type CategoryOption, categoryOptions } from '@/lib/categories'
 
+const router = useRouter()
 
 const prefix = 'recommend'
 
@@ -15,27 +17,42 @@ const toOptions = [
 const toNewName = useState<string>(`${prefix}.toNewName`, () => '')
 const toNewEmail = useState<string>(`${prefix}.toNewEmail`, () => '')
 
-type CategoryOption = { label: string, icon: string, value: Category }
-const categoryOptions = [
-  { label: 'Book', value: Category.Book, icon: 'pi pi-book' },
-  { label: 'Movie', value: Category.Movie, icon: 'pi pi-play' },
-]
 const category = useState<CategoryOption>(`${prefix}.category`)
 
 const titleLabel = computed(() => {
   const c = category.value
   if (!c) {
-    return "Title"
+    return 'Title'
   }
   switch (c.value) {
-    case Category.Book: 
-      return "Title / Author"
-    case Category.Movie:
-      return "Name / Year"
+  case Category.Book: 
+    return 'Title / Author'
+  case Category.Movie:
+    return 'Name / Year'
   }
 })
 const title = useState<string>(`${prefix}.title`, () => '')
 
+const content = useState<string>(`${prefix}.content`, () => '')
+
+
+const disableSend = computed(() => {
+  if (!to.value) {
+    return true
+  }
+  if (!category.value) {
+    return true 
+  }
+  if (!title.value) {
+    return true
+  }
+  if (!content.value) {
+    return true
+  }
+  return false
+})
+
+const back = () => router.back()
 </script>
 
 <template>
@@ -54,7 +71,7 @@ const title = useState<string>(`${prefix}.title`, () => '')
             option-value="value"
           />         
           <template v-if="to === 'NEW'">
-          <FloatLabel variant="on">
+            <FloatLabel variant="on">
               <label for="toNewName">Name</label>
               <InputText
                 id="toNewName"
@@ -68,16 +85,27 @@ const title = useState<string>(`${prefix}.title`, () => '')
                 v-model="toNewEmail"
               />
             </FloatLabel>
-            <Message severity="secondary" icon="pi pi-question-circle">
+            <Message
+              severity="secondary"
+              icon="pi pi-question-circle"
+            >
               Your friend doesn't have to have an account to view this recommendation,
               anyone with the link can view it.
             </Message>
           </template>
-          <Message  v-if="to === 'EXISTING'" severity="warn" icon="pi pi-exclamation-triangle">
+          <Message
+            v-if="to === 'EXISTING'"
+            severity="warn"
+            icon="pi pi-exclamation-triangle"
+          >
             This feature isn't implemented yet
           </Message>
 
-          <Message  v-if="to === 'LINK'" severity="info" icon="pi pi-link">
+          <Message
+            v-if="to === 'LINK'"
+            severity="info"
+            icon="pi pi-link"
+          >
             Anyone with the link will be able to view this recommendation. 
             Anyone can save it to their library if they have or create an account.
           </Message>
@@ -91,16 +119,10 @@ const title = useState<string>(`${prefix}.title`, () => '')
           :options="categoryOptions"
         >
           <template #value="slotProps">
-            <FlexRow v-if="slotProps.value">
-              <i :class="slotProps.value.icon" />
-              <div>{{ slotProps.value.label }}</div>
-            </FlexRow>
+            <CategoryOption :value="slotProps.value" />
           </template>
           <template #option="slotProps">
-            <FlexRow>
-              <i :class="slotProps.option.icon" />
-              <div>{{ slotProps.option.label }}</div>
-            </FlexRow>
+            <CategoryOption :value="slotProps.option" />
           </template>
         </Select>
       </IftaLabel>
@@ -115,18 +137,24 @@ const title = useState<string>(`${prefix}.title`, () => '')
         <label for="appeal">Why they'll like it:</label>
         <Textarea
           id="appeal"
-          autoresize
-          :rows="5"
-          v-model="appeal"
+          v-model="content"
+          auto-resize
         />
       </IftaLabel>
       <FlexRow>
-        <Button class="flex-1 p-button-outlined p-button-secondary"
-        icon="pi pi-arrow-left"
-        @click="back"
-        label="Discard"
+        <Button
+          class="flex-1 p-button-outlined p-button-secondary"
+          icon="pi pi-arrow-left"
+          label="Discard"
+          @click="back"
+        />
+        <Button
+          icon-pos="right"
+          class="flex-1"
+          :disabled="disableSend"
+          icon="pi pi-send"
+          label="Send"
         />
-        <Button icon-pos="right" class="flex-1" :disabled="disableSend" icon="pi pi-send" label="Send" />
       </FlexRow>
     </FlexCol>
   </StandardPage>
diff --git a/frontend/pages/request.vue b/frontend/pages/request/index.vue
similarity index 100%
rename from frontend/pages/request.vue
rename to frontend/pages/request/index.vue
diff --git a/frontend/components/RequestCreator.vue b/frontend/pages/request/new.vue
similarity index 64%
rename from frontend/components/RequestCreator.vue
rename to frontend/pages/request/new.vue
index a08e649..51b167b 100644
--- a/frontend/components/RequestCreator.vue
+++ b/frontend/pages/request/new.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { Category } from '@/graphql/generated'
 import Textarea from 'primevue/textarea'
+import { type CategoryOption, categoryOptions } from '@/lib/categories'
+
 const { 
   appState,
   createRequest,
@@ -8,23 +10,19 @@ const {
 
 const prefix = 'RequestCreator'
 const appeal = useState<string>(`${prefix}.appeal`, () => '')
-const categories = useState<Category[]>(`${prefix}.categories`, () => [])
+const categories = useState<CategoryOption[]>(`${prefix}.categories`, () => [])
 const submitDisabled = computed(() => !appeal.value || categories.value.length === 0)
 
 const submit = () => {
   createRequest({
     appeal: appeal.value,
-    categories: categories.value, 
+    categories: categories.value.map(c => c.value), 
   })
 }
 </script>
 
 <template>
-  <Panel
-    collapsed
-    toggleable
-    header="New Request"
-  >
+  <StandardPage title="Request">
     <FlexCol class="w-fit">
       <IftaLabel>
         <label for="appeal">Appeal</label>
@@ -38,18 +36,20 @@ const submit = () => {
         <MultiSelect
           id="categories"
           v-model="categories"
-          :options="[Category.Book, Category.Movie]"
-        />
+          :options="categoryOptions"
+        >
+          <template #option="slotProps">
+            <CategoryOption :value="slotProps.option" />
+          </template>
+        </MultiSelect>
       </IftaLabel>
       <Button
         :disabled="submitDisabled"
         label="Create Appeal"
+        icon-pos="right"
+        icon="pi pi-send"
         @click="submit"
       />
-      <StandardDebug
-        label="App State"
-        :value="appState"
-      />
     </FlexCol>
-  </Panel>
-</template>
+  </StandardPage>
+</template>
\ No newline at end of file
diff --git a/frontend/pages/sign-in.vue b/frontend/pages/sign-in.vue
index d3463cf..778a114 100644
--- a/frontend/pages/sign-in.vue
+++ b/frontend/pages/sign-in.vue
@@ -106,6 +106,9 @@ const toggleAuthMode = () => {
   case AuthMode.SignIn:
     authMode.value = AuthMode.SignUp
     break
+  case AuthMode.ForgotPassword:
+    authMode.value = AuthMode.SignUp
+    break
   case AuthMode.SignUp:
     authMode.value = AuthMode.SignIn
     break
@@ -189,101 +192,120 @@ const handleEmailPass = () => {
 }
 </script>
 
-
-
 <template>
-  <div>
-    <div>
-      <h1 class="text-xl font-medium mt-4 mb-2 text-gray-600">
-        {{ authLabel }}
-      </h1>
-      <div style="display: flex; flex-direction: column; align-items: flex-start; width: 100%; max-width: 300px; gap: 5px;">
-        <input
-          v-if="isSignUp"
-          v-model="name"
-          type="text"
-          placeholder="Name"
-          aria-label="name"
-        >
-        <div
-          v-if="isForgotPW"
-          class="text-gray-600 text-sm"
-        >
-          We'll send a recovery link to
-        </div>
-        <input
-          v-model="email"
-          type="text"
-          placeholder="Email"
-          aria-label="email"
-        >
-        <input
-          v-if="!isForgotPW"
-          v-model="password"
-          type="password"
-          placeholder="Password"
-          aria-label="password"
-        >
-        <button
-          v-if="!isSignUp && !isForgotPW"
-          @click="forgotPassword"
-        >
-          Can't sign in?
-        </button>
-        <button
-          id="auth-button"
-          :disabled="disableAuthButton"
-          @click="handleEmailPass"
-        >
-          {{ authButtonLabel }}
-        </button>
-        <div style="padding: 10px 0;">
-          or
-        </div>
-        <button
-          @click="signInWithGoogle"
-        >
-          Sign In with Google
-        </button>
-        <button
-          id="create-account"
-          @click="toggleAuthMode"
+  <FlexCol
+    jc="center"
+    ai="center"
+    class="min-h-screen"
+  >
+    <FlexRow>
+      <CompanyLogo />
+      <CompanyNameMark />
+    </FlexRow>
+    <FlexCol
+      class="w-fit"
+      ai="stretch"
+    >
+      <Fieldset
+        :legend="authLabel"
+        class="w-fit"
+      >
+        <FlexCol
+          ai="stretch"
+          class="w-fit"
         >
-          <span
-            v-if="isSignUp"
+          <FlexCol
+            ai="stretch"
+            class="w-fit"
           >
-            Alerady have an account? <strong>Sign In</strong>
-          </span>
-          <span
-            v-else
+            <InputText
+              v-if="isSignUp"
+              v-model="name"
+              placeholder="Name"
+              aria-label="name"
+            />
+            <div
+              v-if="isForgotPW"
+              class="text-gray-600 text-sm"
+            >
+              We'll send a recovery link to
+            </div>
+            <InputText
+              v-model="email"
+              placeholder="Email"
+              aria-label="email"
+            />
+            <Password
+              v-if="!isForgotPW"
+              v-model="password"
+              placeholder="Password"
+              aria-label="password"
+              :feedback="isSignUp"
+            />
+            <Button
+              v-if="!isSignUp && !isForgotPW"
+              class="p-button-secondary p-button-text p-button-sm p-0 align-self-start"
+              @click="forgotPassword"
+            >
+              Can't sign in?
+            </Button>
+            <Button
+              id="auth-button"
+              :disabled="disableAuthButton"
+              :label="authButtonLabel"
+              icon="pi pi-arrow-right"
+              icon-pos="right"
+              @click="handleEmailPass"
+            />
+          </FlexCol>
+          <Divider
+            align="center"
+            class="my-0"
           >
-            Don't have an account? <strong>Create Account</strong>
-          </span>
-        </button>
-        <i style="font-size: 12px;">As you might be able to tell, we are non-proscriptive on what set of UI components/framework you should use. We have used PrimeVue quite happily in the past, and endorse it, but it isn't baked into this starter repor to allow for alternatives. 
-        </i>
-      </div>
-    </div>
-    <div
-      v-if="error"
-    >
-      {{ error }} 
-    </div>
-    <div
-      v-if="showPWResetDialog"
-    >
-      <h3 class="text-center mt-0 mb-3 font-medium">
-        Password reset link sent to <em>{{ email }}</em>
-      </h3>
-
-      <div class="text-center text-sm text-gray-600 font-normal">
-        If that email is associated with an existing account, a password
-        reset link has been sent to it. Use that link to reset your password
-        and sign in.
-      </div>
-      <button @click="showPWResetDialog = false">
-        Okay
-      </button>
-    </div>
-  </div>
+            or
+          </Divider>
+          <Button
+            label="Sign in with Google"
+            icon="pi pi-google"
+            class="p-button-warn p-button-outlined"
+            @click="signInWithGoogle"
+          />
+          <Button
+            id="create-account"
+            class="p-button-outlined p-button-secondary"
+            :label="isSignUp ? 'Existing account sign-in' : 'Create an account'"
+            :icon="isSignUp ? 'pi pi-sign-in' : 'pi pi-user-plus'"
+            @click="toggleAuthMode"
+          />
+        </FlexCol>
+      </Fieldset>
+      <Message
+        v-if="error"
+        icon="pi pi-exclamation-triangle"
+        severity="error"
+        class="w-min min-w-full"
+        closable
+      >
+        {{ error }} 
+      </Message>
+      <Message 
+        v-if="showPWResetDialog"
+        severity="info"
+        class="w-min min-w-full"
+        closable
+        @close="() => showPWResetDialog = false"
+      >
+        <FlexCol class="gap-2">
+          <b>
+            Password reset link sent to <u>{{ email }}</u>
+          </b>
+          <div class="text-sm">
+            If that email is associated with an existing account, a password
+            reset link has been sent to it. Use that link to reset your password
+            and sign in.
+          </div>
+        </FlexCol>
+      </Message>
+    </FlexCol>
+  </FlexCol>
 </template>
\ No newline at end of file