serverless-ircd 0.6.0 → 0.7.0

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

@@ -0,0 +1,284 @@
+<template>
+    <div class="kiwi-autocomplete kiwi-theme-bg">
+
+        <div
+            v-for="item in filteredAndLimitedItems"
+            :key="item.type+item.text"
+            :class="{
+                'kiwi-autocomplete-item': true,
+                'kiwi-autocomplete-item--selected': item.idx === selected_idx}
+            "
+            @click="selected_idx = item.idx; selectCurrentItem()"
+        >
+            <template v-if="item.type === 'user'">
+                <span class="kiwi-autocomplete-item-value">{{ item.text }}</span>
+                <span
+                    class="u-link kiwi-autocomplete-item-action"
+                    @click.stop="openQuery(item.text)"
+                >
+                    {{ $t('send_message') }}
+                </span>
+            </template>
+            <template v-else-if="item.type === 'command'">
+                <span class="kiwi-autocomplete-item-value">{{ item.text }}</span>
+                <span class="u-link kiwi-autocomplete-item-description">
+                    {{ item.description }}
+                </span>
+            </template>
+            <template v-else>
+                <span class="kiwi-autocomplete-item-value">{{ item.text }}</span>
+            </template>
+        </div>
+    </div>
+</template>
+
+<script>
+'kiwi public';
+
+import * as Misc from '@/helpers/Misc';
+
+export default {
+    props: ['filter', 'buffer', 'items', 'itemsPerPage'],
+    data() {
+        return {
+            // items: [
+            //     { text: 'anick1', type: 'user' },
+            //     { text: 'anick2', type: 'user' },
+            //     { text: 'bnick3', type: 'user' },
+            //     { text: 'cnick4' },
+            //     { text: 'dnick5' },
+            // ],
+            selected_idx: 0,
+        };
+    },
+    computed: {
+        itemLimits() {
+            const itemLimit = parseInt(this.itemsPerPage, 10) || 7;
+            const halfLimit = (itemLimit - 1) / 2;
+            return {
+                all: itemLimit,
+                backward: Math.floor(halfLimit) || 1,
+                forward: Math.ceil(halfLimit) || 1,
+            };
+        },
+        filteredItems() {
+            const filterVal = (this.filter || '').toLowerCase();
+
+            return this.items.filter((item) => {
+                let s = false;
+                if (item.text.toLowerCase().indexOf(filterVal) === 0) {
+                    s = true;
+                }
+
+                (item.alias || []).forEach((alias) => {
+                    if (alias.toLowerCase().indexOf(filterVal) === 0) {
+                        s = true;
+                    }
+                });
+
+                return s;
+            }).sort(Misc.strCompare);
+        },
+        filteredAndLimitedItems() {
+            return this.filteredItems.filter((item, itemIdx, items) => {
+                let numItems = items.length - 1;
+                let idxFrom = this.selected_idx - this.itemLimits.backward;
+                let idxTo = this.selected_idx + this.itemLimits.forward;
+                let isInRange = false;
+
+                // Adjust the number of items before and after the selected item
+                // when we reach either end of the list.
+                // If we don't do this then this:
+                // * Item 1
+                // * item 2
+                // * Item 3
+                // * Item 4
+                // * Item 5 < selected
+                // Can turn into this:
+                // * Item 4
+                // * Item 5 < selected
+                if (idxFrom < 0) {
+                    idxTo += -idxFrom;
+                    idxFrom = 0;
+                } else if (idxTo > numItems) {
+                    idxFrom -= (idxTo - numItems);
+                    idxTo = numItems;
+                }
+
+                if (itemIdx >= idxFrom && itemIdx <= idxTo) {
+                    isInRange = true;
+                }
+
+                // Keep track of the pre-limited index for item selection
+                item.idx = itemIdx;
+
+                return isInRange;
+            });
+        },
+        selectedItem() {
+            let item = this.filteredItems[this.selected_idx];
+            return item || null;
+        },
+    },
+    watch: {
+        selected_idx() {
+            // nextTick() as the DOM hasn't updated yet
+            this.$nextTick(() => {
+                let el = this.$el.querySelector('.kiwi-autocomplete-item--selected');
+                if (!el) {
+                    return;
+                }
+
+                this.$el.scrollTop = el.offsetTop - (el.getBoundingClientRect().height * 2);
+            });
+
+            this.tempCurrentItem();
+        },
+        filter() {
+            const numItems = this.filteredAndLimitedItems.length - 1;
+            if (this.selected_idx > numItems) {
+                this.selected_idx = (numItems < 0) ? 0 : numItems;
+            }
+        },
+    },
+    mounted() {
+        this.tempCurrentItem();
+    },
+    methods: {
+        handleOnKeyDown(event) {
+            let handled = false;
+
+            let cancelKeyCodes = [
+                13, // return
+                32, // space
+                186, // semi-colon
+                188, // comma
+                190, // period
+            ];
+
+            if (cancelKeyCodes.indexOf(event.keyCode) > -1) {
+                // If no item is selected (ie. on an empty list), leave the return key
+                // to do its default action as if the autocomplete box isn't active.
+                if (!this.selectedItem) {
+                    this.cancel();
+                } else {
+                    this.selectCurrentItem();
+                    if (event.keyCode === 13) {
+                        event.preventDefault();
+                    }
+                    handled = true;
+                }
+            } else if (event.keyCode === 38 || (event.keyCode === 9 && event.shiftKey)) {
+                // Up or tab + shift
+                if (this.selected_idx > 0) {
+                    this.selected_idx--;
+                } else {
+                    // Wrap around to the end
+                    this.selected_idx = this.filteredItems.length - 1;
+                }
+
+                event.preventDefault();
+                handled = true;
+            } else if ((event.keyCode === 40 && !event.altKey) || event.keyCode === 9) {
+                // Down or tab
+                if (this.selected_idx < this.filteredItems.length - 1) {
+                    this.selected_idx++;
+                } else {
+                    // Wrap around to the start
+                    this.selected_idx = 0;
+                }
+
+                event.preventDefault();
+                handled = true;
+            } else if (event.keyCode === 16) {
+                // shift
+                handled = true;
+            } else if (event.keyCode === 33 || event.keyCode === 34) {
+                // pageUp || pageDown
+                const maxIdx = this.filteredItems.length - 1;
+                const limits = this.itemLimits;
+                let jump = limits.all;
+
+                // current position is within the first or last 3
+                // correctly jump the right amount
+                if (this.selected_idx <= limits.backward) {
+                    jump = (limits.all + limits.backward) - this.selected_idx;
+                } else if (this.selected_idx >= maxIdx - limits.forward) {
+                    // the center point maybe offset if an even number of items is shown
+                    jump = (limits.all + limits.forward) - (maxIdx - this.selected_idx);
+                }
+
+                // backwards or forward
+                if (event.keyCode === 33) {
+                    this.selected_idx -= jump;
+                } else {
+                    this.selected_idx += jump;
+                }
+
+                // ensure we are not out of bounds
+                if (this.selected_idx > maxIdx) {
+                    this.selected_idx = maxIdx;
+                } else if (this.selected_idx < 0) {
+                    this.selected_idx = 0;
+                }
+
+                handled = true;
+            }
+
+            return handled;
+        },
+        openQuery(nick) {
+            let buffer = this.$state.addBuffer(this.buffer.networkid, nick);
+            this.$state.setActiveBuffer(buffer.networkid, buffer.name);
+            this.cancel();
+        },
+        tempCurrentItem() {
+            let item = this.selectedItem;
+            if (!item) {
+                return;
+            }
+            this.$emit('temp', item.value || item.text, item);
+        },
+        selectCurrentItem() {
+            let item = this.selectedItem;
+            let value = '';
+
+            if (item) {
+                value = item.value || item.text;
+            }
+
+            this.$emit('selected', value, item);
+        },
+        cancel() {
+            this.$emit('cancel');
+        },
+    },
+};
+</script>
+
+<style>
+
+.kiwi-autocomplete {
+    box-sizing: border-box;
+    overflow-y: auto;
+    position: absolute;
+    bottom: 100%;
+    right: 0;
+    left: 0;
+    z-index: 1;
+}
+
+.kiwi-autocomplete-item {
+    padding: 5px 2em;
+}
+
+.kiwi-autocomplete-item-value {
+    font-weight: bold;
+}
+
+.kiwi-autocomplete-item-action {
+    float: right;
+    font-size: 0.9em;
+}
+
+</style>

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

