Changes

The Login page allows a user to gain access to your SmartSimple System. The user will authenticate on this page, typically by entering a username and password. You will need global administrator '''Global Administrator''' access to setup or edit login pages.

# Direct people to a [[Signup_Page|signup page]]via the (routing page)

This article will show you how to setup and modify login pages within your systemand we will look at other related settings.

==Multiple/Switching languagesLanguages==

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 adding '''?&lang=14 ''' to the login page URL like this https://myalias.smartsimple.com/s_Login.jsp?&lang=14 and send that link URL to usersa user.the URL would look like this:

<pre> https://myalias.smartsimple.com/s_Login.jsp?&lang=Settings Explained=The following settings are available on the '''General''' tab:14</pre>

{| class="wikitable"=Creating a Routing Page==Routing pages are created to direct (guide) the end user to the appropriate page which is typically a [[Signup_Page|-Signup page]].!|Setting!|Description|-||'''Language'''||Each When a user navigates to a login page must have they will click a single language button which you is typically labeled register on the login page and that will take the user to an intermediary (routing) page where they can select from see the drop downlist of available signup pages. Available languages are: 

|-||'''Is Default Login Page'''||By default, when a user goes * Multiple signup pages to your system's URL, example https://smart.smartsimple.com they will be directed to the '''English US''' language login page. If you want users to go to a register 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 Title'''||Text entered here will display in a browsers title bar or a page’s tab. This text is used as the title tag kinds of your web page.|-||'''Login Title'''||Text entered here appears above the area where you authenticate. Generally it is not modified.|-||'''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 System.|-||'''Content Text'''organizations and users||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 * Multiple signup pages for. Example, ABC group provided grants to non-profits in small town USA. Press the register button to gain access to the system and apply for funding.|-||'''Logout Redirect URL'''||Enter a URL such as https://www.smartsimple.com/ here and the user will be redirected to that site upon logout.different languages|-||'''Link Section'''||Typically people are given the ability to self-register and gain access to your system. You have 3 options in this regard.* Multiple eligibility questionnaires

'''Use Routing [[File:Singup-routing.png|thumb|none|500px|The routing page''' – When you have multiple signup pages for different types of takes users, organizations and languages, this option is used. It will display a list of signup pages so the user can be directed to the signup page that is right for them. Learn more about [[Signup_Page#Creating_a_routing_page|routing pages]]

Custom URL – If you only have one signup [[File:Routing page in one language you can choose this option and enter the URL to that .png|thumb|none|500px| The routing page here. Remember to use the relative path. Example /s_signup.jsp?token=XVtQC1oGYFFaRhNaXxJaQVBRZEl8GnA%3D this way the register button will work on production and backup tab and any staging servers you may havesettings.]] 

The following settings are available on # Go to Menu Icon > '''Global Settings''' > '''Branding''' tab > '''Login Pages''' link > edit the desired login page > '''Routing Page'''General tab.# Under '''Routing Links''' press the plus button.# 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 to find it. If you paste the Page FormattingURL of your signup page into a routing page, make sure you use the relative path example: /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.# Press '''Save''' section:.

{| class="wikitable"=Agreeing to Cookies==|-!|Setting!|Description|-||'''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 When we talk about Cookies we are referring to a resolution small piece of 1920 x 1080 or higher.Browse data stored on a file from your user’s computer using the '''folder icon ''' and upload it with the '''upwards arrow '''icon. You can delete any uploaded file with As of the '''trashcan icon. ''''''Note[https: '''The background image field will only allow you to browse and upload a file once you have clicked the '''Save '''button on a new login page//en.|-||'''Background Position'''||Select how the image will render at different resolutions by choosing where to anchor the image vertically and horizontallywikipedia. 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 rightorg/wiki/bottom of the image may not display depending on screen size and aspect ratio of the image and the users device.|-||'''Background Color'''||Adjust this setting to change the color that will appear above the background image. Enter the desired hexadecimal value here without the HTTP_cookie# or use the color picker. Example, enter FFFFFF to have a white background.EU_cookie_directive|-||'''Background Opacity'''||Adjust this setting EU Cookie directive] users must be aware/consent to change the opacity of the background color. For example High will make the color completely opaque and you will not see the background image. Low will make the background color completely transparent revealing the background image as uploaded. Something in between Low and High will create a translucent layer of color over the background image.|-||'''Panel Color'''||Select the color of the panel that appears behind the content such as the username and passwordcookies. |-||'''Panel Opacity'''||Select the level of opacity for the panel that appears behind the 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===You can also learn about the [[Signup Page#Creating a routing pageFile:cookies.jpg|thumb|none|500px|Routing PageThe Cookies acceptance alert shown to all users first time they visit your system.]] here. 

:: [[File:Routing page==Privacy and Security Policies==Within your system you will need to setup Privacy and Security Policies.png|800px|border]] The configuration options You will set these polices up for several language and country combinations. Typically a privacy policy will say what type of information you collect, why it is collected, how it is collected , what you will use the information for your routing page include , who will have access to the information, how users will be notified of changes to the following:policy and who to contact regarding privacy concerns.

{| class="wikitable"|-||'''Button Label'''||The label that will appear on the button on the login page that, when clickedLearn more about [[Configuring_Privacy, will direct the user to this Routing Page.|-||'''Header Title'''_Confidentiality_and_Other_Policies||The header that will appear on the Routing Page.|-||'''Introduction Text'''||The introduction text that will appear on the Routing Page.|-||'''Trailing Text'''||The text that will appear at the bottom of the Routing Page.|-||'''Routing Links'''||This is a dynamic section that allows for the creation of multiple links on a Routing Page. In order to add a new link, simply click the '''+ '''button. Configuring Privacy and Security Policies]]

* '''Title: '''The title that login page will appear for the configured link.* have a button called '''Description: Privacy & Security Policies'''The description that appears against in the configured link. * '''URL: '''The URL that the user will be taken to upon clicking on main panel below the linkemail and password inputs. 

|}The routing page configuration section is intended If you have chosen a date for those [[instance]]s that have Enforce User Acceptance the following: user will be brought directly to your policies upon login.

A routing page will allow for simplified creation and access to multiple pages, guiding forgot password link appears by default on the end-user to the correct page from a single login page. A successful routing page might look like the following: 

:: [[File:RoutingPage.png|700px|border]]===Template===The third tab from the '''Login Screen Content '''is the '''Template '''page. Here, you Users can use the '''Sample Template '''button to populate enter an email and if a user with access has the content of email entered the Rich Editor field, and then modify as necessarysystem will email instructions to that user so they can change their password. 

:: [[File:Login page templateIf you do not receive an email within a few minutes check your spam/junk mail folder.png|450px|border]]==ReCAPTCHA Security== 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 Settings > Security '''and scroll down The forgot password email sent to users can be configured by doing the bottom of the page. following:

:: [[File:Recaptcha# Go to Menu icon > '''Global Settings''' > '''Security''' Tab > '''Password and Activation Policies''' link > '''Activation Email Templates''' tab > scroll down to '''Request Password''.# modify the content as desired.# press '''Save'''.png|800px|border]]

==Error MessageCAPTCHA on the Login==In order If you enter the wrong email and password into the login page twice you will see a CAPTCHA. CAPTCHA stands for “Completely Automated Public Turing Test to tell Computers and Humans Apart”. It is used in this case to display an '''Error Message '''when verify that a person and not an incorrect automated program is attempting to 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 AuditFile:captcha-login.jpg|thumb|none|here500px|CAPTCHA displayed after wrong email and password combination entered]].

==Popup Blocker Check==The login page You can be configured toggle the CAPTCHA on or off for your entire system by going to check whether users have a pop-up blocker Menu icon > Global Settings > Security tab > and choose either enabled; it or disabled. The inherit choice only affects signup pages and will enable a suggestion not disable CAPTCHA on the login.Note you can also choose to bypass the user use of CAPTCHA for users in countries that they disable their pop-up blocker for are unable to communicate with CAPTCHA servers because of government policy. This is done by selecting a country such as China in the SmartSimple systembypass setting. 

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[[File:Recaptcha.png|thumb|none|500px|Global CAPTCHA Settings]]

[[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 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]]==JavaScriptPopup Blocker Check==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]].  ===Branchto check whether users have a pop-Specific Forgot Password===This functionality can be used when a user exists in the system multiple times with the same email address, but against different branches (organizations)up blocker enabled. The configuration means that only the password for If the user account ''under does have a specific branch ''popup blocker enabled they will be updatedreceive a warning with a suggestion that they disable their pop-up blocker. : '''HTML: '''Forgot your password? Please click . * Where ''12345 ''is the [[Companyid]]Typically we leave this check disabled and do not warn users that they are using a pop up blocker. 

