Add support for personalized auth screen

client/web/admin/src/components/CUploaderWithPreview.vue

@@ -16,6 +16,7 @@
       v-if="!disabled"
       :endpoint="endpoint"
       :labels="labels"
+      :accepted-files="['image/*']"
       @upload="$emit('upload', $event)"
     />
   </b-form>

client/web/admin/src/components/Settings/System/CSystemEditorAuthBgScreen.vue

@@ -0,0 +1,146 @@
+<template>
+  <b-card
+    data-test-id="card-edit-authentication"
+    header-bg-variant="white"
+    footer-bg-variant="white"
+    class="shadow-sm"
+  >
+    <template #header>
+      <h3 class="m-0">
+        {{ $t("title") }}
+      </h3>
+    </template>
+
+    <b-row cols="12">
+      <b-col cols="6">
+        <div class="shadow-sm">
+          <div class="d-flex justify-content-between">
+            <h5>
+              {{ $t("image.uploader.title") }}
+            </h5>
+
+            <b-button
+              v-if="uploadedFile('auth.ui.background-image-src')"
+              variant="link"
+              class="d-flex align-items-top text-dark p-1"
+              @click="$emit('resetAttachment', 'auth.ui.background-image-src')"
+            >
+              <font-awesome-icon :icon="['far', 'trash-alt']" />
+            </b-button>
+          </div>
+
+          <c-uploader-with-preview
+            :value="uploadedFile('auth.ui.background-image-src')"
+            :endpoint="'/settings/auth.ui.background-image-src'"
+            :disabled="!canManage"
+            :labels="$t('image.uploader', { returnObjects: true })"
+            @upload="$emit('onUpload')"
+            @clear="$emit('resetAttachment', 'auth.ui.background-image-src')"
+          />
+        </div>
+      </b-col>
+
+      <b-col cols="6">
+        <div class="shadow-sm">
+          <h5>
+            {{ $t("image.editor.title") }}
+          </h5>
+
+          <ace-editor
+            data-test-id="auth-bg-image-styling-editor"
+            :font-size="14"
+            :show-print-margin="true"
+            :show-gutter="true"
+            :highlight-active-line="true"
+            width="100%"
+            height="200px"
+            mode="css"
+            theme="chrome"
+            name="editor/css"
+            :on-change="v => (settings['auth.ui.styles'] = v)"
+            :value="settings['auth.ui.styles']"
+            :editor-props="{
+              $blockScrolling: false
+            }"
+          />
+
+          <c-submit-button
+            :disabled="!canManage"
+            :processing="processing"
+            :success="success"
+            class="float-right mt-2"
+            @submit="$emit('submit', settings['auth.ui.styles'])"
+          />
+        </div>
+      </b-col>
+    </b-row>
+  </b-card>
+</template>
+
+<script>
+import { Ace as AceEditor } from 'vue2-brace-editor'
+import CUploaderWithPreview from 'corteza-webapp-admin/src/components/CUploaderWithPreview'
+import CSubmitButton from 'corteza-webapp-admin/src/components/CSubmitButton'
+
+import 'brace/mode/css'
+import 'brace/theme/chrome'
+
+export default {
+  name: 'CSystemEditorAuthBgImage',
+
+  i18nOptions: {
+    namespaces: 'system.settings',
+    keyPrefix: 'editor.bgScreen',
+  },
+
+  components: {
+    CUploaderWithPreview,
+    AceEditor,
+    CSubmitButton,
+  },
+
+  props: {
+    settings: {
+      type: Object,
+      required: true,
+    },
+
+    canManage: {
+      type: Boolean,
+      required: true,
+    },
+
+    processing: {
+      type: Boolean,
+      value: false,
+    },
+
+    success: {
+      type: Boolean,
+      value: false,
+    },
+  },
+
+  methods: {
+    uploadedFile (name) {
+      const localAttachment = /^attachment:(\d+)/
+
+      switch (true) {
+        case this.settings[name] && localAttachment.test(this.settings[name]):
+          const [, attachmentID] = localAttachment.exec(this.settings[name])
+
+          return (
+            this.$SystemAPI.baseURL +
+            this.$SystemAPI.attachmentOriginalEndpoint({
+              attachmentID,
+              kind: 'settings',
+              name,
+            })
+          )
+      }
+
+      return undefined
+    },
+  },
+}
+</script>

