Skip to content

Commit

Permalink
Refactor the large settings UI view to multiple files.
Browse files Browse the repository at this point in the history
  • Loading branch information
@knadh
knadh committed Aug 28, 2021
1 parent abedb26 commit 7691fbd
Show file tree
Hide file tree
Showing 9 changed files with 940 additions and 739 deletions.
2 changes: 2 additions & 0 deletions frontend/src/constants.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,3 +31,5 @@ export const timestamp = 'ddd D MMM YYYY, hh:mm A';
export const colors = Object.freeze({
primary: '#7f2aff',
});

export const regDuration = '[0-9]+(ms|s|m|h|d)';
769 changes: 30 additions & 739 deletions frontend/src/views/Settings.vue
View file

Large diffs are not rendered by default.

196 changes: 196 additions & 0 deletions frontend/src/views/settings/bounces.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,196 @@
<template>
<div>
<div class="columns mb-6">
<div class="column">
<b-field :label="$t('settings.bounces.enable')" data-cy="btn-enable-bounce">
<b-switch v-model="data['bounce.enabled']" name="bounce.enabled" />
</b-field>
</div>
<div class="column" :class="{'disabled': !data['bounce.enabled']}">
<b-field :label="$t('settings.bounces.count')" label-position="on-border"
:message="$t('settings.bounces.countHelp')" data-cy="btn-bounce-count">
<b-numberinput v-model="data['bounce.count']"
name="bounce.count" type="is-light"
controls-position="compact" placeholder="3" min="1" max="1000" />
</b-field>
</div>
<div class="column" :class="{'disabled': !data['bounce.enabled']}">
<b-field :label="$t('settings.bounces.action')" label-position="on-border">
<b-select name="bounce.action" v-model="data['bounce.action']">
<option value="blocklist">{{ $t('settings.bounces.blocklist') }}</option>
<option value="delete">{{ $t('settings.bounces.delete') }}</option>
</b-select>
</b-field>
</div>
</div><!-- columns -->

<div class="mb-6">
<b-field :label="$t('settings.bounces.enableWebhooks')"
data-cy="btn-enable-bounce-webhook">
<b-switch v-model="data['bounce.webhooks_enabled']"
:disabled="!data['bounce.enabled']"
name="webhooks_enabled" :native-value="true"
data-cy="btn-enable-bounce-webhook" />
<p class="has-text-grey">
<a href="" target="_blank">{{ $t('globals.buttons.learnMore') }} &rarr;</a>
</p>
</b-field>
<div class="box" v-if="data['bounce.webhooks_enabled']">
<div class="columns">
<div class="column">
<b-field :label="$t('settings.bounces.enableSES')">
<b-switch v-model="data['bounce.ses_enabled']"
name="ses_enabled" :native-value="true" data-cy="btn-enable-bounce-ses" />
</b-field>
</div>
</div>
<div class="columns">
<div class="column is-3">
<b-field :label="$t('settings.bounces.enableSendgrid')">
<b-switch v-model="data['bounce.sendgrid_enabled']"
name="sendgrid_enabled" :native-value="true"
data-cy="btn-enable-bounce-sendgrid" />
</b-field>
</div>
<div class="column">
<b-field :label="$t('settings.bounces.sendgridKey')"
:message="$t('globals.messages.passwordChange')">
<b-input v-model="data['bounce.sendgrid_key']" type="password"
:disabled="!data['bounce.sendgrid_enabled']"
name="sendgrid_enabled" :native-value="true"
data-cy="btn-enable-bounce-sendgrid" />
</b-field>
</div>
</div>
</div>
</div>

<!-- bounce mailbox -->
<b-field :label="$t('settings.bounces.enableMailbox')">
<b-switch v-if="data['bounce.mailboxes']"
v-model="data['bounce.mailboxes'][0].enabled"
:disabled="!data['bounce.enabled']"
name="enabled" :native-value="true" data-cy="btn-enable-bounce-mailbox" />
</b-field>

<template v-if="data['bounce.enabled'] && data['bounce.mailboxes'][0].enabled">
<div class="block box" v-for="(item, n) in data['bounce.mailboxes']" :key="n">
<div class="columns">
<div class="column" :class="{'disabled': !item.enabled}">
<div class="columns">
<div class="column is-3">
<b-field :label="$t('settings.bounces.type')" label-position="on-border">
<b-select v-model="item.type" name="type">
<option value="pop">POP</option>
</b-select>
</b-field>
</div>
<div class="column is-6">
<b-field :label="$t('settings.mailserver.host')" label-position="on-border"
:message="$t('settings.mailserver.hostHelp')">
<b-input v-model="item.host" name="host"
placeholder='bounce.yourmailserver.net' :maxlength="200" />
</b-field>
</div>
<div class="column is-3">
<b-field :label="$t('settings.mailserver.port')" label-position="on-border"
:message="$t('settings.mailserver.portHelp')">
<b-numberinput v-model="item.port" name="port" type="is-light"
controls-position="compact"
placeholder="25" min="1" max="65535" />
</b-field>
</div>
</div><!-- host -->

