liberama/client/components/Reader/SettingsPage/ProfilesTab/ProfilesTab.vue

<template>
    <div class="fit sets-tab-panel">
        <div class="sets-part-header">
            Управление синхронизацией данных
        </div>

        <div class="sets-item row">
            <div class="sets-label label"></div>
            <q-checkbox v-model="serverSyncEnabled" class="col" size="xs" label="Включить синхронизацию с сервером" />
        </div>

        <div v-show="serverSyncEnabled">
            <!---------------------------------------------->
            <div class="sets-part-header">
                Профили устройств
            </div>

            <div class="sets-item row">
                <div class="sets-label label"></div>
                <div class="text col">
                    Выберите или добавьте профиль устройства, чтобы начать синхронизацию настроек с сервером.
                    <br>При выборе "Нет" синхронизация настроек (но не книг) отключается.
                </div>
            </div>
            <div class="sets-item row">
                <div class="sets-label label">
                    Устройство
                </div>
                <div class="col">
                    <q-select
                        v-model="currentProfile" :options="currentProfileOptions"
                        style="width: 275px"
                        bg-color="input"
                        dropdown-icon="la la-angle-down la-sm"
                        outlined dense emit-value map-options display-value-sanitize options-sanitize
                    />
                </div>
            </div>
            <div class="sets-item row">
                <div class="sets-label label"></div>
                <q-btn class="sets-button" color="btn2" text-color="app" dense no-caps @click="addProfile">
                    Добавить
                </q-btn>
                <q-btn class="sets-button" color="btn2" text-color="app" dense no-caps @click="delProfile">
                    Удалить
                </q-btn>
                <q-btn class="sets-button" color="btn2" text-color="app" dense no-caps @click="delAllProfiles">
                    Удалить все
                </q-btn>
            </div>

            <!---------------------------------------------->
            <div class="sets-part-header">
                Ключ доступа
            </div>
            
            <div class="sets-item row">
                <div class="sets-label label"></div>
                <div class="text col">
                    Ключ доступа позволяет восстановить профили с настройками и список читаемых книг.
                    Для этого необходимо передать ключ на новое устройство через почту, мессенджер или другим способом.
                </div>
            </div>

            <div class="sets-item row">
                <div class="sets-label label"></div>
                <q-btn class="sets-button" color="btn2" text-color="app" style="width: 250px" dense no-caps @click="showServerStorageKey">
                    <span v-show="serverStorageKeyVisible">Скрыть</span>
                    <span v-show="!serverStorageKeyVisible">Показать</span>
                    &nbsp;ключ доступа
                </q-btn>
            </div>

            <div class="sets-item row">
                <div class="sets-label label"></div>
                <div v-if="!serverStorageKeyVisible" class="col">
                    <hr />
                    <b>{{ partialStorageKey }}</b> (часть вашего ключа)
                    <hr />
                </div>
                <div v-else class="col" style="line-height: 100%">
                    <hr />
                    <div style="width: 300px; padding-top: 5px; overflow-wrap: break-word;">
                        <b>{{ serverStorageKey }}</b>
                        <q-icon class="copy-icon" name="la la-copy" @click="copyToClip(serverStorageKey, 'Ключ')">
                            <q-tooltip :delay="1000" anchor="top middle" self="center middle" content-style="font-size: 80%">
                                Скопировать
                            </q-tooltip>                    
                        </q-icon>            
                    </div>
                    <div v-if="mode == 'omnireader' || mode == 'liberama'">
                        <br>Переход по ссылке позволит автоматически ввести ключ доступа:
                        <br><div class="text-center" style="margin-top: 5px">
                            <a :href="setStorageKeyLink" target="_blank">Ссылка для ввода ключа</a>
                            <q-icon class="copy-icon" name="la la-copy" @click="copyToClip(setStorageKeyLink, 'Ссылка')">
                                <q-tooltip :delay="1000" anchor="top middle" self="center middle" content-style="font-size: 80%">
                                    Скопировать
                                </q-tooltip>                    
                            </q-icon>            
                        </div>
                    </div>
                    <hr />
                </div>
            </div>

            <div class="sets-item row">
                <div class="sets-label label"></div>
                <q-btn class="sets-button" color="btn2" text-color="app" style="width: 250px" dense no-caps @click="enterServerStorageKey">
                    Ввести ключ доступа
                </q-btn>
            </div>
            <div class="sets-item row">
                <div class="sets-label label"></div>
                <q-btn class="sets-button" color="btn2" text-color="app" style="width: 250px" dense no-caps @click="generateServerStorageKey">
                    Сгенерировать новый ключ
                </q-btn>
            </div>
            <div class="sets-item row">
                <div class="sets-label label"></div>
                <div class="text col">
                    Рекомендуется сохранить ключ в надежном месте, чтобы всегда иметь возможность восстановить настройки,
                    например, после переустановки ОС или чистки/смены браузера.<br>
                    <b>ПРЕДУПРЕЖДЕНИЕ!</b> При утере ключа, НИКТО не сможет восстановить ваши данные, т.к. они сжимаются
                    и шифруются ключом доступа перед отправкой на сервер.
                </div>
            </div>
        </div>
    </div>
