beta release

Author: amitojsingh

app/assets/stylesheets/base/_atom.scss

@@ -197,7 +197,7 @@ a.link {
  color:#fff;
 }
 
-#user_email,#user_password,.submit-button{
+#user_email,#user_password,#user_password_confirmation,.submit-button{
  width:95%;
  font-size:18px;
  height:2em;
@@ -245,3 +245,12 @@ a.link {
  background-color:$medium-black;
  color:$silver;
 }
+.requirements {
+padding: 0 10px 0 10px;
+color: #999;
+max-height: 0;
+transition: 0.28s;
+overflow: hidden;
+color: #F44336;
+font-style: italic;
+}

app/assets/stylesheets/base/_molecule.scss

@@ -218,39 +218,34 @@ header{
  justify-content: center;
  flex-direction: column;
  .signup-box{
- width:40%;
+ width:60%;
  height:60%;
  margin-left:auto;
  margin-right:auto;
- background-color:rgba(255,255,255,0.7);
+ background-color:#ecf0f1;
+ box-shadow: 1.5em 1em 1em #000;
+ border: 0.2em solid #fff;
+ border-radius: 0.5em;
  .signup-subox{
  margin:10%;
+ margin-top: 5%;
  h2{
  margin:0;
  }
- .user-email,.user-password{
- width:95%;
- height:0.5em;
- text-indent:1em;
+ #user_email,#user_password,#user_password_confirmation{
+ margin:0.5em;
  }
  .signup-button{
  width:95%;
  height:2em;
  background-color:$green;
  color:#fff;
  font-size:1em;
- border:none
+ border:none;
+ margin:0.5em;
  }
  }
 }}
-
-.user-pass-confirm{
- width:95%;
- height:2.5em;
- text-indent:10px;
- margin-top:1em;
- margin-bottom: 2em;
-}
 .forgot-wrapper{
  width:100%;
  height:100%;

app/assets/stylesheets/base/_page.scss

@@ -36,3 +36,19 @@ ul#tabs {
 .github-button{
 
 }
+.login_user,#new_user{
+ >.field>#user_email,
+ >.field>#user_password{
+ &:valid{
+ border-color: #2ecc71;
+ }
+ &:invalid:not(:focus):not(:placeholder-shown) {
+ }
+ &:invalid:focus:not(:placeholder-shown) {
+ & ~ .requirements {
+ max-height: 200px;
+ padding: 0 10px 10px 10px;
+ }
+ }
+ }
+ }

app/assets/stylesheets/base/_template.scss

@@ -6,7 +6,6 @@ html {
  height: 100%;
  margin: 0;
  font-family: $font;
- font-size: 10px;
 }
 
 header {
@@ -103,7 +102,7 @@ header {
  margin:0;
  }
  .git-box{
- width:50%;
+ width:70%;
  height:50%;
  color:$silver;
  font-family:$root-font;
@@ -113,7 +112,7 @@ header {
  width:100%;
  height:100%;
  .url-field,{
- width:40%;
+ width:60%;
  height:10%;
  text-indent: 10px;
  }
@@ -140,3 +139,18 @@ header {
  }
 
 }
+
+@media screen and (max-width:1000px) {
+.signup-wrapper{
+.signup-box{
+ width:100%;
+ height:100%;
+}
+}
+}
+
+@media only screen and (max-width:55em){
+.git-box{
+ min-width:90%;
+}
+}

app/helpers/devise_helper.rb

@@ -0,0 +1,32 @@
+module DeviseHelper
+ def devise_error_messages!
+
+ flash_alerts = []
+
+ if !flash.empty?
+ flash_alerts.push(flash[:error]) if flash[:error]
+ flash_alerts.push(flash[:alert]) if flash[:alert]
+ flash_alerts.push(flash[:notice]) if flash[:notice]
+ sentence = I18n.t("devise.failure.invalid") #=> "Invalid email or password."
+ else
+ sentence = I18n.t("errors.messages.not_saved",
+ count: resource.errors.count,
+ resource: resource.class.model_name.human.downcase)
+ end
+
+ return "" if resource.errors.empty? && flash_alerts.empty?
+
+ errors = resource.errors.empty? ? flash_alerts : resource.errors.full_messages
+ messages = errors.map { |msg| content_tag(:li, msg) }.join
+
+ html = <<-HTML
+ <div class="alert alert-danger">
+ <div id="error_explanation">
+ <ul class="message ">#{messages}</ul>
+ </div>
+ </div>
+ HTML
+
+ html.html_safe
+ end
+end

app/views/devise/registrations/new.html.erb

@@ -8,20 +8,23 @@
 
  <div class="field">
  <%= f.label :email %><br />
- <%= f.email_field :email, autofocus: true, class: "user-email", placeholder: "Email" %>
+ <%= f.email_field :email,autocomplete:"off",autofocus: true, class: "user-email", placeholder: "Email",required: true %>
+ <div class=requirements>
+ Must be a valid email address
+ </div>
  </div>
 
  <div class="field">
  <%= f.label :password %>
- <% if @minimum_password_length %>
- <em>(<%= @minimum_password_length %> characters minimum)</em>
- <% end %>
- <%= f.password_field :password, autocomplete: "off", class:"user-password", placeholder: "password"%>
+ <%= f.password_field :password,pattern: "(?=.*[a-z])(?=.*[A-Z]).{6,}",autocomplete: "off", class:"user-password", placeholder: "password", required: true%>
+ <div class="requirements">
+  Your password must be at least 6 characters as well as contain at least one uppercase, one lowercase, and one number.
+ </div>
  </div>
 
  <div class="field">
  <%= f.label :password_confirmation %>
- <%= f.password_field :password_confirmation, autocomplete: "off", class:"user-pass-confirm", placeholder: "Confirm Password"%>
+ <%= f.password_field :password_confirmation, autocomplete: "off", class:"user-pass-confirm", placeholder: "Confirm Password", required: true%>
  </div>
 
  <div class="actions">

app/views/devise/sessions/new.html.erb

@@ -17,15 +17,20 @@
  <%=image_tag "github.png", class:"github-image"%>
  </div>
  <p class=login-text>Log in</p>
- <%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
+ <%= form_for(resource, as: resource_name, url: session_path(resource_name), class: "login_user") do |f| %>
+ <%= devise_error_messages! %>
  <div class="field email-field">
  <%= f.label :email %><br/>
- <%= f.email_field :email, autofocus: true, class: "user-email",placeholder: "Username" %>
+ <%= f.email_field :email, autocomplete: "off",autofocus: true, class: "user-email",placeholder: "Username", required: true %>
+ <div class="requirements">
+ Must be a valid email address.
+ </div>
  </div>
 
  <div class="field password-field">
  <%= f.label :password %><br/>
- <%= f.password_field :password, autocomplete: "off", class: "user-password" ,placeholder: "Password"%>
+ <%= f.password_field :password,autocomplete: "off", class: "user-password" ,placeholder: "Password", required: true%>
+
  </div>
 
  <% if devise_mapping.rememberable? -%>

config/initializers/devise.rb

@@ -34,7 +34,7 @@
  # session. If you need permissions, you should implement that in a before filter.
  # You can also supply a hash where the value is a boolean determining whether
  # or not authentication should be aborted when the value is not present.
- # config.authentication_keys = [:email]
+ config.authentication_keys = [:email]
 
  # Configure parameters from the request object used for authentication. Each entry
  # given should be a request method and it will automatically be passed to the