Change code formatter config

src/components/AddColumn/PublicTimeline.vue

@@ -58,112 +58,112 @@
 </template>
 
 <script lang="ts">
-import { ipcRenderer } from "electron";
-import { Component, Vue } from "vue-property-decorator";
-import { Status } from "megalodon";
+import { ipcRenderer } from "electron"
+import { Component, Vue } from "vue-property-decorator"
+import { Status } from "megalodon"
 
-import "@/extensions/map-sortbyvalue"; // Add sortByValue function to Map prototype
+import "@/extensions/map-sortbyvalue" // Add sortByValue function to Map prototype
 
-type DeleteListener = (e: Event, id: number) => void;
-type Instance = string;
+type DeleteListener = (e: Event, id: number) => void
+type Instance = string
 type Timeline = {
-  name: string;
-  statuses?: Map<number, Status>;
-};
-type Timelines = Timeline[];
-type UpdateListener = (e: Event, status: Status) => void;
+  name: string
+  statuses?: Map<number, Status>
+}
+type Timelines = Timeline[]
+type UpdateListener = (e: Event, status: Status) => void
 
 @Component
 export default class AddColumn extends Vue {
-  public instance: Instance = "";
-  public showInput: boolean = true;
-  public updateListeners: [string, UpdateListener][] = [];
-  public deleteListeners: [string, DeleteListener][] = [];
-  public pubTL: Timelines = [];
+  public instance: Instance = ""
+  public showInput: boolean = true
+  public updateListeners: [string, UpdateListener][] = []
+  public deleteListeners: [string, DeleteListener][] = []
+  public pubTL: Timelines = []
   //test
   public pref = {
     static: false
-  };
+  }
 
   beforeDestroy() {
     this.updateListeners.forEach(([name, listener]) => {
-      ipcRenderer.removeListener(name, listener);
-    });
+      ipcRenderer.removeListener(name, listener)
+    })
     this.deleteListeners.forEach(([name, listener]) => {
-      ipcRenderer.removeListener(name, listener);
-    });
+      ipcRenderer.removeListener(name, listener)
+    })
   }
 
   public get hasDomain() {
-    return this.instance != "";
+    return this.instance != ""
   }
 
   public sortedStatus(statuses: Map<number, Status>): Map<number, Status> {
     return statuses.sortByValue(
       (s1, s2): number => {
-        return s1.created_at > s2.created_at ? -1 : 1;
+        return s1.created_at > s2.created_at ? -1 : 1
       }
-    );
+    )
   }
 
   public addTL() {
-    let timeline: Timeline = { name: this.instance };
+    let timeline: Timeline = { name: this.instance }
 
-    this.showInput = false;
-    this.instance = "";
+    this.showInput = false
+    this.instance = ""
 
-    this.pubTL.push(timeline);
+    this.pubTL.push(timeline)
     // 最新のTLを取得
-    this.loadTL(timeline);
+    this.loadTL(timeline)
 
     // streamingを開始
-    this.subscribeStreaming(timeline);
+    this.subscribeStreaming(timeline)
   }
 
   public loadTL(timeline: Timeline) {
     let statuses: Status[] = ipcRenderer.sendSync(
       "no-auth-timeline",
       timeline.name
-    );
+    )
     timeline.statuses = new Map(
       statuses.map((status): [number, Status] => [status.id, status])
-    );
+    )
   }
 
   public async subscribeStreaming(timeline: Timeline) {
     // updateイベントを購読
     let updateListener = (_: Event, status: Status) => {
       if (timeline.statuses === undefined) {
-        timeline.statuses = new Map();
+        timeline.statuses = new Map()
       }
-      timeline.statuses.set(status.id, status);
-      this.$forceUpdate();
-    };
-    ipcRenderer.on(`update-${timeline.name}-no-auth`, updateListener);
+      timeline.statuses.set(status.id, status)
+      this.$forceUpdate()
+    }
+    ipcRenderer.on(`update-${timeline.name}-no-auth`, updateListener)
     this.updateListeners.push([
       `update-${timeline.name}-no-auth`,
       updateListener
-    ]);
+    ])
 
     // deleteイベントを購読
     let deleteListener = (_: Event, id: number) => {
       if (timeline.statuses === undefined) {
-        timeline.statuses = new Map();
+        timeline.statuses = new Map()
       }
-      timeline.statuses.delete(id);
-      this.$forceUpdate();
-    };
-    ipcRenderer.on(`delete-${timeline.name}-no-auth`, deleteListener);
+      timeline.statuses.delete(id)
+      this.$forceUpdate()
+    }
+    ipcRenderer.on(`delete-${timeline.name}-no-auth`, deleteListener)
     this.deleteListeners.push([
       `delete-${timeline.name}-no-auth`,
       deleteListener
-    ]);
+    ])
 
