serverless-ircd 0.6.0 → 0.7.0

package/apps/web/upstream/src/components/ServerView.vue

@@ -0,0 +1,126 @@
+<template>
+    <div class="kiwi-serverview">
+        <div class="kiwi-serverview-inner">
+            <tabbed-view ref="tabs" :key="network.id" @changed="tabChanged">
+                <tabbed-tab :header="$t('messages')" :focus="hasMessages" name="messages">
+                    <message-list :buffer="serverBuffer" />
+                </tabbed-tab>
+                <tabbed-tab
+                    v-if="!restrictedServer"
+                    :header="$t('settings')"
+                    :focus="!hasMessages"
+                    name="settings"
+                >
+                    <network-settings :network="network" />
+                </tabbed-tab>
+                <tabbed-tab
+                    v-if="networkConnected"
+                    :header="$t('channels')"
+                    name="channels"
+                >
+                    <channel-list :network="network" />
+                </tabbed-tab>
+                <tabbed-tab
+                    v-for="item in pluginUiElements"
+                    :key="item.id"
+                    :header="item.title()"
+                    :name="item.tabName"
+                >
+                    <component
+                        :is="item.component"
+                        v-bind="item.props"
+                        :network="network"
+                    />
+                </tabbed-tab>
+            </tabbed-view>
+        </div>
+    </div>
+</template>
+
+<script>
+'kiwi public';
+
+import GlobalApi from '@/libs/GlobalApi';
+import MessageList from './MessageList';
+import NetworkSettings from './NetworkSettings';
+import ChannelList from './ChannelList';
+
+export default {
+    components: {
+        MessageList,
+        NetworkSettings,
+        ChannelList,
+    },
+    props: ['network'],
+    data: function data() {
+        return {
+            pluginUiElements: GlobalApi.singleton().serverViewPlugins,
+        };
+    },
+    computed: {
+        hasMessages() {
+            return this.network.serverBuffer().getMessages().length > 0;
+        },
+        serverBuffer() {
+            return this.network.serverBuffer();
+        },
+        restrictedServer() {
+            return this.$state.setting('restricted');
+        },
+        networkConnected() {
+            return this.network.state === 'connected';
+        },
+    },
+    watch: {
+        networkConnected() {
+            this.$nextTick(() => {
+                // Vue won't update the tabs being displayed here so we to
+                // manually update a property to force a re-render of the tabs
+                this.$refs.tabs.a++;
+            });
+        },
+    },
+    created() {
+        this.listen(this.$state, 'server.tab.show', (tabName) => {
+            this.showTab(tabName);
+        });
+    },
+    methods: {
+        showTab(tabName) {
+            this.$refs.tabs.setActiveByName(tabName);
+        },
+        tabChanged(tabName) {
+            this.serverBuffer.show_input = (tabName === 'messages');
+        },
+    },
+};
+</script>
+
+<style>
+
+.kiwi-serverview {
+    box-sizing: border-box;
+    overflow: hidden;
+    position: relative;
+}
+
+.kiwi-serverview .kiwi-messagelist {
+    padding-top: 0;
+    height: 100%;
+    margin: 0;
+}
+
+.kiwi-serverview-inner {
+    /* Mobile safari can't work out the height for scrolling to work without this wrapper element */
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+}
+
+.kiwi-serverview-alerts {
+    margin-bottom: 1em;
+}
+
+</style>

package/apps/web/upstream/src/components/SettingsAdvanced.vue