@@ -0,0 +1,105 @@
+<template functional>
+    <div
+        :data-nick="$options.m.nick(props)"
+        :class="[$options.m.hasAvatar(props) ? 'kiwi-avatar--image' : '', data.staticClass]"
+        class="kiwi-avatar"
+    >
+        <span
+            :style="$options.m.avatarStyle(props)"
+            :class="{'kiwi-avatar--default': $options.m.isDefault(props)}"
+            class="kiwi-avatar-inner"
+        >
+            {{ $options.m.hasAvatar(props) ? '' : $options.m.firstNickLetter(props) }}
+        </span>
+    </div>
+</template>
+
+<script>
+
+'kiwi public';
+
+const methods = {
+    props: {},
+    avatar(props) {
+        // let props = this.props;
+        return (props.message && props.message.avatar) || (props.user && props.user.avatar);
+    },
+    nick(props) {
+        return ((props.message && props.message.nick) || (props.user && props.user.nick) || '').toLowerCase();
+    },
+    firstNickLetter(props) {
+        // let props = this.props;
+        return this.nick(props)[0].toUpperCase();
+    },
+    hasAvatar(props) {
+        // let props = this.props;
+        return !!(props.user.avatar && (props.user.avatar.small || props.user.avatar.large));
+    },
+    isDefault(props) {
+        return !this.colour(props) && !this.hasAvatar(props);
+    },
+    avatarStyle(props) {
+        // let props = this.props;
+        let style = {};
+        if (this.hasAvatar(props)) {
+            let url = (props.size === 'small' && this.avatar(props).small) ?
+                this.avatar(props).small :
+                // If large was requested but does not exist fallback to small
+                this.avatar(props).large || this.avatar(props).small;
+            style['background-image'] = `url("${url}")`;
+        } else {
+            style['background-color'] = `${this.colour(props)}`;
+        }
+
+        return style;
+    },
+    colour(props) {
+        // let props = this.props;
+        let user = (props.message && props.message.user) || props.user;
+        return user.getColour();
+    },
+};
+
+export default {
+    props: {
+        message: Object,
+        user: Object,
+        size: String,
+    },
+    m: methods,
+};
+
+</script>
+
+<style>
+
+.kiwi-avatar {
+    width: 100%;
+    height: 100%;
+}
+
+.kiwi-avatar-inner {
+    text-transform: uppercase;
+    cursor: pointer;
+    width: 100%;
+    height: 100%;
+    border: 2px solid;
+    border-radius: 50%;
+    font-weight: 600;
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    user-select: none;
+}
+
+.kiwi-avatar--image > .kiwi-avatar-inner {
+    border: none;
+
+    /* box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.5); */
+}
+
+</style>

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