-    ipcRenderer.send("open-streaming", timeline.name, "no-auth");
+    ipcRenderer.send("open-streaming", timeline.name, "no-auth")
   }
 
   public showAccount(id: number) {
-    console.log("Account dialog:" + id);
+    console.log("Account dialog:" + id)
   }
 }
 </script>=
@@ -202,8 +202,8 @@ input {
   grid-template-areas: "avatar user user" "avatar content content" "avatar media media" "avatar card card" "avatar action action";
   .tootAvatar {
     grid-area: avatar;
-    img{
-      width:100%;
+    img {
+      width: 100%;
     }
   }
   .tootUser {

src/components/Preference/AccountManager.vue

@@ -0,0 +1,63 @@
+<template>
+  <form @submit.prevent="authCode" v-if="inputCode">
+    <input type="text" placeholder="input code" v-model="code">
+    <BaseButton
+      type="submit"
+      class="primary fill"
+      style="--font-size:.8em;"
+      :disabled="!hasDomain"
+    >Auth</BaseButton>
+  </form>
+  <form @submit.prevent="addAccount" v-else>
+    <input type="text" placeholder="e.g:mstdn.jp" v-model="instance">
+    <BaseButton
+      type="submit"
+      class="primary fill"
+      style="--font-size:.8em;"
+      :disabled="!hasDomain"
+    >Login</BaseButton>
+  </form>
+</template>
+<script lang="ts">
+import { ipcRenderer } from "electron"
+import { Component, Vue } from "vue-property-decorator"
+type Instance = string
+@Component
+export default class Auth extends Vue {
+  public instance: Instance = ""
+  public inputCode: boolean = false
+  public get hasDomain() {
+    return this.instance != ""
+  }
+  public addAccount() {
+    let target = this.instance
+    this.inputCode = true
+    ipcRenderer.send(`new-account-setup`, target)
+  }
+  public authCode() {
+    let code = this.code
+    this.inputCode = true
+    ipcRenderer.send(`new-account-setup`, target)
+  }
+}
+</script>
+<style scoped lang="postcss">
+input {
+  color: var(--color);
+  background-color: transparent;
+  font-size: var(--font-size);
+  border: none;
+  border-bottom: 1px solid #9e9e9e;
+  border-radius: 0;
+  line-height: 3em;
+  width: 80%;
+  outline: none;
+  margin: 1em;
+
+  transition-duration: 0.5s;
+
+  &:focus {
+    border-color: #26d69a;
+  }
+}
+</style>

src/components/Welcome.vue

@@ -2,7 +2,7 @@
   <div id="welcome">
     <img alt="Vue logo" src="@/assets/logo.png">
     <h1>Welcome to TheDesk</h1>
-    <BaseButton @click.native="status = 'login'" class="primary fill" disabled>{{ loginButton }}</BaseButton>
+    <BaseButton @click.native="status = 'login'" class="primary fill">{{ loginButton }}</BaseButton>
     <BaseButton @click.native="status = 'public_timeline'" class="primary">{{ publicTLButton }}</BaseButton>
 
     <BaseOverlay
@@ -21,12 +21,13 @@ import { Component, Vue } from 'vue-property-decorator'
 
 //import Login from './Accounts/Login.vue'
 import PublicTimeline from './AddColumn/PublicTimeline.vue'
+import Login from './Preference/AccountManager.vue'
 
 type Status = 'welcome' | 'login' | 'public_timeline'
 
 @Component({
   components: {
-    //Login,
+    Login,
     PublicTimeline,
   }
 })

src/main/Application.ts

@@ -14,6 +14,7 @@ import {
 import Window from './Window'
 import Timeline from './Timeline'
 import Streaming from './Streaming'
+import Auth from './Auth'
 
 const isDevelopment = process.env.NODE_ENV !== 'production'
 
@@ -65,6 +66,7 @@ export default class Application {
 
         Timeline.ready()
         Streaming.ready()
+        Auth.ready()
 
         ipcMain.on('dark-theme', (e: Event) => e.returnValue = this.isDarkMode)
 

src/main/Auth.ts

@@ -0,0 +1,38 @@
+import { ipcMain, Event, shell } from "electron"
+import Mastodon from "megalodon"
+
+export default class Auth {
+  public static ready() {
+    ipcMain.on("new-account-setup", async (event: Event, instance: string) => {
+      const SCOPES: string = "read write follow"
+      let clientId: string
+      let clientSecret: string
+      let url: string | null
+      Mastodon.registerApp(
+        "TheDesk",
+        {
+          scopes: SCOPES
+        },
+        "https://"+instance
+      ).then(appData => {
+        clientId = appData.clientId
+        clientSecret = appData.clientSecret
+        url = appData.url
+        if(url){
+            shell.openExternal(
+                url,
+                {
+                  activate: false
+                },
+                err => {
+                  if (err) console.log(err)
+                }
+              )
+        }else{
+            console.log(appData)
+        }
+        
+      })
+    })
+  }
+}