ui: show "Not configured yet" instead of sync error (#1358)

src/_locales/en/messages.yml

@@ -653,6 +653,9 @@ msgSyncInit:
 msgSyncInitError:
   description: Message shown when sync fails in initialization.
   message: Initializing error!
+msgSyncNotConfigured:
+  description: Message shown when the selected sync provider hasn't been configured yet.
+  message: Not configured yet.
 msgSyncReady:
   description: Message shown when sync will start soon.
   message: Sync will start soon...

src/background/sync/base.js

@@ -210,6 +210,7 @@ export const BaseService = serviceFactory({
     this.config = serviceConfig(this.name);
     this.authState = serviceState([
       'idle',
+      'not-configured',
       'initializing',
       'authorizing', // in case some services require asynchronous requests to get access_tokens
       'authorized',
@@ -269,13 +270,13 @@ export const BaseService = serviceFactory({
   prepare() {
     this.authState.set('initializing');
     return (this.initToken() ? Promise.resolve(this.user()) : Promise.reject({
-      type: 'unauthorized',
+      type: 'not-configured',
     }))
     .then(() => {
       this.authState.set('authorized');
     }, (err) => {
-      if (err && err.type === 'unauthorized') {
-        this.authState.set('unauthorized');
+      if (['not-configured', 'unauthorized'].includes(err?.type)) {
+        this.authState.set(err.type);
       } else {
         console.error(err);
         this.authState.set('error');

src/options/views/tab-settings/vm-sync.vue

@@ -1,7 +1,7 @@
 <template>
   <section class="mt-1c">
     <h3 v-text="i18n('labelSync')"></h3>
-    <div v-if="state">
+    <div v-if="state" class="flex flex-wrap center-items">
       <span v-text="i18n('labelSyncService')"></span>
       <select class="mx-1" :value="syncConfig.current" @change="onSyncChange">
         <option
@@ -13,11 +13,13 @@
       </select>
       <button v-text="state.label" v-if="service.name && state.authType === 'oauth'"
       :disabled="!state.canAuthorize" @click="onAuthorize"></button>
-      <button :disabled="!state.canSync" v-if="service.name" @click="onSync">
-        <icon name="refresh"></icon>
-      </button>
+      <tooltip v-if="service.name" :content="i18n('labelSync')" class="stretch-self flex mr-1">
+        <button :disabled="!state.canSync" @click="onSync" class="flex center-items">
+          <icon name="refresh"/>
+        </button>
+      </tooltip>
+      <p v-if="state" v-text="state.message"/>
     </div>
-    <p v-if="state" class="mt-1" v-text="state.message"></p>
     <fieldset class="mt-1c" v-if="state && state.authType === 'password'">
       <label class="sync-server-url">
         <span v-text="i18n('labelSyncServerUrl')"></span>
@@ -61,13 +63,14 @@
         />
       </div>
     </fieldset>
-    <div class="mr-2c">
+    <div v-if="service && service.name">
       <setting-check name="syncScriptStatus" :label="i18n('labelSyncScriptStatus')" />
     </div>
   </section>
 </template>
 
 <script>
+import Tooltip from 'vueleton/lib/tooltip/bundle';
 import { noop, sendCmd } from '#/common';
 import options from '#/common/options';
 import SettingCheck from '#/common/ui/setting-check';
@@ -87,6 +90,7 @@ export default {
   components: {
     SettingCheck,
     Icon,
+    Tooltip,
   },
   data() {
     return {
@@ -124,8 +128,8 @@ export default {
     state() {
       const { service } = this;
       if (service) {
-        const canAuthorize = ['unauthorized', 'error', 'authorized'].includes(service.authState)
-          && ['idle', 'error'].includes(service.syncState);
+        const canAuthorize = ['idle', 'error'].includes(service.syncState)
+          && ['not-configured', 'unauthorized', 'error', 'authorized'].includes(service.authState);
         const canSync = canAuthorize && service.authState === 'authorized';
         return {
           message: this.getMessage(),
@@ -152,7 +156,7 @@ export default {
       if (['authorized'].includes(service.authState)) {
         // revoke
         sendCmd('SyncRevoke');
-      } else if (['unauthorized', 'error'].includes(service.authState)) {
+      } else if (['not-configured', 'unauthorized', 'error'].includes(service.authState)) {
         // authorize
         sendCmd('SyncAuthorize');
       }
@@ -163,6 +167,7 @@ export default {
     getMessage() {
       const { service } = this;
       if (service.authState === 'initializing') return this.i18n('msgSyncInit');
+      if (service.authState === 'not-configured') return this.i18n('msgSyncNotConfigured');
       if (service.authState === 'error') return this.i18n('msgSyncInitError');
       if (service.authState === 'unauthorized') return this.i18n('msgSyncInitError');
       if (service.syncState === 'error') return this.i18n('msgSyncError');
@@ -190,6 +195,12 @@ export default {
 </script>
 
 <style>
+.center-items {
+  align-items: center;
+}
+.stretch-self {
+  align-self: stretch;
+}
 .sync-server-url {
   > input {
     width: 400px;