From 978807de2d5a11860b74f1f97dc0d915ee5c9a5e Mon Sep 17 00:00:00 2001
From: SurenNeware <sneware9@in.ibm.com>
Date: Thu, 3 Sep 2020 18:35:21 +0530
Subject: Add new style for form file component

- Now only add file button will be visible.
- And selected file name will come down to the button.
- Changed form file component from custom type to plain.

Signed-off-by: Suren Neware <sneware9@in.ibm.com>
Change-Id: Ib59135691495c4dddfdbbae0e4228b55cdfda2a8
---
 .../SslCertificates/ModalUploadCertificate.vue     | 24 ++++++++++------------
 1 file changed, 11 insertions(+), 13 deletions(-)

(limited to 'src/views/AccessControl/SslCertificates/ModalUploadCertificate.vue')

diff --git a/src/views/AccessControl/SslCertificates/ModalUploadCertificate.vue b/src/views/AccessControl/SslCertificates/ModalUploadCertificate.vue
index 50df9a42..8a719775 100644
--- a/src/views/AccessControl/SslCertificates/ModalUploadCertificate.vue
+++ b/src/views/AccessControl/SslCertificates/ModalUploadCertificate.vue
@@ -39,24 +39,19 @@
         </b-form-group>
       </template>
 
-      <b-form-group
-        :label="$t('pageSslCertificates.modal.certificateFile')"
-        label-for="certificate-file"
-      >
-        <b-form-file
+      <b-form-group :label="$t('pageSslCertificates.modal.certificateFile')">
+        <form-file
           id="certificate-file"
           v-model="form.file"
           accept=".pem"
-          :browse-text="$t('global.fileUpload.browseText')"
-          :drop-placeholder="$t('global.fileUpload.dropPlaceholder')"
-          :placeholder="$t('global.fileUpload.placeholder')"
           :state="getValidationState($v.form.file)"
-        />
-        <b-form-invalid-feedback role="alert">
-          <template v-if="!$v.form.file.required">
-            {{ $t('global.form.required') }}
+        >
+          <template #invalid>
+            <b-form-invalid-feedback role="alert">
+              {{ $t('global.form.required') }}
+            </b-form-invalid-feedback>
           </template>
-        </b-form-invalid-feedback>
+        </form-file>
       </b-form-group>
     </b-form>
     <template #modal-ok>
@@ -74,7 +69,10 @@
 import { required, requiredIf } from 'vuelidate/lib/validators';
 import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
 
+import FormFile from '@/components/Global/FormFile';
+
 export default {
+  components: { FormFile },
   mixins: [VuelidateMixin],
   props: {
     certificate: {
-- 
cgit v1.2.3