WIP: Add Discord auth (#3239)

* Add Discord auth

* Apply review 175263424

src/client/app/common/views/components/discord-setting.vue

@@ -0,0 +1,64 @@
+<template>
+<div class="mk-discord-setting">
+	<p>{{ $t('description') }}</p>
+	<p class="account" v-if="$store.state.i.discord" :title="`Discord ID: ${$store.state.i.discord.id}`">{{ $t('connected-to') }}: <a :href="`https://discordapp.com/users/${$store.state.i.discord.id}`" target="_blank">@{{ $store.state.i.discord.username }}#{{ $store.state.i.discord.discriminator }}</a></p>
+	<p>
+		<a :href="`${apiUrl}/connect/discord`" target="_blank" @click.prevent="connect">{{ $store.state.i.discord ? this.$t('reconnect') : this.$t('connect') }}</a>
+		<span v-if="$store.state.i.discord"> or </span>
+		<a :href="`${apiUrl}/disconnect/discord`" target="_blank" v-if="$store.state.i.discord" @click.prevent="disconnect">{{ $t('disconnect') }}</a>
+	</p>
+	<p class="id" v-if="$store.state.i.discord">Discord ID: {{ $store.state.i.discord.id }}</p>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import i18n from '../../../i18n';
+import { apiUrl } from '../../../config';
+
+export default Vue.extend({
+	i18n: i18n('common/views/components/discord-setting.vue'),
+	data() {
+		return {
+			form: null,
+			apiUrl
+		};
+	},
+	mounted() {
+		this.$watch('$store.state.i', () => {
+			if (this.$store.state.i.discord && this.form)
+				this.form.close();
+		}, {
+			deep: true
+		});
+	},
+	methods: {
+		connect() {
+			this.form = window.open(apiUrl + '/connect/discord',
+				'discord_connect_window',
+				'height=570, width=520');
+		},
+
+		disconnect() {
+			window.open(apiUrl + '/disconnect/discord',
+				'discord_disconnect_window',
+				'height=570, width=520');
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.mk-discord-setting
+	.account
+		border solid 1px #e1e8ed
+		border-radius 4px
+		padding 16px
+
+		a
+			font-weight bold
+			color inherit
+
+	.id
+		color #8899a6
+</style>

src/client/app/common/views/components/index.ts

@@ -29,6 +29,7 @@ import ellipsis from './ellipsis.vue';
 import urlPreview from './url-preview.vue';
 import twitterSetting from './twitter-setting.vue';
 import githubSetting from './github-setting.vue';
+import discordSetting from './discord-setting.vue';
 import fileTypeIcon from './file-type-icon.vue';
 import emoji from './emoji.vue';
 import welcomeTimeline from './welcome-timeline.vue';
@@ -74,6 +75,7 @@ Vue.component('mk-ellipsis', ellipsis);
 Vue.component('mk-url-preview', urlPreview);
 Vue.component('mk-twitter-setting', twitterSetting);
 Vue.component('mk-github-setting', githubSetting);
+Vue.component('mk-discord-setting', discordSetting);
 Vue.component('mk-file-type-icon', fileTypeIcon);
 Vue.component('mk-emoji', emoji);
 Vue.component('mk-welcome-timeline', welcomeTimeline);

src/client/app/common/views/components/signin.vue

@@ -14,6 +14,7 @@
 	<ui-button type="submit" :disabled="signing">{{ signing ? $t('signing-in') : $t('signin') }}</ui-button>
 	<p style="margin: 8px 0;"><a :href="`${apiUrl}/signin/twitter`">{{ $t('signin-with-twitter') }}</a></p>
 	<p style="margin: 8px 0;"><a :href="`${apiUrl}/signin/github`">{{ $t('signin-with-github') }}</a></p>
+	<p style="margin: 8px 0;"><a :href="`${apiUrl}/signin/discord`">{{ $t('signin-with-discord') /* TODO: Make these layouts better */ }}</a></p>
 </form>
 </template>