97 lines
		
	
	
		
			No EOL
		
	
	
		
			2.6 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
			
		
		
	
	
			97 lines
		
	
	
		
			No EOL
		
	
	
		
			2.6 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
<:Head>
 | 
						|
  <title>Instance Wizard</title>
 | 
						|
</:Head>
 | 
						|
 | 
						|
<Layout page='settings'>
 | 
						|
  <h1>Add an instance</h1>
 | 
						|
 | 
						|
  <p>Log in to your instance to use Pinafore.</p>
 | 
						|
 | 
						|
  <form on:submit='handleSubmit(event)'>
 | 
						|
    <label for="instanceInput">Instance name:</label>
 | 
						|
    <input type="text" id="instanceInput" bind:value='$instanceNameInSearch' placeholder=''>
 | 
						|
    <button class="primary" type="submit" id="submitButton">Add instance</button>
 | 
						|
  </form>
 | 
						|
 | 
						|
  <p>Don't have an instance? <a href="https://joinmastodon.org">Join Mastodon!</a></p>
 | 
						|
</Layout>
 | 
						|
<style>
 | 
						|
  @media (max-width: 767px) {
 | 
						|
    input {
 | 
						|
      width: 90%;
 | 
						|
    }
 | 
						|
  }
 | 
						|
 | 
						|
  input {
 | 
						|
    width: 250px;
 | 
						|
  }
 | 
						|
 | 
						|
  form {
 | 
						|
    background: #fafafa;
 | 
						|
    padding: 5px 10px 15px;
 | 
						|
    border: 1px solid #ccc;
 | 
						|
    margin: 0 auto;
 | 
						|
  }
 | 
						|
 | 
						|
  form label, form input, form button {
 | 
						|
    display: block;
 | 
						|
    margin: 20px 5px;
 | 
						|
  }
 | 
						|
 | 
						|
 | 
						|
 | 
						|
</style>
 | 
						|
<script>
 | 
						|
  import Layout from '../_components/Layout.html';
 | 
						|
  import { registerApplication, generateAuthLink, getAccessTokenFromAuthCode } from '../_utils/mastodon'
 | 
						|
  import { databasePromise } from '../_utils/database'
 | 
						|
  import { store } from '../_utils/store'
 | 
						|
  import { goto } from 'sapper/runtime.js'
 | 
						|
 | 
						|
  export default {
 | 
						|
    oncreate: function () {
 | 
						|
      if (process.browser) {
 | 
						|
        (async () => {
 | 
						|
          let params = new URLSearchParams(location.search)
 | 
						|
          if (params.has('code')) {
 | 
						|
            this.onReceivedOauthCode(params.get('code'))
 | 
						|
          }
 | 
						|
        })()
 | 
						|
      }
 | 
						|
    },
 | 
						|
    components: {
 | 
						|
      Layout
 | 
						|
    },
 | 
						|
    store: () => store,
 | 
						|
    methods: {
 | 
						|
      onReceivedOauthCode: async function(code) {
 | 
						|
        let instanceData = this.store.get('currentOauthInstance')
 | 
						|
        instanceData.code = code
 | 
						|
        let response = await (await getAccessTokenFromAuthCode(
 | 
						|
          instanceData.instanceName,
 | 
						|
          instanceData.client_id,
 | 
						|
          instanceData.client_secret,
 | 
						|
          instanceData.code
 | 
						|
        )).json()
 | 
						|
        instanceData = Object.assign(instanceData, response)
 | 
						|
        this.store.set({
 | 
						|
          'currentOauthInstance': instanceData,
 | 
						|
          'instanceNameInSearch': '',
 | 
						|
        })
 | 
						|
        this.store.save()
 | 
						|
        goto('/')
 | 
						|
      },
 | 
						|
      handleSubmit: async function(event) {
 | 
						|
        event.preventDefault()
 | 
						|
        let instanceName = this.store.get('instanceNameInSearch')
 | 
						|
        instanceName = instanceName.replace(/^https?:\/\//, '').replace('/$', '')
 | 
						|
        let data = await (await registerApplication(instanceName)).json()
 | 
						|
        data.instanceName = instanceName
 | 
						|
        this.store.set({'currentOauthInstance': data})
 | 
						|
        this.store.save()
 | 
						|
        let oauthUrl = generateAuthLink(instanceName, data.client_id)
 | 
						|
        document.location.href = oauthUrl
 | 
						|
      },
 | 
						|
    }
 | 
						|
  }
 | 
						|
</script> |