#163

4 files changed, 180 insertions, 7 deletions

diff --git a/src/web/app/mobile/router.js b/src/web/app/mobile/router.js
index d0b45d9614..de4108a593 100644
--- a/src/web/app/mobile/router.js
+++ b/src/web/app/mobile/router.js
@@ -15,6 +15,7 @@ export default me => {
 	route('/i/drive/folder/:folder',     drive);
 	route('/i/drive/file/:file',         drive);
 	route('/i/settings',                 settings);
+	route('/i/settings/profile',         settingsProfile);
 	route('/i/settings/signin-history',  settingsSignin);
 	route('/i/settings/api',             settingsApi);
 	route('/i/settings/twitter',         settingsTwitter);
@@ -63,6 +64,10 @@ export default me => {
 		mount(document.createElement('mk-settings-page'));
 	}
 
+	function settingsProfile() {
+		mount(document.createElement('mk-profile-setting-page'));
+	}
+
 	function settingsSignin() {
 		mount(document.createElement('mk-signin-history-page'));
 	}
@@ -130,6 +135,7 @@ export default me => {
 };
 
 function mount(content) {
+	document.documentElement.style.background = '#fff';
 	if (page) page.unmount();
 	const body = document.getElementById('app');
 	page = riot.mount(body.appendChild(content))[0];
diff --git a/src/web/app/mobile/tags/index.js b/src/web/app/mobile/tags/index.js
index 02d1541fcd..2e6b478079 100644
--- a/src/web/app/mobile/tags/index.js
+++ b/src/web/app/mobile/tags/index.js
@@ -14,6 +14,7 @@ require('./page/post.tag');
 require('./page/new-post.tag');
 require('./page/search.tag');
 require('./page/settings.tag');
+require('./page/settings/profile.tag');
 require('./page/settings/signin.tag');
 require('./page/settings/api.tag');
 require('./page/settings/authorized-apps.tag');
diff --git a/src/web/app/mobile/tags/page/settings.tag b/src/web/app/mobile/tags/page/settings.tag
index 58094a876a..710591071d 100644
--- a/src/web/app/mobile/tags/page/settings.tag
+++ b/src/web/app/mobile/tags/page/settings.tag
@@ -1,12 +1,6 @@
 <mk-settings-page>
 	<mk-ui ref="ui">
-		<ul>
-			<li><a><i class="fa fa-user"></i>%i18n:mobile.tags.mk-settings-page.profile%</a></li>
-			<li><a href="./settings/authorized-apps"><i class="fa fa-puzzle-piece"></i>%i18n:mobile.tags.mk-settings-page.applications%</a></li>
-			<li><a href="./settings/twitter"><i class="fa fa-twitter"></i>%i18n:mobile.tags.mk-settings-page.twitter-integration%</a></li>
-			<li><a href="./settings/signin-history"><i class="fa fa-sign-in"></i>%i18n:mobile.tags.mk-settings-page.signin-history%</a></li>
-			<li><a href="./settings/api"><i class="fa fa-key"></i>API</a></li>
-		</ul>
+		<mk-settings />
 	</mk-ui>
 	<style>
 		:scope
@@ -18,6 +12,72 @@
 		this.on('mount', () => {
 			document.title = 'Misskey | %i18n:mobile.tags.mk-settings-page.settings%';
 			ui.trigger('title', '<i class="fa fa-cog"></i>%i18n:mobile.tags.mk-settings-page.settings%');
+			document.documentElement.style.background = '#eee';
 		});
 	</script>
 </mk-settings-page>
+
+<mk-settings>
+	<p><mk-raw content={ '%i18n:mobile.tags.mk-settings.signed-in-as%'.replace('{}', '<b>' + I.name + '</b>') }/></p>
+	<ul>
+		<li><a href="./settings/profile"><i class="fa fa-user"></i>%i18n:mobile.tags.mk-settings-page.profile%<i class="fa fa-angle-right"></i></a></li>
+		<li><a href="./settings/authorized-apps"><i class="fa fa-puzzle-piece"></i>%i18n:mobile.tags.mk-settings-page.applications%<i class="fa fa-angle-right"></i></a></li>
+		<li><a href="./settings/twitter"><i class="fa fa-twitter"></i>%i18n:mobile.tags.mk-settings-page.twitter-integration%<i class="fa fa-angle-right"></i></a></li>
+		<li><a href="./settings/signin-history"><i class="fa fa-sign-in"></i>%i18n:mobile.tags.mk-settings-page.signin-history%<i class="fa fa-angle-right"></i></a></li>
+		<li><a href="./settings/api"><i class="fa fa-key"></i>%i18n:mobile.tags.mk-settings-page.api%<i class="fa fa-angle-right"></i></a></li>
+	</ul>
+	<ul>
+		<li><a onclick={ signout }><i class="fa fa-power-off"></i>%i18n:mobile.tags.mk-settings-page.signout%</a></li>
+	</ul>
+	<style>
+		:scope
+			display block
+
+			> p
+				display block
+				margin 24px
+				text-align center
+				color #555
+
+			> ul
+				display block
+				margin 16px 0
+				padding 0
+				list-style none
+				border-top solid 1px #aaa
+
+				> li
+					display block
+					background #fff
+					border-bottom solid 1px #aaa
+
+					> a
+						$height = 48px
+
+						display block
+						position relative
+						padding 0 16px
+						line-height $height
+						color #4d635e
+
+						> i:nth-of-type(1)
+							margin-right 4px
+
+						> i:nth-of-type(2)
+							display block
+							position absolute
+							top 0
+							right 8px
+							z-index 1
+							padding 0 20px
+							font-size 1.2em
+							line-height $height
+
+	</style>
+	<script>
+		import signout from '../../../common/scripts/signout';
+		this.signout = signout;
+
+		this.mixin('i');
+	</script>
+</mk-settings>
diff --git a/src/web/app/mobile/tags/page/settings/profile.tag b/src/web/app/mobile/tags/page/settings/profile.tag
new file mode 100644
index 0000000000..dfe0586c1c
--- /dev/null
+++ b/src/web/app/mobile/tags/page/settings/profile.tag
@@ -0,0 +1,106 @@
+<mk-profile-setting-page>
+	<mk-ui ref="ui">
+		<mk-profile-setting/>
+	</mk-ui>
+	<style>
+		:scope
+			display block
+	</style>
+	<script>
+		import ui from '../../../scripts/ui-event';
+
+		this.on('mount', () => {
+			document.title = 'Misskey | %i18n:mobile.tags.mk-profile-setting-page.title%';
+			ui.trigger('title', '<i class="fa fa-user"></i>%i18n:mobile.tags.mk-profile-setting-page.title%');
+			document.documentElement.style.background = '#eee';
+		});
+	</script>
+</mk-profile-setting-page>
+
+<mk-profile-setting>
+	<label>
+		<p>%i18n:mobile.tags.mk-profile-setting.name%</p>
+		<input ref="name" type="text" value={ I.name }/>
+	</label>
+	<label>
+		<p>%i18n:mobile.tags.mk-profile-setting.location%</p>
+		<input ref="location" type="text" value={ I.profile.location }/>
+	</label>
+	<label>
+		<p>%i18n:mobile.tags.mk-profile-setting.description%</p>
+		<textarea ref="description">{ I.description }</textarea>
+	</label>
+	<label>
+		<p>%i18n:mobile.tags.mk-profile-setting.birthday%</p>
+		<input ref="birthday" type="date" value={ I.profile.birthday }/>
+	</label>
+	<button class="save" onclick={ save } disabled={ saving }><i class="fa fa-check"></i>%i18n:mobile.tags.mk-profile-setting.save%</button>
+	<style>
+		:scope
+			display block
+
+			> label
+				display block
+				margin 0
+				padding 16px 0
+
+				> p:first-child
+					display block
+					margin 0
+					padding 0 0 4px 8px
+					font-weight bold
+					color #333
+
+				> input[type="text"]
+				> textarea
+					display block
+					width 100%
+					padding 12px
+					font-size 16px
+					border none
+					border-radius none
+
+				> textarea
+					min-height 80px
+
+			> .save
+				display block
+				margin 8px
+				padding 16px
+				width calc(100% - 16px)
+				font-size 16px
+				color $theme-color-foreground
+				background $theme-color
+				border-radius 4px
+
+				&:disabled
+					opacity 0.7
+
+				> i
+					margin-right 4px
+
+	</style>
+	<script>
+		this.mixin('i');
+		this.mixin('api');
+
+		this.save = () => {
+			this.update({
+				saving: true
+			});
+
+			this.api('i/update', {
+				name: this.refs.name.value,
+				location: this.refs.location.value || null,
+				description: this.refs.description.value || null,
+				birthday: this.refs.birthday.value || null
+			}).then(() => {
+				this.update({
+					saving: false
+				});
+
+				alert('%i18n:mobile.tags.mk-profile-setting.saved%');
+			});
+		};
+	</script>
+</mk-profile-setting>