orbit-basic/app/views/devise/registrations/new.html.erb

140 lines
4.5 KiB
Plaintext

<%= stylesheet_link_tag "sign_up" %>
<section id="main-wrap">
<div class="sign-up have-other-sign-in">
<% flash.each do |key, msg| %>
<%= content_tag :p, msg, :class => [key, "alert alert-error in fade"] %>
<% end %>
<div class="form">
<h3 class="login-logo">Sign up with Orbit</h3>
<div class="form-block option-block">
<div class="form-list clearfix">
<%= form_for resource, :as => resource_name, :url => registration_path(resource_name), :html => {:class => 'content form-horizontal'} do |f| %>
<div class="control-group clear">
<label class="control-label" for="user_email">User ID</label>
<div class="controls">
<%= f.text_field :user_id, :placeholder => t("users.user_id"), :id=>"user_id",:class=>"availibility" %>
<span class="loader hide"><img src="/assets/availability-check-loader.gif" /></span>
<span class="notify not-ok hide alert alert-danger"><i class="icon-remove"></i>Not Available</span>
<span class="notify ok alert hide alert-success"><i class="icon-ok"></i>Available</span>
</div>
</div>
<div class="control-group clear">
<label class="control-label" for="user_email">Email</label>
<div class="controls">
<%= f.email_field :email, :placeholder => t("users.email"), :id=>"user_email", :class=>"availibility" %>
<span class="loader hide"><img src="/assets/availability-check-loader.gif" /></span>
<span class="notify not-ok hide alert alert-danger"><i class="icon-remove"></i>Not Available</span>
<span class="notify ok hide alert alert-success"><i class="icon-ok"></i>Available</span>
</div>
</div>
<div class="control-group clear">
<label class="control-label" for="user_password">Password</label>
<div class="controls">
<%= f.password_field :password, :placeholder => t(:dots), :id=>"user_password" %>
</div>
</div>
<div class="control-group clear">
<label class="control-label" for="user_password">Confirm Password</label>
<div class="controls">
<%= f.password_field :password, :placeholder => t(:dots), :id=>"confirm_user_password" %>
</div>
</div>
<h3 class="line"></h3>
<div class="pull-right">
<%= content_tag :button, t(:register), :type => :submit, :class => 'btn btn-primary' %>
</div>
<div class="pull-left links">
<%= render :partial => "devise/shared/links" %>
</div>
<% end %>
</div>
</div>
</div>
</div>
</section>
<script type="text/javascript">
(function(){
var validated = false;
$("form.content").submit(function(event) {
var form = $(this);
form.find("input").removeClass('error');
form.find("input[type=text], input[type=email], input[type=password]").each(function(){
validated = $(this).val() ? true : false;
if(!validated){
return false;
}
})
if(validated){
form.find("span.not-ok").each(function(){
validated = $(this).hasClass('hide') ? true : false;
if(!validated)return false;
})
}
if(validated){
validated = form.find("input[type=password]:eq(0)").val() == form.find("input[type=password]:eq(1)").val() ? true : false;
if(!validated){
form.find("input[type=password]").addClass('error');
}
}
if(!validated){
return false;;
}
});
$(".availibility").blur(function(){
var type = $(this).attr("id"),
loader = $(this).parent().find('.loader'),
elem = $(this),
value = $(this).val() || null;
elem.parent().find("span").addClass('hide');
var checkAvailability = function(){
loader.removeClass('hide');
elem.removeClass('error');
$.ajax({
url : "<%= basic_infos_check_availability_path %>",
data : {"type" : type, "value" : value},
dataType : "json",
type : "get",
success : function(data){
loader.addClass('hide');
if( data.success == true ){
elem.parent().find(".ok").removeClass('hide');
}else{
elem.parent().find(".not-ok").removeClass('hide');
elem.addClass('error');
}
}
})
}
if( value ){
if(type == "user_email" && validateEmail(value)){
checkAvailability();
}else if(type == "user_id"){
checkAvailability();
}else{
elem.addClass('error');
}
}
})
var validateEmail = function(email) {
var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA -Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(email);
}
})();
</script>