Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add authentication #681

Closed
wants to merge 14 commits into from
Closed

Add authentication #681

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
fd1bc40
Add authentication
KraPete Dec 25, 2024
2f4e5a3
Fix
KraPete Dec 25, 2024
18513cf
Fix
KraPete Dec 25, 2024
9010f2f
Fix
KraPete Dec 25, 2024
f92127c
Fix
KraPete Dec 25, 2024
7107b3e
Fix
KraPete Dec 25, 2024
85d7d52
Add users table
KraPete Dec 28, 2024
0fe56c1
Add russian translation to login
KraPete Jan 10, 2025
387ad79
Update login/login.html
KraPete Jan 10, 2025
31bc79b
Update login/login.html
KraPete Jan 10, 2025
1cd45ea
Update login/login.html
KraPete Jan 10, 2025
ba0622e
Do not show user menu if users are not set
KraPete Jan 14, 2025
fd6a9b7
Fix english translation
KraPete Jan 20, 2025
ce18573
fix local dev mode (#683)
ninedev-i Jan 21, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,3 +24,5 @@ coverage
*.tsv
.vscode
.prettierrc

.env
6 changes: 3 additions & 3 deletions Makefile
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,7 @@ install: configs
install -d -m 0777 $(DESTDIR)/var/www/images
install -d -m 0777 $(DESTDIR)/var/www/uploads
install -d -m 0777 $(DESTDIR)/var/www/scripts/i18n
install -d -m 0755 $(DESTDIR)/var/www/fonts

cp -a dist/css/*.css $(DESTDIR)/var/www/css
cp -a dist/images/* $(DESTDIR)/var/www/images
Expand All @@ -52,13 +53,12 @@ install: configs
cp -a dist/*.js $(DESTDIR)/var/www/
cp -a dist/*.svg $(DESTDIR)/var/www/
cp -a dist/*.png $(DESTDIR)/var/www/
cp -a dist/*.ttf $(DESTDIR)/var/www/
cp -a dist/*.woff $(DESTDIR)/var/www/
cp -a dist/*.woff2 $(DESTDIR)/var/www/ || :
cp -a dist/fonts/* $(DESTDIR)/var/www/fonts

install -m 0644 dist/404.html $(DESTDIR)/var/www/
install -m 0644 dist/robots.txt $(DESTDIR)/var/www/
install -m 0644 dist/index.html $(DESTDIR)/var/www/
install -m 0644 login/login.html $(DESTDIR)/var/www/
KraPete marked this conversation as resolved.
Show resolved Hide resolved

install -Dm0644 dist/configs/*.json -t $(DESTDIR)/usr/share/wb-mqtt-homeui
install -Dm0755 convert_config_v1v2.py $(DESTDIR)/usr/lib/wb-mqtt-homeui/convert_config_v1v2
Expand Down
1 change: 1 addition & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ See into [conventions](https://github.com/wirenboard/conventions/blob/main/READM
## Build & development

Run `npm run build` for building and `npm start` for preview.
To change the mqtt broker url create a "MQTT_BROKER_URI" variable in the .env file with your url.
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick (assertive)

Enhance the documentation clarity.

The MQTT broker URL configuration instruction could be clearer.

Consider this improvement:

-To change the mqtt broker url create a "MQTT_BROKER_URI" variable in the .env file with your url.
+To change the MQTT broker URL, create a "MQTT_BROKER_URI" variable in the .env file. For example:
+```
+MQTT_BROKER_URI=http://localhost:1883
+```
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
To change the mqtt broker url create a "MQTT_BROKER_URI" variable in the .env file with your url.
To change the MQTT broker URL, create a "MQTT_BROKER_URI" variable in the .env file. For example:
🧰 Tools
🪛 LanguageTool

[uncategorized] ~12-~12: A comma might be missing here.
Context: ... for preview. To change the mqtt broker url create a "MQTT_BROKER_URI" variable in ...

(AI_EN_LECTOR_MISSING_PUNCTUATION_COMMA)


## Default SVG-Dashboards

Expand Down
28 changes: 19 additions & 9 deletions app/index.ejs
View file
Open in desktop
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

И кажется надо переименовать пункт меню в Пользователи

Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,10 @@

<div id="wrapper" class="fade" ng-class="{ 'show-console': consoleVisible }">
<exp-check-widget></exp-check-widget>
<div class="alert alert-danger" role="alert" ng-cloak ng-if="roles.notConfiguredAdmin">
<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
<span translate>{{'app.errors.not-configured-admin'}}</span>
</div>
KraPete marked this conversation as resolved.
Show resolved Hide resolved

<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" ng-controller='NavigationCtrl'>
Expand All @@ -38,16 +42,22 @@
<a class="navbar-brand wb-navbar-brand" ui-sref="home">
<img src="images/logo.svg" alt="Wiren Board Web UI">
</a>
<p class="navbar-text navbar-right connection-status">
<span class="label label-custom access-level-label" ng-class="roles.current.roles.isAdmin ? 'label label-custom label-danger' : 'label label-custom label-warning'"
ng-show="roles.current.roles.shortName"
title="{{'navigation.access.title' | translate}} {{roles.current.roles.name | translate}}">
<span class="mobile-screen-access-level">{{roles.current.roles.shortName | translate}}</span>
<span class="big-screen-access-level">{{'navigation.access.title' | translate}} {{roles.current.roles.name | translate}}</span>
</span>
<div class="navbar-text navbar-right connection-status">
<span class="connected-status label label-success" ng-show="isConnected()" translate>{{'navigation.connection.active'}}</span>
<span class="connected-status label label-danger" ng-show="!isConnected()" translate>{{'navigation.connection.inactive'}}</span>
</p>
<div class="dropdown user-menu navbar-right" ng-if="!roles.notConfiguredAdmin">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

При разрешении ниже 768 пикселей дропдаун уезжает за экран
image

<i class="glyphicon glyphicon-user" id="userMenu" type="button" data-toggle="dropdown" aria-label="User menu" aria-haspopup="true" aria-expanded="false"></i>
<ul class="dropdown-menu" aria-labelledby="userMenu">
<li>
<span class='user-name' translate>{{roles.current.roles.name}}</span>
</li>
<li role="separator" class="divider"></li>
<li>
<a href="#" ng-click="logout()" translate>{{'app.buttons.logout'}}</a>
</li>
</ul>
</div>
</div>
</div>

<div class="nav navbar-nav navbar-right ma-0"></div>
Expand Down Expand Up @@ -102,7 +112,7 @@
<li>
<a data-toggle="collapse" data-target=".navbar-ex1-collapse" ui-sref="MQTTChannels" ui-sref-active="active">{{'navigation.menu.channels' | translate}}</a>
</li>
<li>
<li ng-if="showAccessControl()">
<a data-toggle="collapse" data-target=".navbar-ex1-collapse" ui-sref="accessLevel" ui-sref-active="active">{{'navigation.menu.access' | translate}}</a>
</li>
<li user-role="mto" current-role="roles.current.role">
Expand Down
30 changes: 10 additions & 20 deletions app/scripts/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,6 @@ import HomeCtrl from './controllers/homeController';
import NavigationCtrl from './controllers/navigationController';
import LoginCtrl from './controllers/loginController';
import MQTTCtrl from './controllers/MQTTChannelsController';
import AccessLevelCtrl from './controllers/accessLevelController';
import DateTimePickerModalCtrl from './controllers/dateTimePickerModalController';
import DiagnosticCtrl from './controllers/diagnosticController';
import BackupCtrl from './controllers/backupController';
Expand Down Expand Up @@ -95,6 +94,7 @@ import onResizeDirective from './directives/resize';
import confirmDirective from './directives/confirm';
import fullscreenToggleDirective from './directives/fullscreenToggle';
import expCheckMetaDirective from './react-directives/exp-check/exp-check';
import usersPageDirective from './react-directives/users/users';
KraPete marked this conversation as resolved.
Show resolved Hide resolved

// Angular routes
import routingModule from './app.routes';
Expand Down Expand Up @@ -178,7 +178,6 @@ module
.controller('HomeCtrl', HomeCtrl)
.controller('LoginCtrl', LoginCtrl)
.controller('MQTTCtrl', MQTTCtrl)
.controller('AccessLevelCtrl', AccessLevelCtrl)
.controller('DateTimePickerModalCtrl', DateTimePickerModalCtrl)
.controller('DiagnosticCtrl', DiagnosticCtrl)
.controller('BackupCtrl', BackupCtrl)
Expand Down Expand Up @@ -266,7 +265,8 @@ module
.directive('onResize', ['$parse', onResizeDirective])
.directive('ngConfirm', confirmDirective)
.directive('fullscreenToggle', fullscreenToggleDirective)
.directive('expCheckWidget', expCheckMetaDirective);
.directive('expCheckWidget', expCheckMetaDirective)
.directive('usersPage', usersPageDirective);

module
.config([
Expand All @@ -277,7 +277,6 @@ module
'app',
'console',
'help',
'access',
'mqtt',
'system',
'ui',
Expand Down Expand Up @@ -451,23 +450,14 @@ const realApp = angular
prefix: $window.localStorage['prefix'],
};

// detect auto url
var autoURL = new URL('/mqtt', $window.location.href);
autoURL.protocol = autoURL.protocol.replace('http', 'ws');

// FIXME: I know it's ugly, let's find more elegant way later
var isDev = $window.location.host === 'localhost:8080';

if (isDev) {
// local debug detected, enable MQTT url override via settings
if (!$window.localStorage.url) {
$window.localStorage.setItem('url', autoURL.href);
}
loginData['url'] = $window.localStorage['url'];
} else {
// no local debug detected, full auto
loginData['url'] = autoURL.href;
const loginUrl = new URL('/mqtt', $window.location.origin);

const isDev = $window.location.host === 'localhost:8080';

if (!isDev) {
loginUrl.protocol = loginUrl.protocol.replace('http', 'ws');
}
loginData.url = loginUrl.href;

let language = localStorage.getItem('language');
const supportedLanguages = ['en', 'ru'];
Expand Down
1 change: 0 additions & 1 deletion app/scripts/app.routes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,6 @@ function routing($stateProvider, $locationProvider, $urlRouterProvider) {
.state('accessLevel', {
url: '/access-level',
template: require('../views/access-level.html'),
controller: 'AccessLevelCtrl as $ctrl',
})
.state('scan', {
url: '/scan',
Expand Down
17 changes: 0 additions & 17 deletions app/scripts/components/loginForm/loginForm.controller.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,11 @@ class LoginFormCtrl {
constructor($window, $rootScope, $state, $location, rolesFactory) {
'ngInject';

var currentURL = new URL("/mqtt", $window.location.href);
currentURL.protocol = currentURL.protocol.replace('http', 'ws');

this.rootScope = $rootScope;
this.isDev = ($window.location.host === 'localhost:8080'); // FIXME: find more beautiful way to detect local dev
this.localStorage = $window.localStorage;
this.state = $state;
this.rolesFactory = rolesFactory;
this.currentURL = currentURL.href;
this.loginSettings = {};
this.loginSettings.url = this.localStorage['url'];
this.loginSettings.user = this.localStorage['user'];
this.loginSettings.password = this.localStorage['password'];
this.loginSettings.prefix = this.localStorage['prefix'];
Expand All @@ -26,17 +20,11 @@ class LoginFormCtrl {

//...........................................................................
$postLink() {
let url = this.loginSettings.url;
let useCredentials = this.loginSettings.useCredentials;
let user = this.loginSettings.user;
let password = this.loginSettings.password;
let prefix = this.loginSettings.prefix;

if (url) {
this.url = url;
} else {
this.url = this.currentURL;
}
if (useCredentials) {
this.useCredentials = useCredentials;
} else {
Expand All @@ -62,8 +50,6 @@ class LoginFormCtrl {
//...........................................................................
updateLoginSettings() {
// Update settings in Local Storage
if (this.isDev)
this.localStorage.setItem('url', this.url);

this.localStorage.setItem('prefix', this.prefix);

Expand All @@ -77,14 +63,11 @@ class LoginFormCtrl {

// Try to fetch UI config this new settings
let loginData = {
url: this.url,
user: this.user,
password: this.password,
prefix: this.prefix,
isDev: this.isDev,
};

this.rolesFactory.setRole(1);
this.rootScope.requestConfig(loginData);
location.reload();
}
Expand Down
8 changes: 0 additions & 8 deletions app/scripts/components/loginForm/loginForm.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,6 @@ <h3 class="panel-title"><i class="glyphicon glyphicon-log-in"></i> {{'login.titl
<form class="form-horizontal" name="$ctrl.loginForm"
ng-submit="$ctrl.loginForm.$valid ? $ctrl.updateLoginSettings() : ''" novalidate>

<div class="form-group" ng-if="$ctrl.isDev">
<label for="loginURL" class="col-sm-2 control-label" translate>{{'login.labels.url'}}</label>

<div class="col-sm-10">
<input type="text" class="form-control" id="loginURL" name="url" ng-model="$ctrl.url"
required>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
Expand Down
42 changes: 0 additions & 42 deletions app/scripts/controllers/accessLevelController.js
View file
Open in desktop

This file was deleted.

16 changes: 15 additions & 1 deletion app/scripts/controllers/navigationController.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,13 @@
whenMqttReady,
errors,
uiConfig,
rolesFactory
rolesFactory,
$rootScope
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick (assertive)

Add trailing comma for consistency
Trailing commas can improve diffs and code clarity.

🧰 Tools
🪛 eslint

[error] 12-13: Missing trailing comma.

(comma-dangle)

) {
'ngInject';

$scope.roles = rolesFactory;
$rootScope.roles = rolesFactory;
KraPete marked this conversation as resolved.
Show resolved Hide resolved
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick (assertive)

Avoid assigning to $rootScope parameter
Modifying injected Angular parameters can lead to unintentional side effects. If possible, consider referencing or wrapping the object instead.

🧰 Tools
🪛 eslint

[error] 17-17: Assignment to property of function parameter '$rootScope'.

(no-param-reassign)


$scope.isActive = function (viewLocation) {
return viewLocation === $location.path();
Expand Down Expand Up @@ -84,6 +86,18 @@
? pageWrapperClassList.remove(overlayClass)
: pageWrapperClassList.add(overlayClass);
};

$scope.showAccessControl = function () {
return rolesFactory.current.roles.isAdmin || rolesFactory.notConfiguredAdmin;
};

$scope.logout = function () {
fetch('/logout', {
method: 'POST',
}).then(() => {
window.location.href = '/login';

Check warning on line 98 in app/scripts/controllers/navigationController.js

View check run for this annotation

Codacy Production / Codacy Static Code Analysis

app/scripts/controllers/navigationController.js#L98 

Dangerous location.href assignment can lead to XSS. Please use escape('/login') as a wrapper for escaping
});
Comment on lines +94 to +99
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick (assertive)

Handle errors when logging out
The logout process uses a fetch call without a .catch(...). Consider adding error handling logic (e.g., network issues).

};
KraPete marked this conversation as resolved.
Show resolved Hide resolved
}

//-----------------------------------------------------------------------------
Expand Down
27 changes: 0 additions & 27 deletions app/scripts/i18n/access/en.json
View file
Open in desktop

This file was deleted.

27 changes: 0 additions & 27 deletions app/scripts/i18n/access/ru.json
View file
Open in desktop

This file was deleted.

11 changes: 10 additions & 1 deletion app/scripts/i18n/app/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,20 @@
"load": "Cannot load WebUI config.",
"save": "Config saving failed",
"overflow": "Config saving failed. Try to clear page's localStorage and restart the browser. If problem remains, try to reduce overall size of SVG images.",
"stop-scan": "The controller started searching for Modbus devices. This could lead to slow polling of already configured devices. The search process is forcibly stopped"
"stop-scan": "The controller started searching for Modbus devices. This could lead to slow polling of already configured devices. The search process is forcibly stopped",
"not-configured-admin": "The administrator password is not set. Please set it in the settings"
},
"prompt": {
"dirty": "The page has unsaved changes. Are you sure you want to leave?",
"serial-config-leave": "Scanning will be canceled. Do you really want to leave the page?"
},
"buttons": {
"logout": "Logout"
},
"roles": {
"user": "User",
"operator": "Operator",
"admin": "Administrator"
KraPete marked this conversation as resolved.
Show resolved Hide resolved
}
},
"home": {
Expand Down
Loading