Smartstaff, administrator
3,320
edits
Changes
→Creating a New Login Page
# Reset your password
This article will show you how to setup and modify login pages within your systemand we will look at other related settings.
[[File:Example of login page.png|thumb|none|500px|In the above example the login section and the language drop down that enables you to switch to the other language specific login pages are both highlighted. ]]
=Configuration - Essentials=
==Creating a New Login Page==
1. Click on the 9-square menu '''Menu''' icon on the top right of your page.
3. Click on the '''Branding''' tab.
4. Click on '''Login Pages.'''
5. The list of login pages available in your system will be displayed under the '''Primary''' tab; if there are none, the list will be empty.
==Multiple/Switching Languages==
Administrators need to may create a separate login page for each language you they want to support. You Administrators will choose the desired language for a login page when you they create a new login page. If you have more than one language login page, the user will see a select one drop down in the top right of the screen as long as you have set the '''Page Layout''' setting to '''Default''', alternately you may chose '''Custom''' and add the sample template. The user can choose their desired language from this drop down. The language the user chooses will follow through after login.
If you choose to have more than one language a single login pagefor all users instead of separate login pages per language, the user then upon login users will see a drop down in be directed to the top right of language they last chose within the screen. The user can choose their desired language from this drop downplatform.
Administrators can choose which language login page is the default via a toggle on the settings page for the desired log in login page. This determines which language login page will be displayed if a user goes to https://youralias.smartsimple.com/ without specifying a language ID.
You can also send your users a direct link to a specific language login page. For example, if I wanted to send users to a configured Spanish language login page I would by adding '''?&lang=14''' to the login page and send that URL to a user. For example the URL to a Spanish login page would look like this:as follows where 14 is the language id
<pre> https://myalias.smartsimple.com/s_Login.jsp?&lang=14</pre>
[[File:Singup-routing.png|thumb|none|500px800px|The routing page takes users to the signup page that is right for them.]]
[[File:Login-Routing page-Page.pngjpg|thumb|none|500px800px| The How the configuration page for a routing page tab and settingslooks.]]
To create a routing page
# Go to '''Menu ''' Icon > '''Global Settings''' > '''Branding''' tab > '''Login Pages''' link > edit the desired login page > '''Routing Page''' tab.# Under '''Routing Links''' press the '''Add Link''' button (looks like a plus buttonsign "+") to add a new link.
# For '''Title''' enter some text to indicate the kind of signup page you will link to. Example Individual, Domestic Organization, International Organization, etc.
# For '''Description''' enter some text to help people choose the correct signup page. Example, the description for a user signup page might be '''For applicants who are not associated with an organization'''.# For '''URL''' enter the URL to your signup page or use the lookup '''URL Lookup''' to find it. If you paste the Page URL of your signup page into a routing page, make sure you use the relative path example. Relative paths will resolve correctly and work on production as well as development and backup Environments. Example: <pre>/s_csignup.jsp?token=XVtQHUUGYVpQRhRRXxNRS1BWZEl2HnFsFA%3D%3D&ptoken=XVtQC1oGYVpQRhRRXxNRS1BWZEl2HnFsFQ%3D%3D. Relative paths will resolve correctly and work on production as well as development</backup.pre>
# Press '''Save'''.
==Agreeing to Cookies==
=Settings Explained=
==General Tab==
The following settings are available on the '''General''' tab:
|-
||'''Language'''
||Each login page must have a single language which you can select from the drop downdropdown. Available languages are: * Arabic* Danish* Dutch* English - UK* English - US* Finnish* French - Canada* French - France* Georgian* German* Hindi* Italian* Japanese* Korean* Nepali* Portuguese* Russian* Spanish* Swedish* Traditional Chinese* Turkish* Vietnamese
|-
||'''Is Default Login Page'''
||By default, when a user goes to your system's URLwithout the Language ID, example https://smart.smartsimple.com they will be directed to the '''English US''' language login page. If you want users to go to a different language login page by default, toggle this setting on for the login page with your desired language. Note: only one login page can be set as the default.|-||'''Page Layout'''||Leave this setting on '''Default''' unless you specifically need to customize the HTML to your login page as it will ensure you will always have the latest and greatest looking login page. If you choose '''Custom''' you will get a '''Template''' tab where you can modify the underlying HTML of the login page. Note if you opt to go custom, you may need to manually update your login pages to take advantage of improvements or changes in functionality.
|-
||'''Page Title'''
||Text entered here will display in a browsers This is the title your browser displays on it’s title bar or a page’s page tab. This text is used as to populate the title tag in the HTML of the login page. Typically your web pageorganization's name is entered into this field.
|-
||'''Login Title'''
||Text entered here appears above the area where you authenticate. Generally it Typically the word "Login" is not modifiedentered into this field.
|-
||'''Content Title'''
||Text entered here appears above the custom message on the right area of the screen. Typically this is replaced with something like "Welcome to ABC SystemXYZ".
|-
||'''Content Text'''
||Text entered here appears below the content title. Typically this area is used to describe who you are, what you do and what the system is used for. Example, ABC : "XYZ group provided provides grants to non-profits in small town the USA. Press the register button Register to gain access to the system and apply for funding."
|-
||'''Logout Redirect URL'''
||This is the page the user gets redirected to once they logout. Enter a URL such as ''https://www.smartsimple.com/ here and '' or leave it blank to have the user will be redirected back to your system’s login page by default.|} ===Privacy Policies===This section is only visible if you chose a '''Page Layout''' of '''Default'''. {| class="wikitable"|-||'''Section'''||Choose to show or hide the '''Privacy Policies''' for your system on the login page only.|-||'''Section Title'''||This input only appears if you are using the '''Default''' page layout with privacy policies on. Typically people enter "Learn more about our".|-||'''Button Label'''||This input only appears if you are using the '''Default''' page layout with '''Privacy Policies''' on. Enter the name you want to give the button that will open your systems policies that site upon logoutyou define. Typically people enter "Privacy and Security Policies" for the button text.|} ===Links===This section is typically used for giving people the ability to self-register and gain access to your system. {| class="wikitable"
|-
||'''Link Section'''
||Typically people are given the ability The '''None''' option provides no links to a signup page and hides this section. Users cannot self-register and gain access to must be created and activated in your system. You have 3 options in this regardvia a different methodology, such as an autoloader, importing or manual creation by internal staff.
The '''NoneUse Routing page''' – You provide no links option is best if you have multiple signup pages often for different types of users and organizations. The routing page will display a list of signup pages so the user can be directed to a the signup pagethat is right for them. Users cannot self-register and must be created and activated in your system via a different methodology, such as auto loading, importing or manual creation by internal staff.Learn more about [[Signup_Page#Creating_a_routing_page|routing pages]]
The '''Use Routing pageCustom URL''' – When option is best if you only have multiple one signup pages for different types of users, organizations and languages, page. If you choose this option is used. It you will display be able to enter a list of label for the button such as "Register here" as well as the URL to the desired signup pages so page. For the URL use the user can be directed relative path to the your signup page that is right for them. Learn more about [[Signup_Page#Creating_a_routing_page|routing pages]]This way the register button will work on production and backup and any staging servers you may have. Example:
|-
||'''Link Section Title'''||Text entered here appears above the register buttons. Typically this the text entered is not modified"New to the System?".
|}
===Page Formatting===
The following settings are available on the '''General tab''', '''Page Formatting''' section:
|-
||'''Background Image'''
||The image uploaded will appear 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 higherbut try to optimize the image to keep the file size low.Browse a file from your computer using Click the '''folder icon ''' and upload it with the '''upwards arrow Browse'''button which looks like a folder icon. You can delete any uploaded to select a file with from your computer and click the '''trashcan icon. Upload'''button which has an '''Note: upwards arrow '''The background image field will only allow you to browse and upload a the image file once you have clicked the '''Save '''button on a new login page.
|-
||'''Background Position'''
||Select how the image will render at different resolutions by choosing where to anchor the image vertically and horizontally. For example if you choose '''Top''' and '''Left''' as the position, then the top left area of the background image will always be visible on screen. Anything on the right/bottom of the image may be clipped and not display depending on screen size and aspect ratio of the image and the users user's device.
|-
||'''Background Color'''
||Adjust this setting to change the color that will appear above over the background image. Enter the desired hexadecimal value here without the # or use the color picker. Example, enter FFFFFF to have a white background. You must enter either 3 or 6 characters if you are manually entering the hexadecimal value.
|-
||'''Background Opacity'''
|-
||'''Panel Color'''
||Select the color of the login panel that appears behind the content such as the username and passwordbut 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. '''Low''' will make the panel transparent, '''High''' will make the panel opaque.
|-
||'''Font Color'''
||Select the color used for all text that appears on the panel. Example '''Content Title, Content Text, Link Section Title, '' etc. Note you must make sure there is enough 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 on the '''Routing Page''' tab:
!|Setting
!|Description
|-
||'''Page URL'''
||This area displays the direct link to the routing page and gives you a preview button so you can see how the routing page looks without logging out.
|-
||'''Button Label'''
||The text entered here will be used as the label for the button that will open the '''Routing Page'''. This button is displayed on the login page. Typically you will enter the text "Register".
|-
||'''Header Title'''
||The text entered here will appear at the top of the routing page. Typically you will enter something like "Registration Options".
|-
||'''Introduction Text'''
||The text entered here will appear under the title but before the list of signup pages. Typically you will enter something like "I am applying as:".
|-
||'''Trailing Text'''
||The text entered here will appear under the list of signup pages. Typically you will leave this blank however some clients have chosen you may want to add contact information here in case the user needs assistance.
|-
||'''Routing Links'''
||This dynamic section enables the administrator to add links to their desired signup pages onto the Routing Page.
To create a new link, click the '''Add''' button which has a '''+ button''' icon.|} Each routing link has the following settings {| class="wikitable"|-!|Setting!|Description
|-
||'''Title'''
|-
||'''Description'''
||Text entered here will appear below the title and is used to clarify what kind of user should click this link. Using a user signup page as a link you might enter a few words like Example "For applicants who are not associated with an organization".
|-
||'''URL'''
||The relative URL that the user will be taken to upon clicking on the link. You can use the lookup button to pick the desired signup page.
|}
==Template Tab==The following settings are available on the '''Template''' tab but they are typically not modified:
{| class="wikitable"
|-
||'''Sample Template'''
||Clicking this link inserts the HTML, CSS and other code which is used to render the login page. Typically you would only add the sample use a custom template in two scenarios. First if you have an older custom login page and wanted to add some functionality that is not typically used or you want wanted to update your login page to use radically customize the new look and features, or you want to create your own customized structure of the login page with a different look and feel.
|-
||'''Login Page Template'''
||You can 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 we generally don’t recommend it. If you do add your own code here make sure your code meets accessibility guidelines and make sure it is responsive (works on all devices including mobile).
|}
=Configuration - Advanced= ==ReCAPTCHA Security==Alternate Login pages will automatically enable Google reCAPTCHA functionality in order to ensure security standards. In order to modify or disable this setting, go to '''Global Page Settings > Security '''and scroll down to the bottom of the page. :: [[File:Recaptcha.png|800px|border]] ==Error Message==In order to display an '''Error Message '''when an incorrect Settings from Alternate login username or password is provided, simply include the following variable into the Login Screen HTML: '''@errmsg@''' The system will always save a list of all invalid logins. See how to access this list [[Login Page#Invalid Login Audit|here]]. ==Popup Blocker Check==The login page can be configured to check whether users have a pop-up blocker enabled; it will enable a suggestion to the user that they disable their pop-up blocker for the SmartSimple system. The source code of the login page will include a code for a pop-up blocker warning message, but by default this will be disabled. [[Image:PBWarning1.png|1200px|border]]To enable the warning message, simply remove the text '''disabled="disabled" '''from the source code, then click '''Save '''at the bottom. [[Image:PBWarning2.png|1100px|border]]Any users that pages which are using a browser with a pop-up blocker enabled will consequently see the following alert message on their screen when they access the login page: :: [[Image:PBWarning3.png|300px|border]]==JavaScript==The following [[JavaScript]] can be added to the login page for further customization. ===Forgot Password===: '''HTML: '''Forgot your password? Please click .: '''JavaScript: '''<pre>function passwdwin(){ window.open('/s_requestpassword.jsp', 'pwdwin', 'left=200,top=200,toolbar=0,width=300,height=214,directories=no,status=no, scrollbars=no,resizable=no,menubar=no,alwaysRaised=yes'); }</pre>The system-generated email sent to the user after selecting the '''Forgot Password '''option can be configured from [[Email#Email Templates for User Activation and Password|Email Templates for User Activation and Password]]. ===Branch-Specific Forgot Password===This functionality can be typically only used when a user exists in the system multiple times with the same email address, but against different branches (organizations). The configuration means that only the password for the user account ''under a specific branch ''will be updated. : '''HTML: '''Forgot your password? Please click . * Where ''12345 ''is the [[Companyid]]. : '''JavaScript: '''<pre>function passwdwin(branch) { window.open('/s_requestpassword.jsp?branchid='+branch,'pwdin','left=200,top=200,toolbar=0,width=300,height=214,directories=no, status=no,scrollbars=no,resizable=no,menubar=no,alwaysRaised=yes'); } </pre>special circumstances
{| class="wikitable"
|-
|-
||'''Description'''
||Description of the virtual alias login pagethat is not exposed to end users.
|-
||'''Scope Organization'''
||Lookup that allows the virtual alias login page to be restricted to users in the selected organization.
|-
||'''Virtual Folder Name'''
||User adds Enter a name such as "grants," which will appear in the login URL and then you can direct different users be used to appropriate differentiate logins.
|-
||'''Web Alias'''
||User enters Enter the desired alias they you want - for example, "gms" - instead of using the instance-defined alias.
|-
||'''Persistent Cookies'''
||Enable or disable persistent cookies. Rather than having to log into SmartSimple your system each time you open your web browser, a "cookie" can be installed on your computer that will automatically authenticate you, allowing you to bypass the login screen and having to re-enter your credentials.
|-
||'''Attach User Identifier'''
||Enable or disable the encryption of the URL
|-
||'''Logout Redirect URL'''||Enter URL for users to be redirected to upon successful logout. If left blank users go to the loginpage on logout.
|-
||'''Primary Role'''
||Select from the available system roles to choose the primary default role that a user will have when they log in from through this alternate login page. This function is used to force the user to see the correct a specific Role based portal.
|-
||'''Login Type'''
||Select from the drop-down for the three available desired options: All Users, Activated Users Only, No Access
|-
||'''User Field'''
||This is the field that will be used on the login page to uniquely identify the specific user when they log in. This is typically set to '''Email Address. '''.
|-
||'''Password Field'''
||This is the field on the login page that will be used to capture for the user password when they login.
|-
||'''Login Error Message'''
||This is the error message that will appear on the login page after upon a failed login attempt.
|-
||'''Login Page Content'''
||Click the '''Insert Sample Template - '''Click this hyperlink to autopopulate auto-populate the text window with a sample template for a login page. Otherwise, you can insert in your own customized content. You can use the '''HTML Editor '''button at the bottom in order to open a pop-up Note that displays the Alternate login page content as it will be shown to works differently than primary login pages so you cannot use the user from the HTMLsame template for both.
|}
[[Category:System Management]][[Category:Glossary]][[Category:Login PagesInterface]]