@@ -0,0 +1,77 @@
+<template functional>
+    <span
+        v-if="$options.m.shouldShowStatus(props)"
+        :class="{
+            'kiwi-awaystatusindicator--away': !props.user || props.user.isAway(),
+            'kiwi-awaystatusindicator--self': $options.m.isUserSelf(props),
+            [data.staticClass]: !!data.staticClass,
+        }"
+        class="kiwi-awaystatusindicator"
+        @click="$options.m.toggleSelfAway(props)"
+    />
+</template>
+
+<script>
+'kiwi public';
+
+import getState from '@/libs/state';
+
+const methods = {
+    props: {},
+    toggleSelfAway(props) {
+        // let props = this.props;
+        if (props.isUserSelf) {
+            let val = props.user.isAway();
+            props.network.ircClient.raw('AWAY', val ? '' : 'Currently away');
+        }
+    },
+    isUserSelf(props) {
+        // let props = this.props;
+        if (props.toggle === false) {
+            return false;
+        }
+        let user = getState().getUser(props.network.id, props.network.nick);
+        return props.user === user;
+    },
+    shouldShowStatus(props) {
+        // let props = this.props;
+        if (!getState().setting('showAwayStatusIndicators')) {
+            return false;
+        }
+
+        if (props.network.state !== 'connected') {
+            return false;
+        }
+
+        let awayNotifyEnabled = props.network.ircClient.network.cap.isEnabled('away-notify');
+        return getState().setting('buffers.who_loop') || awayNotifyEnabled;
+    },
+};
+
+export default {
+    props: {
+        network: Object,
+        user: Object,
+        toggle: Boolean,
+    },
+    m: methods,
+};
+</script>
+
+<style>
+
+.kiwi-awaystatusindicator {
+    display: inline-block;
+    width: 7px;
+    height: 7px;
+    border-radius: 50%;
+    margin: 0 4px 0 0;
+    border: 1px solid #fff;
+    transition: background 0.2s;
+}
+
+.kiwi-awaystatusindicator--self {
+    cursor: pointer;
+}
+
+</style>

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