<div class="columns">
<div class="column is-3">
<b-field :label="$t('settings.mailserver.authProtocol')"
label-position="on-border">
<b-select v-model="item.auth_protocol" name="auth_protocol">
<option value="none">none</option>
<option v-if="item.type === 'pop'" value="userpass">userpass</option>
<template v-else>
<option value="cram">cram</option>
<option value="plain">plain</option>
<option value="login">login</option>
</template>
</b-select>
</b-field>
</div>
<div class="column">
<b-field grouped>
<b-field :label="$t('settings.mailserver.username')"
label-position="on-border" expanded>
<b-input v-model="item.username"
:disabled="item.auth_protocol === 'none'"
name="username" placeholder="mysmtp" :maxlength="200" />
</b-field>
<b-field :label="$t('settings.mailserver.password')"
label-position="on-border" expanded
:message="$t('settings.mailserver.passwordHelp')">
<b-input v-model="item.password"
:disabled="item.auth_protocol === 'none'"
name="password" type="password"
:placeholder="$t('settings.mailserver.passwordHelp')"
:maxlength="200" />
</b-field>
</b-field>
</div>
</div><!-- auth -->

<div class="columns">
<div class="column is-6">
<b-field grouped>
<b-field :label="$t('settings.mailserver.tls')" expanded
:message="$t('settings.mailserver.tlsHelp')">
<b-switch v-model="item.tls_enabled" name="item.tls_enabled" />
</b-field>
<b-field :label="$t('settings.mailserver.skipTLS')" expanded
:message="$t('settings.mailserver.skipTLSHelp')">
<b-switch v-model="item.tls_skip_verify"
:disabled="!item.tls_enabled" name="item.tls_skip_verify" />
</b-field>
</b-field>
</div>
<div class="column"></div>
<div class="column is-4">
<b-field :label="$t('settings.bounces.scanInterval')" expanded
label-position="on-border"
:message="$t('settings.bounces.scanIntervalHelp')">
<b-input v-model="item.scan_interval" name="scan_interval"
placeholder="15m" :pattern="regDuration" :maxlength="10" />
</b-field>
</div>
</div><!-- TLS -->
</div>
</div><!-- second container column -->
</div><!-- block -->
</template>
</div>
</template>

<script>
import Vue from 'vue';
import { regDuration } from '../../constants';
export default Vue.extend({
props: {
form: {
type: Object,
},
},
data() {
return {
data: this.form,
regDuration,
};
},
methods: {
removeBounceBox(i) {
this.data['bounce.mailboxes'].splice(i, 1);
},
},
});
</script>
81 changes: 81 additions & 0 deletions frontend/src/views/settings/general.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
<template>
<div class="items">
<b-field :label="$t('settings.general.rootURL')" label-position="on-border"
:message="$t('settings.general.rootURLHelp')">
<b-input v-model="data['app.root_url']" name="app.root_url"
placeholder='https://listmonk.yoursite.com' :maxlength="300" />
</b-field>

<b-field :label="$t('settings.general.logoURL')" label-position="on-border"
:message="$t('settings.general.logoURLHelp')">
<b-input v-model="data['app.logo_url']" name="app.logo_url"
placeholder='https://listmonk.yoursite.com/logo.png' :maxlength="300" />
</b-field>

<b-field :label="$t('settings.general.faviconURL')" label-position="on-border"
:message="$t('settings.general.faviconURLHelp')">
<b-input v-model="data['app.favicon_url']" name="app.favicon_url"
placeholder='https://listmonk.yoursite.com/favicon.png' :maxlength="300" />
</b-field>

<hr />
<b-field :label="$t('settings.general.fromEmail')" label-position="on-border"
:message="$t('settings.general.fromEmailHelp')">
<b-input v-model="data['app.from_email']" name="app.from_email"
placeholder='Listmonk <[email protected]>'
pattern="(.+?)\s<(.+?)@(.+?)>" :maxlength="300" />
</b-field>

<b-field :label="$t('settings.general.adminNotifEmails')" label-position="on-border"
:message="$t('settings.general.adminNotifEmailsHelp')">
<b-taginput v-model="data['app.notify_emails']" name="app.notify_emails"
:before-adding="(v) => v.match(/(.+?)@(.+?)/)"
placeholder='[email protected]' />
</b-field>

<b-field :label="$t('settings.general.enablePublicSubPage')"
:message="$t('settings.general.enablePublicSubPageHelp')">
<b-switch v-model="data['app.enable_public_subscription_page']"
name="app.enable_public_subscription_page" />
</b-field>

<b-field :label="$t('settings.general.checkUpdates')"
:message="$t('settings.general.checkUpdatesHelp')">
<b-switch v-model="data['app.check_updates']"
name="app.check_updates" />
</b-field>

<hr />
<b-field :label="$t('settings.general.language')" label-position="on-border">
<b-select v-model="data['app.lang']" name="app.lang">
<option v-for="l in serverConfig.langs" :key="l.code" :value="l.code">
{{ l.name }}
</option>
</b-select>
</b-field>
</div>
</template>

<script>
import Vue from 'vue';
import { mapState } from 'vuex';
export default Vue.extend({
props: {
form: {
type: Object,
},
},
data() {
return {
data: this.form,
};
},
computed: {
...mapState(['serverConfig', 'loading']),
},
});
</script>
Loading

0 comments on commit 7691fbd

Please sign in to comment.