Skip to content

Commit 52f4401

Browse files
author
drive4ik
committed
work on #291, prevent save sync options without sync file name
1 parent ea7cf22 commit 52f4401

File tree

2 files changed

+93
-94
lines changed

2 files changed

+93
-94
lines changed

‎addon/src/options/github-gist-fields.vue

+4-7
Original file line numberDiff line numberDiff line change
@@ -87,11 +87,8 @@ export default {
8787
</div>
8888
<div class="field-body">
8989
<div class="field has-addons">
90-
<div :class="['control is-expanded has-icons-left', {
91-
'is-loading': tokenLoading,
92-
'has-icons-right': tokenCheched !== null,
93-
}]">
94-
<input type="text" v-model.trim="internalToken" class="input" />
90+
<div class="control is-expanded has-icons-left has-icons-right">
91+
<input type="text" v-model.trim="internalToken" maxlength="100" class="input" />
9592

9693
<span class="icon is-left">
9794
<img class="size-16" src="/icons/key-solid.svg">
@@ -102,7 +99,7 @@ export default {
10299
</span>
103100
</div>
104101
<div class="control">
105-
<button class="button" @click="checkToken" :disabled="tokenLoading" v-text="lang('githubGistCheckToken')"></button>
102+
<button type="button" class="button" :class="{'is-loading': tokenLoading}" @click.prevent="checkToken" v-text="lang('githubGistCheckToken')"></button>
106103
</div>
107104
</div>
108105
</div>
@@ -117,7 +114,7 @@ export default {
117114
<a class="button is-static" v-text="FILE_NAME_PARTS.start"></a>
118115
</div>
119116
<div class="control is-expanded" :class="{'has-icons-right': !isValidFileName}">
120-
<input type="text" v-model.trim="internalFileName" maxlength="100" class="input" />
117+
<input required type="text" v-model.trim="internalFileName" maxlength="100" class="input" />
121118
<span v-if="!isValidFileName" class="icon is-right">
122119
<img class="size-16" src="/icons/close.svg">
123120
</span>

‎addon/src/options/github-gist.vue

+89-87
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@ export default {
8080
});
8181
});
8282
83-
this.$on('sync-finish', () => this.area.load());
83+
this.$on('sync-finish', () => this.area.load(false));
8484
},
8585
methods: {
8686
lang: browser.i18n.getMessage,
@@ -90,10 +90,10 @@ export default {
9090
},
9191
9292
// SYNC
93-
async loadSyncOptions() {
93+
async loadSyncOptions(resetState) {
9494
if (!this.sync.disabled) {
9595
Object.assign(this.sync.options, await SyncStorage.get());
96-
await this.loadGistInfo(this.sync);
96+
await this.loadGistInfo(this.sync, resetState);
9797
}
9898
},
9999
@@ -102,17 +102,20 @@ export default {
102102
},
103103
104104
// LOCAL
105-
async loadLocalOptions() {
105+
async loadLocalOptions(resetState) {
106106
Object.assign(this.local.options, await Storage.get(this.local.options));
107-
await this.loadGistInfo(this.local);
107+
await this.loadGistInfo(this.local, resetState);
108108
},
109109
110110
async saveLocalOptions() {
111111
await Storage.set({...this.local.options});
112112
},
113113
114-
async loadGistInfo(area) {
115-
// area.error = '';
114+
async loadGistInfo(area, resetState = true) {
115+
if (resetState) {
116+
area.error = '';
117+
this.synchronisationProgress = 0;
118+
}
116119
117120
if (!area.options.githubGistToken) {
118121
area.gist = false;
@@ -150,8 +153,6 @@ export default {
150153
// MAIN
151154
async save(area) {
152155
try {
153-
this.synchronisationProgress = 0;
154-
155156
area.error = '';
156157
area.loading = true;
157158
@@ -228,94 +229,95 @@ export default {
228229
</div>
229230
</div>
230231

231-
<fieldset class="field" :disabled="area.disabled || area.loading">
232-
<github-gist-fields
233-
class="field"
234-
:token.sync="area.options.githubGistToken"
235-
:file-name.sync="area.options.githubGistFileName"
236-
:error.sync="area.error"
237-
></github-gist-fields>
238-
239-
<div class="is-flex is-align-items-center">
240-
<div v-if="!area.disabled" class="hidden-empty">
241-
<div v-if="area.gist" class="is-flex is-align-items-center indent-gap">
242-
<div class="breadcrumb mb-0">
243-
<ul class="is-align-items-center">
244-
<li
245-
v-for="(breadcrumb, i) in area.gist.breadcrumb"
246-
:key="i"
247-
>
248-
<a :href="breadcrumb.url" :class="{'has-text-weight-semibold': breadcrumb.isBold}" target="_blank" rel="noreferrer noopener">
249-
<figure v-show="breadcrumb.imageLoaded" class="image is-24x24 mr-2">
250-
<img :src="breadcrumb.image" @load="breadcrumb.imageLoaded = true" decoding="async" />
251-
</figure>
252-
253-
<span v-if="breadcrumb.text" v-text="breadcrumb.text"></span>
254-
</a>
255-
</li>
256-
</ul>
232+
<form class="field" @submit.prevent="save(area)" @reset.prevent="area.load">
233+
<fieldset :disabled="area.disabled || area.loading">
234+
<github-gist-fields
235+
class="field"
236+
:token.sync="area.options.githubGistToken"
237+
:file-name.sync="area.options.githubGistFileName"
238+
:error.sync="area.error"
239+
></github-gist-fields>
240+
241+
<div class="is-flex is-align-items-center">
242+
<div v-if="!area.disabled" class="hidden-empty">
243+
<div v-if="area.gist" class="is-flex is-align-items-center indent-gap">
244+
<div class="breadcrumb mb-0">
245+
<ul class="is-align-items-center">
246+
<li
247+
v-for="(breadcrumb, i) in area.gist.breadcrumb"
248+
:key="i"
249+
>
250+
<a :href="breadcrumb.url" :class="{'has-text-weight-semibold': breadcrumb.isBold}" target="_blank" rel="noreferrer noopener">
251+
<figure v-show="breadcrumb.imageLoaded" class="image is-24x24 mr-2">
252+
<img :src="breadcrumb.image" @load="breadcrumb.imageLoaded = true" decoding="async" />
253+
</figure>
254+
255+
<span v-if="breadcrumb.text" v-text="breadcrumb.text"></span>
256+
</a>
257+
</li>
258+
</ul>
259+
</div>
260+
<span class="tag is-dark is-rounded" v-text="lang('githubSecretTitle')"></span>
261+
<span :title="area.gist.lastUpdateFull" v-text="lang('lastUpdateAgo', area.gist.lastUpdateAgo)"></span>
262+
</div>
263+
<div v-else-if="area.gist === null">
264+
<img class="size-16" src="/icons/animate-spinner.svg">
257265
</div>
258-
<span class="tag is-dark is-rounded" v-text="lang('githubSecretTitle')"></span>
259-
<span :title="area.gist.lastUpdateFull" v-text="lang('lastUpdateAgo', area.gist.lastUpdateAgo)"></span>
260266
</div>
261-
<div v-else-if="area.gist === null">
262-
<img class="size-16" src="/icons/animate-spinner.svg">
267+
<div class="field is-grouped is-grouped-right is-flex-grow-1">
268+
<div class="control">
269+
<button type="reset" class="button is-info">
270+
<span class="icon">
271+
<img class="size-16" :src="area.icon.load">
272+
</span>
273+
<span v-text="lang('load')"></span>
274+
</button>
275+
</div>
276+
<div class="control">
277+
<button type="submit" class="button is-success" :class="{'is-loading': area.loading}">
278+
<span class="icon">
279+
<img class="size-16" :src="area.icon.save">
280+
</span>
281+
<span v-text="lang('saveSettings')"></span>
282+
</button>
283+
</div>
263284
</div>
264285
</div>
265-
<div class="field is-grouped is-grouped-right is-flex-grow-1">
266-
<div class="control">
267-
<button class="button is-info" @click="area.load">
268-
<span class="icon">
269-
<img class="size-16" :src="area.icon.load">
270-
</span>
271-
<span v-text="lang('load')"></span>
272-
</button>
286+
287+
<hr>
288+
289+
<div class="columns is-vcentered">
290+
<div class="column">
291+
<div class="simple-progress">
292+
<div class="position" :class="{
293+
'in-progress': synchronisationInProgress,
294+
'has-background-success': !area.error && synchronisationProgress === 100,
295+
'has-background-danger': !!area.error,
296+
}"
297+
:style="{
298+
'--progress-value': `${synchronisationProgress}%`,
299+
}"
300+
></div>
301+
</div>
273302
</div>
274-
<div class="control">
275-
<button :class="['button is-success', {'is-loading': area.loading}]" @click="save(area)">
303+
<div class="column is-narrow has-text-right">
304+
<button
305+
class="button is-primary"
306+
:class="{
307+
'is-loading': synchronisationInProgress || area.loading,
308+
}"
309+
:disabled="synchronisationInProgress || area.loading"
310+
@click.prevent="startCloudSync"
311+
>
276312
<span class="icon">
277-
<img class="size-16" :src="area.icon.save">
313+
<img class="size-16" src="/icons/cloud-arrow-up-solid.svg">
278314
</span>
279-
<span v-text="lang('saveSettings')"></span>
315+
<span v-text="lang('syncStart')"></span>
280316
</button>
281317
</div>
282318
</div>
283-
</div>
284-
285-
286-
<hr>
287-
288-
<div class="columns is-vcentered">
289-
<div class="column">
290-
<div class="simple-progress">
291-
<div :class="['position', {
292-
'in-progress': synchronisationInProgress,
293-
'has-background-success': !area.error && synchronisationProgress === 100,
294-
'has-background-danger': !!area.error,
295-
}]"
296-
:style="{
297-
'--progress-value': `${synchronisationProgress}%`,
298-
}"
299-
></div>
300-
</div>
301-
</div>
302-
<div class="column is-narrow has-text-right">
303-
<button
304-
:class="['button is-primary', {
305-
'is-loading': synchronisationInProgress || area.loading,
306-
}]"
307-
:disabled="synchronisationInProgress || area.loading"
308-
@click="startCloudSync"
309-
>
310-
<span class="icon">
311-
<img class="size-16" src="/icons/cloud-arrow-up-solid.svg">
312-
</span>
313-
<span v-text="lang('syncStart')"></span>
314-
</button>
315-
</div>
316-
</div>
317-
318-
</fieldset>
319+
</fieldset>
320+
</form>
319321
</div>
320322
</template>
321323

0 commit comments

Comments
 (0)