@@ -0,0 +1,232 @@
+<template>
+    <div class="kiwi-settings-advanced">
+        <div class="kiwi-settings-advanced-notice">{{ $t('settings_advanced_header') }}</div>
+        <form class="u-form">
+            <div class="kiwi-settings-advanced-filter-container">
+                <input
+                    v-model="filterString"
+                    :placeholder="$t('settings_advanced_filter')"
+                    class="u-input"
+                >
+                <i v-if="!filterString" class="fa fa-search" aria-hidden="true" />
+                <i v-else class="fa fa-times" aria-hidden="true" @click="filterString = ''" />
+            </div>
+            <table class="u-table kiwi-settings-advanced-table" cellspacing="0">
+                <tr v-if="filteredSettings.length === 0">
+                    <td class="kiwi-settings-advanced-noresult">
+                        {{ filterString }} - {{ $t('not_found') }}
+                    </td>
+                </tr>
+                <tr
+                    v-for="setting in filteredSettings" v-else
+                    :key="setting.key"
+                    :class="{'kiwi-advanced-setting': !setting.modified,
+                             'kiwi-advanced-setting--modified': setting.modified,
+                    }"
+                >
+                    <td><label :for="'setting-' + setting.key">{{ setting.key }}</label></td>
+                    <td v-if="setting.modified">
+                        <a class="u-link" @click="resetValue($event, setting.key)">
+                            {{ $t('settings_advanced_reset') }}
+                            <i class="fa fa-undo" style="margin-left: 10px;" />
+                        </a>
+                    </td>
+                    <td v-else />
+                    <td>
+                        <input
+                            v-if="setting.type === 'boolean'"
+                            :id="'setting-' + setting.key"
+                            :checked="setting.val"
+                            type="checkbox"
+                            @change="updateSetting($event, setting.key)"
+                        >
+                        <input
+                            v-else-if="setting.type === 'number'"
+                            :id="'setting-' + setting.key"
+                            :value="setting.val"
+                            class="u-input"
+                            type="number"
+                            @keydown.13="$event.target.blur()"
+                            @change="updateSetting($event, setting.key)"
+                            @blur="updateSetting($event, setting.key)"
+                        >
+                        <input
+                            v-else
+                            :id="'setting-' + setting.key"
+                            :value="setting.val"
+                            class="u-input"
+                            @keydown.13="$event.target.blur()"
+                            @blur="updateSetting($event, setting.key)"
+                        >
+                    </td>
+                </tr>
+            </table>
+        </form>
+    </div>
+</template>
+
+<script>
+'kiwi public';
+
+import _ from 'lodash';
+import * as settingTools from '@/libs/settingTools';
+
+export default {
+    data: function data() {
+        return {
+            filterString: '',
+        };
+    },
+    computed: {
+        filteredSettings() {
+            let settings = this.settings;
+            let filter = this.filterString.toLowerCase();
+            let out = [];
+            Object.keys(settings).forEach((key) => {
+                let value = settings[key];
+                if (value.key.toLowerCase().indexOf(filter) !== -1) {
+                    out.push(value);
+                }
+            });
+            return out;
+        },
+        settings() {
+            let out = {};
+            let base = [];
+            settingTools.buildTree(out, base, this.$state.getSetting('settings'), false);
+            settingTools.buildTree(out, base, this.$state.getSetting('user_settings'), true);
+
+            return _.orderBy(Object.keys(out).map((key) => out[key]), [
+                (o) => o.key.split('.').length - 1,
+                'key',
+            ], ['asc']);
+        },
+    },
+    methods: {
+        resetValue(event, settingKey) {
+            let newVal = this.$state.getSetting('settings.' + settingKey);
+            if (!newVal) {
+                newVal = null;
+            }
+            this.$state.setting(settingKey, newVal);
+        },
+        updateSetting(event, settingKey) {
+            let target = event.target;
+            let val = target.type === 'checkbox' ? target.checked : target.value;
+            switch (target.type) {
+            case 'checkbox':
+                val = target.checked;
+                break;
+            case 'number':
+                val = parseInt(target.value, 10);
+                break;
+            default:
+                val = target.value;
+                break;
+            }
+            if (this.$state.setting(settingKey) === val) {
+                return;
+            }
+
+            this.$state.setting(settingKey, val);
+        },
+    },
+};
+</script>
+
+<style>
+
+.kiwi-settings-advanced {
+    width: 100%;
+}
+
+.kiwi-settings-advanced-table .u-input {
+    border-bottom: 2px solid red;
+    height: auto;
+    margin-top: 10px;
+}
+
+.kiwi-settings-advanced-table label {
+    margin: 0;
+}
+
+.kiwi-settings-advanced-table td {
+    height: 30px;
+}
+
+.kiwi-settings-advanced-table td:nth-child(2) {
+    min-width: 100px;
+}
+
+.kiwi-settings-advanced-table td:nth-child(3) {
+    min-width: 350px;
+}
+
+.kiwi-settings-advanced tr.kiwi-advanced-setting--modified {
+    font-weight: 900;
+}
+
+.kiwi-settings-advanced .u-table td .u-input {
+    height: 30px;
+}
+
+.kiwi-settings-advanced-filter {
+    border-bottom: 1px solid rgba(128, 128, 128, 0.5);
+    padding: 0 0 5px 0;
+}
+
+.kiwi-settings-advanced-filter-container {
+    position: relative;
+    display: inline-block;
+}
+
+.kiwi-settings-advanced-filter-container input::-ms-clear {
+    display: none;
+}
+
+.kiwi-settings-advanced-filter-container .fa-search,
+.kiwi-settings-advanced-filter-container .fa-times {
+    position: absolute;
+    top: 8px;
+    right: 10px;
+    z-index: 10;
+    cursor: default;
+}
+
+.kiwi-settings-advanced-filter-container .fa-times {
+    cursor: pointer;
+}
+
+.kiwi-settings-advanced-filter label {
+    font-weight: 600;
+}
+
+.kiwi-settings-advanced .u-form .kiwi-settings-advanced-filter .u-input {
+    display: inline-block;
+    border: 1px solid #000;
+    height: 40px;
+    padding: 0 10px;
+}
+
+.kiwi-settings-advanced-notice {
+    text-align: center;
+    padding: 10px 0;
+    margin: 5px 0 15px 0;
+    font-weight: 900;
+}
+
+.kiwi-settings-advanced .kiwi-settings-advanced-noresult {
+    width: 100%;
+    margin: 50px 0 30px 0;
+    text-align: center;
+    font-weight: 900;
+    font-size: 1em;
+}
+
+@media screen and (max-width: 600px) {
+    .kiwi-settings-advanced .u-form {
+        overflow-x: scroll;
+    }
+}
+
+</style>

