Grails sign up with Modal Window - grails

I am using grails 2.1.1 and trying to sign up a new user with modal window. My signup modal window's .gsp code is as follows...
....
<!--Start of Registration Modal Page-->
<div id="register" class="modal hide fade" aria-labelledby="modalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
<i class="icon-remove"></i>
</button>
<h3 id="modalLabel">
Register
</h3>
</div>
<div class="modal-body">
<g:form method="POST">
<div class="controls controls-row">
<div class="span1"></div>
<input type="text" class="span2" placeholder="Full Name" value="${user?.profile?.fullName}">
<div class="span1"></div>
</div>
<div class="controls controls-row">
<div class="span1"></div>
<input type="text" class="span3" placeholder="Email" value="${user?.profile?.email}">
<div class="span1"></div>
</div>
<div class="controls controls-row">
<div class="span1"></div>
<input type="text" class="span3" placeholder="Username" value="${user?.username}">
<div class="span1"></div>
</div>
<div class="controls controls-row">
<div class="span1"></div>
<input type="password" class="span3" placeholder="Password" value="${user?.password}">
<div class="span1"></div>
</div>
<div class="controls controls-row">
<div class="span1"></div>
<input type="text" class="span3" placeholder="Bio" value="${user?.profile?.bio}">
<div class="span1"></div>
</div>
<div class="controls controls-row">
<div class="span1"></div>
<button type="submit" class="span3 btn btn-warning">Create Account</button>
<div class="span1"></div>
</div>
<div class="modal-footer">
<button class="btn btn-danger" data-dismiss="modal" aria-hidden="true">Cancel
</button>
<button class="btn btn-success" type="submit">Register
</button>
</div>
</div>
</div>
</g:form><!--End of Form-->
<!--End of Registration Modal Page-->
My corresponding controller is "user" and I have a customized "register" action there as well. All I want is that when I click Create Account button, the user is registered behind in the database. Is there any way to make it up through modal window form directly?

Related

Select dropdown not displaying properly in the cshtml View

The dropdown on the image below do not display properly. I want the dropdown to cover the length of the Modal Popup. The Button on the page fire properly I have no issue with my Controller. Any help to resolve this issue will be appreciated
View Code
<a class="btn w-xs btn-primary" data-toggle="modal" data-target=".bootstrapmodal"><i class="fa fa-book" aria-hidden="true"></i><span id="#ViewBag.Group"> Add New Member</span></a>
<div class="modal fade bootstrapmodal ">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button data-dismiss="modal" class="close"><span>×</span></button>
<div class=" modal-title"><h3>Add User to Active Directory Group #ViewBag.Group </h3></div>
</div>
<div class="modal-body">
<div class="content">
#using (Html.BeginForm("AddNewUser", "ActiveDirectoryMember", FormMethod.Post, new { enctype = "multipart/form-data", id = "addUser" }))
{
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
#Html.AntiForgeryToken()
<div class="panel ">
<div class="panel-body ">
<div class="form-horizontal">
<input type="hidden" name="groupName" value="#ViewBag.Group" />
<div class="form-group">
#Html.Label("Technician", new { #class = "control-label col-md-2 required" })
<div class="input-group">
<div class="col-md-8">
<select id="userId" name="userId" class="form-control s2-search-box2">
<option value="">Click search for a staff member</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-2">
</div>
<div class="col-md-2">
<button type="submit" class="btn btn-success" id="addUser">
<i class="fa fa-plus-circle"></i>
Add New User
</button>
</div>
</div>
</div>
</div>
</div>
}
</div>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal">
<i class="fa fa-ban"></i>
Cancel
</button>
</div>
</div>
</div>
</div>

ASP.NET Bootstrap Modal Popup - When I Click the Button, Nothings (Popup) Open

I'm trying to pop up with bootstrap. In my "NoteListPartial.cshtml" page; if I click on the edit button, I want the "Not.cshtml" to be opened with pop up. But when I click button, nothing happens. My codes is as follows:
This is my "NoteListPartial.cshtml":
Edit
And this is my "Note.cshtml":
<div class="modal fade" id="notedetailModal" tabindex="-1" role="dialog" aria-labelledby="">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dissmiss="modal" aria-label="Close"><span aria-hidden="true">x</span></button>
<h4 class="modal-title" id="myModalLabel">Edit Note</h4>
</div>
<form method="post" role="form">
<div class="modal-body">
<div class="form-group">
<label>Title:</label>
<input type="text" name="Name" value="#Model.Name" />
</div>
<div class="form-group">
<label>Content:</label>
<textarea name="Content">#Model.Content</textarea>
</div>
</div>
<div class="modal-footer">
<input type="submit" class="btn btn-default" value="Update" />
</div>
</form>
</div>
</div>
</div>
this is because id="notedetailModal" div is not on "NoteListPartial.cshtml" page.
Make change in your code like put below code in your "NoteListPartial.cshtml" page
<div class="modal fade" id="notedetailModal" tabindex="-1" role="dialog" aria-labelledby="">
<div class="modal-dialog" role="document">
<div class="modal-content">
</div>
</div>
</div>
and in your "Note.cshtml" put rest of the code like
<div class="modal-header">
<button type="button" class="close" data-dissmiss="modal" aria-label="Close"><span aria-hidden="true">x</span></button>
<h4 class="modal-title" id="myModalLabel">Edit Note</h4>
</div>
<form method="post" role="form">
<div class="modal-body">
<div class="form-group">
<label>Title:</label>
<input type="text" name="Name" value="#Model.Name" />
</div>
<div class="form-group">
<label>Content:</label>
<textarea name="Content">#Model.Content</textarea>
</div>
</div>
<div class="modal-footer">
<input type="submit" class="btn btn-default" value="Update" />
</div>
</form>
Try this.

