<:Head> <title>Pinafore – {{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 verifyCredentials}} <h2>Logged in as:</h2> <div class="acct-current-user"> <Avatar account="{{verifyCredentials}}" className="acct-avatar" size="big"/> <ExternalLink class="acct-handle" href="{{verifyCredentials.url}}"> {{'@' + verifyCredentials.acct}} </ExternalLink> <span class="acct-display-name">{{verifyCredentials.display_name || verifyCredentials.acct}}</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 && $currentInstance !== params.instanceName}} <button class="primary" on:click="onSwitchToThisInstance(event)"> Switch to this instance </button> {{/if}} <button on:click="onLogOut(event)">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-template-columns: min-content 1fr; grid-column-gap: 20px; grid-row-gap: 10px; } :global(.acct-avatar) { grid-area: avatar; } :global(.acct-handle) { grid-area: handle; } .acct-display-name { grid-area: display-name; } .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 '../../_store/store' import Layout from '../../_components/Layout.html' import SettingsLayout from '../_components/SettingsLayout.html' import ExternalLink from '../../_components/ExternalLink.html' import Avatar from '../../_components/Avatar.html' import { importDialogs } from '../../_utils/asyncModules' import { changeTheme, switchToInstance, logOutOfInstance, updateVerifyCredentialsForInstance } from '../../_actions/instances' import { themes } from '../../_static/themes' export default { components: { Layout, SettingsLayout, ExternalLink, Avatar }, store: () => store, data: () => ({ themes: themes, }), async oncreate() { let instanceName = this.get('instanceName') await updateVerifyCredentialsForInstance(instanceName) }, computed: { instanceName: (params) => params.instanceName, selectedTheme: ($instanceThemes, instanceName) => $instanceThemes[instanceName], verifyCredentials: ($verifyCredentials, instanceName) => $verifyCredentials && $verifyCredentials[instanceName] }, methods: { onThemeChange() { let newTheme = this.get('selectedTheme') let instanceName = this.get('instanceName') changeTheme(instanceName, newTheme) }, onSwitchToThisInstance(e) { e.preventDefault() let instanceName = this.get('instanceName') switchToInstance(instanceName) }, async onLogOut(e) { e.preventDefault() let instanceName = this.get('instanceName') let dialogs = await importDialogs() dialogs.showConfirmationDialog({ text: `Log out of ${instanceName}?`, onPositive() { logOutOfInstance(instanceName) } }) } } } </script>