🎨

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

@@ -2,6 +2,10 @@
 <div class="felqjxyj" :class="{ splash }">
 	<div class="bg" ref="bg" @click="onBgClick"></div>
 	<div class="main" ref="main">
+		<template v-if="type == 'signin'">
+			<mk-signin/>
+		</template>
+		<template v-else>
 			<div class="icon" v-if="!input && !select && !user" :class="type"><fa :icon="icon"/></div>
 			<header v-if="title" v-html="title"></header>
 			<div class="body" v-if="text" v-html="text"></div>
@@ -11,9 +15,10 @@
 				<option v-for="item in select.items" :value="item.value">{{ item.text }}</option>
 			</ui-select>
 			<ui-horizon-group no-grow class="buttons fit-bottom" v-if="!splash">
-			<ui-button @click="ok" primary :autofocus="!input && !select && !user">OK</ui-button>
-			<ui-button @click="cancel" v-if="showCancelButton || input || select || user">Cancel</ui-button>
+				<ui-button @click="ok" primary :autofocus="!input && !select && !user">{{ $t('@.ok') }}</ui-button>
+				<ui-button @click="cancel" v-if="showCancelButton || input || select || user">{{ $t('@.cancel') }}</ui-button>
 			</ui-horizon-group>
+		</template>
 	</div>
 </div>
 </template>
@@ -23,8 +28,10 @@ import Vue from 'vue';
 import anime from 'animejs';
 import { faTimesCircle, faQuestionCircle } from '@fortawesome/free-regular-svg-icons';
 import parseAcct from "../../../../../misc/acct/parse";
+import i18n from '../../../i18n';
 
 export default Vue.extend({
+	i18n: i18n(),
 	props: {
 		type: {
 			type: String,

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

@@ -1,16 +1,16 @@
 <template>
 <form class="mk-signin" :class="{ signing }" @submit.prevent="onSubmit">
 	<div class="avatar" :style="{ backgroundImage: user ? `url('${ user.avatarUrl }')` : null }" v-show="withAvatar"></div>
-	<ui-input v-model="username" type="text" pattern="^[a-zA-Z0-9_]+$" spellcheck="false" autofocus required @input="onUsernameChange" styl="fill">
+	<ui-input v-model="username" type="text" pattern="^[a-zA-Z0-9_]+$" spellcheck="false" autofocus required @input="onUsernameChange">
 		<span>{{ $t('username') }}</span>
 		<template #prefix>@</template>
 		<template #suffix>@{{ host }}</template>
 	</ui-input>
-	<ui-input v-model="password" type="password" :with-password-toggle="true" required styl="fill">
+	<ui-input v-model="password" type="password" :with-password-toggle="true" required>
 		<span>{{ $t('password') }}</span>
 		<template #prefix><fa icon="lock"/></template>
 	</ui-input>
-	<ui-input v-if="user && user.twoFactorEnabled" v-model="token" type="number" required styl="fill">
+	<ui-input v-if="user && user.twoFactorEnabled" v-model="token" type="number" required>
 		<span>{{ $t('@.2fa') }}</span>
 		<template #prefix><fa icon="gavel"/></template>
 	</ui-input>

src/client/app/mobile/views/pages/welcome.vue

@@ -10,8 +10,8 @@
 			<p v-html="description || this.$t('@.about')"></p>
 			<router-link class="signup" to="/signup">{{ $t('signup') }}</router-link>
 		</div>
-		<div class="login">
-			<mk-signin :with-avatar="false"/>
+		<div class="signin">
+			<a href="/signin" @click.prevent="signin()">{{ $t('signin') }}</a>
 		</div>
 		<div class="tl">
 			<mk-welcome-timeline/>
@@ -120,6 +120,13 @@ export default Vue.extend({
 			const files = concat(notes.map((n: any): any[] => n.files));
 			this.photos = files.filter(f => image.includes(f.type)).slice(0, 6);
 		});
+	},
+	methods: {
+		signin() {
+			this.$root.dialog({
+				type: 'signin'
+			});
+		}
 	}
 });
 </script>
@@ -185,32 +192,9 @@ export default Vue.extend({
 			> .signup
 				font-weight bold
 
-		> .login
+		> .signin
 			margin 16px 0
 
-			> form
-
-				button
-					display block
-					width 100%
-					padding 10px
-					margin 0
-					color #333
-					font-size 1em
-					text-align center
-					text-decoration none
-					text-shadow 0 1px 0 rgba(255, 255, 255, 0.9)
-					background-image linear-gradient(#fafafa, #eaeaea)
-					border 1px solid #ddd
-					border-bottom-color #cecece
-					border-radius 4px
-
-					&:active
-						background-color #767676
-						background-image none
-						border-color #444
-						box-shadow 0 1px 3px rgba(#000, 0.075), inset 0 0 5px rgba(#000, 0.2)
-
 		> .tl
 			margin 16px 0