Refactor <dougal-project-settings-asaqc/>.

- Uses the new interface with the main component
- Changes the path where ASAQC related settings are saved,
  from $.asaqc to $.cloud.asaqc.
- Adds field for configuring the subscription key.

lib/www/client/source/src/components/project-settings/asaqc.vue

@@ -9,21 +9,31 @@
           hint="ID number for this survey in ASAQC"
           persistent-hint
           type="number"
-          v-model.number="id"
+          v-model.number="value_.id"
         >
         </v-text-field>
         <v-text-field
           label="IMO"
           hint="Project vessel's International Maritime Organisation's identification number"
           persistent-hint
-          v-model.number="imo"
+          v-model.number="value_.imo"
         >
         </v-text-field>
         <v-text-field
           label="MMSI"
           hint="Maritime Mobile Service Identities (MMSI) number"
           persistent-hint
-          v-model.number="mmsi"
+          v-model.number="value_.mmsi"
+        >
+        </v-text-field>
+        <v-text-field
+          label="Subscription key"
+          hint="Key to authenticate to ASAQC, provided by Equinor"
+          persistent-hint
+          :type="subscriptionKeyVisible ? 'text' : 'password'"
+          :append-icon="subscriptionKeyVisible ? 'mdi-eye' : 'mdi-eye-off'"
+          v-model="value_.subscriptionKey"
+          @click:append="subscriptionKeyVisible = !subscriptionKeyVisible"
         >
         </v-text-field>
       </v-form>
@@ -48,17 +58,29 @@
 </template>
 
 <script>
+import { deepCompare, deepMerge } from '@/lib/utils';
+import setIfDifferent from '@/lib/watcher-mixin';
 
 export default {
   name: "DougalProjectSettingsASAQC",
 
+  mixins: [
+    setIfDifferent({
+      value: "value_"
+    })
+  ],
+
   props: [ "value" ],
 
   data () {
     return {
-      id: null,
-      imo: null,
-      mmsi: null,
+      value_: {
+        id: null,
+        imo: null,
+        mmsi: null,
+        subscriptionKey: null
+      },
+      subscriptionKeyVisible: false
     }
   },
 
@@ -71,13 +93,19 @@ export default {
   methods: {
 
     reset () {
-      for (const key of Object.keys(this.$data)) {
-        this[key] = this.value[key];
-      }
+
+      this.value_ = deepMerge({
+        id: null,
+        imo: null,
+        mmsi: null,
+        subscriptionKey: null
+      }, structuredClone(this.value??{}));
+
     },
 
     save () {
-      this.$emit('input', {...this.$data});
+      this.$emit("merge", [ [ "cloud", "asaqc" ], this.value_ ]);
+      this.$nextTick(this.reset);
     },
 
     back () {