Update design of auth error page

app/controllers/omniauth_callbacks_controller.rb

@@ -67,7 +67,7 @@ class OmniauthCallbacksController < Devise::OmniauthCallbacksController
   def omniauth_error
     @provider = params[:provider]
     @error = params[:error]
-    render 'errors/omniauth_error', layout: "errors", status: 422
+    render 'errors/omniauth_error', layout: "oauth_error", status: 422
   end
 
   def cas3

app/views/errors/omniauth_error.html.haml

 - content_for(:title, 'Auth Error')
-%img{ :alt => "GitLab Logo", :src => image_path('logo.svg') }
-  %h1
-    422
+
 .container
+  = render "shared/errors/graphic_422.svg"
   %h3 Sign-in using #{@provider} auth failed
-  %hr
-  %p Sign-in failed because #{@error}.
-  %p There are couple of steps you can take:
 
-%ul
-  %li Try logging in using your email
-  %li Try logging in using your username
-  %li If you have forgotten your password, try recovering it using #{ link_to "Password recovery", new_password_path(resource_name) }
+  %p.light.subtitle Sign-in failed because #{@error}.
+
+  %p Try logging in using your username or email. If you have forgotten your password, try recovering it
 
-%p If none of the options work, try contacting the GitLab administrator.
+  = link_to "Sign in", new_session_path(:user), class: 'btn primary'
+  = link_to "Recover password", new_password_path(resource_name), class: 'btn secondary'
+
+  %hr
+  %p.light If none of the options work, try contacting a GitLab administrator.

app/views/layouts/oauth_error.html.haml

+!!! 5
+%html{ lang: "en" }
+  %head
+    %meta{ :content => "width=device-width, initial-scale=1, maximum-scale=1", :name => "viewport" }
+    %title= yield(:title)
+    :css
+      body {
+        color: #666;
+        text-align: center;
+        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+        margin: auto;
+        font-size: 16px;
+      }
+
+      .container {
+        margin: auto 20px;
+      }
+
+      h3 {
+        color: #456;
+        font-size: 22px;
+        font-weight: bold;
+        margin-bottom: 6px;
+      }
+
+      p {
+        max-width: 470px;
+        margin: 16px auto;
+      }
+
+      .subtitle {
+        margin: 0 auto 20px;
+      }
+
+      svg {
+        width: 280px;
+        height: 280px;
+        display: block;
+        margin: 40px auto;
+      }
+
+      .tv-screen path {
+        animation: move-lines 1s linear infinite;
+      }
+
+
+      @keyframes move-lines {
+        0% {transform: translateY(0)}
+        50% {transform: translateY(-10px)}
+        100% {transform: translateY(-20px)}
+      }
+
+      .tv-screen path:nth-child(1) {
+        animation-delay: .2s
+      }
+
+      .tv-screen path:nth-child(2) {
+        animation-delay: .4s
+      }
+
+      .tv-screen path:nth-child(3) {
+        animation-delay: .6s
+      }
+
+      .tv-screen path:nth-child(4) {
+        animation-delay: .8s
+      }
+
+      .tv-screen path:nth-child(5) {
+        animation-delay: 2s
+      }
+
+      .text-422 {
+        animation: flicker 1s infinite;
+      }
+
+      @keyframes flicker {
+        0% {opacity: 0.3;}
+        10% {opacity: 1;}
+        15% {opacity: .3;}
+        20% {opacity: .5;}
+        25% {opacity: 1;}
+      }
+
+      .light {
+        color: #8D8D8D;
+      }
+
+      hr {
+        max-width: 600px;
+        margin: 18px auto;
+        border: 0;
+        border-top: 1px solid #EEE;
+      }
+
+      .btn {
+        padding: 8px 14px;
+        border-radius: 3px;
+        border: 1px solid;
+        display: inline-block;
+        text-decoration: none;
+        margin: 4px 8px;
+        font-size: 14px;
+      }
+
+      .primary {
+        color: #fff;
+        background-color: #1aaa55;
+        border-color: #168f48;
+      }
+
+      .primary:hover {
+        background-color: #168f48;
+      }
+
+      .secondary {
+        color: #1aaa55;
+        background-color: #fff;
+        border-color: #1aaa55;
+      }
+
+      .secondary:hover {
+        background-color: #f3fff8;
+      }
+
+%body
+  = yield

