This project is read-only.

Login Modal Popup

Topics: Customizing Orchard, Writing themes
Dec 16, 2011 at 8:49 PM


I think it would be great, if we were able to replace the Login page with a Jquery Modal Popup, that maybe dims the page similiar to a lightbox, and presents the Login Form with the Open Auth Providers... Maybe have a checkbox that activates the modal popup under the Open Auth settings, when enabled, clicking the Login link will fire the modal popup..

What do you think?


TJ Havens

Dec 16, 2011 at 8:51 PM

I don't see what would prevent you from doing that in a theme.

Dec 18, 2011 at 7:54 PM

Got any ideas on how to begin? Slightly beyond me...


Dec 18, 2011 at 7:57 PM

Use the Orchard shape tracing module to find out what view renders the "Login" link. In your theme, override the view so that it renders an Html.ActionLink using Ajax that pulls the login page up in a modal dialog. As an alternative to the lightbox js, you could use jQuery UI to do the modal dialog. 

Dec 18, 2011 at 8:48 PM

Wanna give it a try? :) A little beyond me I believe... I could use it though....


Dec 22, 2011 at 8:22 PM

Someone help me out here.... Any takers?

TJ Havens

Dec 23, 2011 at 12:41 AM

If you don't know how to start this, maybe you could pay someone to develop it for you? @TheMonarch gave you some good leads here.

Feb 11, 2012 at 4:30 AM

Im willing to discuss a bounty for this, anyone interested?

Tommy Havens

Jul 27, 2012 at 3:52 PM

I created with 1.4.2 Shape Tracing: User.cshtml. You must have NGM.OpenAuthentication and Orchard.Kendo for the below 
to work in your website and you can derive the .css to style it.

I need help on how to get LogOn form or Auth for to redirect to the page I am on and not the Home Page.
See example at at the top of every page the lock link which disappears when logged in.
this /Users/Account/LogOn?ReturnUrl=%2F goes to / every time. Leaving action="" blank is a error and without the ?ReturnUrl=%2 is does the same.

User.cshtml code below.

@using System.Web.Mvc; @{ Style.Require("openIdStyles"); Script.Require("jQuery"); Script.Require("openIdSelector"); Script.Require("openIdLocalization"); } @using(Script.Foot()) { <script type="text/javascript"> $(document).ready(function () { openid.setSignInText('Sign In'); openid.init('ExternalIdentifier'); //openid.setDemoMode(true); //Stops form submission for client javascript-only test purposes }); </script> <script type="text/javascript">// <![CDATA[ $("#window").kendoWindow({ actions: ["Minimize", "Maximize", "Close"], title: "Quick Login", visible: false }); $("#openButton").click(function() { var a = $("#window").data("kendoWindow");; }); // ]]> </script> } <div class="user-display"> @if (WorkContext.CurrentUser != null) { <span class="k-button"> @T("Welcome, <strong>{0}</strong>!", new HtmlString(Html.ActionLink(WorkContext.CurrentUser.UserName, "Edit", new { Controller = "Home", Area = "Contrib.Profile" } ).ToString())) @Html.ActionLink(T("Change password").ToString(), "ChangePassword", new { Controller = "Account", Area = "Orchard.Users" }) </span> <span class="k-button"> @Html.ActionLink(T("Sign Out").ToString(), "LogOff", new { Controller = "Account", Area = "Orchard.Users", ReturnUrl = Context.Request.RawUrl }) @if (AuthorizedFor(Orchard.Security.StandardPermissions.AccessAdminPanel)) { @Html.ActionLink(T("Dashboard").ToString(), "Index", new { Area = "Dashboard", Controller = "Admin" }) } </span> } else { <div class="align-right-login-head" id="loginhead"><button id="openButton" class="loginhead"></button></div> <div style="display: none;"> <div id="window"> <span id="registerimg"><a href="/Users/Account/Register" title="Register">Register<button id="register" class="registerimg" title="Registration Window" value="/Users/Account/Register"></button></a><a href="/Users/Account/RequestLostPassword" title="Lost Password?">Lost Password?<button id="lostpassword" class="registerimg" title="Lost Password?"></button></a></span> <form action="/Users/Account/LogOn?ReturnUrl=%2F" method="post"> <fieldset class="login-form group"> <legend>Account Information</legend> <ol> <li> <input id="username-email" name="userNameOrEmail" type="text" value="" title="Enter Your Name or Email" placeholder="Enter Your Name or Email" /> </li> <li> <input id="password" name="password" type="password" title="Enter Your Password" placeholder="Enter Your Password" /> </li> <li> <button class="k-button" type="submit" title="Sign In">Sign In</button><span class="center"><a href="/Users/Account/LogOff" title="Sign Out"><button id="signout"class="k-button" type="submit">Sign Out</button></a></span> </li> </ol> </fieldset> <input name="__RequestVerificationToken" type="hidden" value="npqb0a7kuWsIjAH6GHMPhTEpNLCZKisfvJqmKY60NxJOOuO8/XvLZ3rHnFJN7eA3DiDfjjhPscnEOmwWehZT1mSuxKGnqjRTWzmuk8+N4TJC1rE0cdYu1ncmQjryGrj2JQ4gNtsUAmo+dA2Ymh38TKLCtpvQiE0829TzMqLCOdUG+G5G/6UNewGoiOzxp0Tcp5ALCw=="> </form> <div class="center"><a href="" target="_blank">Get an OpenID with myOpenID!</a></div> <form action="/OpenId/LogOn?ReturnUrl=%2F" id="openid_form" method="post"><input type="hidden" name="action" value="verify" /> <fieldset class="login-form group"> <legend>OpenID account</legend> <ol> <li> <div id="openid_choice"> <p>Please click your account provider:</p> <div id="openid_btns"></div> </div> </li> <li> <div id="openid_input_area"> <label for="ExternalIdentifier">Enter manually your OpenID</label> <input autofocus="autofocus" class="textMedium" id="ExternalIdentifier" name="ExternalIdentifier" type="text" value="http://" /> <button class="k-button" type="submit">Sign In</button> </div> </li> </ol> <input name="__RequestVerificationToken" type="hidden" value="vCz4X5IC4I8nf91jA68ReaEuGuolDKg5XOhiPhgNirA0Z2+w/vH/QqcoTl8KRllDaoIL7Pt5loTUCpW0TuGuEd8yEcWkx6xG5RXM7Cc7uZafEBUhW5OrKABzdWXfxoznukHubR6T+3OLcxSnjMd0ckvhrs6i/vE50cAqrbERcP1UiK/8dQJypTiEryT3nY6djPBVaQ==" /> </fieldset> </form> <fieldset class="twitterfacebookoauth"> <a href="/OAuth/LogOn?ReturnUrl=%2F&amp;KnownProvider=Twitter" title="Login With Your Twitter Account. Or Associate Twitter with your Mansbooks registration profile."> <img Class="btntwitter" alt="Twitter" src="../../Modules/NGM.OpenAuthentication/Content/oauth/images/twitter88.png" title="Twitter" /> </a> </fieldset> <fieldset class="twitterfacebookoauth"> <a href="/OAuth/LogOn?ReturnUrl=%2F&amp;KnownProvider=Facebook" title="Login With Your Facebook Account. Or Associate Facebook with your PubliusLogic registration profile."> <img Class=" btnfacebook" alt="Facebook" src="../../Modules/NGM.OpenAuthentication/Content/oauth/images/facebook88.png" title="Facebook" /> </a> </fieldset> </div> </div> } </div>