client/web/admin/src/views/System/Settings/Index.vue

@@ -22,12 +22,22 @@
       :can-manage="canManage"
       @submit="onExternalSubmit"
     />
+
+    <c-system-editor-auth-bg-screen
+      :settings="getAuthBackground"
+      :can-manage="canManage"
+      class="mt-3"
+      @onUpload="onBackgroundImageUpload"
+      @resetAttachment="onResetBackgroundImage"
+      @submit="onAuthBackgroundSubmit"
+    />
   </b-container>
 </template>
 <script>
 import editorHelpers from 'corteza-webapp-admin/src/mixins/editorHelpers'
 import CSystemEditorAuth from 'corteza-webapp-admin/src/components/Settings/System/CSystemEditorAuth'
 import CSystemEditorExternal from 'corteza-webapp-admin/src/components/Settings/System/CSystemEditorExternal'
+import CSystemEditorAuthBgScreen from 'corteza-webapp-admin/src/components/Settings/System/CSystemEditorAuthBgScreen'
 import { mapGetters } from 'vuex'
 
 export default {
@@ -39,6 +49,7 @@ export default {
   components: {
     CSystemEditorAuth,
     CSystemEditorExternal,
+    CSystemEditorAuthBgScreen,
   },
 
   mixins: [
@@ -58,6 +69,11 @@ export default {
         processing: false,
         success: false,
       },
+
+      authBackground: {
+        processing: false,
+        success: false,
+      },
     }
   },
 
@@ -71,18 +87,13 @@ export default {
     },
 
     getAuth () {
-      if (this.settings.length > 0) {
-        return this.settings.reduce((map, obj) => {
-          const { name, value } = obj
-          const split = name.split('.')
-          if (split[0] === 'auth' && split[1] !== 'external') {
-            map[name] = value
-          }
-          return map
-        }, {})
-      }
-      return {}
+      return this.filterSettings('auth')
     },
+
+    getAuthBackground () {
+      return this.filterSettings('auth.ui')
+    },
+
   },
 
   created () {
@@ -106,6 +117,19 @@ export default {
         })
     },
 
+    filterSettings (prefix) {
+      if (this.settings.length > 0) {
+        return this.settings.reduce((map, obj) => {
+          const { name, value } = obj
+          if (name.startsWith(prefix)) {
+            map[name] = value
+          }
+          return map
+        }, {})
+      }
+      return {}
+    },
+
     onAuthSubmit (auth) {
       this.auth.processing = true
 
@@ -130,7 +154,9 @@ export default {
       this.$SystemAPI.settingsUpdate({ values: external })
         .then(() => {
           this.animateSuccess('external')
-          this.toastSuccess(this.$t('notification:settings.system.external.success'))
+          this.toastSuccess(
+            this.$t('notification:settings.system.external.success')
+          )
         })
         .catch(this.toastErrorHandler(this.$t('notification:settings.system.external.error')))
         .finally(() => {
@@ -138,6 +164,39 @@ export default {
           this.fetchSettings()
         })
     },
+
+    onBackgroundImageUpload () {
+      this.fetchSettings()
+    },
+
+    onResetBackgroundImage (name) {
+      this.$SystemAPI.settingsUpdate({ values: [{ name, value: undefined }], upload: {} })
+        .then(() => {
+          this.fetchSettings()
+        })
+    },
+
+    onAuthBackgroundSubmit (authBackground) {
+      this.authBackground.processing = true
+
+      const values = ([
+        {
+          name: 'auth.ui.styles',
+          value: authBackground,
+        },
+      ])
+
+      this.$SystemAPI.settingsUpdate({ values })
+        .then(() => {
+          this.animateSuccess('authBackground')
+          this.toastSuccess(this.$t('notification:settings.system.bgScreen.style.success'))
+          this.$Settings.fetch()
+        })
+        .catch(this.toastErrorHandler(this.$t('notification:settings.system.bgScreen.style.error')))
+        .finally(() => {
+          this.authBackground.processing = false
+        })
+    },
   },
 }
 </script>