kopia lustrzana https://github.com/nolanlawson/pinafore
				
				
				
			
		
			
				
	
	
		
			93 wiersze
		
	
	
		
			2.5 KiB
		
	
	
	
		
			HTML
		
	
	
			
		
		
	
	
			93 wiersze
		
	
	
		
			2.5 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='instanceName' 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'
 | |
| 
 | |
|   export default {
 | |
|     oncreate: function () {
 | |
|       if (process.browser) {
 | |
|         (async () => {
 | |
|           let params = new URLSearchParams(location.search)
 | |
|           if (params.has('code')) {
 | |
|             let db = await databasePromise
 | |
|             let instanceData = await db.get('instance')
 | |
|             this.set({instanceName: instanceData.instanceName})
 | |
|             let code = params.get('code')
 | |
|             instanceData.code = code
 | |
|             let response = await (await getAccessTokenFromAuthCode(
 | |
|               instanceData.instanceName,
 | |
|               instanceData.client_id,
 | |
|               instanceData.client_secret,
 | |
|               instanceData.code
 | |
|             )).json()
 | |
|             instanceData = Object.assign(instanceData, response)
 | |
|             await db.set(`instance`, instanceData)
 | |
|             console.log('response', response)
 | |
|           }
 | |
|         })()
 | |
|       }
 | |
|     },
 | |
|     components: {
 | |
|       Layout
 | |
|     },
 | |
|     data: () => ({
 | |
|       instanceName: ''
 | |
|     }),
 | |
|     methods: {
 | |
|       handleSubmit: async function(event) {
 | |
|         event.preventDefault()
 | |
|         let instanceName = this.get('instanceName')
 | |
|         instanceName = instanceName.replace(/^https?:\/\//, '').replace('/$', '')
 | |
|         let data = await (await registerApplication(instanceName)).json()
 | |
|         let db = await databasePromise
 | |
|         data.instanceName = instanceName
 | |
|         await db.set(`instance`, data)
 | |
|         let oauthUrl = generateAuthLink(instanceName, data.client_id)
 | |
|         document.location.href = oauthUrl
 | |
|       },
 | |
|     }
 | |
|   }
 | |
| </script> |