openwisp / openwisp-wifi-login-pages

Configurable captive page for public/private WiFi services providing login, sign up, social login, SMS verification, change password, reset password, change phone number and more.

openwisp-wifi-login-pages

---

Need a quick overview? Try the OpenWISP Demo.

No more ugly and fragmented User Experience for public/private WiFi services!

OpenWISP WiFi login pages provides unified and consistent user experience for public/private WiFi services. This app replaces the classic captive/login page of a WiFi service by integrating the OpenWISP Radius API.

Refer to WiFi Login Pages: Features of OpenWISP documentation for a complete overview of features.

Documentation

• Usage documentation
• Developer documentation

Contributing

Please refer to the OpenWISP contributing guidelines.

Changelog

See Change log.

License

See LICENSE.

Support

See OpenWISP Support Channels.

openwisp-wifi-login-pages's Issues

[wifi-login-pages] Status page should not use authorize API from openwisp-radius

The authorize API endpoint from openwisp-radius should not be used at all.

[wifi-login-pages] Show past sessions (nodejs + openwisp-radius API)

In the status page, show past session of the user with support for pagination (*), show the first 10 sessions by default.

Ideally we should implement this together with #80, we should strive to make only one HTTP request to get both active and past sessions.

(*) Regarding pagination

We can use an infinite scroller component available on npm, eg: https://www.npmjs.com/package/react-infinite-scroller or https://www.npmjs.com/package/react-infinite-scroll-component, or also another one if we can find any package we think is better.

Let's choose the best compromise between stability and smallest size
I tried measuring the size of these two, there doesn't seem to be a lot of difference once the JS is gzipped:

package-size react-infinite-scroller react-infinite-scroll-component

  package                                size      minified  gzipped
  [email protected]          51.15 KB  6.82 KB   2.13 KB
  [email protected]  21.02 KB  7.68 KB   2.43 KB

The most popular one seems to be also smaller, so if that works, we could just go with that one.

[wifi-login-pages] Add support for SMS verification (nodejs + openwisp-radius API)

The latest version of OpenWISP RADIUS supports registration of new users with mobile phone verification via SMS token.

I implemented a static HTML page to support this mode and would like to transfer the code here.
The backend functionality is implemented in openwisp-radius: https://openwisp-radius.readthedocs.io/en/latest/user/api.html#create-sms-token

The flow is as follows:

• if SMS verification is enabled for org, show the phone number field (a select for the international prefix and another select for the phone number)
• once the user submits, they receive a code and have to insert that code (using the verify endpoint, has to support validation errors as well)
• they may change their phone number if they submitted a mistaken one (using the change phone number endpoint, has to support validation errors as well)
• when SMS verification is enabled, the change phone number link should be shown in the status page

Things to check:

• exceptions should be handled, if the server returns an unexpected error response and they can't complete the verification, we should recognize the user if they log in again later on and we should allow them to send a new code and complete the SMS verification

[config] Setup Express + React boilerplate

We want to create a react app and also need a proxy server based on Node. So a react + express boilerplate with basic configuration is a good start.

[assets] Avoid having to duplicate assets

I think the default assets could be reusable to all organizations, so that when a new organization is created, with the default values, the first thing the users will see is a working page, without missing images.

[wifi-login-pages] <div> cannot go inside <label>

The different forms used in this app put <div> elements inside <label>, which is not in agreement with the label HTML element specification.

It should be the opposite: what is currently uses as a label should be the div or alternatively a paragraph element, the label can precede the field, the for attribue can be used to link the label with the related form element.

[docs] Specify nodejs and npm versions in prerequisites

The readme doesn't indicate the minimum version required to run this app, nor the maximum supported version.

[wifi-login-pages] Bug: fonts get blocked by captive portal

We should not load fonts from the google fonts API: https://fonts.googleapis.com/css?family=Montserrat:500,600&display=swap.

