Skip to content

Latest commit

 

History

History
332 lines (332 loc) · 16.5 KB

README.md

File metadata and controls

332 lines (332 loc) · 16.5 KB

If you like my work and appreciate my commitment, you can buy me a coffee.

Buy Me A Coffee

A Captive Portal allows you to force authentication, or redirection to a click through page for network access. This is commonly used on hotspot networks, but is also widely used in corporate networks for an additional layer of security on wireless or Internet access.

OPNsense’s unique template manager makes setting up your own login page an easy task. At the same time it offers additional functionalities, such as:

  • URL redirection
  • Option for your own Pop-up
  • Custom Splash page

To read more about the captive portal, I suggest you have a look here: https://docs.opnsense.org/manual/captiveportal.html?highlight=captive%20portal meanwhile, I will focus on the template.

 

 

The captive portal templates that I have seen so far most often lack multilingual support. I've always wondered why it should only be in English or only in one language at all? Well, let's look below. This template supports multilingualism, checks your preferred browser language, saves a cookie with information about which language was read or which language you chose using the selector. Uses language translations saved in the xx.json file. So, according to the layout, you can prepare your own translation, which you later have to declare in the settings.json file in the config directory.

"default_lang": "en"

In the current release, the settings key defines the default language that will be loaded in case the client browser language is not available in our available languages ​​configuration (list below)

"langs": {
"pl":"Polski",
"en":"English",
"sk": "Slovenčina"
};

