{t('errors.access-failed')}
- {t('errors.access-failed-link-text')}
);
});
diff --git a/app/scripts/react-directives/components/select/select.jsx b/app/scripts/react-directives/components/select/select.jsx
index 00a0fb1d..61013b71 100644
--- a/app/scripts/react-directives/components/select/select.jsx
+++ b/app/scripts/react-directives/components/select/select.jsx
@@ -10,6 +10,7 @@ const BootstrapLikeSelect = ({
onChange,
isClearable,
className,
+ disabled,
}) => {
const withGroups = options.some(el => 'options' in el);
const customStyles = {
@@ -37,6 +38,7 @@ const BootstrapLikeSelect = ({
onChange={onChange}
className={'wb-react-select' + (className ? ' ' + className : '')}
classNames={customClasses}
+ isDisabled={disabled}
/>
);
};
diff --git a/app/scripts/react-directives/forms/formStore.js b/app/scripts/react-directives/forms/formStore.js
index 29934975..7fa19f8f 100644
--- a/app/scripts/react-directives/forms/formStore.js
+++ b/app/scripts/react-directives/forms/formStore.js
@@ -3,10 +3,10 @@
import { makeAutoObservable } from 'mobx';
export class FormStore {
- constructor(name) {
+ constructor(name, params) {
this.type = 'object';
this.name = name;
- this.params = {};
+ this.params = params || {};
makeAutoObservable(this);
}
diff --git a/app/scripts/react-directives/forms/forms.jsx b/app/scripts/react-directives/forms/forms.jsx
index 0ae2376b..54e92236 100644
--- a/app/scripts/react-directives/forms/forms.jsx
+++ b/app/scripts/react-directives/forms/forms.jsx
@@ -85,6 +85,7 @@ export const FormSelect = observer(({ store, isClearable }) => {
setSelectedOption={store.selectedOption}
placeholder={store.placeholder}
onChange={value => store.setSelectedOption(value)}
+ disabled={store.readOnly}
/>
);
diff --git a/app/scripts/react-directives/forms/optionsStore.js b/app/scripts/react-directives/forms/optionsStore.js
index 5e8a3881..c0412d4e 100644
--- a/app/scripts/react-directives/forms/optionsStore.js
+++ b/app/scripts/react-directives/forms/optionsStore.js
@@ -19,6 +19,7 @@ export class OptionsStore {
this.selectedOption = null;
this.formColumns = null;
this.initialValue = value;
+ this.readOnly = false;
this.setValue(value);
makeObservable(this, {
@@ -73,6 +74,10 @@ export class OptionsStore {
this.formColumns = columns;
}
+ setReadOnly(value) {
+ this.readOnly = value;
+ }
+
get isDirty() {
return this.value !== this.initialValue;
}
@@ -83,5 +88,6 @@ export class OptionsStore {
reset() {
this.setValue(this.initialValue);
+ this.setReadOnly(false);
}
}
diff --git a/app/scripts/react-directives/users/pageStore.js b/app/scripts/react-directives/users/pageStore.js
new file mode 100644
index 00000000..7dac7cb0
--- /dev/null
+++ b/app/scripts/react-directives/users/pageStore.js
@@ -0,0 +1,232 @@
+'use strict';
+
+import { makeAutoObservable, runInAction } from 'mobx';
+import PageWrapperStore from '../components/page-wrapper/pageWrapperStore';
+import { StringStore } from '../forms/stringStore';
+import i18n from '../../i18n/react/config';
+import { FormStore } from '../forms/formStore';
+import { makeNotEmptyValidator } from '../forms/stringValidators';
+import FormModalState from '../components/modals/formModalState';
+import { OptionsStore } from '../forms/optionsStore';
+import ConfirmModalState from '../components/modals/confirmModalState';
+
+function sortUsers(users) {
+ users.sort((a, b) => {
+ if (a.type === b.type) {
+ return a.login.localeCompare(b.login);
+ }
+ return a.type.localeCompare(b.type);
+ });
+}
+
+class UsersPageAccessLevelStore {
+ constructor() {
+ this.notConfiguredAdmin = false;
+ this.accessGranted = true;
+
+ makeAutoObservable(this);
+ }
+
+ setNotConfiguredAdmin() {
+ this.notConfiguredAdmin = true;
+ this.accessGranted = true;
+ }
+
+ setAccessNotGranted() {
+ this.accessGranted = false;
+ }
+}
+
+class UsersPageStore {
+ constructor(rolesFactory) {
+ this.pageWrapperStore = new PageWrapperStore(i18n.t('users.title'));
+ this.accessLevelStore = new UsersPageAccessLevelStore();
+ this.userParamsStore = new FormStore('userParams', {
+ login: new StringStore({
+ name: i18n.t('users.labels.login'),
+ validator: makeNotEmptyValidator(),
+ }),
+ password: new StringStore({
+ name: i18n.t('users.labels.password'),
+ validator: makeNotEmptyValidator(),
+ }),
+ type: new OptionsStore({
+ name: i18n.t('users.labels.type'),
+ options: [
+ { value: 'user', label: i18n.t('users.labels.user') },
+ { value: 'operator', label: i18n.t('users.labels.operator') },
+ { value: 'admin', label: i18n.t('users.labels.admin') },
+ ],
+ value: 'user',
+ }),
+ });
+ this.formModalState = new FormModalState();
+ this.confirmModalState = new ConfirmModalState();
+ this.users = [];
+
+ makeAutoObservable(this);
+
+ rolesFactory.notConfiguredAdminPromise.then(() => {
+ if (rolesFactory.notConfiguredAdmin) {
+ this.accessLevelStore.setNotConfiguredAdmin();
+ this.pageWrapperStore.setLoading(false);
+ return;
+ }
+ if (rolesFactory.current.roles.isAdmin) {
+ this.loadUsers();
+ } else {
+ this.accessLevelStore.setAccessNotGranted();
+ this.pageWrapperStore.setLoading(false);
+ }
+ });
+ }
+
+ processFetchError(fetchResponse) {
+ switch (fetchResponse.status) {
+ case 403:
+ this.pageWrapperStore.setError(i18n.t('users.errors.forbidden'));
+ break;
+ case 404:
+ this.pageWrapperStore.setError(i18n.t('users.errors.old-backend'));
+ break;
+ default:
+ fetchResponse
+ .text()
+ .then(text =>
+ this.pageWrapperStore.setError(
+ i18n.t('users.errors.unknown', { msg: text, interpolation: { escapeValue: false } })
+ )
+ );
+ }
+ }
+
+ async showUserEditModal() {
+ return await this.formModalState.show(
+ i18n.t('users.labels.user'),
+ this.userParamsStore,
+ i18n.t('users.buttons.save')
+ );
+ }
+
+ async loadUsers() {
+ this.pageWrapperStore.setLoading(true);
+ try {
+ const res = await fetch('/auth/users');
+ if (res.ok) {
+ this.setUsers(await res.json());
+ } else {
+ this.processFetchError(res);
+ }
+ } catch (error) {
+ this.pageWrapperStore.setError(error);
+ this.setUsers([]);
+ } finally {
+ this.pageWrapperStore.setLoading(false);
+ }
+ }
+
+ setUsers(users) {
+ sortUsers(users);
+ this.users = users;
+ }
+
+ async execRequest(url, request) {
+ try {
+ this.pageWrapperStore.clearError();
+ this.pageWrapperStore.setLoading(true);
+ const res = await fetch(url, request);
+ if (res.ok) {
+ this.pageWrapperStore.setLoading(false);
+ return res;
+ }
+ this.processFetchError(res);
+ } catch (error) {
+ this.pageWrapperStore.setError(error);
+ }
+ this.pageWrapperStore.setLoading(false);
+ return null;
+ }
+
+ async addUser() {
+ this.userParamsStore.reset();
+ if (this.accessLevelStore.notConfiguredAdmin) {
+ this.userParamsStore.params.type.setValue('admin');
+ this.userParamsStore.params.type.setReadOnly(true);
+ }
+ const user = await this.showUserEditModal();
+ if (!user) {
+ return;
+ }
+ const res = await this.execRequest('/auth/users', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify(user),
+ });
+ if (res === null) {
+ return;
+ }
+ if (this.accessLevelStore.notConfiguredAdmin) {
+ window.location.href = '/login';
+ return;
+ }
+ res.text().then(text => {
+ runInAction(() => {
+ user.id = text;
+ this.users.push(user);
+ sortUsers(this.users);
+ });
+ });
+ }
+
+ async editUser(user) {
+ this.userParamsStore.reset();
+ this.userParamsStore.setValue(user);
+ let modifiedUser = await this.showUserEditModal();
+ if (!modifiedUser) {
+ return;
+ }
+ const res = await this.execRequest(`/auth/users/${user.id}`, {
+ method: 'PUT',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify(modifiedUser),
+ });
+ if (res == null) {
+ return;
+ }
+ user.name = modifiedUser.name;
+ user.type = modifiedUser.type;
+ sortUsers(this.users);
+ }
+
+ async showDeleteConfirmModal(user) {
+ return this.confirmModalState.show(
+ i18n.t('users.labels.confirm-delete', { name: user.login }),
+ [
+ {
+ label: i18n.t('users.buttons.delete'),
+ type: 'danger',
+ },
+ ]
+ );
+ }
+
+ async deleteUser(user) {
+ if ((await this.showDeleteConfirmModal(user)) == 'ok') {
+ const res = await this.execRequest(`/auth/users/${user.id}`, {
+ method: 'DELETE',
+ });
+ if (res === null) {
+ return;
+ }
+ runInAction(() => {
+ this.users = this.users.filter(u => u.id !== user.id);
+ });
+ }
+ }
+}
+
+export default UsersPageStore;
diff --git a/app/scripts/react-directives/users/users.js b/app/scripts/react-directives/users/users.js
new file mode 100644
index 00000000..9909d803
--- /dev/null
+++ b/app/scripts/react-directives/users/users.js
@@ -0,0 +1,27 @@
+'use strict';
+
+import ReactDOM from 'react-dom/client';
+import CreateUsersPage from './usersPage';
+import UsersStore from './pageStore';
+import { setReactLocale } from '../locale';
+
+function usersDirective(rolesFactory) {
+ 'ngInject';
+
+ setReactLocale();
+ return {
+ restrict: 'E',
+ scope: {},
+ link: function (scope, element) {
+ scope.store = new UsersStore(rolesFactory);
+ scope.root = ReactDOM.createRoot(element[0]);
+ scope.root.render(CreateUsersPage({ store: scope.store }));
+
+ element.on('$destroy', function () {
+ scope.root.unmount();
+ });
+ },
+ };
+}
+
+export default usersDirective;
diff --git a/app/scripts/react-directives/users/usersPage.jsx b/app/scripts/react-directives/users/usersPage.jsx
new file mode 100644
index 00000000..4fd9c402
--- /dev/null
+++ b/app/scripts/react-directives/users/usersPage.jsx
@@ -0,0 +1,72 @@
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+import { PageWrapper, PageTitle, PageBody } from '../components/page-wrapper/pageWrapper';
+import { useTranslation } from 'react-i18next';
+import FormModal from '../components/modals/formModal';
+import { Button } from '../common';
+import ConfirmModal from '../components/modals/confirmModal';
+
+const UsersPage = observer(({ store }) => {
+ const { t } = useTranslation();
+ return (
+
+
+ | {t('users.labels.login')} | +{t('users.labels.type')} | ++ |
|---|---|---|
| {user.login} | +{t('users.labels.' + user.type)} | +
+
+
+ |
+
{{'access.title'}}
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
--
-
-
-
+
-
-
-{{'configurations.labels.notice' | translate}}
- {{'configurations.labels.access' | translate}}.
+ng-hide="$ctrl.haveRights">{{'configurations.labels.access-notice' | translate}}
{{'configurations.title'}}
{{'configurations.labels.notice' | translate}}
- {{'configurations.labels.access' | translate}}.
+ ng-hide="$ctrl.haveRights">{{'configurations.labels.access-notice' | translate}}
diff --git a/app/views/devices.html b/app/views/devices.html
index de075168..3bc5bbfc 100644
--- a/app/views/devices.html
+++ b/app/views/devices.html
@@ -1,6 +1,5 @@
{{'devices.labels.notice' | translate}}
- {{'devices.labels.access' | translate}}.
+ ng-hide="$ctrl.haveRights">{{'devices.labels.access-notice' | translate}}
{{'devices.labels.nothing'}}
diff --git a/app/views/logs.html b/app/views/logs.html
index b03a385a..186b08b1 100644
--- a/app/views/logs.html
+++ b/app/views/logs.html
@@ -5,8 +5,7 @@ {{'rules.labels.notice' | translate}}
- {{'rules.labels.access' | translate}}.
+ ng-hide="$ctrl.haveRights">{{'rules.labels.access-notice' | translate}}
diff --git a/app/views/network-connections.html b/app/views/network-connections.html
index 411612ce..353e7e01 100644
--- a/app/views/network-connections.html
+++ b/app/views/network-connections.html
@@ -1,6 +1,5 @@
diff --git a/app/views/scripts.html b/app/views/scripts.html
index 7149b580..ff526323 100644
--- a/app/views/scripts.html
+++ b/app/views/scripts.html
@@ -3,8 +3,7 @@
diff --git a/app/views/system.html b/app/views/system.html
index cd6865ef..b9f099a0 100644
--- a/app/views/system.html
+++ b/app/views/system.html
@@ -1,8 +1,7 @@
diff --git a/debian/changelog b/debian/changelog
index 1b7b3455..ffb8521b 100644
--- a/debian/changelog
+++ b/debian/changelog
@@ -1,3 +1,9 @@
+wb-mqtt-homeui (2.108.0) stable; urgency=medium
+
+ * Add authentication
+
+ -- Petr Krasnoshchekov Wed, 18 Dec 2024 15:49:56 +0500
+
wb-mqtt-homeui (2.107.4) stable; urgency=medium
* Fix enum translations in text dashboards
diff --git a/debian/control b/debian/control
index 9d539b82..08a0a57f 100644
--- a/debian/control
+++ b/debian/control
@@ -1,5 +1,5 @@
Source: wb-mqtt-homeui
-Maintainer: Evgeny Boger
+Maintainer: Wiren Board team
Section: misc
Priority: optional
Standards-Version: 4.5.1
@@ -10,7 +10,7 @@ Package: wb-mqtt-homeui
Architecture: all
Conflicts: wb-homa-webinterface
Depends: ${shlibs:Depends}, ${misc:Depends}, mosquitto, mqtt-wss, mqtt-tools, nginx-extras, diffutils, wb-utils (>= 4.20.1),
- wb-configs (>= 3.26.0)
+ wb-configs (>= 3.35.0~~)
Recommends: wb-mqtt-logs, wb-device-manager
Suggests: wb-mqtt-confed (>= 1.4.0),
Breaks: wb-mqtt-confed (<< 1.0.3), wb-mqtt-db (<< 1.5), wb-mqtt-serial (<< 2.116.0~~), wb-device-manager (<< 1.4.0~~),
diff --git a/login/login.html b/login/login.html
new file mode 100644
index 00000000..068645d4
--- /dev/null
+++ b/login/login.html
@@ -0,0 +1,185 @@
+
+
+
+
+
+
+ Login Page
+
+
+
+
{{'configurations.labels.notice' | translate}}
- {{'configurations.labels.access' | translate}}.
+ng-hide="$ctrl.haveRights">{{'configurations.labels.access-notice' | translate}}
{{'rules.title'}}
{{'rules.labels.notice' | translate}}
- {{'rules.labels.access' | translate}}.
+ ng-hide="$ctrl.haveRights">{{'rules.labels.access-notice' | translate}}
{{'system.title'}}
{{'rules.labels.notice' | translate}}
- {{'rules.labels.access' | translate}}.
+ ng-hide="$ctrl.haveRights">{{'rules.labels.access-notice' | translate}}
+ 
+
+
+
+
+
+
\ No newline at end of file
diff --git a/webpack.config.js b/webpack.config.js
index 490e8145..97360b05 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -87,13 +87,19 @@ module.exports = (function makeWebpackConfig() {
type: 'asset/resource',
},
{
- // without hash
- test: /\.(svg|woff|woff2|ttf|eot)$/,
+ test: /\.(svg)$/,
type: 'asset/resource',
generator: {
filename: '[name][ext]',
},
},
+ {
+ test: /\.(woff|woff2|ttf|eot)$/,
+ type: 'asset/resource',
+ generator: {
+ filename: 'fonts/[name][ext]',
+ },
+ },
{
test: /\.html$/,
type: 'asset/source',
@@ -305,6 +311,12 @@ module.exports = (function makeWebpackConfig() {
},
port: 8080,
hot: true,
+ proxy: [
+ {
+ context: ['/auth/check_config', '/auth/users', '/login'],
+ target: 'http://10.200.200.1',
+ },
+ ],
};
return config;
+
+
+