[[File: '''JavaScript: '''<pre>function passwdwin(branch) { popup-blocker.jpg|thumb|none|500px|text]]

windowIf you choose you can enable this check and warning message by doing the following.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# Go to menu icon > '''Global Settings''' > '''Branding'''); } </pretab > A login page can be configured with multiple '''Forgot Password Login Pages'''links, each including a different companyid as link > edit the parameter. Alternatively, you can create multiple desired login pages with a single link/companyid included on each page. # Go to the '''Template''' tab.When # Inside the user clicks on the '''Forgot Password Login Page Template'''link, enters their password, and submits it, then the underlying code will text area search for the entered email address in the company and all of its sub-organizations. It will then email the password for that branch-specific user account.'''disabled="disabled"'''* The email sent can then be configured with [[Sslogic]] to tailor # Remove the content of the email to the specific branch'''disabled="disabled"''' text.* The error message displayed on this page when an invalid email is entered can be altered using the [[Language Library]]# Press '''Save'''.

Using the Search fields on the top right, you are also able to apply [[Filters]] by time period ('''Year '''and '''Month''') and/or by username. =Settings Explained=The following settings are available on the '''General''' tab: {| class="wikitable"|-!|Setting!|Description|-||'''Language'''||Each login page must have a single language which you can select from the drop down. 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 URL, 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 Title'''||Text entered here will display in a browsers title bar or a page’s tab. This text is used as the title tag of your web page.|-||'''Login Title'''||Text entered here appears above the area where you authenticate. Generally it is not modified.|-||'''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 System.|-||'''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 group provided grants to non-profits in small town USA. Press the register button to gain access to the system and apply for funding.|-||'''Logout Redirect URL'''||Enter a URL such as https://www.smartsimple.com/ here and the user will be redirected to that site upon logout.|-||'''Link Section'''||Typically people are given the ability to self-register and gain access to your system. You have 3 options in this regard. '''None''' – You provide no links to a signup page. 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. '''Use Routing page''' – When you have multiple signup pages for different types of users, organizations and languages, this option is used. It will display a list of signup pages so the user can be directed to the signup page that is right for them. Learn more about [[Signup_Page#Creating_a_routing_page|routing pages]] Custom URL – If you only have one signup page in one language you can choose this option and enter the URL to that page here. Remember to use the relative path. Example /s_signup.jsp?token=XVtQC1oGYFFaRhNaXxJaQVBRZEl8GnA%3D this way the register button will work on production and backup and any staging servers you may have. |-||'''Link Section Title'''||Text entered here appears above the register buttons. Typically this is not modified.|} The following settings are available on the '''General tab''', '''Page Formatting''' section: {| class="wikitable"|-!|Setting!|Description|-||'''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 higher.Browse a file from your computer using the '''folder icon ''' and upload it with the '''upwards arrow '''icon. You can delete any uploaded file with the '''trashcan icon. ''''''Note: '''The background image field will only allow you to browse and upload a 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 not display depending on screen size and aspect ratio of the image and the users device.|-||'''Background Color'''||Adjust this setting to change the color that will appear above the background image. Enter the desired hexadecimal value here without the # or use the color picker. Example, enter FFFFFF to have a white background.|-||'''Background Opacity'''||Adjust this setting to change the opacity of the background color. For example '''High''' will make the color completely opaque and you will not see the background image. '''Low''' will make the background color completely transparent revealing the background image as uploaded. Something in between '''Low''' and '''High''' will create a translucent layer of color over the background image.|-||'''Panel Color'''||Select the color of the panel that appears behind the content such as the username and password. |-||'''Panel Opacity'''||Select the level of opacity for the panel that appears behind the 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.|} The following settings are available on the '''Routing Page''' tab: {| class="wikitable"|-!|Setting!|Description|-||'''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 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 + button.|-||'''Title'''||Text entered here will appear in bold for each link. Typically you would enter a few words like Individual, International Organizations, Domestic Organizations.|-||'''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 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.|} The following settings are available on the '''Template''' tab but they are typically not modified: {| class="wikitable"|-!|Setting!|Description|-||'''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 template in two scenarios. First you have an older custom login page and you want to update your login page to use the new look and features, or you want to create your own customized 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). |}