This request gets blocked by the captive portal and fails.
Fonts should be shipped from the static files of the application.

[wifi-login-pages/test] Increase test coverage

Increase test coverage score to at least 95%.

[component] Write login component

[wifi-login-pages] Perform captive portal authentication

Like #60, but for the logout operation.

[feature] Feature: allow logging in using username, email or phone number

In most cases, using the email to sign up and log in will be the best option.

When RADIUS is configured to use realms (think of it like a federation of user access databases), the @ character is the default delimiter which separates the username from the realm, so an email address would break this RADIUS feature.

Therefore, we need to support the possibility of configuring the login to have the username field.

We should take into account the SMS verification as well. We may default the username to the phone number if SMS verification is enabled.

[api] Write NODE server API end-points

[config] Setup fake REST API server

It's a suggestion to use https://github.com/typicode/json-server to set up a fake API server for independent testing of the frontend.

[ux] Show success message after sign up

After signing up I see some message which is shown only for a fraction of a second and then the page goes back to the log in page.

Looks like a bug. I think the right thing to do is either avoid redirecting to the log-in page, or redirect straight there and show some kind of success message there.

[wifi-login-pages] Perform captive portal logout

Depends on #66.

Similar to #60 but for the logout.

This will affect the current logout page.

Before showing the logout button:

• check if there are active sessions for the user
  we need to add a server route to get the user radius accounting, filter by is_open=true, and mac address (calledStationid) from #66 if present;
• if there is, show the logout button
• the logout button should do what it does now but instead of redirecting to the login page it should perform the captive portal logout by posting a form like the following:

<form action="<CAPTIVE_PORTAL_URL>" method="<METHOD(default to post)" id="logout" class="hidden">
<input name="logout_id" type="hidden" value="" id="session-id">
<input type="submit">
</form>

This form can be included in an iframe like in #65.

• after the form has been submitted successfully show the login page
• if there's no active session, issue a toast notification and redirect to log-in

[config] Setup ESLint

Setup ESLint in the project to eliminate the linting errors over the progress of the project.

[wifi-login-pages] Add server side logging (nodejs)

Add a proper logger to the server implementation.
Log HTTP requests to openwisp-radius with INFO.
When there is an error, ensure the logging works also if the request is canceled (eg: timeout). Right now in case of timeout the request logging fails and there's no logging.

[wifi-login-pags] Add loading indicator

Add loading indicator that should be used to block the page during all form submissions.

It could be like the one used in http://openwisp.org/activity.html.

[wifi-login-pages] Add dependency monitoring and upgrade dependencies

• add a dependency monitoring service (eg: libraries.io, you can propose another one if you think is better)
• add the badge to the README
• upgrade outdated dependencies, test the app to ensure everything works correctly
• ensure tests pass

[wifi-login-pages] The README should indicate steps required to run this with openwisp-radius

The README should indicate steps required to run this with openwisp-radius, at least in development mode.

It should clearly state that this app needs openwisp-radius, link to the project, and explain how to bring it up in a development environment, step by step, eg:

1. install nodejs, npm, yarn

link resources to do this

2. install openwisp-radius

link to documentation of openwisp-radius about installing for development

3. prepare configuration of organization

set openwisp-radius URL
set uuid
set secret

3. run npm install and npm start

4. open login page of recently configured org in the browser

The above is just an example, some steps may be missing. We need to ensure users can easily understand and run this app.

[tests] write tests for password change component

[bug] Fonts missing

@iamhitman21 @Vivekrajput20

After #85 was merged I get:

Failed to compile.

./index.css (../node_modules/css-loader/dist/cjs.js!./index.css)
Module not found: Error: Can't resolve './assets/fonts/montserrat-medium.woff2' in '/home/nemesis/Code/openwisp/openwisp-wifi-login-pages/client'

Looks like the fonts are missing.

[wifi-login-pages] Login with iframe after signup

Ensure the same behavior of #60 is used but after successful signup.

