Add GitHub auth
This commit is contained in:
		
							
								
								
									
										63
									
								
								src/client/app/common/views/components/github-setting.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										63
									
								
								src/client/app/common/views/components/github-setting.vue
									
									
									
									
									
										Normal file
									
								
							| @@ -0,0 +1,63 @@ | ||||
| <template> | ||||
| <div class="mk-github-setting"> | ||||
| 	<p>%i18n:@description%<a :href="`${docsUrl}/link-to-github`" target="_blank">%i18n:@detail%</a></p> | ||||
| 	<p class="account" v-if="$store.state.i.github" :title="`GitHub ID: ${$store.state.i.github.id}`">%i18n:@connected-to%: <a :href="`https://github.com/${$store.state.i.github.login}`" target="_blank">@{{ $store.state.i.github.login }}</a></p> | ||||
| 	<p> | ||||
| 		<a :href="`${apiUrl}/connect/github`" target="_blank" @click.prevent="connect">{{ $store.state.i.github ? '%i18n:@reconnect%' : '%i18n:@connect%' }}</a> | ||||
| 		<span v-if="$store.state.i.github"> or </span> | ||||
| 		<a :href="`${apiUrl}/disconnect/github`" target="_blank" v-if="$store.state.i.github" @click.prevent="disconnect">%i18n:@disconnect%</a> | ||||
| 	</p> | ||||
| 	<p class="id" v-if="$store.state.i.github">GitHub ID: {{ $store.state.i.github.id }}</p> | ||||
| </div> | ||||
| </template> | ||||
|  | ||||
| <script lang="ts"> | ||||
| import Vue from 'vue'; | ||||
| import { apiUrl, docsUrl } from '../../../config'; | ||||
|  | ||||
| export default Vue.extend({ | ||||
| 	data() { | ||||
| 		return { | ||||
| 			form: null, | ||||
| 			apiUrl, | ||||
| 			docsUrl | ||||
| 		}; | ||||
| 	}, | ||||
| 	mounted() { | ||||
| 		this.$watch('$store.state.i', () => { | ||||
| 			if (this.$store.state.i.github && this.form) | ||||
| 				this.form.close(); | ||||
| 		}, { | ||||
| 			deep: true | ||||
| 		}); | ||||
| 	}, | ||||
| 	methods: { | ||||
| 		connect() { | ||||
| 			this.form = window.open(apiUrl + '/connect/github', | ||||
| 				'github_connect_window', | ||||
| 				'height=570, width=520'); | ||||
| 		}, | ||||
|  | ||||
| 		disconnect() { | ||||
| 			window.open(apiUrl + '/disconnect/github', | ||||
| 				'github_disconnect_window', | ||||
| 				'height=570, width=520'); | ||||
| 		} | ||||
| 	} | ||||
| }); | ||||
| </script> | ||||
|  | ||||
| <style lang="stylus" scoped> | ||||
| .mk-github-setting | ||||
| 	.account | ||||
| 		border solid 1px #e1e8ed | ||||
| 		border-radius 4px | ||||
| 		padding 16px | ||||
|  | ||||
| 		a | ||||
| 			font-weight bold | ||||
| 			color inherit | ||||
|  | ||||
| 	.id | ||||
| 		color #8899a6 | ||||
| </style> | ||||
| @@ -37,6 +37,7 @@ import messaging from './messaging.vue'; | ||||
| import messagingRoom from './messaging-room.vue'; | ||||
| import urlPreview from './url-preview.vue'; | ||||
| import twitterSetting from './twitter-setting.vue'; | ||||
| import githubSetting from './github-setting.vue'; | ||||
| import fileTypeIcon from './file-type-icon.vue'; | ||||
| import Reversi from './games/reversi/reversi.vue'; | ||||
| import welcomeTimeline from './welcome-timeline.vue'; | ||||
| @@ -90,6 +91,7 @@ Vue.component('mk-messaging', messaging); | ||||
| Vue.component('mk-messaging-room', messagingRoom); | ||||
| Vue.component('mk-url-preview', urlPreview); | ||||
| Vue.component('mk-twitter-setting', twitterSetting); | ||||
| Vue.component('mk-github-setting', githubSetting); | ||||
| Vue.component('mk-file-type-icon', fileTypeIcon); | ||||
| Vue.component('mk-reversi', Reversi); | ||||
| Vue.component('mk-welcome-timeline', welcomeTimeline); | ||||
|   | ||||
| @@ -13,6 +13,7 @@ | ||||
| 	<ui-input v-if="user && user.twoFactorEnabled" v-model="token" type="number" required styl="fill"/> | ||||
| 	<ui-button type="submit" :disabled="signing">{{ signing ? '%i18n:@signing-in%' : '%i18n:@signin%' }}</ui-button> | ||||
| 	<p style="margin: 8px 0;">%i18n:@or% <a :href="`${apiUrl}/signin/twitter`">%i18n:@signin-with-twitter%</a></p> | ||||
| 	<p style="margin: 8px 0;">%i18n:@or% <a :href="`${apiUrl}/signin/github`">%i18n:@signin-with-github%</a></p> | ||||
| </form> | ||||
| </template> | ||||
|  | ||||
|   | ||||
| @@ -23,6 +23,13 @@ | ||||
| 					<mk-twitter-setting/> | ||||
| 				</section> | ||||
| 			</ui-card> | ||||
|  | ||||
| 			<ui-card> | ||||
| 				<div slot="title">%fa:B github% %i18n:@github%</div> | ||||
| 				<section> | ||||
| 					<mk-github-setting/> | ||||
| 				</section> | ||||
| 			</ui-card> | ||||
| 		</div> | ||||
|  | ||||
| 		<ui-card class="theme" v-show="page == 'theme'"> | ||||
|   | ||||
							
								
								
									
										27
									
								
								src/client/app/desktop/views/pages/user/user.github.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										27
									
								
								src/client/app/desktop/views/pages/user/user.github.vue
									
									
									
									
									
										Normal file
									
								
							| @@ -0,0 +1,27 @@ | ||||