Set width of input / textarea in form group using bootstrap

I'd created a form in a bootstrap modal window.
Inside that form i use a input type text and a textarea.
<div class="modal fade" id="TestModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Test</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
#*Input 1*#
<div class="form-group">
<label for="input1">Input 1</label>
<input type="text" class="form-control" id="input1" required maxlength="75">
</div>
#*Input 2*#
<div class="form-group">
<label for="input2">Input 2</label>
<textarea class="form-control" id="input2" rows="18" required></textarea>
</div>
<div class="row">
#*Select 1*#
<div class="form-group col-lg-4">
<label for="select1">Select 1</label>
<select class="form-control" id="exampleSelect2" required>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
#*Input 3*#
<div class="form-group col-lg-4">
<label for="input3">Input 3</label>
<input type="text" class="form-control" id="input3" required>
</div>
#*Input 4*#
<div class="form-group col-lg-4">
<label for="input4">Input 4</label>
<input type="text" class="form-control" id="input4" required>
</div>
</div>
<button type="submit" class="btn btn-primary">Create</button>
</form>
</div>
</div>
</div>
The result is as follows:
How to set the same width for the text input and the textarea as for the 3 controls below them?
I solved like suggested in the second post here.
min-width: 100%
did the trick.
Do it with jQ class selector.
$(".modal-body.form-control").css("width","100px");
$(".modal-body.form-control").css("min-width","100px");

bootstrap modal with asp.net mvc html helpers

I am trying to implement bootstrap ui modal in asp.net mvc. I created a basic modal which contains a login form.
Issue I am facing here is, when I start using html helpers, styles of the modal form is going really bad. I have attached screenshots below. one screenshot with when I don't use HTML helpers and that's when UI is more clean to view, when I add html helpers, style is going way off.
I have tried pretty much everything I can. I am unable to spot the issue. can someone please have a look at it and throw a light on where I am going wrong.
<div>
#using(Html.BeginForm()){
<div class="modal-header modal-hd-bg">
<button type="button" class="close" ng-click="cancel()">×</button>
<h3 class="modal-title">Login</h3>
</div>
<div class="modal-body">
<form novalidate class="form-horizontal" role="form">
<div class="form-group">
#*<label class="control-label col-sm-3" for="email">Email:</label>*#
#Html.Label("Email:", new { #class="control-label col-sm-3"})
<div class="col-sm-9">
#* <input type="email" class="form-control" id="email" placeholder="Enter email" ng-model="luser.email">*#
#Html.TextBoxFor(m => m.email, new { #class="form-control", #placeholder="Enter Email", #id="email" })
</div>
</div>
<div class="form-group">
#*<label class="control-label col-sm-3" for="pwd">Password:</label>*#
#Html.Label("Password:", new { #class="control-label col-sm-3"})
<div class="col-sm-9">
#*<input type="password" class="form-control" id="pwd" placeholder="Enter password" ng-model="luser.pwd">*#
#Html.TextBoxFor(m => m.pwd, new { #class="form-control", #placeholder="Enter password", #id="pwd" })
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-9">
<button type="submit" class="btn btn-primary" ng-click="login()">Login</button>
</div>
</div>
</form>
</div>
<div class="modal-footer modal-ft-bg">
<label><u>Don't have an account</u>?</label>
<button class="btn btn-success" ng-click="goToRegister()">Register</button>
</div>
}
</div>
This is when I use #using(Html.BeginForm()) and html helpers
This is when I don't use HTML helpers)
No need for a form outside another form, because the outside form does not take any input. Nothing wrong with the html helpers.
HTML:
<div id="thisModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header modal-hd-bg">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h3 class="modal-title" id="gridSystemModalLabel">Login</h3>
</div>
<div class="modal-body">
<form novalidate class="form-horizontal" role="form">
<div class="form-group">
#Html.Label("Email:", new { #class="control-label col-sm-3"})
<div class="col-sm-9">
#Html.TextBoxFor(m => m.email, new { #class="form-control", placeholder="Enter Email", id="email" }
</div>
</div>
<div class="form-group">
#Html.Label("Password:", new { #class="control-label col-sm-3"})
<div class="col-sm-9">
#Html.PasswordFor(m => m.pwd, new { #class="form-control", placeholder="Enter password", id="pwd" })
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-9">
<button type="submit" class="btn btn-primary">Login</button>
</div>
</div>
</form>
</div>
<div class="modal-footer modal-ft-bg">
<label><u>Don't have an account</u>?</label>
<button class="btn btn-success">Register</button>
</div>
</div>
</div>
</div>