</template>

<script>
//-----------------------------------------------------------------------------
import vueComponent from '../../../vueComponent.js';

import _ from 'lodash';

import * as utils from '../../../../share/utils';
import rstore from '../../../../store/modules/reader';

const componentOptions = {
    watch: {
    },
};
class ProfilesTab {
    _options = componentOptions;
    _props = {
        form: Object,
    };

    rstore = rstore;

    serverStorageKeyVisible = false;

    created() {
        this.commit = this.$store.commit;
    }

    mounted() {
    }

    get mode() {
        return this.$store.state.config.mode;
    }

    get serverSyncEnabled() {
        return this.$store.state.reader.serverSyncEnabled;
    }

    set serverSyncEnabled(newValue) {
        this.commit('reader/setServerSyncEnabled', newValue);
    }

    get currentProfile() {
        return this.$store.state.reader.currentProfile;
    }

    set currentProfile(newValue) {
        this.commit('reader/setCurrentProfile', newValue);
    }

    get profiles() {
        return this.$store.state.reader.profiles;
    }

    get currentProfileOptions() {
        const profNames = Object.keys(this.profiles)
        profNames.sort();

        let result = [{label: 'Нет', value: ''}];
        profNames.forEach(name => {
            result.push({label: name, value: name});
        });
        return result;
    }

    get partialStorageKey() {
        return this.serverStorageKey.substr(0, 7) + '***';
    }

    get serverStorageKey() {
        return this.$store.state.reader.serverStorageKey;
    }

    get setStorageKeyLink() {
        return `https://${window.location.host}/#/reader?setStorageAccessKey=${utils.toBase58(this.serverStorageKey)}`;
    }

    async addProfile() {
        try {
            if (Object.keys(this.profiles).length >= 100) {
                this.$root.stdDialog.alert('Достигнут предел количества профилей', 'Ошибка');
                return;
            }
            const result = await this.$root.stdDialog.prompt('Введите произвольное название для профиля устройства:', ' ', {
                inputValidator: (str) => { if (!str) return 'Название не должно быть пустым'; else if (str.length > 50) return 'Слишком длинное название'; else return true; },
            });
            if (result && result.value) {
                if (this.profiles[result.value]) {
                    this.$root.stdDialog.alert('Такой профиль уже существует', 'Ошибка');
                } else {
                    const newProfiles = Object.assign({}, this.profiles, {[result.value]: 1});
                    this.commit('reader/setAllowProfilesSave', true);
                    await this.$nextTick();//ждем обработчики watch
                    this.commit('reader/setProfiles', newProfiles);
                    await this.$nextTick();//ждем обработчики watch
                    this.commit('reader/setAllowProfilesSave', false);
                    this.currentProfile = result.value;
                }
            }
        } catch (e) {
            //
        }
    }

