Pinafore-Web-Client-Frontend/routes/settings/instances/[instanceName].html

159 lines
4.6 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<: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>