diff --git a/src/App.js b/src/App.js index 040138c978bd98dfe3e0eea0f417aba57e73be9b..da66fe2145f77ccea3f009e9c779da6de40936f8 100644 --- a/src/App.js +++ b/src/App.js @@ -107,6 +107,9 @@ export default { return { 'order': this.$store.state.instance.sidebarRight ? 99 : 0 } + }, + showStorageError () { + return this.$store.state.interface.storageError === 'show' } }, methods: { @@ -129,6 +132,9 @@ export default { if (changed) { this.$store.dispatch('setMobileLayout', mobileLayout) } + }, + hideStorageError () { + this.$store.dispatch('setStorageError', 'hide') } } } diff --git a/src/App.scss b/src/App.scss index f2972eda5ad5c6535e77fc216f288a09a9681c13..db447f1c3854f611fad55fd7c075757d1bbe2d94 100644 --- a/src/App.scss +++ b/src/App.scss @@ -806,6 +806,15 @@ nav { } } +.storage-error-notice { + text-align: center; + i { + cursor: pointer; + color: $fallback--text; + color: var(--alertErrorText, $fallback--text); + } +} + .button-icon { font-size: 1.2em; } diff --git a/src/App.vue b/src/App.vue index 7b9ad3dc1233f33d2311215454ec39c2d3c8c440..23991eaccae26fc68364e744190b8f01112119fd 100644 --- a/src/App.vue +++ b/src/App.vue @@ -101,6 +101,16 @@ </div> </div> <div class="main"> + <div + v-if="showStorageError" + class="alert error storage-error-notice" + > + {{ $t("errors.storage_unavailable") }} + <i + class="icon-cancel" + @click="hideStorageError" + /> + </div> <div v-if="!currentUser" class="login-hint panel panel-default" diff --git a/src/i18n/en.json b/src/i18n/en.json index 59f69e5765d44512cbf153a5a356cb374e264fc5..4856008f4b227e7ed48db9b2cbe9fed4a05a7a37 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -163,6 +163,9 @@ "load_all_hint": "Loaded first {saneAmount} emoji, loading all emoji may cause performance issues.", "load_all": "Loading all {emojiAmount} emoji" }, + "errors": { + "storage_unavailable": "Pleroma could not access browser storage. You may encounter issues and your login or your local settings won't be saved. Try enabling cookies." + }, "interactions": { "favs_repeats": "Repeats and Favorites", "follows": "New follows", diff --git a/src/main.js b/src/main.js index 9a201e4fac76b041a7931c2b7e764750f7f33252..bb2c8cd3694dca6a8edabff5cd631250af27233b 100644 --- a/src/main.js +++ b/src/main.js @@ -62,7 +62,16 @@ const persistedStateOptions = { }; (async () => { - const persistedState = await createPersistedState(persistedStateOptions) + console.log('before perse state') + let persistedState + let storageError = 'none' + try { + persistedState = await createPersistedState(persistedStateOptions) + } catch (e) { + console.error(e) + storageError = 'show' + persistedState = _ => _ + } const store = new Vuex.Store({ modules: { i18n: { @@ -89,7 +98,7 @@ const persistedStateOptions = { strict: false // Socket modifies itself, let's ignore this for now. // strict: process.env.NODE_ENV !== 'production' }) - + store.dispatch('setStorageError', storageError) afterStoreSetup({ store, i18n }) })() diff --git a/src/modules/instance.js b/src/modules/instance.js index ec5f4e54708f440ab984fc5f5edc7d5985d47c24..cc8843172de875b0981ea68c78689f99f0b49ca6 100644 --- a/src/modules/instance.js +++ b/src/modules/instance.js @@ -8,7 +8,7 @@ const defaultState = { // Stuff from apiConfig name: 'Pleroma FE', registrationOpen: true, - server: 'http://localhost:4040/', + server: 'http://lain.com:4040', textlimit: 5000, themeData: undefined, vapidPublicKey: undefined, diff --git a/src/modules/interface.js b/src/modules/interface.js index eeebd65ebf5047b0083e0ac5849684ac0bc7f82b..4b5b5b5d9ddfa3eb15197acbba364078ed792b45 100644 --- a/src/modules/interface.js +++ b/src/modules/interface.js @@ -8,6 +8,7 @@ const defaultState = { noticeClearTimeout: null, notificationPermission: null }, + storageError: 'none', browserSupport: { cssFilter: window.CSS && window.CSS.supports && ( window.CSS.supports('filter', 'drop-shadow(0 0)') || @@ -58,6 +59,9 @@ const interfaceMod = { if (!state.settingsModalLoaded) { state.settingsModalLoaded = true } + }, + setStorageError (state, value) { + state.storageError = value } }, actions: { @@ -81,6 +85,9 @@ const interfaceMod = { }, togglePeekSettingsModal ({ commit }) { commit('togglePeekSettingsModal') + }, + setStorageError ({ commit }, value) { + commit('setStorageError', value) } } }