Frederix External Login

外掛說明

This plugin allows any WordPress page to act as an External Login page for CloudWiFi.

It handles the entire flow:
1. Login: Displays a login button that redirects the user back to the hotspot.
2. Success: Displays a success message after authorization.
3. Error: Displays detailed error messages if the login fails (e.g., timeout, license exceeded).

Features:
* One Shortcode: Use [frederix_external_login] for everything.
* Automatic Mode: Automatically detects if it should show the Login button, Success message, or Error message based on the URL parameters.
* Flexible Configuration: Use different pages for Login/Success/Error if desired.
* Customizable Messages: Change the button text and messages via shortcode attributes.
* Secure: Validates and sanitizes all inputs.

Shortcode Options

You can customize the shortcode with the following attributes:

• mode: Controls what the shortcode displays.
  • auto (default): Automatically switches based on URL status (status=success or status=error).
  • login: Forces the display of the login button.
  • success: Forces the display of the success message.
  • error: Forces the display of the error message.
• text: The text on the login button. Default: “Login & Connect”.
• success_message: The message shown on success. Default: “You are now logged in…”
• error_message: The fallback error message. Default: “An unknown error occurred.”
• tos_url: (Mandatory for Login) URL to your Terms of Service page.
• privacy_url: (Mandatory for Login) URL to your Privacy Policy page.

Examples

Standard Setup (One Page for everything):
[frederix_external_login tos_url=”/agb” privacy_url=”/datenschutz”]

Custom Button Text:
[frederix_external_login text=”Start Free WiFi” tos_url=”/agb” privacy_url=”/datenschutz”]

Separate Error Page:
If you want a dedicated error page with a custom message:
[frederix_external_login mode=”error” error_message=”Something went wrong. Please ask at the reception.”]

Dynamic Styling

The plugin automatically adds CSS classes to the main container based on the Hotspot parameters. This allows you to style the page differently for each location.

Classes added:
* fhk-hotspot-{hotspotId}
* fhk-location-{locationId}
* fhk-external-{externalId}

Example CSS:
If you want a green button for Location 123 and a blue button for Location 456:

`css

/* Location 123 – Green */
.fhk-location-123 .frederix-login-button {
background-color: green;
}

/* Location 456 – Blue */
.fhk-location-456 .frederix-login-button {
background-color: blue;
}
<h3>Conditional Content</h3>
You can show or hide any content (images, text, other shortcodes) based on the location or hotspot ID using the[frederix_show_if]` shortcode.

Attributes:
* location: Comma-separated list of Location IDs.
* hotspot: Comma-separated list of Hotspot IDs.
* external: Comma-separated list of External IDs.

Example 1: Show a specific logo only for Location 123:

`text

[frederix_show_if location=”123″]

[/frederix_show_if]
`

Example 2: Show a special notice for multiple Hotspots:

`text

[frederix_show_if hotspot=”HS-01, HS-02″]

Special maintenance today in this area!

[/frederix_show_if]
`

Example 3: Combine with the login shortcode:

`text

[frederix_show_if location=”123″]

Welcome to the Beach Club!

[frederix_external_login text="Connect to Beach WiFi"]

[/frederix_show_if]

[frederix_show_if location=”456″]

Welcome to the Lobby!

[frederix_external_login text="Connect to Lobby WiFi"]

[/frederix_show_if]
`