serverless-ircd 0.6.0 → 0.7.0

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

@@ -0,0 +1,271 @@
+<template>
+    <div :class="{ connecting: shouldShowLoading }" class="kiwi-notconnected kiwi-warning-block">
+        <template v-if="!shouldShowLoading">
+            <div class="kiwi-notconnected-caption">
+                <span>{{ $t('not_connected') }}</span>
+                <i v-if="!shouldShowLoading" class="fa fa-frown-o" aria-hidden="true" />
+            </div>
+            <div class="kiwi-notconnected-buttons">
+                <template v-if="isChannel()">
+                    <span
+                        :disabled="!readyToStart"
+                        class="kiwi-notconnected-button"
+                        @click="reconnect"
+                    >
+                        <i class="fa fa-arrow-circle-o-right" aria-hidden="true" />
+                        {{ $t('reconnect_channel', {channel: buffer.name}) }}
+                    </span>
+                </template>
+                <template v-else-if="isServer()">
+                    <span
+                        :disabled="!readyToStart"
+                        class="kiwi-notconnected-button"
+                        @click="reconnect"
+                    >
+                        <i class="fa fa-arrow-circle-o-right" aria-hidden="true" />
+                        {{ $t('reconnect_network', {network: buffer.getNetwork().name}) }}
+                    </span>
+                </template>
+                <template v-else-if="isQuery()">
+                    <span
+                        :disabled="!readyToStart"
+                        class="kiwi-notconnected-button"
+                        @click="reconnect"
+                    >
+                        <i class="fa fa-arrow-circle-o-right" aria-hidden="true" />
+                        {{ $t('reconnect_query', {user: buffer.name}) }}
+                    </span>
+                </template>
+
+                <a
+                    v-if="!restrictedServer"
+                    class="kiwi-notconnected-button kiwi-notconnected-button-settings"
+                    @click="showNetworkSettings"
+                >
+                    <i class="fa fa-cogs" aria-hidden="true" />
+                </a>
+            </div>
+        </template>
+        <div v-else class="kiwi-notconnected-caption">
+            {{ $t('connecting') }}
+            <i
+                class="fa fa-refresh fa-spin kiwi-notconnected-bigicon"
+                aria-hidden="true"
+            />
+        </div>
+
+        <captcha
+            class="kiwi-notconnected-captcha"
+            :network="network"
+        />
+    </div>
+</template>
+
+<script>
+
+'kiwi public';
+
+import Captcha from '@/components/Captcha';
+
+export default {
+    components: {
+        Captcha,
+    },
+    props: ['buffer', 'network'],
+    data() {
+        return {
+            forceLoader: false,
+        };
+    },
+    computed: {
+        netStatus() {
+            return this.buffer.getNetwork().state;
+        },
+        shouldShowLoading() {
+            this.maybeForceLoader();
+
+            if (this.network.state !== 'disconnected' || this.forceLoader) {
+                return true;
+            }
+
+            return false;
+        },
+        restrictedServer() {
+            return this.$state.setting('restricted');
+        },
+        readyToStart() {
+            return true;
+        },
+    },
+    methods: {
+        maybeForceLoader() {
+            // The connection can fail almost imediately making it look like
+            // the connection attempt didn't try anything. Make the connection
+            // loder stay visible for at elast X seconds to indicate it's actually
+            // tried something.
+            let minimumLoaderViewtime = 2000;
+            let networkState = this.network.state;
+
+            if (networkState !== 'disconnected' && !this.forceLoader) {
+                this.forceLoader = true;
+                setTimeout(() => {
+                    this.forceLoader = false;
+                }, minimumLoaderViewtime);
+            }
+        },
+        isChannel() {
+            return this.buffer.isChannel();
+        },
+        isServer() {
+            return this.buffer.isServer();
+        },
+        isQuery() {
+            return this.buffer.isQuery();
+        },
+        reconnect() {
+            if (!this.readyToStart) {
+                return;
+            }
+            if (this.buffer.isChannel()) {
+                this.buffer.enabled = true;
+            }
+            this.buffer.getNetwork().ircClient.connect();
+        },
+        showNetworkSettings() {
+            let network = this.buffer.getNetwork();
+            network.showServerBuffer('settings');
+        },
+    },
+};
+</script>
+
+<style lang="less">
+.kiwi-notconnected {
+    box-sizing: border-box;
+    padding: 5px 20px;
+    transition: background-color 0.3s;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.kiwi-notconnected.connecting {
+    text-align: center;
+}
+
+.kiwi-notconnected-caption {
+    display: inline-block;
+    width: auto;
+    cursor: default;
+    line-height: 50px;
+    font-size: 1.2em;
+    font-weight: 900;
+}
+
+.kiwi-notconnected-caption i {
+    font-weight: normal;
+    font-size: 1.5em;
+    position: relative;
+    right: -3px;
+    top: 3px;
+}
+
+.kiwi-notconnected-captcha {
+    display: inline-block;
+    margin-left: 3em;
+}
+
+.kiwi-notconnected-buttons {
+    float: right;
+    width: auto;
+    text-align: center;
+}
+
+.kiwi-notconnected-button {
+    width: auto;
+    display: inline-block;
+    padding: 5px 10px;
+    border-radius: 7px;
+    cursor: pointer;
+    border: 2px solid;
+    margin: 6px 0 0 10px;
+    height: 37px;
+    overflow: hidden;
+    box-sizing: border-box;
+    transition: opacity 0.3s, color 0.3s, background-color 0.3s;
+}
+
+.kiwi-notconnected-button:hover[disabled] {
+    cursor: not-allowed;
+    opacity: 0.65;
+}
+
+.kiwi-notconnected-button:hover {
+    opacity: 1;
+    transition: all 0.2s;
+}
+
+.kiwi-notconnected-button i {
+    float: left;
+    font-size: 1.6em;
+    line-height: 24px;
+    margin-right: 5px;
+}
+
+.kiwi-notconnected-button-settings {
+    opacity: 0.8;
+    border: none;
+}
+
+.kiwi-notconnected-button-settings i {
+    margin-right: 0;
+}
+
+@media screen and (max-width: 1024px) {
+    .kiwi-notconnected-caption {
+        font-size: 1em;
+        width: 100%;
+        text-align: center;
+    }
+
+    .kiwi-notconnected-buttons {
+        width: 100%;
+    }
+
+    .kiwi-notconnected-button {
+        margin: 0;
+        font-size: 1em;
+        padding: 0 10px;
+        line-height: 33px;
+        width: auto;
+        box-sizing: border-box;
+    }
+
+    .kiwi-notconnected-button i {
+        line-height: 36px;
+    }
+}
+
+@media screen and (max-width: 769px) {
+    .kiwi-notconnected {
+        font-size: 0.8em;
+        padding: 0 10px;
+    }
+
+    .kiwi-notconnected-caption {
+        width: 100%;
+        text-align: center;
+        font-size: 1.3em;
+    }
+
+    .kiwi-notconnected-buttons {
+        width: 100%;
+    }
+
+    .kiwi-notconnected-button {
+        font-size: 1.2em;
+        display: inline-block;
+    }
+}
+
+</style>

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

@@ -0,0 +1,283 @@
+<template>
+    <div class="kiwi-selfuser kiwi-theme-bg">
+        <div v-if="!self_user_settings_open" class="kiwi-selfuser-mask">
+            <span class="kiwi-selfuser-nick">
+                <away-status-indicator :network="network" :user="network.currentUser()" />
+                {{ network.nick }}
+                <i class="fa fa-times" aria-hidden="true" @click="closeSelfUser()" />
+                <i class="fa fa-pencil" aria-hidden="true" @click="openSelfActions()" />
+                <i
+                    class="fa fa-user"
+                    aria-hidden="true"
+                    @click="openProfile()"
+                />
+            </span>
+            <span class="kiwi-selfuser-host">
+                {{ netUser.username }}@{{ netUser.host }} ( {{ modeString }} )
+            </span>
+            <div v-if="networkSupportsAway()" class="u-form kiwi-away-checkbox-form">
+                <label class="kiwi-selfuser-away-label">
+                    <span>{{ $t('away') }}</span>
+                    <input v-model="awayStatus" type="checkbox">
+                </label>
+            </div>
+        </div>
+        <div v-else class="kiwi-selfuser-actions">
+            <div v-if="error_message" class="kiwi-selfuser-error-message">{{ error_message }}</div>
+            <input-prompt
+                v-focus
+                :label="$t('enter_new_nick')"
+                :block="true"
+                @submit="onNewNickSubmit"
+                @cancel="closeNickChange"
+            />
+        </div>
+    </div>
+</template>
+
+<script>
+
+'kiwi public';
+
+import * as TextFormatting from '@/helpers/TextFormatting';
+import AwayStatusIndicator from './AwayStatusIndicator';
+
+export default {
+    components: {
+        AwayStatusIndicator,
+    },
+    props: {
+        network: Object,
+    },
+    data() {
+        return {
+            new_nick: '',
+            error_message: '',
+            event_listeners: [],
+            self_user_settings_open: false,
+        };
+    },
+    computed: {
+        modeString() {
+            let str = '';
+            this.network.ircClient.user.modes.forEach((mode) => {
+                str += mode;
+            });
+
+            // Only show the + if there are modes to show
+            if (str) {
+                str = '+' + str;
+            }
+
+            return str;
+        },
+        netUser() {
+            return this.network.ircClient.user;
+        },
+        awayStatus: {
+            get() {
+                return this.network.currentUser().away;
+            },
+            set(val) {
+                this.network.ircClient.raw('AWAY', val ? 'Currently away' : '');
+            },
+        },
+    },
+    methods: {
+        openSelfActions() {
+            this.self_user_settings_open = true;
+            this.error_message = '';
+        },
+        openProfile() {
+            this.$state.$emit('userbox.show', this.network.currentUser());
+        },
+        closeSelfUser() {
+            this.$emit('close');
+        },
+        onNewNickSubmit(newVal, done) {
+            if (this.event_listeners.length) {
+                // nick change already in progress
+                return;
+            }
+            this.new_nick = newVal;
+            this.changeNick(done);
+        },
+        changeNick(done) {
+            let nick = this.new_nick.trim();
+            if (nick.length === 0) {
+                this.error_message = TextFormatting.t('error_empty_nick');
+                done();
+                return;
+            }
+            if (nick.match(/(^[0-9])|(\s)/)) {
+                this.error_message = TextFormatting.t('error_no_number');
+                done();
+                return;
+            }
+            if (nick === this.network.currentUser().nick) {
+                this.error_message = TextFormatting.t('error_nick_in_use', { nick });
+                done();
+                return;
+            }
+            this.error_message = '';
+
+            this.listenForNickEvents(done);
+            this.network.ircClient.changeNick(nick);
+        },
+        listenForNickEvents(done) {
+            this.event_listeners.push(
+                this.listen(this.network.ircClient, 'nick', (event) => {
+                    if (event.new_nick !== this.network.currentUser().nick) {
+                        return;
+                    }
+                    this.closeNickChange();
+                })
+            );
+            this.event_listeners.push(
+                this.listen(this.network.ircClient, 'nick in use', (event) => {
+                    this.error_message = TextFormatting.t('error_nick_in_use', { nick: event.nick });
+                    this.removeNickEventListeners();
+                    done();
+                })
+            );
+            this.event_listeners.push(
+                this.listen(this.network.ircClient, 'nick invalid', (event) => {
+                    this.error_message = TextFormatting.t('error_nick_invalid', { nick: event.nick });
+                    this.removeNickEventListeners();
+                    done();
+                })
+            );
+
+            // Maybe the nickchange will result in an event we are not listening for above
+            const timeout = this.setTimeout(() => {
+                this.error_message = TextFormatting.t('error_unexpected');
+                this.removeNickEventListeners();
+            }, 4000);
+            this.event_listeners.push(() => {
+                this.clearTimeout(timeout);
+            });
+        },
+        removeNickEventListeners() {
+            while (this.event_listeners.length) {
+                this.event_listeners.shift()();
+            }
+        },
+        closeNickChange() {
+            this.removeNickEventListeners();
+            this.self_user_settings_open = false;
+        },
+        networkSupportsAway() {
+            return this.network.ircClient.network.cap.isEnabled('away-notify');
+        },
+        checkUserAway() {
+            return !!this.network.currentUser().away;
+        },
+        getUserFromString(name) {
+            return this.$state.getUser(this.network.id, name);
+        },
+    },
+};
+</script>
+
+<style>
+.kiwi-selfuser-nick,
+.kiwi-selfuser-host,
+.kiwi-selfuser-status {
+    display: inline-block;
+    padding: 0 10px;
+    cursor: default;
+    width: 100%;
+    box-sizing: border-box;
+}
+
+.kiwi-selfuser-nick {
+    min-width: 85px;
+    font-weight: bold;
+    padding: 5px 10px 0 10px;
+}
+
+.kiwi-selfuser-modes {
+    font-weight: normal;
+    opacity: 0.8;
+    font-size: 0.8em;
+}
+
+.kiwi-selfuser-host {
+    font-style: italic;
+    opacity: 0.8;
+    padding-left: 26px;
+    font-size: 0.8em;
+    word-break: break-all;
+}
+
+.kiwi-controlinput-selfuser .kiwi-close-icon {
+    line-height: 36px;
+    border-radius: 0;
+}
+
+/* Style the icons in the SelfUser */
+
+.kiwi-selfuser-nick i {
+    font-weight: 400;
+    float: right;
+    opacity: 0.6;
+    cursor: pointer;
+    margin-top: 3px;
+    transition: all 0.3s;
+    margin-right: 15px;
+}
+
+.kiwi-selfuser-nick i:hover {
+    opacity: 1;
+    transition: all 0.2s;
+}
+
+.kiwi-selfuser-nick i:first-of-type {
+    margin-right: 0;
+}
+
+.u-form.kiwi-away-checkbox-form {
+    padding: 0 0 5px 24px;
+}
+
+.u-form .kiwi-selfuser-away-label {
+    margin: 0 0 2px 0;
+}
+
+.u-form .kiwi-selfuser-away-label span {
+    margin-right: 5px;
+}
+
+.kiwi-selfuser-error-message {
+    width: 100%;
+    display: block;
+    padding: 0.5em 10px;
+    box-sizing: border-box;
+    word-break: break-word;
+    margin: 5px 0 5px 0;
+    text-align: center;
+    border-radius: 6px;
+}
+
+.kiwi-selfuser-actions {
+    padding: 5px 10px;
+    margin-bottom: 10px;
+}
+
+.kiwi-selfuser-actions form {
+    position: relative;
+}
+
+.kiwi-selfuser-actions form .u-input-prompt-label {
+    display: block;
+    width: 100%;
+}
+
+.kiwi-selfuser-actions .u-input-button-container {
+    position: absolute;
+    top: 2px;
+    right: 2px;
+    z-index: 1;
+}
+
+</style>

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

@@ -0,0 +1,162 @@
+<template>
+    <div
+        :class="{'kiwi-serverselector--custom': presetServer === 'custom'}"
+        class="kiwi-serverselector"
+    >
+        <div v-if="usePreset && presetNetworks.length > 0" class="kiwi-serverselector-presets">
+            <label>
+                <span>{{ $t('server') }}</span>
+                <select v-model="presetServer">
+                    <option value="custom">Custom Server</option>
+                    <option disabled>-----------------</option>
+                    <option
+                        v-for="s in presetNetworks"
+                        :key="s.name"
+                        :value="toUri(s)"
+                    >{{ s.name }}</option>
+                </select>
+            </label>
+        </div>
+
+        <template v-if="showCustom || presetNetworks.length === 0 || !usePreset">
+            <input-text
+                v-model="connection.server"
+                v-focus
+                :label="$t('server')"
+                class="kiwi-networksettings-connection-address"
+            />
+
+            <input-text
+                v-model="connection.port"
+                :label="$t('settings_port')"
+                type="number"
+                class="kiwi-networksettings-connection-port"
+            >
+                <span
+                    :class="{ 'kiwi-customserver-tls--enabled' : connection.tls }"
+                    class="fa-stack fa-lg kiwi-customserver-tls"
+                    @click="toggleTls"
+                >
+                    <i
+                        v-if="connection.tls"
+                        class="fa fa-lock fa-stack-1x kiwi-customserver-tls-lock"
+                    />
+                    <i
+                        v-else
+                        class="fa fa-unlock fa-stack-1x kiwi-customserver-tls-minus"
+                    />
+                </span>
+            </input-text>
+        </template>
+    </div>
+</template>
+
+<script>
+
+'kiwi public';
+
+import _ from 'lodash';
+import * as Misc from '@/helpers/Misc';
+
+export default {
+    props: {
+        usePreset: {
+            type: Boolean,
+            default: true,
+        },
+        networkList: {
+            type: Array,
+            default: () => [],
+        },
+        connection: {
+            type: Object,
+            default: () => {},
+        },
+    },
+    data: function data() {
+        return {
+            name: '',
+            presetNetworks: [],
+            showCustom: true,
+            willEmit: false,
+        };
+    },
+    computed: {
+        presetServer: {
+            set(newVal) {
+                if (newVal === 'custom') {
+                    this.name = '';
+                    this.connection.server = '';
+                    this.connection.port = 6697;
+                    this.connection.tls = true;
+
+                    this.showCustom = true;
+                } else {
+                    let addr = Misc.parsePresetServer(newVal);
+                    this.name = addr.name;
+                    this.connection.server = addr.server;
+                    this.connection.port = addr.port;
+                    this.connection.tls = addr.tls;
+
+                    this.showCustom = false;
+                }
+            },
+            get() {
+                return this.showCustom ?
+                    'custom' :
+                    this.toUri(this.connection);
+            },
+        },
+    },
+    created() {
+        if (this.networkList) {
+            this.importUris(this.networkList);
+        }
+
+        // If the given network is in the preset server list, select it
+        let con = this.connection;
+        if (_.find(this.presetNetworks, (s) => {
+            let match = s.server === con.server && s.port === con.port && s.tls === con.tls;
+            return match;
+        })) {
+            this.showCustom = false;
+        }
+    },
+    methods: {
+        toUri(s) {
+            return `${s.server}:${s.tls ? '+' : ''}${s.port}`;
+        },
+        toggleTls() {
+            this.connection.tls = !this.connection.tls;
+
+            // Switching the port only if were currently using the most common TLS/plain text ports
+            if (this.connection.tls && this.connection.port === 6667) {
+                this.connection.port = 6697;
+            } else if (!this.connection.tls && this.connection.port === 6697) {
+                this.connection.port = 6667;
+            }
+        },
+        importUris(serverList) {
+            // [ 'freenode|irc.freenode.net:+6697', 'irc.snoonet.org:6667' ]
+            let servers = serverList.map((s) => Misc.parsePresetServer(s));
+            this.$set(this, 'presetNetworks', servers);
+        },
+    },
+};
+</script>
+
+<style>
+.kiwi-serverselector-presets {
+    margin-bottom: 1em;
+}
+
+.kiwi-serverselector-presets label span {
+    margin-left: 0;
+    transition: opacity 0.2s, width 0.2s;
+}
+
+.kiwi-serverselector--custom .kiwi-serverselector-presets label span {
+    max-width: 0;
+    opacity: 0;
+}
+</style>