package/apps/web/upstream/src/components/SettingsAliases.vue

@@ -0,0 +1,121 @@
+<template>
+    <div class="kiwi-settings-aliases">
+        <form class="u-form">
+            <a
+                class="u-link kiwi-settings-aliases-showhelp"
+                @click="show_help=!show_help"
+            >
+                {{ $t('what_are_aliases') }}
+            </a>
+
+            <div v-if="show_help" class="kiwi-settings-aliases-help">
+                <p>Aliases let you rename existing IRC commands or even build entirely new ones.</p>
+                <p>
+                    They must be one per line and in the form of <em>/name /what it should do</em>.
+                </p>
+
+                <h4>Variables</h4>
+                <p>
+                    There are several variables that may be used to refer to the current environment
+                    such as the active channel or active nick.
+                    <ul>
+                        <li><em>$server</em> The current network name</li>
+                        <li><em>$channel / $destination</em> The current channel / buffer name</li>
+                        <li><em>$nick</em> The current nick</li>
+                    </ul>
+                </p>
+                <p>
+                    You can also use variables to read input from the typed command. <br>
+                    <ul>
+                        <li><em>$0</em> The command name</li>
+                        <li><em>$1</em> The first argument from the typed input</li>
+                        <li><em>$2</em> The second argument from the typed input</li>
+                        <li><em>$1+</em> From the first argument to the last argument</li>
+                    </ul>
+                    <b>Example 1:</b> <em>/greet /msg $1 Hello, $1!</em><br>
+                    This creates an IRC command /greet that accepts one argument. Typing "/greet
+                    username" will execute "/msg username Hello, username!". <br>
+                    <b>Example 2:</b> <em>/ban /quote mode $channel +b $1+</em><br>
+                    This creates an IRC command /ban that does a few things. Typing "/ban nick1
+                    nick2" will execute "/quote mode #activechannel +b nick1 nick2". $channel is
+                    replaced with the active channel name, $1+ is replaced with all the typed input
+                    from the first word to the end.
+                </p>
+
+                <h4>Helper commands</h4>
+                <p>
+                    <ul>
+                        <li>
+                            <em>/echo</em><br>Sends a message to the active buffer without sending
+                            it to the IRC network. Eg, /echo Something happened
+                        </li>
+                        <li>
+                            <em>/lines</em><br>
+                            Similar to Mirc script, this lets you execute multiples lines of
+                            commands separated by a pipe, "|".<br>
+                            Example: "/lines /ban nick1 | /echo Banned user" would first execute the
+                            /ban command, and then the /echo command. This comes in handy with
+                            creating short aliases such as the common "/cycle" command that parts
+                            and re-joins the active channel: "/cycle /lines /part $channel | /join
+                            $channel".
+                        </li>
+                    </ul>
+
+                </p>
+            </div>
+            <textarea v-model="aliasText" class="kiwi-settings-aliases-input" />
+        </form>
+    </div>
+</template>
+
+<script>
+'kiwi public';
+
+export default {
+    data: function data() {
+        return {
+            show_help: false,
+        };
+    },
+    computed: {
+        aliasText: {
+            get: function getAliasText() {
+                return this.$state.setting('aliases').trim();
+            },
+            set: function setAliasText(newVal) {
+                this.$state.setting('aliases', newVal.trim());
+            },
+        },
+    },
+};
+</script>
+
+<style>
+
+.kiwi-settings-aliases-input {
+    width: 80%;
+    height: 200px;
+    font-size: 0.8em;
+    line-height: 1.4em;
+    font-family: monospace;
+}
+
+.kiwi-settings-aliases-showhelp {
+    display: block;
+}
+
+.kiwi-settings-aliases-help {
+    padding: 1em;
+    margin: 1em 0;
+    border: 1px dashed rgba(0, 0, 0, 0.4);
+}
+
+.kiwi-settings-aliases .u-form textarea {
+    min-height: 300px;
+}
+
+.kiwi-settings-aliases-help em {
+    padding: 1px 2px;
+    font-weight: 900;
+}
+</style>