Skip to content

Commit

Permalink
Start Migration to Vue
Browse files Browse the repository at this point in the history
Signed-off-by: Gary Kim <gary@garykim.dev>
  • Loading branch information
gary-kim committed Jul 28, 2021
1 parent 7fdb0ea commit 6c49d8e
Show file tree
Hide file tree
Showing 15 changed files with 235 additions and 95 deletions.
4 changes: 4 additions & 0 deletions .editorconfig
Original file line number Diff line number Diff line change
Expand Up @@ -15,3 +15,7 @@ indent_style = space
[*.json]
indent_size = 4
indent_style = space

[*.vue]
indent_size = 4
indent_style = space
2 changes: 2 additions & 0 deletions lib/AppInfo/Application.php
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,8 @@ class Application extends App {
'show_labs_settings' => 'true',
'set_custom_permalink' => 'false',
'sso_immediate_redirect' => 'false',

// Default is set in the OCA\RiotChat\Settings\ShareAdmin class
'share_domain' => '',
'share_prefix' => '',
'share_suffix' => '',
Expand Down
3 changes: 2 additions & 1 deletion lib/Settings/ElementAdmin.php → lib/Settings/Admin.php
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
use OCP\IUserSession;
use OCP\Settings\ISettings;

class ElementAdmin implements ISettings {
class Admin implements ISettings {

/** @var IConfig */
private $config;
Expand Down Expand Up @@ -58,6 +58,7 @@ public function __construct(IConfig $config, IUserSession $user, IInitialStateSe
*/
public function getForm() {
foreach (Application::AvailableSettings as $key => $default) {
// TODO: Don't send non-Element related settings here
$data = $this->config->getAppValue(Application::APP_ID, $key, $default);
$this->initialStateService->provideInitialState(Application::APP_ID, $key, $data);
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
use OCP\IURLGenerator;
use OCP\Settings\IIconSection;

class ElementAdminSection implements IIconSection {
class AdminSection implements IIconSection {

/** @var IURLGenerator */
private $urlGenerator;
Expand Down
15 changes: 2 additions & 13 deletions lib/Settings/Personal.php
Original file line number Diff line number Diff line change
Expand Up @@ -22,27 +22,16 @@

namespace OCA\RiotChat\Settings;

use OCA\RiotChat\AppInfo\Application;
use OCP\AppFramework\Http\TemplateResponse;
use OCP\IConfig;
use OCP\Settings\ISettings;

class Personal implements ISettings {
private $config;
protected $appName;

public function __construct(
string $appName,
IConfig $config
) {
$this->appName = $appName;
$this->config = $config;
}

public function getForm() {
$parameters = [
'appName' => $this->appName,
];
return new TemplateResponse($this->appName, 'settings/personal', $parameters, '');
return new TemplateResponse(Application::APP_ID, 'settings/personal');
}

public function getSection() {
Expand Down
1 change: 1 addition & 0 deletions lib/Settings/ShareAdmin.php
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,7 @@ public function getForm() {
$this->initialStateService->provideInitialState(Application::APP_ID, 'share_domain', $this->getAppValue('share_domain', $this->config->getSystemValue('trusted_domains')[0]));
$this->initialStateService->provideInitialState(Application::APP_ID, 'share_prefix', $this->getAppValue('share_prefix'));
$this->initialStateService->provideInitialState(Application::APP_ID, 'share_suffix', $this->getAppValue('share_suffix'));

return new TemplateResponse(Application::APP_ID, 'settings/share-admin');
}

Expand Down
6 changes: 3 additions & 3 deletions src/elementAdminSettings.js → src/adminSettings.js
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
*/

import Vue from 'vue';
import ElementAdminSettings from "./components/settings/ElementAdminSettings";
import AdminSettings from "./components/settings/AdminSettings";

document.addEventListener('DOMContentLoaded', main);

Expand All @@ -31,7 +31,7 @@ function main () {
Vue.prototype.OC = window.OC;
Vue.prototype.OCA = window.OCA;

const View = Vue.extend(ElementAdminSettings);
const View = Vue.extend(AdminSettings);
const view = new View();
view.$mount('#riotchat-element-admin-settings');
view.$mount('#riotchat-admin-settings');
}
File renamed without changes.
131 changes: 131 additions & 0 deletions src/components/settings/PersonalSettings.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,131 @@
<!--
- @copyright Copyright (c) 2021 Sorunome <mail@sorunome.de>
- @copyright Copyright (c) 2020-2021 Gary Kim <gary@garykim.dev>
- @copyright Copyright (c) 2020 Samuel Llamzon
-
- @author Sorunome <mail@sorunome.de>
-
- @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/>.
-
-->

<template>
<div class="section">
<SettingsSection
:title="t('riotchat', 'Matrix Login')"
:description="t('riotchat', 'Log in to your Matrix Account')"
>
<form @submit="login">
<label
ref="matrix_username"
for="matrix_username"
>{{ t('riotchat', 'Matrix Username:') }}</label>
<input
id="matrix_username"
v-model="matrix_username"
type="text"
>
<br>
<label
ref="matrix_password"
for="matrix_password"
>{{ t('riotchat', 'Matrix Password:') }}</label>
<input
id="matrix_password"
v-model="matrix_password"
type="text"
>
<input type="submit" value="login">
<br>
</form>
<template v-if="loggedIn">
<p>{{ currentlyLoggedInMessage }}</p>
<input type="button" @submit="logout">
</template>
</SettingsSection>
</div>
</template>

<script>
import Axios from '@nextcloud/axios';
import { showError, showSuccess } from '@nextcloud/dialogs';
import { generateUrl } from '@nextcloud/router';
import { loadState } from '@nextcloud/initial-state';
import { SettingsSection, Tooltip } from '@nextcloud/vue';
export default {
name: "PersonalSettings",
components: {
SettingsSection,
},
directives: {
Tooltip,
},
data() {
return {
// Form inputs
"matrix_username": "",
"matrix_password": "",
// Data
"loggedIn": false,
"currentUsername": "",
};
},
computed: {
currentlyLoggedInMessage() {
return this.t('riotchat', 'Currently logged in as {username}', {
username: this.currentUsername,
});
}
},
methods: {
login () {
const url = generateUrl('apps/riotchat/share/login');
Axios.post(
url,
{
username: this.username,
password: this.password,
}
).then(() => {
showSuccess(t('riotchat', 'Successfully logged into Matrix account'));
this.whoAmI();
}).catch(() => {
showSuccess(t('riotchat', 'Failed to login to Matrix account. Are your account details correct?'));
});
},
logout () {
const url = generateUrl('apps/riotchat/share/logout');
Axios.post(url).then(this.whoAmI).catch(() => {
showError(t('riotchat', 'Failed to logout of Matrix account.'));
});
},
whoAmI () {
const url = generateUrl('apps/riotchat/share/whoami');
Axios.get(url).then((res) => {
this.loggedIn = res.data.logged_in;
this.currentUsername = res.data.user_id;
}).catch(() => {
showError(t('riotchat', 'Could not load user info. Please reload the page.'));
});
}
},
mounted () {
this.whoAmI();
},
}
</script>
94 changes: 43 additions & 51 deletions src/components/settings/ShareAdminSettings.vue
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<!--
- @copyright Copyright (c) 2021 Sorunome <mail@sorunome.de>
- @copyright Copyright (c) 2020 Gary Kim <gary@garykim.dev>
- @copyright Copyright (c) 2020-2021 Gary Kim <gary@garykim.dev>
- @copyright Copyright (c) 2020 Samuel Llamzon
-
- @author Sorunome <mail@sorunome.de>
Expand All @@ -24,43 +24,43 @@

<template>
<div>
<SettingsSection
:title="t('roitchat', 'Matrix Sharing')"
:description="t('riotchat', 'Configure how to share things into matrix.')"
>
<label
ref="share_domain"
for="share_domain"
>{{ t('riotchat', 'Domain:') }}</label>
<input
id="share_domain"
v-model="share_domain"
type="text"
@change="updateSetting('share_domain')"
>
<br>
<label
ref="share_prefix"
for="share_prefix"
>{{ t('riotchat', 'Prefix:') }}</label>
<input
id="share_prefix"
v-model="share_prefix"
type="text"
@change="updateSetting('share_prefix')"
>
<br>
<label
ref="share_suffix"
for="share_suffix"
>{{ t('riotchat', 'Suffix:') }}</label>
<input
id="share_suffix"
v-model="share_suffix"
type="text"
@change="updateSetting('share_suffix')"
>
</SettingsSection>
<SettingsSection
:title="t('riotchat', 'Matrix Sharing')"
:description="t('riotchat', 'Configure how to share things into matrix.')"
>
<label
ref="share_domain"
for="share_domain"
>{{ t('riotchat', 'Domain:') }}</label>
<input
id="share_domain"
v-model="share_domain"
type="text"
@change="updateSetting('share_domain')"
>
<br>
<label
ref="share_prefix"
for="share_prefix"
>{{ t('riotchat', 'Prefix:') }}</label>
<input
id="share_prefix"
v-model="share_prefix"
type="text"
@change="updateSetting('share_prefix')"
>
<br>
<label
ref="share_suffix"
for="share_suffix"
>{{ t('riotchat', 'Suffix:') }}</label>
<input
id="share_suffix"
v-model="share_suffix"
type="text"
@change="updateSetting('share_suffix')"
>
</SettingsSection>
</div>
</template>

Expand All @@ -81,9 +81,9 @@ export default {
},
data() {
return {
"share_domain": loadState('riotchat', 'share_domain'),
"share_prefix": loadState('riotchat', 'share_prefix'),
"share_suffix": loadState('riotchat', 'share_suffix'),
"share_domain": loadState('riotchat', 'share_domain'),
"share_prefix": loadState('riotchat', 'share_prefix'),
"share_suffix": loadState('riotchat', 'share_suffix'),
};
},
methods: {
Expand All @@ -98,17 +98,9 @@ export default {
Axios.put(generateUrl(`apps/riotchat/settings/${setting}`), {
value,
}).then(() => {
if (settingName === 'custom_json') {
showSuccess(t('riotchat', 'Custom config has been set'));
} else {
showSuccess(t('riotchat', '{settingName} has been set to {value}', { settingName, value }));
}
showSuccess(t('riotchat', '{settingName} has been set to {value}', { settingName, value }));
}).catch(() => {
if (settingName === 'custom_json') {
showSuccess(t('riotchat', 'Custom config could not be set. Try reloading the page.'));
} else {
showError(t('riotchat', '{settingName} could not be set. Try reloading the page.', { settingName }));
}
showError(t('riotchat', '{settingName} could not be set. Try reloading the page.', { settingName }));
});
},
Expand Down
37 changes: 37 additions & 0 deletions src/personalSettings.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
/**
* @copyright Copyright (c) 2020-2021 Gary Kim <gary@garykim.dev>
*
* @author Gary Kim <gary@garykim.dev>
*
* @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 PersonalSettings from "./components/settings/PersonalSettings";

document.addEventListener('DOMContentLoaded', main);

function main () {
Vue.prototype.t = t;
Vue.prototype.n = n;
Vue.prototype.OC = window.OC;
Vue.prototype.OCA = window.OCA;

const View = Vue.extend(PersonalSettings);
const view = new View();
view.$mount('#riotchat-personal-settings');
}
5 changes: 5 additions & 0 deletions templates/settings/admin.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
<?php
script('riotchat', 'adminSettings');
?>

<div id="riotchat-admin-settings"></div>
Loading

0 comments on commit 6c49d8e

Please sign in to comment.