@@ -0,0 +1,121 @@
+<template>
+    <div class="kiwi-bufferkey kiwi-warning-block">
+        <form @submit.prevent="joinChannel">
+            <label>{{ $t('bufferkey_input') }}</label>
+            <input v-model="buffer.key" v-focus type="password">
+            <div class="kiwi-bufferkey-buttons">
+                <span class="kiwi-bufferkey-button" @click="joinChannel">
+                    <i class="fa fa-arrow-circle-o-right" aria-hidden="true" />
+                    {{ $t('bufferkey_rejoin', {channel: buffer.name}) }}
+                </span>
+            </div>
+        </form>
+    </div>
+</template>
+
+<script>
+'kiwi public';
+
+export default {
+    props: ['buffer', 'network'],
+    data: function data() {
+        return {
+        };
+    },
+    methods: {
+        joinChannel() {
+            this.buffer.flags.channel_badkey = false;
+            this.buffer.join();
+        },
+    },
+};
+</script>
+
+<style lang="less">
+.kiwi-bufferkey {
+    box-sizing: border-box;
+    text-align: center;
+    padding: 10% 0;
+    margin: 10px 0 0 0;
+    transition: background-color 0.3s;
+}
+
+.kiwi-bufferkey label {
+    width: 340px;
+    display: block;
+    margin: 0 auto 10px auto;
+    font-size: 1.2em;
+    text-align: left;
+}
+
+.kiwi-bufferkey input[type="password"] {
+    height: 40px;
+    padding: 0 10px;
+    border-radius: 4px;
+    color: #000;
+    border: none;
+    width: 320px;
+    font-size: 1.2em;
+    margin: 0 0 20px 0;
+}
+
+.kiwi-bufferkey-buttons {
+    width: 100%;
+    text-align: center;
+    font-size: 1.6em;
+}
+
+.kiwi-bufferkey-buttons span:hover {
+    text-decoration: underline;
+}
+
+.kiwi-bufferkey-button {
+    width: auto;
+    display: inline-block;
+    font-size: 0.8em;
+    cursor: pointer;
+    transition: all 0.3s;
+    border-radius: 4px;
+    padding: 5px 20px;
+    line-height: 40px;
+    border: 1px solid;
+
+    &:hover {
+        transition: all 0.2s;
+    }
+
+    i {
+        float: left;
+        font-size: 1.6em;
+        line-height: 40px;
+        margin-right: 0.4em;
+    }
+}
+
+@media screen and (max-width: 1024px) {
+    .kiwi-bufferkey-button {
+        clear: both;
+        margin: 0 5% 1em;
+        font-size: 1em;
+        display: block;
+        padding: 0.6em 0.8em 0.6em 0.4em;
+        width: 90%;
+        box-sizing: border-box;
+    }
+
+    .kiwi-bufferkey-button i {
+        display: none;
+    }
+}
+
+@media screen and (max-width: 769px) {
+    .kiwi-bufferkey {
+        font-size: 0.8em;
+    }
+
+    .kiwi-bufferkey-button {
+        font-size: 0.7em;
+    }
+}
+
+</style>

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

