Overview
The Login page enables user access to the SmartSimple System. Users authenticate on this page, typically by entering their username and password. Global Administrator access is required to configure or modify login pages.
The login page serves the following functions:
- User authentication
- Language switching
- Redirecting users to a signup page via the routing page
- Requesting user consent for cookie usage
- Enforcing agreement to the system's privacy and security policies
- Password reset functionality
This article will provide guidance on how to set up and modify login pages within your system, as well as review related settings.
In the example provided, both the login section and the language dropdown for switching to other language-specific login pages are highlighted.
Configuration - Essentials
Creating a New Login Page
System Administration (gear icon) >> Global Settings >> Branding (tab) >> [Login Pages]
This link facilitates the creation and editing of login pages.
- The list of available login pages in your system will be displayed under the Primary tab; if no pages are available, the list will be empty.
The list of login pages.
- Remaining on the Primary tab, click the New Login Page button, represented by a + icon in the action bar, to create a new Login Page.
The button for creating a new login page.
- Select the preferred language.
- Modify the settings on the General tab as necessary and click Save.
Login Page Branding
There are various settings under Page Formatting to manage the appearance of the background image and its positioning. It is advisable to utilize generic background images, such as solid colors, patterns, or photographs. Avoid using graphic elements like logos that must remain visible, as the same image will be utilized across all devices, screen sizes, and orientations, which may lead to clipping. The recommended dimensions for background images are 1920 x 1280 pixels at 72 pixels per inch (PPI). Additionally, you can adjust the opacity and color of the panel.
Multiple/Switching Languages
Administrators have the capability to create separate login pages for each supported language. When creating a new login page, administrators will select the desired language.
If multiple language login pages are available, users will see a dropdown menu in the top right corner of the screen, provided the Page Layout setting is set to Default. Alternatively, you may opt for Custom and add the sample template. Users can select their preferred language from this dropdown menu, and their choice will persist after login.
If a single login page is utilized for all users instead of distinct pages for each language, users will be directed to the language they last selected within the platform upon login.
Administrators can designate the default language login page via a toggle on the settings page for the respective login page. This setting determines which language login page will be displayed when a user accesses https://youralias.smartsimple.com/ without specifying a language ID.
You may also provide users with a direct link to a specific language login page by appending ?&lang= to the login page URL. For instance, the URL for a Spanish login page would appear as follows, where 14 represents the language ID:
https://myalias.smartsimple.com/s_Login.jsp?&lang=14
Creating a Routing Page
Routing pages are designed to direct users to the appropriate page, typically a Signup page. When a user navigates to a login page, they will click a button, usually labeled "Register," which will redirect them to an intermediary (routing) page where they can view a list of available signup pages.
Routing pages are recommended in scenarios where you have:
- Multiple signup pages for different types of organizations and users
- Multiple signup pages in various languages
- Multiple eligibility questionnaires
The routing page guides users to the appropriate signup page.
An example of the configuration page for a routing page.
To create a routing page:
System Administration (gear icon) >> Global Settings >> Branding (tab) >> [Login Pages]
- Edit the desired login page > Routing Page tab.
- Under Routing Links, click the Add Link button (represented by a plus sign "+") to include a new link.
- For Title, enter text that indicates the type of signup page you will link to, such as "Individual," "Domestic Organization," "International Organization," etc.
- For Description, provide text to assist users in selecting the correct signup page, for example, "For applicants who are not associated with an organization."
- For URL, input the URL to your signup page or utilize the URL Lookup feature to locate it. When pasting the Page URL of your signup page into a routing page, ensure that you use the relative path. Relative paths will resolve correctly and function in both production and development environments. Example:
/s_csignup.jsp?token=XVtQHUUGYVpQRhRRXxNRS1BWZEl2HnFsFA%3D%3D&ptoken=XVtQC1oGYVpQRhRRXxNRS1BWZEl2HnFsFQ%3D%3DClick
Cookie Agreement
Cookies are small data files that are stored on a user's computer by their web browser. Depending on your jurisdiction, it may be necessary to inform users about the use of cookies. For further information regarding cookies and the EU cookie directive, please consult this Wikipedia article on cookies.
Upon their initial visit to your system, users will encounter an alert indicating that SmartSimple Cloud utilizes cookies. The alert also states that by using the system, users consent to the use of cookies. Users may click OK to accept or navigate away. Additionally, a link to a more comprehensive description is provided, detailing the cookies in use and their respective purposes.
The cookie acceptance alert presented to all users during their first visit to your system.
Privacy and Security Policies
It is essential to establish Privacy and Security Policies within your system. These policies should be tailored for various language and country combinations. Typically, a privacy policy delineates the type of information collected, the rationale for collection, the methods of collection, the intended use of the information, the parties who will have access to it, how users will be notified of policy changes, and whom to contact regarding privacy concerns. By default, the login page features a button labeled Privacy & Security Policies located in the main panel beneath the email and password fields. This link will display any policies you have established for the Default Country (the default country is a privacy country option generally applicable to all countries if the user has not logged in or if there are no country-specific policies). After logging in, if the user has a country specified in their profile, they will have access to their specific country/language policies in the header, if configured. If you have set a date for Enforce User Acceptance, users will be directed to your policies upon login and will be required to accept them in order to access the system. A record of this acceptance will also be maintained and can be retrieved.
If you are utilizing Default for the Page Layout setting, you also have the option to Hide the Privacy Policies on the login page.
Forgot Password
A "Forgot Password" link is included by default on the login page.
Users may enter their email address, and the system will send instructions to that email if it has been registered and granted system access.
If you do not receive an email within a few minutes, please check your spam or junk mail folder.
The account recovery email sent to users can be configured by following these steps:
System Administration (gear icon) >> Global Settings >> Security (tab) >> Password and Activation Policies >> Activation Emails (menu)
- Modify the content as necessary.
- Click Save.
Configuration - Advanced
CAPTCHA on the Login
If incorrect email and password combinations are entered on the login page twice, a CAPTCHA will be displayed. CAPTCHA stands for "Completely Automated Public Turing Test to tell Computers and Humans Apart.” It is utilized in this scenario to verify that the user is a human and not an automated program attempting to log in.
CAPTCHA displayed after incorrect email and password combinations are entered
You may choose Google reCAPTCHA or an alternative CAPTCHA, or specify an alternative CAPTCHA exclusively for users in countries unable to connect with CAPTCHA servers due to governmental policies. This can be accomplished by selecting a country such as China in the Countries Using Alternate CAPTCHA Service: setting, which can be located under Global Settings >> Security (tab).
Popup Blocker Check
The login page can be configured to verify whether users have a pop-up blocker enabled when utilizing a custom page template. If a pop-up blocker is detected, users will receive a warning suggesting that they disable it.
Typically, this check is left disabled, and users are not alerted regarding the presence of a pop-up blocker.
Warning message displayed on the login page when a pop-up blocker is detected
If desired, you can enable this check and warning message by following these steps:
System Administration (gear icon) >> Global Settings >> Branding (tab) >> [Login Pages]
- Ensure that Page Layout is set to Custom.
- Proceed to the Template tab.
- Within the Login Page Template text area, search for disabled="disabled" (If it is not visible, add the sample template).
- Remove the disabled="disabled" text.
- Click Save.
Alternate Login Pages
The Alternate tab within the Login Page list view is utilized to create and edit multiple custom login pages with a specific instance URL.
When on the Alternate tab, clicking the New Login Page button, represented by a + icon in the action bar, will create a New Alternate Login Page.
Alternate login pages function differently than Primary login pages; thus, the code from Primary login pages cannot be reused. Alternate login pages necessitate additional customization, and users must enter a lengthy URL to access them:
https://myalias.smartsimple.com/welcome/MyFolder/?u=1
Failed Login Log
In the event that a user attempts to log in unsuccessfully, you can view a list (audit log) of the usernames (the email addresses they entered), their IP addresses, and the timestamps of their attempts.
To access the Failed Login Log, navigate to:
System Administration (gear icon) >> Global Settings >> Security (tab) >> Password and Activation Policies >> Failed Logins (menu)
Furthermore, in the left navigation at this location, you can review locked accounts and other settings related to failed login attempts.
Settings Overview
General Tab
The following settings are accessible within the General tab:
| Setting | Description |
|---|---|
| Language | Each login page must be assigned a single language, which can be selected from the dropdown menu. |
| Default Login Page | By default, when a user accesses your system's URL without specifying the Language ID, they will be directed to the English US login page. To set a different language login page as the default, activate this setting for the corresponding login page. It is important to note that only one login page can be designated as the default. |
| Page Layout | It is advisable to maintain this setting on Default unless there is a specific necessity to customize the HTML of your login page, as this ensures you always have the most visually appealing login page. Selecting Custom will provide a Template tab where you can modify the underlying HTML of the login page. Be aware that if you choose the custom option, you may need to manually update your login pages to incorporate enhancements or changes in functionality. |
| Page Title | This title is displayed in the browser's title bar or page tab. It populates the title tag in the HTML of the login page, typically containing your organization's name. |
| Login Title | The text entered here appears above the authentication area. Typically, the word "Login" is used in this field. |
| Content Title | Text entered here appears above the custom message on the right side of the screen. This is usually replaced with a phrase such as "Welcome to XYZ". |
| Content Text | Text entered here appears below the content title. This area is typically utilized to describe your organization, its activities, and the purpose of the system. For example: "XYZ group provides grants to non-profits in the USA. Register to gain access to the system and apply for funding." |
| Logout Redirect URL | This URL directs the user to a specific page upon logout. You may enter a URL such as https://www.smartsimple.com/ or leave it blank to redirect the user back to your system’s login page by default. |
Privacy Policies
This section is only visible if you have selected a Page Layout of Default.
| Section | Choose to display or conceal the Privacy Policies for your system on the login page exclusively. |
| Section Title | This input is only visible if you are utilizing the Default page layout with privacy policies enabled. Typically, users enter "Learn more about our". |
| Button Label | This input is only visible if you are using the Default page layout with Privacy Policies enabled. Enter the desired label for the button that will open your system's policies. Typically, users enter "Privacy and Security Policies" for the button text. |
Links
This section primarily serves to provide users with the option to self-register and gain access to your system.
| Link Section |
The None option disables links to a signup page and conceals this section. Users cannot self-register and must be created and activated in your system through alternative methods, such as an autoloader, importing, or manual creation by internal staff. The Use Routing page option is ideal if you have multiple signup pages frequently for different types of users and organizations. The routing page will display a list of signup pages, directing users to the appropriate signup page for them. Learn more about routing pages. The Custom URL option is most suitable if you have a single signup page. Upon selecting this option, you will be able to enter a label for the button, such as "Register here," along with the URL to the desired signup page. For the URL, utilize the relative path to your signup page to ensure the register button functions on production, backup, and any staging servers you may have. Example: /s_signup.jsp?token=XVtQC1oGYFFaRhNaXxJaQVBRZEl8GnA%3D |
| Section Title | Text entered here appears above the registration buttons. Typically, the text entered is "New to the System?". |
Page Formatting
The following settings are available in the General tab, Page Formatting section:
| Setting | Description |
|---|---|
| Background Image | The uploaded image will be displayed behind the content of your login page (in the background). Upload an image in JPG or PNG format with a resolution of 1920 x 1080 or higher, while optimizing the image to maintain a low file size. Click the Browse button, represented by a folder icon, to select a file from your computer, and then click the Upload button, indicated by an upward arrow, to upload the image file. |
| Background Position | Select how the image will render at different resolutions by choosing the vertical and horizontal anchor points for the image. For instance, if you select Top and Left as the position, the top left area of the background image will always be visible on the screen. Content on the right/bottom of the image may be clipped and not displayed, depending on the screen size and aspect ratio of the image and the user's device. |
| Background Color | Adjust this setting to modify the color that will overlay the background image. Enter the desired hexadecimal value here without the # symbol, or utilize the color picker. For example, enter FFFFFF for a white background. You must enter either 3 or 6 characters if you are manually entering the hexadecimal value. |
| Background Opacity | Adjust this setting to change the opacity of the background color. For instance, selecting High will render the color completely opaque, concealing the background image, whereas Low will render the background color entirely transparent, revealing the uploaded background image. A setting between Low and High will create a translucent layer of color over the background image. |
| Panel Color | Select the color of the login panel that appears behind the content, such as the username and password fields, but in front of the background color and image. |
| Panel Opacity | Select the level of opacity for the panel that appears behind the login content, such as the username and password fields. A Low setting will make the panel transparent, while a High setting will make it opaque. |
| Font Color | Select the color used for all text displayed on the panel, including 'Content Title, Content Text, Section Title, etc. It is important to ensure sufficient contrast between the foreground text and the panel or background image. Typically, text is black on a white panel or white on a black panel. |
Routing Page Tab
The following settings are available within the Routing Page tab:
| Setting | Description |
|---|---|
| Page URL | This section displays the direct link to the routing page and includes a preview button, allowing you to view the routing page without logging out. |
| Button Label | The text entered here will serve as the label for the button that opens the Routing Page. This button is displayed on the login page, typically labeled "Register". |
| Header Title | The text entered here will appear at the top of the routing page. Typically, this is something like "Registration Options". |
| Introduction Text | The text entered here will appear beneath the title, but before the list of signup pages. Typically, this text states "I am applying as:". |
| Trailing Text | The text entered here will appear below the list of signup pages. Typically, this field is left blank; however, you may wish to include contact information here for users needing assistance. |
| Routing Links | This dynamic section allows the administrator to add links to the desired signup pages on the Routing Page. To create a new link, click the Add button, which features a + icon. |
Each routing link has the following settings:
| Setting | Description |
|---|---|
| Title | Text entered here will be displayed in bold for each link. Typically, a few words such as Individual, International Organizations, or Domestic Organizations are entered. |
| Description | Text entered here will appear below the title and is intended to clarify which type of user should click this link. For example, "For applicants who are not associated with an organization". |
| URL | The relative URL to the desired signup page. |
Template Tab
The following settings are accessible within the Template tab:
| Setting | Description |
|---|---|
| Sample Template | Clicking this link inserts the HTML, CSS, and other code utilized to render the login page. Typically, a custom template is employed only if additional functionality is required or if a significant redesign of the login page is desired. |
| Login Page Template | You may enter your custom code into this text area or modify the existing content added by clicking the sample template link. Although you can enter your own code here, it is generally not recommended. If you do add your own code, ensure it meets accessibility guidelines and is responsive (functional across all devices, including mobile). |
Alternate Login Page Settings
Settings for alternate login pages, typically utilized in specific circumstances.
| Login Page Name | Name of the virtual alias login page. |
| Description | Description of the virtual alias login page that is not visible to end users. |
| Scope Organization | Lookup that allows the virtual alias login page to be restricted to users within the selected organization. |
| Virtual Folder Name | Enter a name that will appear in the login URL and be used to differentiate logins. |
| Web Alias | Enter the desired alias you wish to use instead of the instance-defined alias. |
| Persistent Cookies | Enable or disable persistent cookies. This feature allows a "cookie" to be installed on your computer, enabling automatic authentication, thus bypassing the login screen and eliminating the need to re-enter your credentials each time you open your web browser. |
| Attach User Identifier | |
| Encrypt URL | Enable or disable URL encryption. |
| Logout Redirect URL | Enter the URL to which users will be redirected upon logout. If left blank, users will return to the login page upon logout. |
| Primary Role | Select from the available system roles to designate the primary default role that a user will have when logging in through this alternate login page. This function is employed to direct the user to a specific role-based portal. |
| Login Type | Select from the desired options: All Users, Activated Users Only, No Access. |
| User Field | This field will be utilized on the login page to uniquely identify the specific user during login. This is typically set to Email Address. |
| Password Field | This field on the login page will be used for password entry. |
| Login Error Message | This is the error message displayed on the login page following a failed login attempt. |
| Login Page Content | Click the Insert Sample Template hyperlink to auto-populate the text window with a sample template for a login page. Alternatively, you may insert your own customized content. Please note that the content for alternate login pages functions differently than that of primary login pages, thus the same template cannot be utilized for both. |