Security Login Designer
Reference page for the Security Login Designer for a Servoy Cloud Application
Last updated
Was this helpful?
Reference page for the Security Login Designer for a Servoy Cloud Application
Last updated
Was this helpful?
The Security Login Designer page allows you to personalize your application's login experience. To customize your login screen, follow these steps:
Navigate to Application Settings:
Go to Application → Your Application → Application Settings using the Configure button.
Click the Create custom login button.
Navigate to the Security Login page.
Defining Colors
To customize a color for a specific property:
Enter a HEX Color Code: Type a valid HEX color code (e.g., #e515f4) in the text input field.
Use the Color Picker: Click the color picker square to open the color picker dialog and choose a color. This will generate a valid HEX color code.
Revert to Default Color: To reset to the default color, clear the current value from the color input field.
See a real-time preview of your login page. Use the preview tabs to switch between different parts of the login flow, such as 'Login' and 'Forgot Password'.
Sets the company logo on the login flow. Enter the URL of the logo you want to display.
If no URL is provided, the default Servoy logo will be used.
Customize the colors used for various elements on the login flow pages, such as titles, input labels, buttons, and more.
If no color code is provided, the default colors will be used.
Control the alignment and appearance of the login form widget to suit your design preferences. You can select from the following alignments:
Left: The form widget is positioned on the left side of the screen, and the background image or color appears on the right.
Center: The form widget is centered, and the background image or color spans the full screen.
Right: The form widget is positioned on the right side of the screen, and the background image or color appears on the left
The form widget is the area that contains the login form itself. This includes the form's text fields, buttons, and labels.
Specify a background image by providing its URL. This allows you to personalize the login page with an image that aligns with your branding.
You can display either a background image or a background color, but not both, as they occupy the same space.
Set a background color for the page to match your branding or design preferences.
You can display either a background image or a background color, but not both, as they occupy the same space.
Customize the color of the form widget, the area that contains buttons, input fields, and other interactive elements.
Customize the background color of the login form, the area behind the form widget, to ensure clear contrast with the page background and form widget color.
Customize the borders of the form widget and its elements, including:
Button Border radius
Input Border radius
Form Border radius
Form Shadow: Add or remove the box-shadow styling of the form widget
Customize various properties to refine the text styling of the login flow.
Allows you to choose the desired font family for text across the login flow.
Enables you to adjust the size of the text elements to suit the design and improve readability.
Modifies the weight/thickness of the text for labels and other elements to establish a clear visual hierarchy.
Lets you customize the appearance of links, choosing whether they should be underlined or styled normally.
Provides the option to select the label behavior for form inputs. You can choose between floating labels, which shift above the input field when focused, or static labels, which remain in place.
Allows you to set the text alignment for static labels, with options to align the text to the left, center, or right.
Add a "Remember Me" checkbox to your login form, allowing users to stay signed in for convenience.
Note: This feature is not currently supported for Single Sign-On (SSO) methods.
Enable tenant support to allow your Servoy Cloud Application to serve multiple tenants, filtering data and controlling access accordingly.
To enable tenant support:
In the Security Login Designer, toggle the "Enable Tenant Support" switch.
Define tenants within the Application → Security → Tenants settings.
Link tenants to users by navigating to User Management → Users → User Details.
Go to the Tenants tab, click Add Tenant button, and select tenants from the available options.
Tenant Selection Behavior:
Multiple Tenants: If a user is linked to more than one tenant, they will be prompted with a selection screen upon login.
Single Tenant: If a user is linked to only one tenant, they will automatically log in to the application without a selection screen.
Allow users to log in using alternative providers such as Google or Microsoft. See details on how to use on the related pages
To allow users to reset and recover their passwords, you can enable the "Forgot Password" flow. This will add a "Forgot Password?" button to your login page, allowing users to reset their passwords.
By default, the "Forgot Password" flow is disabled
To enable the "Forgot Password" flow, toggle the switch to Enabled
