migrations

front-end/src/pages/login.vue

@@ -1,11 +1,13 @@
 <template>
   <div class="flex flex-row justify-center md:p-10">
-    <Card class="p-10 w-full md:w-2/3 lg:w-1/2 xl:w-5/12">
+    <Card class="p-10 w-full md:w-2/3 lg:w-1/2 xl:w-5/12"
+          :style="{ backgroundColor: capabilities.branding.backgroundColor, color: capabilities.branding.foregroundColor }">
       <template #header>
         <div class="flex flex-col items-center justify-center">
           <div>
             <Image
-              :src="getImgUrl"
+                :src="getImgUrl()"
+            />
           </div>
           <div class="text-2xl mt-5">
             <span v-if="capabilities.client_name !== ''">{{ capabilities.client_name }}</span>
@@ -41,7 +43,7 @@
           </div>
           <div v-if="capabilities.magicLogin" class="mt-5">
             <div class="flex items-center">
-              <Checkbox id="magic-link" v-model="magicLink" binary class="mr-3" />
+              <Checkbox id="magic-link" v-model="magicLink" binary class="mr-3"/>
               <label for="magic-link">
                 Use Magic Login (Password-less)
               </label>
@@ -83,11 +85,11 @@
 
         <div v-if="capabilities.socials && Object.keys(capabilities.socials).length > 0" class="mt-5">
           <div class="text-center mt-5 mb-5">
-            <div class="mb-5 w-1/4 ml-auto mr-auto" style="border-bottom: 1px solid rgba(156,134,134,0.27)" />
+            <div class="mb-5 w-1/4 ml-auto mr-auto" style="border-bottom: 1px solid rgba(156,134,134,0.27)"/>
             Social Logins
           </div>
           <div class="flex justify-around mt-5">
-            <Button style="display: none" />
+            <Button style="display: none"/>
             <a v-if="capabilities.socials.google" :href="capabilities.socials.google.redirectUrl" class="p-button"
                style="background-color: #de5246">
               <i class="fa-brands fa-google mr-2"></i> Google
@@ -101,7 +103,7 @@
       </template>
       <template #footer>
         <p class="text-xs text-center text-gray-500 mt-10">
-          Career Uprising, Inc :: Authentication Portal ::
+          {{ capabilities.client_name }} :: Authentication Portal ::
           <i class="text-xs fa-sharp fa-thin fa-copyright"></i> {{ date() }} :: {{ version() }}
         </p>
         <p class="text-center text-gray-500 mt-10">
@@ -112,14 +114,14 @@
   </div>
 </template>
 <script lang="ts">
-import { defineComponent } from 'vue'
+import {defineComponent} from 'vue'
 import axios from 'axios'
-import { ToastMessageOptions } from 'primevue/toast'
+import {ToastMessageOptions} from 'primevue/toast'
 import Image from 'primevue/image'
 import Card from 'primevue/card'
 import Checkbox from 'primevue/checkbox'
 import useVuelidate from '@vuelidate/core'
-import { email, required } from '@vuelidate/validators'
+import {email, required} from '@vuelidate/validators'
 
 interface Data {
   form: {
@@ -130,7 +132,7 @@ interface Data {
   loading: boolean
   capabilities: {
     branding: {
-      imageUrl: string,
+      logoUrl: string,
       foregroundColor: string,
       backgroundColor: string,
     },
@@ -156,8 +158,8 @@ export default defineComponent({
     Card,
     Checkbox,
   },
-  setup () {
-    return { v$: useVuelidate() }
+  setup() {
+    return {v$: useVuelidate()}
   },
   data: (): Data => ({
     form: {
@@ -168,7 +170,7 @@ export default defineComponent({
     loading: false,
     capabilities: {
       branding: {
-        imageUrl: '',
+        logoUrl: '',
         foregroundColor: '',
         backgroundColor: '',
       },
@@ -196,7 +198,7 @@ export default defineComponent({
       },
     },
   },
-  mounted () {
+  mounted() {
     this.getCapabilities()
 
     const urlParams = new URLSearchParams(window.location.search)
@@ -224,26 +226,26 @@ export default defineComponent({
   },
   methods: {
     getImgUrl() {
-      if (this.capabilities.branding.imageUrl !== '') {
-        return this.capabilities.branding.imageUrl
+      if (this.capabilities.branding.logoUrl && this.capabilities.branding.logoUrl !== '') {
+        return this.capabilities.branding.logoUrl
       }
 
-      return '/assets/logo.png'
+      return 'https://i.siteworxpro.com/NxsEu-0-v33knF-Ncdj2MPYJhKfincDN0lqfczAnYiU/w:600/sm:1/enc/U8uE6IaB8-3qrm6YHoicagNyCd3y9TxIvgXdX8KToub50MwB3SJ_zZCqhnHfy2JR'
     },
     date() {
       return new Date().getFullYear()
     },
-    version (): string {
+    version(): string {
       return import.meta.env.VITE_VERSION || 'dev-master'
     },
-    getCapabilities () {
+    getCapabilities() {
       const urlParams = new URLSearchParams(window.location.search)
 
       axios.get(`/client/capabilities?client_id=${urlParams.get('client_id')}`).then((response) => {
         this.capabilities = response.data
       })
     },
-    sendMagicLink () {
+    sendMagicLink() {
       this.v$.$touch()
 
       if (this.v$.$error) {
@@ -272,7 +274,7 @@ export default defineComponent({
         })
       })
     },
-    login () {
+    login() {
 
       if (this.magicLink) {
         return this.sendMagicLink()