fix(ux): freeze message

src/components/Controls/AttachImage.vue

@@ -1,15 +1,11 @@
 <template>
   <div
-    class="
+    class="relative bg-white border rounded-full flex-center overflow-hidden"
-      relative
+    :class="{
-      bg-white
+      'w-20 h-20': size !== 'small',
-      border
+      'w-12 h-12': size === 'small',
-      rounded-full
+      'cursor-pointer': !isReadOnly,
-      flex-center
+    }"
-      overflow-hidden
-      cursor-pointer
-    "
-    :class="{ 'w-20 h-20': size !== 'small', 'w-12 h-12': size === 'small' }"
     @mouseover="showEdit = true"
     @mouseleave="showEdit = false"
     @click="openFileSelector"
@@ -48,9 +44,16 @@
     </div>
     <div
       v-show="showEdit"
-      class="absolute bottom-0 text-gray-500 text-center text-xs pt-3 pb-1"
+      class="
+        absolute
+        bottom-0
+        text-gray-500 text-center text-xs
+        pt-3
+        pb-1
+        select-none
+      "
     >
-      {{ t`Edit` }}
+      {{ !isReadOnly ? t`Edit` : '' }}
     </div>
   </div>
 </template>
@@ -72,6 +75,10 @@ export default {
   },
   methods: {
     async openFileSelector() {
+      if (this.isReadOnly) {
+        return;
+      }
+
       const options = {
         title: fyo.t`Select Image`,
         properties: ['openFile'],

src/components/TwoColumnForm.vue

@@ -10,6 +10,7 @@
         :df="df"
         :value="doc[df.fieldname]"
         @change="async (value) => await onChange(df, value)"
+        :read-only="readOnly"
       />
 
       <!-- Inline Field Form (Eg: Address) -->
@@ -28,6 +29,7 @@
           :no-border="true"
           :focus-first-input="true"
           :autosave="false"
+          :read-only="readOnly"
           @error="(msg) => $emit('error', msg)"
         />
         <div
@@ -78,6 +80,7 @@
             :df="df"
             :value="getRegularValue(df)"
             :class="{ 'p-2': df.fieldtype === 'Check' }"
+            :read-only="readOnly"
             @change="async (value) => await onChange(df, value)"
             @focus="activateInlineEditing(df)"
             @new-doc="async (newdoc) => await onChange(df, newdoc.name)"
@@ -119,6 +122,7 @@ export default {
     },
     noBorder: Boolean,
     focusFirstInput: Boolean,
+    readOnly: { type: [null, Boolean], default: null },
   },
   data() {
     return {

src/pages/SetupWizard/SetupWizard.vue

@@ -6,8 +6,9 @@
     <!-- Setup Wizard Slide -->
     <Slide
       :primary-disabled="!valuesFilled || loading"
-      @primary-clicked="handlePrimary"
+      :secondary-disabled="loading"
-      @secondary-clicked="handleSecondary"
+      @primary-clicked="submit()"
+      @secondary-clicked="$emit('setup-canceled')"
       :class="{ 'window-no-drag': platform !== 'Windows' }"
     >
       <template #title>
@@ -21,6 +22,7 @@
             <FormControl
               :df="getField('logo')"
               :value="doc.logo"
+              :read-only="loading"
               @change="(value) => setValue('logo', value)"
             />
             <div>
@@ -28,6 +30,7 @@
                 ref="companyField"
                 :df="getField('companyName')"
                 :value="doc.companyName"
+                :read-only="loading"
                 @change="(value) => setValue('companyName', value)"
                 input-class="
                   font-semibold
@@ -38,6 +41,7 @@
               <FormControl
                 :df="getField('email')"
                 :value="doc.email"
+                :read-only="loading"
                 @change="(value) => setValue('email', value)"
               />
             </div>
@@ -51,11 +55,13 @@
             {{ emailError }}
           </p>
 
-          <TwoColumnForm :doc="doc" />
+          <TwoColumnForm :doc="doc" :read-only="loading" />
         </div>
       </template>
       <template #secondaryButton>{{ t`Cancel` }}</template>
-      <template #primaryButton>{{ t`Submit` }}</template>
+      <template #primaryButton>{{
+        loading ? t`Setting up...` : t`Submit`
+      }}</template>
     </Slide>
   </div>
 </template>
@@ -64,7 +70,6 @@
 import FormControl from 'src/components/Controls/FormControl.vue';
 import TwoColumnForm from 'src/components/TwoColumnForm.vue';
 import { getErrorMessage } from 'src/utils';
-import { openLink } from 'src/utils/ipcCalls';
 import { getSetupWizardDoc } from 'src/utils/misc';
 import { showMessageDialog } from 'src/utils/ui';
 import Slide from './Slide.vue';
@@ -101,17 +106,6 @@ export default {
     getField(fieldname) {
       return this.doc.schema?.fields.find((f) => f.fieldname === fieldname);
     },
-    openContributingTranslations() {
-      openLink(
-        'https://github.com/frappe/books/wiki/Contributing-Translations'
-      );
-    },
-    handlePrimary() {
-      this.submit();
-    },
-    handleSecondary() {
-      this.$emit('setup-canceled');
-    },
     setValue(fieldname, value) {
       this.emailError = null;
       this.doc.set(fieldname, value).catch((e) => {
@@ -137,14 +131,5 @@ export default {
       this.$emit('setup-complete', this.doc.getValidDict());
     },
   },
-  computed: {
-    buttonText() {
-      if (this.loading) {
-        return this.t`Submit`;
-      }
-
-      return this.t`Setting Up...`;
-    },
-  },
 };
 </script>

src/pages/SetupWizard/Slide.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="w-form shadow-lg rounded-lg border relative bg-white" style="height: 700px">
+  <div
+    class="w-form shadow-lg rounded-lg border relative bg-white"
+    style="height: 700px"
+  >
     <!-- Slide Title -->
     <div class="p-4">
       <h1 class="text-2xl font-semibold select-none">
@@ -19,15 +22,16 @@
       style="top: 100%; transform: translateY(-100%)"
     >
       <Button
-        class="text-sm text-grey-900 w-28"
+        class="text-sm text-grey-900 min-w-28"
         @click="$emit('secondary-clicked')"
+        :disabled="secondaryDisabled"
       >
         <slot name="secondaryButton"></slot>
       </Button>
       <Button
         @click="$emit('primary-clicked')"
         type="primary"
-        class="text-sm text-white w-28"
+        class="text-sm text-white min-w-28"
         :disabled="primaryDisabled"
       >
         <slot name="primaryButton"></slot>
@@ -45,6 +49,7 @@ export default {
   props: {
     usePrimary: { type: Boolean, default: true },
     primaryDisabled: { type: Boolean, default: false },
+    secondaryDisabled: { type: Boolean, default: false },
   },
 };
 </script>