@@ -0,0 +1,97 @@
+<template>
+    <div class="kiwi-buffersettings">
+        <div class="kiwi-buffersettings-alerts">
+            <h3>{{ $t('settings_notify') }}</h3>
+            <hr>
+            <form class="u-form">
+                <label class="u-checkbox-wrapper">
+                    <input v-model="settingAlertOn" type="radio" name="alert_on" value="message">
+                    <span>{{ $t('settings_notify_all') }}</span>
+                </label>
+                <label class="u-checkbox-wrapper">
+                    <input v-model="settingAlertOn" type="radio" name="alert_on" value="highlight">
+                    <span>{{ $t('settings_notify_mentioned') }}</span>
+                </label>
+                <label class="u-checkbox-wrapper">
+                    <input v-model="settingAlertOn" type="radio" name="alert_on" value="never">
+                    <span>{{ $t('settings_notify_never') }}</span>
+                </label>
+            </form>
+
+            <h3>{{ $t('settings') }}</h3>
+            <hr>
+            <form class="u-form">
+                <label>
+                    <span>{{ $t('settings_notify_mute') }}</span>
+                    <input v-model="settingMuteSound" type="checkbox">
+                </label>
+                <label>
+                    <span>{{ $t('settings_show_message_counts') }}</span>
+                    <input v-model="settingHideMessageCount" type="checkbox">
+                </label>
+            </form>
+        </div>
+    </div>
+</template>
+
+<script>
+'kiwi public';
+
+export default {
+    components: {
+    },
+    props: ['buffer'],
+    data: function data() {
+        return {
+        };
+    },
+    computed: {
+        settingAlertOn: {
+            get: function getSettingAlertOn() {
+                return this.buffer.setting('alert_on');
+            },
+            set: function setSettingAlertOn(val) {
+                let network = this.buffer.getNetwork();
+                let netId = network.connection.bncnetid;
+                if (netId) {
+                    // If this buffer is on a BOUNCER account, update the setting there too
+                    // TODO: Move this to BouncerProvider snapshots
+                    network.ircClient.raw(
+                        `BOUNCER changebuffer ${netId} ${this.buffer.name} notify=${val}`
+                    );
+                }
+
+                return this.buffer.setting('alert_on', val);
+            },
+        },
+        settingMuteSound: {
+            get: function getSettingAlertOn() {
+                return this.buffer.setting('mute_sound');
+            },
+            set: function setSettingAlertOn(val) {
+                return this.buffer.setting('mute_sound', val);
+            },
+        },
+        settingHideMessageCount: {
+            get: function getsettingHideMessageCount() {
+                return this.buffer.setting('hide_message_counts');
+            },
+            set: function setsettingHideMessageCount(val) {
+                return this.buffer.setting('hide_message_counts', val);
+            },
+        },
+    },
+};
+</script>
+
+<style>
+
+.kiwi-buffersettings {
+    box-sizing: border-box;
+}
+
+.kiwi-buffersettings-alerts {
+    margin-bottom: 1em;
+}
+
+</style>