and (parameters necessary to display the logged-in user's session)

"langs_iso": {
"pl":"pl-PL",
"en":"en-GB",
"sk": "sk-SK"
};

Based on the keys of the langs variable object, the template will automatically determine whether it should display the LTR or RTL content.

The base64 logo is set in the settings.json file. Due to the universal application, the frame of the image of the logo must keep the proportions of a square.

Rest of the setup

CSS Configuration Group "css_params": {

"css_params": {

"bg_section": "#252828", ← 1 → Background color of the entire section
"bg_image": "", ← 2 → Illustration as background (used regardless of the color set in bg_section)
"bg_repeat": "no-repeat", ← 3 → Set the repeatability of the background illustration (if set in bg_image)
"bg_position": "center center", ← 4 → Set the position of the background illustration (if set in bg_image)
"bg_size": "cover", ← 5 → Coverage of the background illustration surface (if set in bg_image)
"bg_attachment": "", ← 6 → Sets the scrolling of the background image (if set in bg_image)
"bg_left_side": "url('/images/bg_left_side.png')", ← 7 → Illustration as background of the left side of the login portal
"bg_left_side_repeat": "no-repeat", ← 8 → Set the repeatability of the background illustration of the left side of the login portal
"bg_left_side_position": "top left", ← 9 → Position of the left side background image of the login portal
"bg_left_side_size": "cover", ← 10 → Coverage of the left side of the login portal background illustration surface
"bg_left_side_attachment": "", ← 11 → Setting the scrolling background image of the left side of the login portal
"bg_left_side_blend": "linear-gradient(180deg, #005f6b4d 0%, #005f6bbf 83.85%)", ← 12 → Setting the background blend of the left side of the login portal - in this case it allows you to cover the background illustration of the left side of the login portal with a linear gradient
"bg_right_side": "rgba(249, 253, 255, 1)", ← 13 → Illustration as background of the right side of the login portal
"bg_right_side_repeat": "no-repeat", ← 14 → Set the repeatability of the background illustration of the right side of the login portal
"bg_right_side_position": "top left", ← 15 → Position of the right side background image of the login portal
"bg_right_side_size": "cover", ← 16 → Coverage of the right side of the login portal background illustration surface
"bg_right_side_attachment": "", ← 17 → Setting the scrolling background image of the right side of the login portal
"bg_right_side_blend": "", ← 18 → Setting the background blend of the right side of the login portal - in this case it allows you to cover the background illustration of the left side of the login portal with a linear gradient
"left_side_shadow": "0 0 40px 0 rgba(0, 0, 0, .35)", ← 19 → Shadow under left side of login portal
"right_side_shadow": "0 0 40px 0 rgba(0, 0, 0, .35)", ← 20 → Shadow under right side of login portal
"bg_alternate": "#818a91", ← 21 → Alternate background color - used in buttons as the background color and text fields as the border color
"color_primary": "#7a7a7a", ← 22 → Main text color
"color_secondary": "#ffffff", ← 23 → Text secondary color
"color_alternate": "#373a3c", ← 24 → Text alternate color
"link": "#348893", ← 25 → Link color
"link_hover": "#f12184", ← 26 → Link hover color
"input_field_color": "#e8e8e8", ← 27 → Input field text color
"input_field_bg": "#ffffff", ← 28 → Input field background color 
"input_field_border": "rgba(145, 156, 167, .27)", ← 29 → Input field border color
"input_field_placeholder_color": "#4ca1af", ← 30 → Input field placeholder color
"button_bg": "#00b5cb", ← 31 → Button background color
"button_hover_bg": "#f12184", ← 32 → Button hover background color
"button_color": "#ffffff", ← 33 → Button text color
"button_hover_color": "#ffffff", ← 34 → Button hover text color
"lang_switcher": "#00b5cb", ← 35 → Language selector switch
"lang_switcher_trigger": "#009db1", ← 36 → Language selector switch trigger
"lang_switcher_link": "#ffffff", ← 37 → Language selector switch link color
"lang_switcher_link_hover": "#ffffff", ← 38 → Language selector switch link hover color
"lang_switcher_hover": "#f12184", ← 39 → Language selector switch link background hover color
"lang_switcher_dropdown": "#216f7a", ← 40 → Language selector switch dropdown background color
"lang_switcher_dropdown_hover": "#f12184", ← 41 → Language selector switch dropdown background hover color
"fadein": "0.5s", ← 42 → Duration fading to opaque the layout once it's fully loaded
"block_padding": "50px", ← 43 → Padding used on left and right column
"block_radius": "15px" ← 44 → Left and right column content wrapper border radius

};

Animate Configuration Group "animate": {

"animate": {

"effect": "globe", Selected animation
"params": { Common parameters for all effects
"el": "#animate-js", CSS id where the animation will be embedded
"bg_position": "center center", Set the position of the background
"mouseControls": true, Controlling animation by mouse movement
"touchControls": true, Controlling the animation by swiping on the touch screen
"gyroControls": false, Illustration as background of the left side of the login portal
"minHeight": 200.00,  
"minWidth": 200.00  
},  
"preset": { Coverage of the left side of the login portal background illustration surface
... Other configuration keys - here I refer to the Vanta.js online configurator https://www.vantajs.com/
}  

};

What has changed in the template recently:

  • further work on the development of the template is planned, hence the bootstrap 5.3.3 and jquery 3.7.1 libraries have been included, at the same time libraries provided natively by OPNsense will not be used,
  • some functions have been separated from the API, their notation has been changed,
  • a method for dynamically loading scripts into the template has been added - in the current version it is used by vanta.js dependencies, eventually it will be used more widely,
  • the layout has been changed, which was modeled on the Login Screen Design prepared by Ankur Tripathi - thanks for your work Ankur!,
  • CSS declarations have been improved, rtl support has been improved - unfortunately, I am not sure how to display individual elements in rtl mode, hence if you find an error in this, please feedback - I will correct it,
  • particles.js has been abandoned, Vanta.js has been implemented in its place - thanks and respect to @tengbao - great job!
    The following effects are available: birds, cells, fog, globe, halo, net, rings and waves, which can be configured in a simplified way in settings.json in the "animate" key as the preferred "effect", its "params" and the "preset" of the declared effect.
    You can view your settings here https://www.vantajs.com/
  • Slovak translation included - thanks to @Gouster4.
  • optimizing the code of javascript functions,
  • splitting CSS into smaller portions, nesting CSS selectors,
  • blocking the ability to log into the system for a specified period of time, after a specified number of possible attempts,

 

What I plan to change:

  • improve or change the language selection switch mechanism,
  • implement a method for embedding (or dynamically generating) the layout and its dependencies,