Was this article helpful?

Screen-set on Page

Last modified 11:53, 15 Sep 2014

 

The following example shows a simple screen-set writen inside the web-page:

See it in Action

 

Check Out the Code

<html>
    <title>Gigya Accounts Test</title>
 	<SCRIPT type="text/javascript" lang="javascript" 
	   src="http://cdn.gigya.com/JS/socialize.js?apikey=3_M1eHwD-F5bWoKYepn0B3hWgTZ6tR9-lte5UYUjVcJn8uaAixh-FV-P1KOFbie7hl"></SCRIPT>
	<style type="text/css">
		h2 {
			font-size: 16px;
			font-weight: bold;
			color: rgb(116, 116, 116);
		}
		*{
			font-family: Arial;
		}
		p, label{
			line-height:0.6em;
			font-size: 12px;
		}
		.gigya-error-display {
			background-color: rgb(254, 233, 234);
			border: 1px solid rgb(228, 157, 159);
		}
		
    </style>
</head>
<body>
    <span style="font-size: 16px;font-weight: bold;letter-spacing: 1px;float: left;font-family: Arial;">
		<a href="#" onclick="gigya.accounts.showScreenSet({screenSet:'simple-screen-set', startScreen:'login-screen'});">Login</a>&nbsp;&nbsp;|&nbsp;&nbsp; 
		<a href="#" onclick="gigya.accounts.showScreenSet({screenSet:'simple-screen-set', startScreen:'registration-screen'});">Register</a>&nbsp;&nbsp;&nbsp;&nbsp;
		</br></br></br>
		<a href="#" onclick="gigya.accounts.showScreenSet({screenSet:'simple-screen-set', startScreen:'edit-profile'});">Edit Your Profile</a>&nbsp;&nbsp;&nbsp;&nbsp;
		</br></br></br>
		<a href="#" onclick="gigya.accounts.logout({callback:onLogout});">Logout</a>&nbsp;&nbsp;&nbsp;&nbsp;
	</span>

	<!-- ScreenSet code begin -->
    <div class="gigya-screen-set" id="simple-screen-set" data-width="500" data-height="600" style="display: none" data-on-pending-registration-screen="edit-profile">
		
		<!-- Login Screen -->
        <div class="gigya-screen" id="login-screen" data-width="365" data-height="565" data-caption="Login">
            <h2>Login with Your Social Identity:</h2>
            <div class="gigya-social-login">
                <param name="buttonsStyle" value="fullLogo">
                <param name="width" value="313">
				<param name="height" value="160">
				<param name="showTermsLink" value="false">
				<param name="hideGigyaLink" value="true">
			</div>
			</br>
			<h2 style="letter-spacing: 1px;text-align: center;color: rgb(156, 156, 156);">------------  OR  ------------</h2>
			</br>
            <h2>Login with Your Site Credentials:</h2>
			</br>
			<form class="gigya-login-form">
                <p >User Name:</p> 
				<input type="text" name="loginID" style="width:300">
				<div class="gigya-error-msg" data-bound-to="loginID"></div>

                
                <p >Password:</p>
				<input type="password" name="password" style=" width:300">
               <div class="gigya-error-msg" data-bound-to="password"></div>

                </br>
                <input type="submit" value="Login" style="float: right;"></p>
            </form>
            </br>
           	<p style="float: right;">Don't have an Account yet? 
				<a data-switch-screen="registration-screen" >Click here</a></p>			
        </div>

		<!-- Registration Screen -->
        <div class="gigya-screen" id="registration-screen" data-width="320" data-height="735" data-caption="Register">
            <h2>Register with Your Social Identity:</h2>
            <div class="gigya-social-login">
                <param name="buttonsStyle" value="fullLogo">
                <param name="width" value="313">
				<param name="height" value="160">
				<param name="showTermsLink" value="false">
				<param name="hideGigyaLink" value="true">
           </div>
			<h2 style="letter-spacing: 1px;text-align: center;color: rgb(156, 156, 156);">------------  OR  ------------</h2>
		
            <h2>Create a New Account:</h2>	
            <form class="gigya-register-form" data-on-success-screen="edit-profile">
                <p >Email address:</p>
				<input type="text" name="email" style=" width:180">&nbsp;&nbsp;<div class="gigya-loginID-availability" style="display: inline-block"></div>
				 </br><span class="gigya-error-msg" data-bound-to="email"></span>
                </br>
                <p >Password:</p>
				<input type="password" name="password" style=" width:180">&nbsp;&nbsp;<div class="gigya-password-strength" data-bound-to="password" data-on-focus-bubble="true"></div>
				 <span class="gigya-error-msg" data-bound-to="password"></span>
                </br>
                <p>Retype Password:</p>
				<input type="password" name="passwordRetype" style=" width:180">
				</br><span class="gigya-error-msg" data-bound-to="passwordRetype"></span>
 				</br></br>
                <div class="gigya-captcha" style="">
				</div>
                </br> 
                <input type="submit" value="Register" style="float: right;">
            </form>
			</br>
           	<p style="float: right;">Already have an Account? 
				<a data-switch-screen="login-screen" >Click here</a></p>	
				</br></br>
            <span class="gigya-error-display" data-bound-to="gigya-register-form" data-scope="all-errors" >
				<span class="gigya-error-msg" data-scope="all-errors" data-bound-to="gigya-register-form"></span>
			</span>				
        </div>

		<!-- Profile update Screen -->
		<div class="gigya-screen" id="edit-profile" data-width="360" data-height="500" data-caption="Edit Your Profile"> 
            <form class="gigya-profile-form">
                <p>Upload your photo:</p> 
				<div class="gigya-photo-upload"></div>
                </br></br>
                <p>Gender:</p>
                <input type="radio" name="gender" value="m"><label>Male</label>
                <input type="radio" name="gender" value="f"><label>Female</label>
                </br></br>
				<p >Year of birth:</p>
				<select name="birthYear" style=" width:160"><option value="1920">1920</option><option value="1921">1921</option><option value="1922">1922</option><option value="1923">1923</option><option value="1924">1924</option><option value="1925">1925</option><option value="1926">1926</option><option value="1927">1927</option><option value="1928">1928</option><option value="1929">1929</option><option value="1930">1930</option><option value="1931">1931</option><option value="1932">1932</option><option value="1933">1933</option><option value="1934">1934</option><option value="1935">1935</option><option value="1936">1936</option><option value="1937">1937</option><option value="1938">1938</option><option value="1939">1939</option><option value="1940">1940</option><option value="1941">1941</option><option value="1942">1942</option><option value="1943">1943</option><option value="1944">1944</option><option value="1945">1945</option><option value="1946">1946</option><option value="1947">1947</option><option value="1948">1948</option><option value="1949">1949</option><option value="1950">1950</option><option value="1951">1951</option><option value="1952">1952</option><option value="1953">1953</option><option value="1954">1954</option><option value="1955">1955</option><option value="1956">1956</option><option value="1957">1957</option><option value="1958">1958</option><option value="1959">1959</option><option value="1960">1960</option><option value="1961">1961</option><option value="1962">1962</option><option value="1963">1963</option><option value="1964">1964</option><option value="1965">1965</option><option value="1966">1966</option><option value="1967">1967</option><option value="1968">1968</option><option value="1969">1969</option><option value="1970">1970</option><option value="1971">1971</option><option value="1972">1972</option><option value="1973">1973</option><option value="1974">1974</option><option value="1975">1975</option><option value="1976">1976</option><option value="1977">1977</option><option value="1978">1978</option><option value="1979">1979</option><option value="1980">1980</option><option value="1981">1981</option><option value="1982">1982</option><option value="1983">1983</option><option value="1984">1984</option><option value="1985">1985</option><option value="1986">1986</option><option value="1987">1987</option><option value="1988">1988</option><option value="1989">1989</option><option value="1990">1990</option><option value="1991">1991</option><option value="1992">1992</option><option value="1993">1993</option><option value="1994">1994</option><option value="1995">1995</option><option value="1996">1996</option><option value="1997">1997</option><option value="1998">1998</option><option value="1999">1999</option><option value="2000">2000</option><option value="2001">2001</option><option value="2002">2002</option><option value="2003">2003</option><option value="2004">2004</option></select> 
				</br></br>
                <p>Please fill your bio:</p>
				<textarea name="data.bio" data-display-name="Bio"></textarea>
                </br></br>
                <p>Please select your office location:</p>
                <select name="data.officeLocation" data-display-name="Office Location">
                    <option value=""></option>
                    <option value="TelAviv">New York</option>
                    <option value="PaloAlto">Palo Alto</option>
                    <option value="UK">London</option>
                </select>
				</br>
                <input type="submit" value="submit" style="float: right;">
            </form>
			<span class="gigya-error-display" data-bound-to="gigya-profile-form" data-scope="all-errors">
				<span class="gigya-error-msg" data-bound-to="gigya-profile-form" data-scope="all-errors"></span>
            </span>
        </div>
    </div>
	<!-- ScreenSet code end -->

	<script>
		// Handle logout response
		function onLogout(response) {   
			if ( response.errorCode == 0 ) {                
				alert('User has logged out'); 
			} 
			else { 
				alert('Error :' + response.errorMessage); 
			} 
		}
	</script>
</body>
</html>

Note:
In order to make this code work in your environment, please:
  • Click the "view source" icon (link located above code on the right hand side) - This will open a popup window with a text version of the code, which you may copy.
  • The API key in the sample will only work on http://localhost/...
  • To load the page from your domain, modify the value of the "APIKey" field in the code to your own Gigya API Key. A Gigya API Key can be obtained on the Site Dashboard page on Gigya's website. Please make sure that the domain from which you are loading the page is the same domain name that you used for generating the API Key.

 
Was this article helpful?
Pages that link here
Page statistics
363 view(s) and 1 edit(s)
Social share
Share this page?

Tags

This page has no custom tags.

Comments

You must to post a comment.

Attachments