| <template> | ||||
| <div class="aqooishiizumijmihokohinatamihoaz"> | ||||
| 	<span>%fa:B github%<a :href="`https://github.com/${user.github.login}`" target="_blank">@{{ user.github.login }}</a></span> | ||||
| </div> | ||||
| </template> | ||||
|  | ||||
| <script lang="ts"> | ||||
| import Vue from 'vue'; | ||||
|  | ||||
| export default Vue.extend({ | ||||
| 	props: ['user'] | ||||
| }); | ||||
| </script> | ||||
|  | ||||
| <style lang="stylus" scoped> | ||||
| .aqooishiizumijmihokohinatamihoaz | ||||
| .adsvaidqfznoartcbplullnejvxjphcn | ||||
| 	padding 32px | ||||
| 	background #171515 | ||||
| 	border-radius 6px | ||||
| 	color #fff | ||||
|  | ||||
| 	a | ||||
| 		margin-left 8px | ||||
| 		color #fff | ||||
|  | ||||
| </style> | ||||
| @@ -2,7 +2,7 @@ | ||||
| <mk-ui> | ||||
| 	<div class="xygkxeaeontfaokvqmiblezmhvhostak" v-if="!fetching"> | ||||
| 		<div class="is-suspended" v-if="user.isSuspended">%fa:exclamation-triangle% %i18n:@is-suspended%</div> | ||||
| 		<div class="is-remote" v-if="user.host != null">%fa:exclamation-triangle% %i18n:common.is-remote-user%<a :href="user.url || user.uri" target="_blank">%i18n:common.view-on-remote%</a></div> | ||||
| 		<div class="is-remote" v-if="user.host">%fa:exclamation-triangle% %i18n:common.is-remote-user%<a :href="user.url || user.uri" target="_blank">%i18n:common.view-on-remote%</a></div> | ||||
| 		<main> | ||||
| 			<div class="main"> | ||||
| 				<x-header :user="user"/> | ||||
| @@ -12,14 +12,15 @@ | ||||
| 			<div class="side"> | ||||
| 				<div class="instance" v-if="!$store.getters.isSignedIn"><mk-instance/></div> | ||||
| 				<x-profile :user="user"/> | ||||
| 				<x-twitter :user="user" v-if="user.host === null && user.twitter"/> | ||||
| 				<x-twitter :user="user" v-if="!user.host && user.twitter"/> | ||||
| 				<x-github :user="user" v-if="!user.host && user.github"/> | ||||
| 				<mk-calendar @chosen="warp" :start="new Date(user.createdAt)"/> | ||||
| 				<mk-activity :user="user"/> | ||||
| 				<x-photos :user="user"/> | ||||
| 				<x-friends :user="user"/> | ||||
| 				<x-followers-you-know v-if="$store.getters.isSignedIn && $store.state.i.id != user.id" :user="user"/> | ||||
| 				<div class="nav"><mk-nav/></div> | ||||
| 				<p v-if="user.host === null">%i18n:@last-used-at%: <b><mk-time :time="user.lastUsedAt"/></b></p> | ||||
| 				<p v-if="!user.host">%i18n:@last-used-at%: <b><mk-time :time="user.lastUsedAt"/></b></p> | ||||
| 			</div> | ||||
| 		</main> | ||||
| 	</div> | ||||
| @@ -37,6 +38,7 @@ import XPhotos from './user.photos.vue'; | ||||
| import XFollowersYouKnow from './user.followers-you-know.vue'; | ||||
| import XFriends from './user.friends.vue'; | ||||
| import XTwitter from './user.twitter.vue'; | ||||
| import XGithub from './user.github.vue'; // ?MEM: Don't fix the intentional typo. (XGitHub -> `<x-git-hub>`) | ||||
|  | ||||
| export default Vue.extend({ | ||||
| 	components: { | ||||
| @@ -46,7 +48,8 @@ export default Vue.extend({ | ||||
| 		XPhotos, | ||||
| 		XFollowersYouKnow, | ||||
| 		XFriends, | ||||
| 		XTwitter | ||||
| 		XTwitter, | ||||
| 		XGithub // ?MEM: Don't fix the intentional typo. (see L41) | ||||
| 	}, | ||||
| 	data() { | ||||
| 		return { | ||||
|   | ||||
| @@ -125,6 +125,19 @@ | ||||
| 				</section> | ||||
| 			</ui-card> | ||||
|  | ||||
| 			<ui-card> | ||||
| 				<div slot="title">%fa:B github% %i18n:@github%</div> | ||||
|  | ||||
| 				<section> | ||||
| 					<p class="account" v-if="$store.state.i.github"><a :href="`https://github.com/${$store.state.i.github.login}`" target="_blank">@{{ $store.state.i.github.login }}</a></p> | ||||
| 					<p> | ||||
| 						<a :href="`${apiUrl}/connect/github`" target="_blank">{{ $store.state.i.github ? '%i18n:@github-reconnect%' : '%i18n:@github-connect%' }}</a> | ||||
| 						<span v-if="$store.state.i.github"> or </span> | ||||
| 						<a :href="`${apiUrl}/disconnect/github`" target="_blank" v-if="$store.state.i.github">%i18n:@github-disconnect%</a> | ||||
| 					</p> | ||||
| 				</section> | ||||
| 			</ui-card> | ||||
|  | ||||
| 			<mk-api-settings /> | ||||
|  | ||||
| 			<ui-card> | ||||
|   | ||||
		Reference in New Issue
	
	Block a user
	 Acid Chicken (硫酸鶏)
					Acid Chicken (硫酸鶏)