app/views/shared/errors/_graphic_422.svg

+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 260 246" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><rect id="0" width="178" height="136" rx="10"/><mask id="1" width="178" height="136" x="0" y="0" fill="#fff"><use xlink:href="#0"/></mask></defs><g fill="none" fill-rule="evenodd"><g fill="#e5e5e5" fill-rule="nonzero"><path d="m109.88 37.634c5.587-3.567 12.225-5.634 19.345-5.634 7.445 0 14.363 2.26 20.1 6.132l21.435-37.13c.554-.959 1.771-1.292 2.734-.736.957.552 1.284 1.777.73 2.736l-21.496 37.23c-.065.112-.138.215-.219.309 3.686 3.13 6.733 6.988 8.919 11.353l-3.393.002c-5.775-10.322-16.705-16.901-28.814-16.901-12.12 0-23.06 6.594-28.833 16.935l-3.393.002c2.32-4.646 5.616-8.72 9.618-11.954l-21.349-36.977c-.554-.959-.227-2.184.73-2.736.963-.556 2.181-.223 2.734.736l21.15 36.629"/><path d="m3 70v134c0 9.389 7.611 17 16.997 17h220.01c9.389 0 16.997-7.611 16.997-17v-134c0-9.389-7.611-17-16.997-17h-220.01c-9.389 0-16.997 7.611-16.997 17m-3 0c0-11.05 8.95-20 19.997-20h220.01c11.04 0 19.997 8.958 19.997 20v134c0 11.05-8.95 20-19.997 20h-220.01c-11.04 0-19.997-8.958-19.997-20v-134"/></g><ellipse cx="129" cy="241.5" fill="#f9f9f9" rx="89" ry="4.5"/><g fill-rule="nonzero" transform="translate(210 70)"><path fill="#eaeaea" d="m16 29c7.18 0 13-5.82 13-13 0-7.18-5.82-13-13-13-7.18 0-13 5.82-13 13 0 7.18 5.82 13 13 13m0 3c-8.837 0-16-7.163-16-16 0-8.837 7.163-16 16-16 8.837 0 16 7.163 16 16 0 8.837-7.163 16-16 16" id="2"/><path fill="#6b4fbb" d="m16 21c2.761 0 5-2.239 5-5 0-2.761-2.239-5-5-5-2.761 0-5 2.239-5 5 0 2.761 2.239 5 5 5m0 3c-4.418 0-8-3.582-8-8 0-4.418 3.582-8 8-8 4.418 0 8 3.582 8 8 0 4.418-3.582 8-8 8" id="3"/></g><g fill-rule="nonzero" transform="translate(210 109)"><use xlink:href="#2"/><use xlink:href="#3"/></g><g transform="translate(210 147)"><path fill="#e5e5e5" fill-rule="nonzero" d="m3 5.992v45.02c0 1.647 1.346 2.992 3 2.992h20c1.657 0 3-1.341 3-2.992v-45.02c0-1.647-1.346-2.992-3-2.992h-20c-1.657 0-3 1.341-3 2.992m-3 0c0-3.309 2.687-5.992 6-5.992h20c3.314 0 6 2.692 6 5.992v45.02c0 3.309-2.687 5.992-6 5.992h-20c-3.314 0-6-2.692-6-5.992v-45.02"/><rect width="16" height="4" x="8" y="27" fill="#fdb692" rx="2"/><rect width="16" height="4" x="8" y="19" fill="#fc9867" rx="2"/><rect width="16" height="4" x="8" y="11" fill="#fc6d26" rx="2"/><rect width="16" height="4" x="8" y="35" fill="#fed3bd" rx="2"/><rect width="16" height="4" x="8" y="43" fill="#fef0e9" rx="2"/></g><g transform="translate(16 69)"><use fill="#6b4fbb" fill-opacity=".1" stroke="#e5e5e5" stroke-width="6" mask="url(#1)" xlink:href="#0"/><g class="tv-screen" fill="#fff"><path opacity=".4" mix-blend-mode="overlay" d="m3 17h172v16h-172z"/><path opacity=".6" mix-blend-mode="overlay" d="m3 70h172v24h-172z"/><path opacity=".3" mix-blend-mode="overlay" d="m3 107h172v16h-172z"/><path opacity=".4" mix-blend-mode="overlay" d="m3 40h172v8h-172z"/><path opacity=".3" mix-blend-mode="overlay" d="m3 55h172v8h-172z"/></g></g><path class="text-422" d="m.693 19h5.808c.277 0 .498-.224.498-.5 0-.268-.223-.5-.498-.5h-5.808v-2.094l3.777-5.906h3.916l-4.124 6.454h6.259v-6.454h.978c.273 0 .5-.224.5-.5 0-.268-.224-.5-.5-.5h-.978v-2h4.698v6h-2.721c-.277 0-.498.224-.498.5 0 .268.223.5.498.5h2.721v2.454h2.723v4.2h-2.723v5.346h-4.698v-5.346h-9.828v-1.654m4.417-10l1.279-2h3.914l-1.278 2h-3.916m1.919-3l1.279-2h4.192c.27 0 .5-.224.5-.5 0-.268-.224-.5-.5-.5h-3.552l1.142-1.786h5.13v4.786h-8.191m31.09 19v1h-15.738v-2h5.118c.271 0 .503-.224.503-.5 0-.268-.225-.5-.503-.5h-5.118v-1.184l2.656-2.822c.682-.725 1.306-1.39 1.872-1.994h5.428c-.389.394-.808.815-1.256 1.264-1.428 1.428-2.562 2.568-3.403 3.42h10.442v2.316h-4.614c-.271 0-.503.224-.503.5 0 .268.225.5.503.5h4.614m-6.674-13c.493-.631.87-1.208 1.129-1.73.365-.736.548-1.464.548-2.183 0-1.107-.335-1.962-1-2.565-.67-.603-1.619-.905-2.847-.905-.874 0-1.857.174-2.947.523-1.09.349-2.227.855-3.412 1.519v-2.659h3.589c.27 0 .5-.224.5-.5 0-.268-.224-.5-.5-.5h-3.589v-.906c1.184-.432 2.344-.761 3.478-.988 1.134-.227 2.222-.34 3.262-.34 2.623 0 4.684.611 6.184 1.834.157.128.307.262.448.4h-2.782c-.27 0-.5.224-.5.5 0 .268.224.5.5.5h3.602c.654 1.01.981 2.209.981 3.605 0 .974-.163 1.887-.49 2.739-.326.852-.888 1.798-1.685 2.839-.397.509-1.261 1.448-2.594 2.816h-5.474c1.34-1.436 2.261-2.436 2.763-3h4.396c.271 0 .499-.224.499-.5 0-.268-.223-.5-.499-.5h-3.557m28.14 12v2h-15.738v-4.184l2.651-2.816h5.313c-1.087 1.089-1.976 1.983-2.668 2.684h10.442v1.316h-4.083c-.271 0-.503.224-.503.5 0 .268.225.5.503.5h4.083m-2.069-11c-.045.061-.092.122-.139.184-.567.727-2.089 2.333-4.568 4.816h-5.372c2.601-2.77 4.204-4.503 4.81-5.198.83-.952 1.428-1.796 1.793-2.532.365-.736.548-1.464.548-2.183 0-1.107-.335-1.962-1-2.565-.67-.603-1.619-.905-2.847-.905-.874 0-1.857.174-2.947.523-1.09.349-2.227.855-3.412 1.519v-2.659h3.117c.271 0 .503-.224.503-.5 0-.268-.225-.5-.503-.5h-3.117v-.906c1.184-.432 2.344-.761 3.478-.988 1.134-.227 2.222-.34 3.262-.34 2.623 0 4.684.611 6.184 1.834.157.128.307.262.448.4h-1.248c-.271 0-.503.224-.503.5 0 .268.225.5.503.5h2.069c.654 1.01.981 2.209.981 3.605 0 .844-.123 1.642-.368 2.395h-2.683c-.271 0-.503.224-.503.5 0 .268.225.5.503.5h2.272c-.159.321-.347.655-.566 1h-3.706c-.271 0-.503.224-.503.5 0 .268.225.5.503.5h3.01" transform="translate(75 124)" fill="#5c5c5c"/></g></svg>

changelogs/unreleased/29145-oauth-422.yml

+---
+title: Redesign auth 422 page
+merge_request:
+author: