serverless-ircd 0.6.0 → 0.7.0

package/apps/web/upstream/src/components/startups/ZncLogin.vue

@@ -0,0 +1,229 @@
+<template>
+    <startup-layout ref="layout" class="kiwi-welcome-znc">
+        <template v-if="!network || network.state === 'disconnected'" #connection>
+            <form class="u-form u-form--big kiwi-welcome-znc-form" @submit.prevent="formSubmit">
+                <h2 v-html="greetingText" />
+
+                <div
+                    v-if="network && (network.last_error || network.state_error)"
+                    class="kiwi-welcome-znc-error"
+                >
+                    We couldn't connect to the server :(
+                    <span>
+                        {{ network.last_error || readableStateError(network.state_error) }}
+                    </span>
+                </div>
+
+                <input-text
+                    v-if="showUser"
+                    v-model="username"
+                    :label="$t('username')"
+                    class="kiwi-welcome-znc-nick"
+                />
+                <input-text
+                    v-if="showPass"
+                    v-model="password"
+                    :label="$t('password')"
+                    class="kiwi-welcome-znc-password"
+                    type="password"
+                />
+                <input-text
+                    v-if="showNetwork"
+                    v-model="znc_network"
+                    :label="$t('network')"
+                    class="kiwi-welcome-znc-channel"
+                />
+                <button
+                    :disabled="!readyToStart"
+                    class="u-button u-button-primary u-submit kiwi-welcome-znc-start"
+                    type="submit"
+                    v-html="buttonText"
+                />
+            </form>
+        </template>
+        <template v-else-if="network.state !== 'connected'" #connection>
+            <i class="fa fa-spin fa-spinner" style="font-size: 2em; margin-top: 1em;" />
+        </template>
+    </startup-layout>
+</template>
+
+<script>
+'kiwi public';
+
+import _ from 'lodash';
+import * as Misc from '@/helpers/Misc';
+import StartupLayout from './CommonLayout';
+
+export default {
+    components: {
+        StartupLayout,
+    },
+    data: function data() {
+        return {
+            network: null,
+            network_extras: null,
+            username: '',
+            password: '',
+            znc_network: '',
+            showNetwork: true,
+            showPass: true,
+            showUser: true,
+            show_password_box: false,
+        };
+    },
+    computed: {
+        greetingText: function greetingText() {
+            let greeting = this.$state.settings.startupOptions.greetingText;
+            return typeof greeting === 'string' ?
+                greeting :
+                this.$t('start_greeting');
+        },
+        buttonText: function buttonText() {
+            let greeting = this.$state.settings.startupOptions.buttonText;
+            return typeof greeting === 'string' ?
+                greeting :
+                this.$t('start_button');
+        },
+        readyToStart: function readyToStart() {
+            return this.username && (this.password || this.showPass === false);
+        },
+        infoContent: function infoContent() {
+            return this.$state.settings.startupOptions.infoContent || '';
+        },
+    },
+    created: function created() {
+        let options = this.$state.settings.startupOptions;
+
+        this.username = options.username || '';
+        this.password = options.password || '';
+        this.znc_network = window.location.hash.substr(1) || options.network || '';
+        this.showNetwork = typeof options.showNetwork === 'boolean' ?
+            options.showNetwork :
+            true;
+        this.showUser = typeof options.showUser === 'boolean' ?
+            options.showUser :
+            true;
+        this.showPass = typeof options.showPass === 'boolean' ?
+            options.showPass :
+            true;
+
+        if (options.autoConnect && this.username && this.password) {
+            this.startUp();
+        }
+    },
+    methods: {
+        readableStateError(err) {
+            return Misc.networkErrorMessage(err);
+        },
+        formSubmit: function formSubmit() {
+            if (this.readyToStart) {
+                this.startUp();
+            }
+        },
+        addNetwork: function addNetwork(netName) {
+            let options = this.$state.settings.startupOptions;
+            let password = this.username;
+            if (netName) {
+                password += '/' + netName;
+            }
+            password += ':' + this.password;
+
+            let net = this.$state.addNetwork(netName, 'ZNC', {
+                server: _.trim(options.server),
+                port: options.port,
+                tls: options.tls,
+                password: password,
+            });
+            return net;
+        },
+        startUp: function startUp() {
+            if (this.network) {
+                this.$state.removeNetwork(this.network.id);
+            }
+
+            let netList = _.compact(this.znc_network.split(','));
+            if (netList.length === 0) {
+                netList.push('');
+            }
+
+            // add our first network and make sure we can connect
+            // before trying to add other networks.
+            let net = this.network = this.addNetwork(netList.shift());
+            this.network_extras = netList;
+
+            let onRegistered = () => {
+                this.$state.setActiveBuffer(net.id, net.serverBuffer().name);
+                net.ircClient.off('registered', onRegistered);
+                net.ircClient.off('close', onClosed);
+                this.network_extras.forEach((netName, idx) => {
+                    let extraNet = this.addNetwork(_.trim(netName));
+                    extraNet.ircClient.connect();
+                });
+                this.$refs.layout.close();
+            };
+            let onClosed = () => {
+                net.ircClient.off('registered', onRegistered);
+                net.ircClient.off('close', onClosed);
+            };
+            net.ircClient.once('registered', onRegistered);
+            net.ircClient.once('close', onClosed);
+            net.ircClient.connect();
+        },
+    },
+};
+</script>
+
+<style>
+
+.kiwi-welcome-znc h2 {
+    font-size: 1.7em;
+    text-align: center;
+    padding: 0;
+    margin: 0.5em auto 1.5em auto;
+}
+
+.kiwi-welcome-znc-error {
+    text-align: center;
+    margin: 1em 0;
+    padding: 0.3em;
+}
+
+.kiwi-welcome-znc-error span {
+    display: block;
+    font-style: italic;
+}
+
+.kiwi-welcome-znc-form {
+    width: 300px;
+    background-color: #fff;
+    border-radius: 0.5em;
+    padding: 1em;
+    border: 1px solid #ececec;
+}
+
+.kiwi-welcome-znc .u-input-text,
+.kiwi-welcome-znc .kiwi-welcome-znc-have-password input {
+    margin-bottom: 1.5em;
+}
+
+.kiwi-welcome-znc-have-password input:checked {
+    margin-bottom: 0;
+}
+
+.kiwi-welcome-znc-start {
+    font-size: 1.1em;
+    cursor: pointer;
+    width: 100%;
+    margin: 1em auto 0.5em auto;
+    font-weight: normal;
+    border: none;
+    height: 36px;
+    line-height: 36px;
+    padding: 0;
+}
+
+.kiwi-welcome-znc-start[disabled] {
+    cursor: not-allowed;
+}
+
+</style>

package/apps/web/upstream/src/components/utils/InputConfirm.vue

@@ -0,0 +1,68 @@
+<template>
+    <div class="u-input-confirm">
+        <div v-if="state==='pre'" @click="prompt"><slot /></div>
+
+        <template v-if="state==='prompt'">
+            <span class="u-input-confirm-label">{{ label }}</span>
+            <a :class="['u-button-'+connoteCss.yes]" class="u-button" @click="complete(true)">
+                {{ $t('yes') }}
+            </a>
+            <a :class="['u-button-'+connoteCss.no]" class="u-button" @click="complete(false)">
+                {{ $t('no') }}
+            </a>
+        </template>
+    </div>
+</template>
+
+<script>
+'kiwi public';
+
+let Vue = require('vue');
+
+export default Vue.component('input-confirm', {
+    props: ['label', 'flipConnotation'],
+    data: function data() {
+        return {
+            state: 'pre',
+        };
+    },
+    computed: {
+        connoteCss() {
+            return {
+                yes: this.flipConnotation ? 'warning' : 'primary',
+                no: this.flipConnotation ? 'primary' : 'warning',
+            };
+        },
+    },
+    created() {
+        if (!this.$slots.default) {
+            this.state = 'prompt';
+        }
+    },
+    methods: {
+        prompt() {
+            this.state = 'prompt';
+        },
+        complete(val) {
+            this.$emit('submit', val);
+            this.$emit(val ? 'ok' : 'cancel');
+            this.state = 'pre';
+        },
+    },
+});
+</script>
+
+<style>
+.u-input-confirm {
+    display: inline-block;
+    padding: 10px;
+}
+
+.u-input-confirm > a {
+    margin-right: 10px;
+}
+
+.u-input-confirm > a:last-of-type {
+    margin-right: 0;
+}
+</style>

package/apps/web/upstream/src/components/utils/InputPrompt.vue

@@ -0,0 +1,118 @@
+<template>
+    <div :style="{display: block ? 'block' : 'inline-block'}" class="u-input-prompt">
+        <div v-if="state==='pre'" @click="prompt"><slot /></div>
+
+        <form v-if="state==='prompt'" class="u-form" @submit.prevent="complete">
+            <span class="u-input-prompt-label">{{ label }}</span>
+            <div class="u-input-prompt-inputs">
+                <input v-model="value" class="u-input" @keyup.esc="cancel">
+                <a class="u-button u-button-primary" @click="complete">
+                    <span :class="{'u-input-prompt-hidden': waiting}">{{ $t('ok') }}</span>
+                    <div v-if="waiting" class="u-input-prompt-waiting">
+                        <i class="fa fa-spin fa-spinner" aria-hidden="true" />
+                    </div>
+                </a>
+                <a
+                    v-if="!hideCancel"
+                    class="u-button u-button-warning"
+                    @click="cancel"
+                >{{ $t('cancel') }}</a>
+            </div>
+        </form>
+    </div>
+</template>
+
+<script>
+'kiwi public';
+
+let Vue = require('vue');
+
+export default Vue.component('input-prompt', {
+    props: ['label', 'hideCancel', 'block'],
+    data() {
+        return {
+            value: '',
+            state: 'pre',
+            waiting: false,
+        };
+    },
+    computed: {
+        hasChildren() {
+            return !!this.$slots.default;
+        },
+    },
+    created() {
+        if (!this.hasChildren) {
+            this.prompt();
+        }
+    },
+    methods: {
+        prompt() {
+            this.state = 'prompt';
+            this.$nextTick(() => {
+                this.$el.querySelector('input').focus();
+            });
+        },
+        complete() {
+            if (this.waiting) {
+                return;
+            }
+
+            if (this.hasChildren) {
+                this.state = 'pre';
+            } else {
+                this.waiting = true;
+            }
+
+            const doneWaiting = () => {
+                this.waiting = false;
+            };
+
+            this.$emit('submit', this.value, doneWaiting);
+        },
+        cancel() {
+            if (this.hasChildren) {
+                this.state = 'pre';
+            }
+
+            this.$emit('cancel');
+        },
+    },
+});
+</script>
+
+<style>
+.u-input-prompt-inputs {
+    display: flex;
+}
+
+.u-input-prompt-inputs > input {
+    flex: 1;
+    margin-right: 1em;
+}
+
+.u-input-prompt-inputs > a {
+    margin-right: 0.5em;
+}
+
+.u-input-prompt-inputs > .u-button-primary {
+    position: relative;
+}
+
+.u-input-prompt-hidden {
+    visibility: hidden;
+}
+
+.u-input-prompt-waiting {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    font-size: 150%;
+    font-weight: 800;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+}
+</style>

package/apps/web/upstream/src/components/utils/InputText.vue

