Improve Sign In/Up Error Handling (#832)

* Add registration view to sign_in page

* Add better sad path for failed sign ins/ups

* Ensure email is downcased for authorization

* Remove .downcase for emails

* Use partial for styles

app/controllers/omniauth_callbacks_controller.rb

@@ -11,10 +11,12 @@ class OmniauthCallbacksController < Devise::OmniauthCallbacksController
           remember_me(@user)
           sign_in_and_redirect @user, event: :authentication
           set_flash_message(:notice, :success, kind: "#{provider}".capitalize) if is_navigational_format?
-        elsif @user.persisted? && @user.errors&.full_messages&.join.include?("username has already been taken")
+        elsif @user.persisted? && @user.errors.full_messages.join(", ").include?("username has already been taken")
           redirect_to "/settings?state=previous-registration"
         else
           session["devise.#{provider}_data"] = request.env["omniauth.auth"]
+          user_errors = @user.errors.full_messages
+          flash[:alert] = user_errors
           redirect_to new_user_registration_url
         end
       end

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

@@ -10,4 +10,4 @@
   </div>
   <p>The DEV Community is for amazing humans who code</p>
   <div style="height:200px"/>
-</div>
+</div>

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

@@ -1 +1,3 @@
-<%= render "registration_form" %>
+<%= render "devise/shared/authorization_error" %>
+
+<%= render "devise/registrations/registration_form" %>

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

@@ -1,4 +1,3 @@
-<div class="devise-container">
-  <a href="/users/auth/twitter" class="sign-up-link" data-no-instant><%= icon("twitter") %> Twitter</a>
-  <a href="/users/auth/github" class="sign-up-link" data-no-instant><%= icon("github") %> Github</a>
-</div>
+<%= render "devise/shared/authorization_error" %>
+
+<%= render "devise/registrations/registration_form" %>

app/views/devise/shared/_authorization_error.html.erb

@@ -0,0 +1,25 @@
+<style>
+  .error-notice{
+    background: rgba(255, 80, 80, 0.7);
+    color: white;
+    padding: 40px 0px 40px;
+    text-align: center;
+    position: relative;
+    top: 60px;
+    left: 0px;
+    right: 0px;
+  }
+</style>
+<% unless flash[:alert].blank? %>
+  <div class="error-notice">
+  Something went wrong:
+    <ul>
+      <% flash[:alert].each do |error| %>
+        <li>
+          <%= error %>
+        </li>
+      <% end %>
+    </ul>
+    Please try again below, or contact <a href="mailto:yo@dev.to">yo@dev.to</a> if this persists.
+  </div>
+<% end %>

app/views/internal/feedback_messages/_style.html.erb

@@ -0,0 +1,67 @@
+<style>
+  .top-nav{
+    line-height: 1.4em;
+  }
+  @media (max-width:991px) and (min-width:768px) {
+    .top-nav{
+      margin-top: 100px;
+    }
+    .alert{
+      margin-top: 100px;
+    }
+  }
+  .top-nav a {
+    display: inline-block;
+    padding: 10px;
+  }
+  .active-state {
+    background-color:#89ffba;
+  }
+  .notefield{
+  width: 100%;
+  resize: none;
+  font-size: 18px;
+  height: 50px;
+  border-radius: 3px;
+  padding: 5px;
+  margin: 10px 0px;
+  }
+  .blankmessage{
+    font-style: italic;
+  }
+  .note-content{
+    border: 1px dashed black;
+    border-radius: 5px;
+    width: 100%;
+    padding: 5px;
+    padding-top: 25px;
+    word-wrap: break-word;
+  }
+  .email__alert{
+    display: none;
+    margin: 0;
+  }
+  .panel-right-elements{
+    float: right;
+  }
+  .email__container{
+    border: 1px solid gray;
+    margin: 10px;
+    padding-left: 50px;
+    padding-top: 5px;
+  }
+  .to__subject{
+    margin: 5px;
+    font-size: 20px;
+    color: black;
+    text-align: center;
+  }
+  .time__badge{
+    float: right;
+    margin-top: 7px;
+    margin-right: 7px;
+  }
+  .single__note{
+    width: 60%;
+  }
+</style>

app/views/internal/feedback_messages/index.html.erb

@@ -1,70 +1,4 @@
-<style>
-  .top-nav{
-    line-height: 1.4em;
-  }
-  @media (max-width:991px) and (min-width:768px) {
-    .top-nav{
-      margin-top: 100px;
-    }
-    .alert{
-      margin-top: 100px;
-    }
-  }
-  .top-nav a {
-    display: inline-block;
-    padding: 10px;
-  }
-  .active-state {
-    background-color:#89ffba;
-  }
-  .notefield{
-  width: 100%;
-  resize: none;
-  font-size: 18px;
-  height: 50px;
-  border-radius: 3px;
-  padding: 5px;
-  margin: 10px 0px;
-  }
-  .blankmessage{
-    font-style: italic;
-  }
-  .note-content{
-    border: 1px dashed black;
-    border-radius: 5px;
-    width: 100%;
-    padding: 5px;
-    padding-top: 25px;
-    word-wrap: break-word;
-  }
-  .email__alert{
-    display: none;
-    margin: 0;
-  }
-  .panel-right-elements{
-    float: right;
-  }
-  .email__container{
-    border: 1px solid gray;
-    margin: 10px;
-    padding-left: 50px;
-    padding-top: 5px;
-  }
-  .to__subject{
-    margin: 5px;
-    font-size: 20px;
-    color: black;
-    text-align: center;
-  }
-  .time__badge{
-    float: right;
-    margin-top: 7px;
-    margin-right: 7px;
-  }
-  .single__note{
-    width: 60%;
-  }
-</style>
+<%= render "style" %>
 
 <h3 class="top-nav">
   <a href="/internal/reports?state=abuse-reports&status=Open" class="<%= "active-state" if @feedback_type == "abuse-reports" %>">Abuse Reports</a> |

app/views/internal/feedback_messages/show.html.erb

@@ -1,3 +1,5 @@
+<%= render "style" %>
+
 <div class="blank_space" style="height: 50px;">
 </div>
 <div class="blank_space">

app/views/layouts/_nav_menu.html.erb

@@ -50,7 +50,7 @@
     </a>
     <a href="/users/auth/github?state=navbar_basic" data-no-instant>
       <div class="option">
-        Via Github
+        Via GitHub
       </div>
     </a>
     <a href="/p/information">