[css] Make one CSS class for all buttons

• make one CSS class for all buttons (inputs and a elements)
• make the different elements have a consistent look
• eliminate redundancy of css properties (css properties like colors need to be defined only once, there's no need to repeat them for every button)

[wifi-login-pages] set mac address of the user to sessionStorage

The login page should be changed to get the calling_station_id (the mac address of the user) querystring parameter and save it to sessionStorage.

[component] Design and develop password change component.

Openwisp-radius has a feature to allow users to change the password. The node proxy server already has controller to change the password. However, the frontend app does not have a password change component because it was not there in the previous project.
Design and develop the react component to allow users to change the password from the status page.

[wifi-login-pages] Do not show sign in and sign up when user is logged

Log in.

Now if you click in any of the buttons "sign in" in or "sign up", you'll be redirected back where you are, which is correct, but I think we should avoid showing the buttons at all if the user is logged.

We should somehow intercept whether we are linking the login and signup pages and if the user is logged-in we skip these links and do not show them.

[wifi-login-pages] Avoid the need of repeating URLs for each organization

These URLs should no be repeated for each organization:

server:
  host: "http://localhost:8000"
  proxy_urls:
    password_change: "/api/v1/{org_slug}/account/password/change"
    password_reset: "/api/v1/{org_slug}/account/password/reset"
    password_reset_confirm: "/api/v1/{org_slug}/account/password/reset/confirm"
    registration: "/api/v1/{org_slug}/account"
    user_auth_token: "/api/v1/{org_slug}/account/token"
    validate_auth_token: "/api/v1/{org_slug}/account/token/validate"
    authorize: "/api/v1/authorize"

The should be stored elsewhere in the code, not in the YAML configuration of each organization.

[config] Decide role variables for configuration

@nemesisdesign

[wifi-login-pages] Show active sessions + logout button for each session

It's time to enrich the status page to provide more information to the user about their session.

We can get all the active sessions of the user from openwisp-radius and list them.
Each session can be the row of a table.
If logging out by session is enabled (we need to make this configurable because not all captive portals can do this), we can show a logout on each session, this way the user can decide which of their device to log out, very useful when the user is allowed to use multiple devices to surf the internet.

The information of the active sessions should be reloaded every minute.

Ideally we should implement this together with #81, we should strive to make only one HTTP request to get both active and past sessions.

[ux] Show error if token validation on openwisp-radius API fails

If the token validation of openwisp-radius fails (because organization uuid and secret have not been configured correctly) the operations (login, registration, etc) should fail with an error message.

We should also support the case in which the openwisp-radius API is returning a 500 internal server error or not responding (use mocking to write tests for this case).

PS: it seems that if the openwisp-radius is unavailable, an error message is correctly returned, but if the API is not replying (for example, if you drop an ipdb.set_trace() in the python code, preventing the API to respond) the react app acts like if the API has responded, while it should wait a bit and then timeout.

[config] Write setup.js

Prepare a setup.js script that will discover the configs of different organizations and will store them in json format. It will also setup basic files and directory structure for the organizations.

[config] Add code splitting to generate multiple bundles for production

[component] write password reset component

[UI] Integrate react-toast-notifications and show notifications for events

Integrate react-toast-notifications with the app. Or propose any better package to show notifications to the user.
Show toast notifications to user for success and error events in all the pages including Login, Registration and Status page.

[component] implement auth and auto login and write status page component

[yarn] Fix warnings during installation

There's quite some warnings when installing the project with yarn, eg:

warning jsdom > [email protected]: request has been deprecated, see https://github.com/request/request/issues/3142
warning @babel/cli > [email protected]: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
warning @babel/cli > chokidar > [email protected]: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
warning @babel/cli > chokidar > braces > snapdragon > source-map-resolve > [email protected]: Please see https://github.com/lydell/urix#deprecated
warning @babel/cli > chokidar > braces > snapdragon > source-map-resolve > [email protected]: https://github.com/lydell/resolve-url#deprecated
warning @babel/polyfill > [email protected]: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.
warning coveralls > [email protected]: request has been deprecated, see https://github.com/request/request/issues/3142
warning jest > jest-cli > jest-config > jest-environment-jsdom > jsdom > [email protected]: request has been deprecated, see https://github.com/request/request/issues/3142
warning jest > jest-cli > @jest/core > jest-haste-map > [email protected]: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
warning jest > jest-cli > jest-config > jest-environment-jsdom > jsdom > [email protected]: use String.prototype.padStart()
warning webpack > watchpack > watchpack-chokidar2 > [email protected]: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
warning webpack-dev-server > [email protected]: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.

We should address and resolve these warnings.

[config] Write travis.yml

[readme] Add readme file

Switch from username to email in sign-up and login

When signing up, we can sign up users by putting their email as their username, at login they will have to use their email.

This usually results in better user experience.

[wifi-login-pages] Add remember me checkbox

Add a "remember me" checkbox, enabled by deafult.

If the checkbox is disabled, the app will not store session information in cookies (as it does now by default), but it will use sessionStorage as an alternative way to recognize that users have already logged-in (showing them the status page).

This feature is important because public wifi is sometimes used in shared computers in public places, and therefore we may have to disable it by default.

[config] Add hot-module-replacement to the webpack configuration.

hot-module-replacement allows all kinds of modules to be updated at runtime without the need for a full refresh. We can implement it to speed up the development.

[config] Dev-server dynamically assign port.

Currently, webpack dev server is configured to start at port 8080 and nodemon server at port 3030.
We need to configure it to accept a port number as a CLI parameter and if the parameter is not provided it should use the first available port starting from 8080 and 3030 respectively.

[config] Write the default config for the organizations and setup default assets directory structure.

[npm] Start opens http://0.0.0.0:8080/

When I issue npm start, the application opens http://0.0.0.0:8080/, which doesn't work.

It should open a working URL, showing one of the available login pages, probably the first organization found in alphabetical order.

[config] add compression-webpack-plugin to webpack production config

Add compression-webpack-plugin to the webpack config to serve gzip compressed files on production server

[docs] Setup instructions in README

Could you expand the setup instructions so to have a series of commands that need to be run in order to run the application locally?

I understand that for you is obvious but for someone else may not.

Eg:

yarn
npm run build
npm run server
npm run client  # is this needed?

[tests] Setup Jest with Enzyme for testing react components.

[wifi-login-pages] Perform captive portal authentication

Captive portal authentication must be done by submitting a form (we can't use ajax unfortunately).

A form like the following one:

<form name="userauth" method="post" class="hidden"
      id="captive-portal-form"
      action="http://cp.domain.com/index.php?etc">
    <input type="hidden" name="auth_user">
    <input type="hidden" name="auth_pass">
    <input type="hidden" name="zone" value="zone_name">
    <input type="hidden" name="redirurl" value="https://wifi-login-app/status">
    <input type="hidden" name="accept" value="accept">
    <input type="submit" value="Login">
</form>

We should have a way to define fields dynamically in the configuration, eg:

captive_portal_form:
    name: user_auth
    method: post
    action: http://cp.domain.com/index.php?etc
    fields:
        username: auth_user
        password: auth_pass
    additional_fields:
        - zone: zone_name
        - redirurl: https://wifi-login-app/status
        - accept: accept

The username and password fields have to be automatically filled after login & reauthentication and then the form should be submitted automatically.
The user should not see the status page at all, it will be redirected to it by the captive portal.

EDIT: there's an alternative, using an iframe, I just tested this and it works, the captive portal form is included with an iframe (hidden with css) and submitted there, we can use the load event of the iframe to find out the result from the captive portal and only then show the status page or if there was any error, like when the maximum daily bandwidth has been reached, the error will be shown to the user and the operation canceled.

This needs test + docs.