Implement frontend for ostatus popup

Signed-off-by: Julius Härtl <jus@bitgrid.net>

2 files changed, 119 insertions, 0 deletions

diff --git a/src/ostatus.js b/src/ostatus.js
new file mode 100644
index 00000000..b02f6b7e
--- /dev/null
+++ b/src/ostatus.js
@@ -0,0 +1,41 @@
+/*
+ * @copyright Copyright (c) 2019 Julius Härtl <jus@bitgrid.net>
+ *
+ * @author Julius Härtl <jus@bitgrid.net>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+import Vue from 'vue'
+import store from './store'
+import OStatus from './views/OStatus'
+
+// eslint-disable-next-line
+__webpack_nonce__ = btoa(OC.requestToken)
+// eslint-disable-next-line
+__webpack_public_path__ = OC.linkTo('social', 'js/')
+
+Vue.prototype.t = t
+Vue.prototype.n = n
+Vue.prototype.OC = OC
+Vue.prototype.OCA = OCA
+
+/* eslint-disable-next-line no-new */
+new Vue({
+	render: h => h(OStatus),
+	store: store
+}).$mount('#vue-content')
diff --git a/src/views/OStatus.vue b/src/views/OStatus.vue
new file mode 100644
index 00000000..dcda26b1
--- /dev/null
+++ b/src/views/OStatus.vue
@@ -0,0 +1,78 @@
+<template>
+	<div>
+		<h2>{{ t('social', 'Follow on Nextcloud Social') }}</h2>
+		<div v-if="accountInfo">
+			<p>{{ t('social', 'Hello') }} <avatar :user="currentUser.uid" :size="16" />{{ currentUser.displayName }}</p>
+			<p>{{ t('social', 'Please confirm that you want to follow this account:') }}</p>
+
+			<avatar :url="avatarUrl" :disable-tooltip="true" :size="128" />
+			<h2>{{ displayName }}</h2>
+			<form @submit.prevent="follow">
+				<input type="text" :value="serverData.account">
+				<input type="submit" class="primary" value="Follow">
+			</form>
+		</div>
+		<div :class="{ 'icon-loading-dark': !accountInfo }" />
+	</div>
+</template>
+
+<style scoped>
+	h2, p {
+		color: var(--color-primary-text);
+	}
+	.avatardiv {
+		vertical-align: -4px;
+		margin-right: 3px;
+	}
+</style>
+
+<script>
+import { Avatar } from 'nextcloud-vue'
+import currentuserMixin from './../mixins/currentUserMixin'
+
+export default {
+	name: 'App',
+	components: {
+		Avatar
+	},
+	mixins: [currentuserMixin],
+	computed: {
+		account() {
+			return this.serverData.account
+		},
+		avatarUrl() {
+			return OC.generateUrl('/apps/social/api/v1/global/actor/avatar?id=' + this.accountInfo.id)
+		},
+		accountInfo: function() {
+			return this.$store.getters.getAccount(this.serverData.account)
+		},
+		currentUser() {
+			return window.oc_current_user
+		},
+		displayName() {
+			if (typeof this.accountInfo.name !== 'undefined' && this.accountInfo.name !== '') {
+				return this.accountInfo.name
+			}
+			return this.account
+		}
+	},
+	beforeMount: function() {
+		// importing server data into the store
+		const serverDataElmt = document.getElementById('serverData')
+		if (serverDataElmt !== null) {
+			const serverData = JSON.parse(document.getElementById('serverData').dataset.server)
+			window.oc_current_user = JSON.parse(JSON.stringify(serverData.currentUser))
+			this.$store.commit('setServerData', serverData)
+			this.$store.dispatch('fetchAccountInfo', this.serverData.account)
+
+		}
+	},
+	methods: {
+		follow() {
+			this.$store.dispatch('followAccount', { currentAccount: this.cloudId, accountToFollow: this.account }).then(() => {
+				window.location = this.serverData.url
+			})
+		}
+	}
+}
+</script>