From 36c6551d22294a3073cbe54d32a660e16a6e6941 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 9 Aug 2023 02:03:32 +0530
Subject: [PATCH] fix: added CRM Logo on login page

---
 frontend/src/components/Icons/CRMLogo.vue | 25 +++++++++++++++++++++++
 frontend/src/pages/Login.vue              | 18 +++++++++++++---
 2 files changed, 40 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/components/Icons/CRMLogo.vue

diff --git a/frontend/src/components/Icons/CRMLogo.vue b/frontend/src/components/Icons/CRMLogo.vue
new file mode 100644
index 00000000..da9605e4
--- /dev/null
+++ b/frontend/src/components/Icons/CRMLogo.vue
@@ -0,0 +1,25 @@
+<template>
+  <svg
+    viewBox="0 0 60 17"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M10.0776 1.04102H0V3.69184H10.0776V1.04102Z" fill="#0089FF" />
+    <path
+      d="M0 7.80273V16.1116H3.21664V10.458H9.40933V7.80273H0Z"
+      fill="#0089FF"
+    />
+    <path
+      d="M29.2321 6.22129H26.5094C26.4318 5.77479 26.2886 5.37926 26.0799 5.03468C25.8712 4.68524 25.6116 4.3892 25.301 4.14654C24.9904 3.90388 24.6361 3.72188 24.2381 3.60055C23.845 3.47437 23.4203 3.41127 22.9641 3.41127C22.1537 3.41127 21.4354 3.61511 20.8093 4.02278C20.1832 4.4256 19.6931 5.01769 19.3388 5.79906C18.9845 6.57557 18.8074 7.52438 18.8074 8.64547C18.8074 9.78598 18.9845 10.7469 19.3388 11.5283C19.6979 12.3048 20.1881 12.892 20.8093 13.29C21.4354 13.6831 22.1512 13.8797 22.9569 13.8797C23.4034 13.8797 23.8207 13.8214 24.209 13.705C24.6021 13.5836 24.954 13.4065 25.2646 13.1735C25.58 12.9406 25.8445 12.6542 26.0581 12.3145C26.2765 11.9748 26.4269 11.5865 26.5094 11.1497L29.2321 11.1643C29.1302 11.8729 28.9093 12.5378 28.5696 13.159C28.2347 13.7802 27.7955 14.3286 27.252 14.8042C26.7084 15.275 26.0726 15.6438 25.3446 15.9107C24.6167 16.1728 23.8086 16.3039 22.9205 16.3039C21.6101 16.3039 20.4405 16.0005 19.4116 15.3939C18.3827 14.7872 17.5722 13.9112 16.9801 12.7659C16.388 11.6205 16.092 10.247 16.092 8.64547C16.092 7.03906 16.3905 5.6656 16.9874 4.52509C17.5843 3.37973 18.3973 2.50372 19.4261 1.89707C20.455 1.29042 21.6198 0.987091 22.9205 0.987091C23.7504 0.987091 24.522 1.10357 25.2354 1.33652C25.9489 1.56948 26.5846 1.91163 27.1428 2.36298C27.7009 2.80948 28.1595 3.35789 28.5187 4.00822C28.8826 4.6537 29.1204 5.39139 29.2321 6.22129Z"
+      fill="black"
+    />
+    <path
+      d="M31.2954 16.1V1.19093H36.8863C38.0317 1.19093 38.9926 1.38991 39.7691 1.78787C40.5505 2.18584 41.1402 2.74396 41.5381 3.46223C41.9409 4.17566 42.1423 5.00798 42.1423 5.95921C42.1423 6.9153 41.9385 7.7452 41.5308 8.44892C41.128 9.14778 40.5335 9.68891 39.7473 10.0723C38.9611 10.4509 37.9953 10.6401 36.8499 10.6401H32.8678V8.39796H36.4859C37.1557 8.39796 37.7041 8.30575 38.1312 8.12132C38.5582 7.93205 38.8737 7.65784 39.0775 7.2987C39.2862 6.93471 39.3906 6.48822 39.3906 5.95921C39.3906 5.43021 39.2862 4.97886 39.0775 4.60517C38.8688 4.22662 38.551 3.94028 38.1239 3.74615C37.6968 3.54716 37.146 3.44767 36.4714 3.44767H33.9962V16.1H31.2954ZM38.9975 9.34434L42.6883 16.1H39.6745L36.0491 9.34434H38.9975Z"
+      fill="black"
+    />
+    <path
+      d="M44.2184 1.19093H47.5234L51.9496 11.9942H52.1243L56.5504 1.19093H59.8555V16.1H57.2639V5.8573H57.1255L53.0052 16.0563H51.0687L46.9483 5.83546H46.81V16.1H44.2184V1.19093Z"
+      fill="black"
+    />
+  </svg>
+</template>
diff --git a/frontend/src/pages/Login.vue b/frontend/src/pages/Login.vue
index d750ec06..6f4955ab 100644
--- a/frontend/src/pages/Login.vue
+++ b/frontend/src/pages/Login.vue
@@ -1,6 +1,10 @@
 <template>
   <div class="flex h-screen w-screen justify-center bg-gray-100">
     <div class="mt-32 w-full px-4">
+      <CRMLogo class="mx-auto h-6" />
+      <div class="mt-6 flex items-center justify-center space-x-1.5">
+        <span class="text-3xl font-semibold text-gray-900">Login</span>
+      </div>
       <div class="mx-auto mt-6 w-full px-4 sm:w-96">
         <form
           v-if="showEmailLogin"
@@ -42,6 +46,13 @@
           >
             Login
           </Button>
+          <button
+            v-if="authProviders.data.length"
+            class="mt-2 w-full py-2 text-base text-gray-600"
+            @click="showEmailLogin = false"
+          >
+            Login using other methods
+          </button>
         </form>
         <div
           class="mx-auto space-y-2"
@@ -56,7 +67,7 @@
             :key="provider.name"
             :href="provider.auth_url"
           >
-            <div v-if="provider.icon" v-html="provider.icon"/>
+            <div v-if="provider.icon" v-html="provider.icon" />
             Login via {{ provider.provider_name }}
           </a>
         </div>
@@ -65,9 +76,10 @@
   </div>
 </template>
 <script setup>
-import { ref } from 'vue'
-import { FormControl, ErrorMessage, createResource } from 'frappe-ui'
+import CRMLogo from '@/components/Icons/CRMLogo.vue';
 import { sessionStore } from '@/stores/session'
+import { FormControl, ErrorMessage, createResource } from 'frappe-ui'
+import { ref } from 'vue'
 
 const session = sessionStore()
 let showEmailLogin = ref(false)