    async delProfile() {
        if (!this.currentProfile)
            return;

        try {
            const result = await this.$root.stdDialog.prompt(`<b>Предупреждение!</b> Удаление профиля '${this.$root.sanitize(this.currentProfile)}' необратимо.` +
                    `<br>Все настройки профиля будут потеряны, однако список читаемых книг сохранится.` +
                    `<br><br>Введите 'да' для подтверждения удаления:`, ' ', {
                inputValidator: (str) => { if (str && str.toLowerCase() === 'да') return true; else return 'Удаление не подтверждено'; },
            });

            if (result && result.value && result.value.toLowerCase() == 'да') {
                if (this.profiles[this.currentProfile]) {
                    const newProfiles = Object.assign({}, this.profiles);
                    delete newProfiles[this.currentProfile];
                    this.commit('reader/setAllowProfilesSave', true);
                    await this.$nextTick();//ждем обработчики watch
                    this.commit('reader/setProfiles', newProfiles);
                    await this.$nextTick();//ждем обработчики watch
                    this.commit('reader/setAllowProfilesSave', false);
                    this.currentProfile = '';
                }
            }
        } catch (e) {
            //
        }
    }

    async delAllProfiles() {
        if (!Object.keys(this.profiles).length)
            return;

        try {
            const result = await this.$root.stdDialog.prompt(`<b>Предупреждение!</b> Удаление ВСЕХ профилей с настройками необратимо.` +
                    `<br><br>Введите 'да' для подтверждения удаления:`, ' ', {
                inputValidator: (str) => { if (str && str.toLowerCase() === 'да') return true; else return 'Удаление не подтверждено'; },
            });

            if (result && result.value && result.value.toLowerCase() == 'да') {
                this.commit('reader/setAllowProfilesSave', true);
                await this.$nextTick();//ждем обработчики watch
                this.commit('reader/setProfiles', {});
                await this.$nextTick();//ждем обработчики watch
                this.commit('reader/setAllowProfilesSave', false);
                this.currentProfile = '';
            }
        } catch (e) {
            //
        }
    }

    async showServerStorageKey() {
        this.serverStorageKeyVisible = !this.serverStorageKeyVisible;
    }

    async enterServerStorageKey(key) {
        try {
            const result = await this.$root.stdDialog.prompt(`<b>Предупреждение!</b> Изменение ключа доступа приведет к замене всех профилей и читаемых книг в читалке.` +
                    `<br><br>Введите новый ключ доступа:`, ' ', {
                inputValidator: (str) => {
                    try {
                        if (str && utils.fromBase58(str).length == 32) {
                            return true;
                        }
                    } catch (e) {
                        //
                    }
                    return 'Неверный формат ключа'; 
                },
                inputValue: (key && _.isString(key) ? key : null),
            });

            if (result && result.value && utils.fromBase58(result.value).length == 32) {
                this.commit('reader/setServerStorageKey', result.value);
            }
        } catch (e) {
            //
        }
    }

    async generateServerStorageKey() {
        try {
            const result = await this.$root.stdDialog.prompt(`<b>Предупреждение!</b> Генерация нового ключа доступа приведет к удалению всех профилей и читаемых книг в читалке.` +
                    `<br><br>Введите 'да' для подтверждения генерации нового ключа:`, ' ', {
                inputValidator: (str) => { if (str && str.toLowerCase() === 'да') return true; else return 'Генерация не подтверждена'; },
            });

            if (result && result.value && result.value.toLowerCase() == 'да') {
                if (this.$root.generateNewServerStorageKey)
                    this.$root.generateNewServerStorageKey();
            }
        } catch (e) {
            //
        }

    }

    async copyToClip(text, prefix) {
        const result = await utils.copyTextToClipboard(text);
        const suf = (prefix.substr(-1) == 'а' ? 'а' : '');
        const msg = (result ? `${prefix} успешно скопирован${suf} в буфер обмена` : 'Копирование не удалось');
        if (result)
            this.$root.notify.success(msg);
        else
            this.$root.notify.error(msg);
    }
}

export default vueComponent(ProfilesTab);
//-----------------------------------------------------------------------------
</script>

<style scoped>
.label {
    width: 75px;
}

.text {
    font-size: 90%;
    line-height: 130%;
}

.copy-icon {
    margin-left: 5px;
    cursor: pointer;
    font-size: 120%;
    color: var(--text-anchor-color);
}
</style>