I have gone through some of the blogs in internet, but I am not able to find out how to do my own login page without Spring Security. How can I do it?
To create a custom login page, create a view called auth.gsp in grails-app/views/login/. Make sure it passes the parameters j_username and j_password to the action ${postUrl}. Here is the default auth.gsp view that comes with Spring Security 1.x:
<html>
<head>
<meta name='layout' content='main'/>
<title><g:message code="springSecurity.login.title"/></title>
<link rel="stylesheet" href="${resource(dir: 'css', file: 'auth.css')}" type="text/css">
</head>
<body>
<div id='login'>
<div class='inner'>
<div class='fheader'><g:message code="springSecurity.login.header"/></div>
<g:if test='${flash.message}'>
<div class='login_message'>${flash.message}</div>
</g:if>
<form action='${postUrl}' method='POST' id='loginForm' class='cssform pure-form pure-form-aligned' autocomplete='off'>
<p>
<label for='username'><g:message code="springSecurity.login.username.label"/>:</label>
<input type='text' class='text_' name='j_username' id='username'/>
</p>
<p>
<label for='password'><g:message code="springSecurity.login.password.label"/>:</label>
<input type='password' class='text_' name='j_password' id='password'/>
</p>
<p>
<input type='submit' id="submit" class="btn" value='${message(code: "springSecurity.login.button")}'/>
</p>
</form>
</div>
</div>
<script type='text/javascript'>
<!--
(function() {
document.forms['loginForm'].elements['j_username'].focus();
})();
// -->
</script>
</body>
</html>
I would copy that into your auth.gsp view and change it from there.
This can be annoying sometimes.
So if am getting you right you want to change the look and feel of the login spring security offer right?
Do this after you are done with your UI design( CSS, HTML and others).
Now change the input name and compare it to auth.gsp, thus from Spring security.
You can hold ctrl+shift+N on the keyboard and type auth.gsp for you to check.
Compare it to yours and change where possible.
In your UrlMAppings.groovy do this editing
"/"(view:"/Your login page")
"/login/auth"(view:"/Your login page")
Now restart your service and thats all.
If the issue persist you can post the error here so we can see what to do to help.
Note this is for Grails 3.x
In order to do this you need to do this tasks:
Create a login view inside views directory
create two gsp views names auth.gsp and denied.gsp
in this step you probably need to copy content from plugin auth.gsp view and denied.gsp if you are using grails spring security core plugin version 2.0-RC3 these views are located at target > work > plugins > spring-security-core-2.0-RC2 > grails-app > view > login, copy content and paste it in your app auth.gsp and denied.gsp views
You can check an example of views location and views content in this repo.
Related
I am currently adding globalization to an existing web app which uses devextreme to present the page, as below:
<body>
<div id="viewport" class="dx-viewport">
<div class="startPage dx-content-background" data-options="dxContent : { targetPlaceholder: 'content' } ">
<div class="content">
<h1>Registration</h1>
<div class="regForm" id="registrationForm" />
<div class="regButton" id="registrationButton" />
<div class="loadIndicator" id="loadIndicator" />
<div class="registrationSucceeded" id="registrationSucceeded" />
<div class="returnToMainPageButton" id="returnToMainPageButton"/>
</div>
</div>
</div>
The entries are translated as expected but I can't figure out how to translate the heading as DevExtreme doesn't provide a straight 'Text' widget. If I set it to use a TextArea, for example then it does work but then obviously doesn't look like a header.
So, how can I translate the header text (or any other that is held in the HTML page)?
Maybe the official DevExtreme localization topic will be usefull for you.
So, how can I translate the header text (or any other that is held in the HTML page)?
You can use a text binding to provide content based on current locale.
I am new to knockout, I have found an example of checkbox binding which could be very useful in my website.
Link to the example: http://knockoutjs.com/documentation/checked-binding.html
I tried to apply it to my page but it didn't work, then I tried to copy this example without changing anything but still it didn't work. I tried it on different browser(Chrome, Firefox, IE) and including different version of knockout libraries, but still it didn't work.
I have no other idea what I am doing wrong, please help!
Here is the code of this example:
<!DOCTYPE html>
<head>
<script type='text/javascript' src='http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.1.0.js'></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dokument bez tytułu</title>
</head>
<body>
<p>Send me spam: <input type="checkbox" data-bind="checked: wantsSpam" /></p>
<div data-bind="visible: wantsSpam">
Preferred flavors of spam:
<div><input type="checkbox" value="cherry" data-bind="checked: spamFlavors" /> Cherry</div>
<div><input type="checkbox" value="almond" data-bind="checked: spamFlavors" /> Almond</div>
<div><input type="checkbox" value="msg" data-bind="checked: spamFlavors" /> Monosodium Glutamate</div>
</div>
<script type="text/javascript">
var viewModel = {
wantsSpam: ko.observable(true),
spamFlavors: ko.observableArray(["cherry","almond"]) // Initially checks the Cherry and Almond checkboxes
};
// ... then later ...
viewModel.spamFlavors.push("msg"); // Now additionally checks the Monosodium Glutamate checkbox
</script>
</body>
</html>
What you are looking at is a fragment, not a fully working example. You need to do a couple of things.
You need to applyBindings:
ko.applyBindings(viewModel);
And you need to do that after the DOM has loaded (or knockout will get very upset).
Here's an example
I've updated my example a little to make it easier to see that the checkboxes are, in fact, bound. There's a list of the spamFlavors under the list of checkboxes that will change as you check and uncheck the checkboxes.
I am trying to create a javascript that will automatically press a submit button on a third party website. Basically, if I wanted to automatically log in to a site with a cookie filling in my username and password, for example a google account, the javascript would automatically press the submit button without me having to do it.
I guess what you're looking for is the .click() method that all buttons have. A more detailed explanation is below...
You can use a frameset with your JavaScript code in one frame and the third party page in another. For example:
<!-- Main page -->
<HTML><frameset rows="0,*">
<!-- You see your script page. To see the actual login page, swap the * and the 0. -->
<frame src="http://third.party.website.com/login/page.htm" name="theirframe" />
<frame src="myscript.html" name="myframe" />
</frameset></HTML>
And if the page you want to login to is like this (cleaned up from Gmail's login page, they have a lot of oddly-placed newlines and spaces!):
<!-- Third-party page -->
<div class="email-div">
<label for="Email"><strong class="email-label">Username</strong></label>
<input type="email" spellcheck="false" name="Email" id="Email" value="">
</div>
<div class="passwd-div">
<label for="Passwd"><strong class="passwd-label">Password</strong></label>
<input type="password" name="Passwd" id="Passwd">
</div>
<input type="submit" class="g-button g-button-submit" name="signIn" id="signIn" value="Sign in">
Then your script would probably be something like this:
<!-- Your script page (myscript.html) -->
<HTML><body>
<!-- Insert custom message here... -->
Logging you in......
<script>
//parent.theirframe.document.getElementById("Email").value = getemail();
//parent.theirframe.document.getElementById("Passwd").value = getpass();
parent.theirframe.document.getElementById("signIn").click();
</script>
<body></HTML>
If your browser is telling you that "The element with ID "Email" doesn't exist" or something, the your browser probably loaded your script page before the login page. In that case, you'll have to put the login page in a named iframe within your custom page and place your script after the iframe in the body of the page. If you do end up doing that, this page will help you out with accessing the iframe's content.
Hope this helps out.
I am at my wits end with jQuery Mobile events. I do not understand them, despite following the docs to the T. I am using the following code to initialize my pages. The problem is that some seem to fire multiple times and occasionally when I go back to a page nothing will appear, as though .live pageinit simply doesn't fire at all. I am quite confused. Is pageinit the way to go? is .live best practice? Do I need to clean up after myself and use something like pagehide to remove stuff from the DOM? Please help me understand. Thanks!
// page number 1
<header>
includes and stuff
<header>
<body>
<div data-role="page" data-theme="a" id="dashboardPage">
$('#dashboardPage').live('pageinit',function() {
});
// somewhere in here a page transition to anotherPage.html (not necessarily the id of the new page in the <div data-role-"page data-theme...> declaration
$.mobile.changePage("anotherPage.html",{transition : "slide"});
</div>
</body>
// page number 2
<header>
includes and stuff
<header>
<body>
<div data-role="page" data-theme="a" id="specialsPage">
$('#specialsPage').live('pageinit',function() {
});
</div>
</body>
You could try something like this:
<html>
<header>
<!-- BASIC INCLUDES -->
<link rel="stylesheet" href="./css/jquery.structure-1.1.0.min.css" />
<link rel="stylesheet" href="./css/jquery.mobile-1.1.0.min.css" />
<link rel="stylesheet" href="./css/jquery.mobile.theme-1.1.0.min.css" />
<script type="text/javascript" src="./js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="./js/jquery.mobile-1.1.0.min.js"></script>
<!-- END - BASIC INCLUDES -->
</header>
<body>
<!-- PAGE 1 -->
<div data-role="page" data-theme="a" id="dashboardPage">
<script>
// INITIALIGE PAGE 1 - dashboardPage
$("#dashboardPage").live('pageinit',function(event){
alert( '"initializing" page 1: dashboardPage');
});
</script>
HERE YOU ARE AT PAGE 1 (dashboardPage)!!!<br><br>
CLICK HERE TO GO TO PAGE 2 (specialsPage)
</div>
<!-- PAGE 2 -->
<div data-role="page" data-theme="a" id="specialsPage">
<script>
// INITIALIGE PAGE 2 - specialsPage
$("#specialsPage").live('pageinit',function(event){
alert( '"initializing" page 2: specialsPage');
});
</script>
HERE YOU ARE AT PAGE 2 (specialsPage)!!!<br><br>
CLICK HERE TO GO TO PAGE 1 (dashboardPage)
</div>
</body>
</html>
Hope it helps.
When using JQuery mobile you should consider you have a single page which content is updated dynamically. You do not navigate from one page to the other as you normally would.
Because of this, any code present in a page you navigate to with JQM simply be ignored (tyr changing the header of page number 2, and navigate to this page from page number 1 with changepage, you will not see any difference).
Because of that, all your js code should be directly available within the page in which your user will arrive.
If you add the following code in the scripts of page 1, you will proeperly detect the initialization of of page2 when it is loaded with changepage.
$("#specialsPage").live('pageinit',function(event){
alert( '"initializing" page 2: specialsPage');
});
An important thing to keep in mind is that you user might also directly access your page2, which means that all the code should also be available for page 2. Because of this I would strongly recommend including all your code in a js file referenced in the headers of all your page, and NOT directly in script tags within your pages.
I am building a web application using Grails. I decided to use dojo and I added a dojo fisheye menu for begining in the main.gsp so it would be available on all the application's pages.
It works fine for the (home) index.gsp page, but once I select another one, the fisheye menu disapears. If I go back to home it is there. I revised my settings and everything looks ok to me. I am not using anything fancy, just simple things. I am missing something but not able to figure it out.
here is the code in my main.gsp simplified for clarity:
<html>
<head>
...
<g:layoutHead />
<!-- use dojo library ... this has not effect at all -->
<g:javascript library="dojotk"/>
<!-- Load Dojo -->
<script type="text/javascript" src="js/dojotk/dojo/dojo.js"
djConfig="parseOnLoad:true, isDebug:false"></script>
<!-- need fisheye -->
<g:javascript type="text/javascript">
dojo.require("dojox.widget.FisheyeList");
</g:javascript>
<!-- required css for dojo fisheye -->
<style type="text/css">#import "js/dojotk/dojox/widget/FisheyeList/FisheyeList.css";</style>
</head>
<body >
...
<!-- fisheye bar -->
<div id="fisheyebar"><g:render template="/common/fisheyebar"/></div>
<g:layoutBody />
</body>
And here is the _fisheyebar.gsp
<g:javascript>
function load_app(target){
window.location.href=target
}
</g:javascript>
<center >
<div class="outerbar">
<div dojoType="dojox.widget.FisheyeList"
itemWidth="50" itemHeight="50"
itemMaxWidth="200" itemMaxHeight="200"
orientation="horizontal"
effectUnits="2"
itemPadding="10"
attachEdge="top"
labelEdge="bottom"
>
<div dojoType="dojox.widget.FisheyeListItem"
onClick= "load_app('${createLinkTo(dir:'/something')}');"
iconsrc="images/icon_something.png" caption="Web Browser">
</div>
.....
</div>
</div> <!-- outbar -->
</center>
All the pages including the index.gsp have the following:
<head>
<title>some titel</title>
<meta name="layout" content="main" />
</head>
Please not that the usage of template (_fisheyebar) is not the cause, I put the code directly in the main and had the same effect. So what am I missing?
it is in the relative url to dojo's location. it is relative to the root so that's why the index works and not the other pages.
using absolute URLs fixes the problem.
Did you try to move your dojo declaration and imports to your layout template page instead of putting it in your main.gsp ?