<:Head> <title>{{params.instanceName}}</title> </:Head> <Layout page='settings'> <SettingsLayout page='settings/instances/{{params.instanceName}}' label="{{params.instanceName}}"> <h1 class="instance-name-h1">{{params.instanceName}}</h1> {{#if instanceUserAccount}} <h2>Logged in as:</h2> <div class="acct-current-user"> <img alt="Profile picture for {{'@' + instanceUserAccount.acct}}" class="acct-avatar" src="{{instanceUserAccount.avatar}}" /> <a class="acct-handle" rel="noopener" target="_blank" href="{{instanceUserAccount.url}}">{{'@' + instanceUserAccount.acct}}</a> <span class="acct-display-name">{{instanceUserAccount.display_name}}</span> </div> <h2>Theme:</h2> <form class="theme-chooser" aria-label="Choose a theme"> {{#each themes as theme}} <div class="theme-group"> <input type="radio" id="choice-theme-{{theme.name}}" value="{{theme.name}}" checked="$currentTheme === theme.name" bind:group="selectedTheme" on:change="onThemeChange()"> <label for="choice-theme-{{theme.name}}">{{theme.label}}</label> </div> {{/each}} </form> <form class="instance-actions" aria-label="Switch to or log out of this instance"> {{#if $loggedInInstancesInOrder.length > 1}} <button class="primary" disabled="{{$currentInstance === params.instanceName}}" on:click="onSwitchToThisInstance()"> {{$currentInstance === params.instanceName ? 'This is your current instance' : 'Switch to this instance'}} </button> {{/if}} <button on:click="onLogOut()">Log out</button> </form> {{/if}} </SettingsLayout> </Layout> <style> .acct-current-user { background: var(--form-bg); border: 1px solid var(--main-border); border-radius: 4px; padding: 20px; display: grid; align-items: center; font-size: 1.3em; grid-template-areas: "avatar handle" "avatar display-name"; grid-gap: 20px; } .acct-avatar { width: 64px; height: 64px; border-radius: 4px; grid-area: avatar; } .acct-handle { grid-area: handle; } .theme-chooser { background: var(--form-bg); border: 1px solid var(--main-border); border-radius: 4px; display: block; padding: 20px; line-height: 2em; } .theme-group { display: flex; align-items: center; } .theme-chooser label { margin: 2px 10px 0; } .instance-actions { width: 100%; display: flex; justify-content: right; margin: 20px 0; } .instance-actions button { margin: 0 5px; flex-basis: 100%; } .instance-name-h1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } </style> <script> import { store } from '../../_utils/store' import Layout from '../../_components/Layout.html' import SettingsLayout from '../_components/SettingsLayout.html' import { getThisUserAccount } from '../../_utils/mastodon/user' import { themes } from '../../_static/themes' import { switchToTheme } from '../../_utils/themeEngine' import { goto } from 'sapper/runtime.js' import { toast } from '../../_utils/toast' export default { components: { Layout, SettingsLayout }, store: () => store, data: () => ({ themes: themes }), oncreate: async function () { let instanceName = this.get('params').instanceName let loggedInInstances = this.store.get('loggedInInstances') let instanceThemes = this.store.get('instanceThemes') let instanceData = loggedInInstances[instanceName] let instanceUserAccount = await getThisUserAccount(instanceName, instanceData.access_token) this.set({ instanceUserAccount: instanceUserAccount, selectedTheme: instanceThemes[instanceName] }) }, methods: { onThemeChange() { let newTheme = this.get('selectedTheme') let instanceName = this.get('params').instanceName let instanceThemes = this.store.get('instanceThemes') instanceThemes[instanceName] = newTheme this.store.set({instanceThemes: instanceThemes}) this.store.save() if (this.get('params').instanceName === this.store.get('currentInstance')) { switchToTheme(newTheme) } }, onSwitchToThisInstance() { let instanceName = this.get('params').instanceName let instanceThemes = this.store.get('instanceThemes') this.store.set({ currentInstance: instanceName }) this.store.save() switchToTheme(instanceThemes[instanceName]) }, onLogOut() { let loggedInInstances = this.store.get('loggedInInstances') let instanceThemes = this.store.get('instanceThemes') let loggedInInstancesInOrder = this.store.get('loggedInInstancesInOrder') let instanceName = this.get('params').instanceName let currentInstance = this.store.get('currentInstance') loggedInInstancesInOrder.splice(loggedInInstancesInOrder.indexOf(instanceName), 1) let newInstance = instanceName === currentInstance ? loggedInInstancesInOrder[0] : currentInstance delete loggedInInstances[instanceName] delete instanceThemes[instanceName] this.store.set({ loggedInInstances: loggedInInstances, instanceThemes: instanceThemes, loggedInInstancesInOrder: loggedInInstancesInOrder, currentInstance: newInstance }) this.store.save() switchToTheme(instanceThemes[newInstance] || 'default') toast.say(`Logged out of ${instanceName}`) goto('/settings/instances') } } } </script>