user role, showing screen

I want to show a popup readonly screen only to users who are not logged in as "Admin". So all the other users can see only the Popup readonly screen.
I try it like this:
#if (!User.Identity.IsAuthenticated || !User.IsInRole("Admin"))
{
<div id="eventContent" title="Event Details" style="display:none">
Date: <span id="startTime"></span><br>
Start event: <span id="eventTime"></span><br>
Duration: <span id="eventDuration"></span><br><br>
</div>
}
Thank you
I will make it more cleared
I have two screens:
#if (User.Identity.IsAuthenticated && !User.IsInRole("Admin"))
{
<div id="eventContent" title="Event Details" style="display:none">
Date: <span id="startTime"></span><br>
Start event: <span id="eventTime"></span><br>
Duration: <span id="eventDuration"></span><br><br>
</div>
}
<div class="container">
<div id='calendar' style="width:65%"></div>
</div>
#if (User.Identity.IsAuthenticated || Context.User.IsInRole("Admin"))
{
<div id="popupEventForm" class="modal hide" style="display: none;">
<div class="modal-header"> <h3> Appointment</h3></div>
<div class="modal-body">
<form id="EventForm" class="well">
<input type="hidden" id="eventID">
<div class="form-group">
<label>Event title</label>
<input type="text" id="eventTitle"><br />
</div>
<div class="form-group">
<label>Scheduled date</label>
<input type="text" id="eventDate" readonly><br />
</div>
<div class="form-group">
<label>Scheduled time</label>
<input type="text" id="eventTime"><br />
</div>
<div class="form-group">
<label>Appointment length (minutes)</label>
<input type="text" id="eventDuration"><br />
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" id="btnPopupCancel" data-dismiss="modal" class="btn btn-mini">Cancel</button>
<button type="button" id="btnPopupSave" data-dismiss="modal" class="btn btn-success ">Save event</button>
#*<button type="button" id="btnPopupUpdate" data-dismiss="modal" class="btn btn-warning">Update event</button>*#
<button type="button" id="btnPopupDelete" data-dismiss="modal" class="btn btn-danger right ">Delete event</button>
</div>
</div>
}
eventContent - is for users who are not admin(it is readonly) and the other screen is for admin, where the admin can add a agenda item. But if I click now on a agenda item(not logged in as admin) I see both screens
Oke, I found it:
#if ( !Context.User.IsInRole("Admin"))
{
<div id="eventContent" title="Event Details" style="display:none">
Date: <span id="startTime"></span><br>
Start event: <span id="eventTime"></span><br>
Duration: <span id="eventDuration"></span><br><br>
</div>
}
else
{
<div id="popupEventForm" class="modal hide" style="display: none;">
<div class="modal-header"> <h3> Appointment</h3></div>
<div class="modal-body">
<form id="EventForm" class="well">
<input type="hidden" id="eventID">
<div class="form-group">
<label>Event title</label>
<input type="text" id="eventTitle"><br />
</div>
<div class="form-group">
<label>Scheduled date</label>
<input type="text" id="eventDate" readonly><br />
</div>
<div class="form-group">
<label>Scheduled time</label>
<input type="text" id="eventTime"><br />
</div>
<div class="form-group">
<label>Appointment length (minutes)</label>
<input type="text" id="eventDuration"><br />
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" id="btnPopupCancel" data-dismiss="modal" class="btn btn-mini">Cancel</button>
<button type="button" id="btnPopupSave" data-dismiss="modal" class="btn btn-success ">Save event</button>
#*<button type="button" id="btnPopupUpdate" data-dismiss="modal" class="btn btn-warning">Update event</button>*#
<button type="button" id="btnPopupDelete" data-dismiss="modal" class="btn btn-danger right ">Delete event</button>
</div>
</div>
}
It looks like you are getting any Authenticated User in your If condition. Try changing it to:
#if (User.Identity.IsAuthenticated && !User.IsInRole("Admin"))
{
to get only authenticated users that are not admin.
If you mean anybody (authenticated or otherwise) that is not admin:
#if (!User.IsInRole("Admin"))
{

Resources