@@ -0,0 +1,172 @@
+<template>
+    <div class="u-input-text">
+        <label v-if="label" :for="inputId">{{ label }}</label>
+
+        <div class="u-input-text-inputs" style="display: flex;">
+            <template v-if="type==='password'">
+                <input
+                    :id="inputId"
+                    v-model="currentValue"
+                    :type="plainTextEnabled && !isEdgeBrowser() ? 'text' : 'password'"
+                    :class="{'u-form-input-plaintext' : !isEdgeBrowser() && showPlainText}"
+                    autocomplete="off"
+                    autocorrect="off"
+                    autocapitalize="off"
+                    spellcheck="false"
+                    class="u-input"
+                    @keypress="$emit('keypress', $event)"
+                >
+
+                <i
+                    v-if="showPlainText && !isEdgeBrowser()"
+                    :class="{'u-input-text-plaintext--active': plainTextEnabled}"
+                    class="u-input-text-plaintext fa fa-eye"
+                    aria-hidden="true"
+                    @click="plainTextEnabled = !plainTextEnabled"
+                />
+            </template>
+
+            <input
+                v-else-if="type==='number'"
+                :id="inputId"
+                v-model="currentValue"
+                type="number"
+                class="u-input"
+                @keypress="$emit('keypress', $event)"
+            >
+            <textarea
+                v-else-if="type==='textarea'"
+                :id="inputId"
+                v-model="currentValue"
+                class="u-input"
+                @keypress="$emit('keypress', $event)"
+            />
+            <input
+                v-else
+                :id="inputId"
+                v-model="currentValue"
+                autocomplete="off"
+                autocorrect="off"
+                autocapitalize="off"
+                spellcheck="false"
+                class="u-input"
+                @keypress="$emit('keypress', $event)"
+            >
+
+            <div v-if="$slots.default" class="u-input-text-c">
+                <slot />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+'kiwi public';
+
+let Vue = require('vue');
+
+export default Vue.component('input-text', {
+    props: ['value', 'label', 'type', 'showPlainText'],
+    data: function data() {
+        return {
+            plainTextEnabled: false,
+            inputIdCache: '',
+        };
+    },
+    computed: {
+        inputId() {
+            if (!this.inputIdCache) {
+                // eslint-disable-next-line
+                this.inputIdCache = 'inp_' + Math.floor(Math.random() * 1e17).toString(36);
+            }
+
+            return this.inputIdCache;
+        },
+        currentValue: {
+            get: function getCurrentValue() {
+                return this.value;
+            },
+            set: function setCurrentValue(newVal) {
+                this.$emit('input', newVal);
+            },
+        },
+    },
+    methods: {
+        updateValue: function updateValue(newValue) {
+            this.$emit('input', newValue);
+        },
+        isEdgeBrowser() {
+            return navigator.appVersion.indexOf('Edge') > -1;
+        },
+    },
+});
+</script>
+
+<style>
+
+.u-input-text {
+    position: relative;
+    margin: 0 0 20px 0;
+    box-sizing: border-box;
+}
+
+.u-input-text-inputs {
+    display: flex;
+    position: relative;
+}
+
+.u-input-text input,
+.u-input-text textarea {
+    box-sizing: border-box;
+    flex: 1;
+}
+
+.u-input-text input:focus {
+    outline: none;
+}
+
+.u-input-text-c {
+    position: relative;
+}
+
+/* Remove spinners from input numbers */
+.u-input-text input[type='number'] {
+    /* For Firefox */
+    -moz-appearance: textfield;
+}
+
+.u-input-text input[type='number']::-webkit-inner-spin-button,
+.u-input-text input[type='number']::-webkit-outer-spin-button {
+    /* For webkit browsers like Safari and Chrome */
+    -webkit-appearance: none;
+    margin: 0;
+}
+
+input[type='text'].u-form-input-plaintext,
+input[type='password'].u-form-input-plaintext {
+    padding-right: 40px;
+}
+
+.u-input-text-plaintext {
+    line-height: normal;
+    width: 30px;
+    text-align: center;
+    cursor: pointer;
+    opacity: 0.5;
+    transition: opacity 0.2s;
+    position: absolute;
+    right: 7px;
+    top: 9px;
+}
+
+.u-form--big .u-input-text-plaintext {
+    line-height: 40px;
+    top: 6px;
+}
+
+.u-input-text-plaintext--active,
+.u-input-text-plaintext:hover {
+    opacity: 1;
+}
+
+</style>