add the ability to log out

This commit is contained in:
Nolan Lawson 2018-01-14 12:00:22 -08:00
parent eb9e7fa4c7
commit a8f45a37e2
3 changed files with 43 additions and 7 deletions

View file

@ -28,17 +28,22 @@
</form> </form>
<form class="instance-actions"> <form class="instance-actions">
<button class="primary" disabled="{{$currentInstance === params.instanceName}}" {{#if $loggedInInstancesInOrder.length > 1}}
on:click="onSwitchToThisInstance()"> <button class="primary" disabled="{{$currentInstance === params.instanceName}}"
Switch to this instance on:click="onSwitchToThisInstance()">
</button> {{$currentInstance === params.instanceName ? 'Current instance' : 'Switch to this instance'}}
<button>Log out</button> </button>
{{/if}}
<button on:click="onLogOut()">Log out</button>
</form> </form>
{{/if}} {{/if}}
</SettingsLayout> </SettingsLayout>
</Layout> </Layout>
<style> <style>
.acct-current-user { .acct-current-user {
background: var(--form-bg);
border: 1px solid var(--main-border);
border-radius: 4px;
padding: 20px; padding: 20px;
display: grid; display: grid;
align-items: center; align-items: center;
@ -58,6 +63,9 @@
grid-area: handle; grid-area: handle;
} }
.theme-chooser { .theme-chooser {
background: var(--form-bg);
border: 1px solid var(--main-border);
border-radius: 4px;
display: block; display: block;
padding: 20px; padding: 20px;
line-height: 2em; line-height: 2em;
@ -73,6 +81,7 @@
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: right; justify-content: right;
margin: 20px 0;
} }
.instance-actions button { .instance-actions button {
margin: 0 5px; margin: 0 5px;
@ -86,6 +95,8 @@
import { getThisUserAccount } from '../../_utils/mastodon/user' import { getThisUserAccount } from '../../_utils/mastodon/user'
import { themes } from '../../_static/themes' import { themes } from '../../_static/themes'
import { switchToTheme } from '../../_utils/themeEngine' import { switchToTheme } from '../../_utils/themeEngine'
import { goto } from 'sapper/runtime.js'
import { toast } from '../../_utils/toast'
export default { export default {
components: { components: {
@ -127,6 +138,29 @@
}) })
this.store.save() this.store.save()
switchToTheme(instanceThemes[instanceName]) 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')
} }
} }
} }

View file

@ -41,6 +41,7 @@
padding: 5px 10px 15px; padding: 5px 10px 15px;
margin: 20px auto; margin: 20px auto;
border: 1px solid var(--form-border); border: 1px solid var(--form-border);
border-radius: 4px;
} }
form.add-new-instance label, form.add-new-instance input, form.add-new-instance button { form.add-new-instance label, form.add-new-instance input, form.add-new-instance button {

View file

@ -7,7 +7,7 @@
<h1>Instances</h1> <h1>Instances</h1>
{{#if $isUserLoggedIn}} {{#if $isUserLoggedIn}}
<p>Instances you've connected to:</p> <p>Instances you've logged in to:</p>
<SettingsList> <SettingsList>
{{#each $loggedInInstancesAsList as instance}} {{#each $loggedInInstancesAsList as instance}}
<SettingsListItem offsetForIcon="{{instance.name !== $currentInstance}}" <SettingsListItem offsetForIcon="{{instance.name !== $currentInstance}}"
@ -18,7 +18,8 @@
</SettingsList> </SettingsList>
<p><a href="/settings/instances/add">Add another instance</a></p> <p><a href="/settings/instances/add">Add another instance</a></p>
{{else}} {{else}}
<p><a href="/settings/instances/add">Connect to an instance</a> to start using Pinafore.</p> <p>You're not logged in to any instances.</p>
<p><a href="/settings/instances/add">Log in to an instance</a> to start using Pinafore.</p>
{{/if}} {{/if}}
</SettingsLayout> </SettingsLayout>
</Layout> </Layout>