styles, toggle auth blocks

src/public/assets/css/common.css

@@ -11,14 +11,16 @@
     text-align: right;
     }
     
-.btn-google
+.btn-google,
+.btn-email
     {
     color: #545454;
     background-color: #ffffff;
     box-shadow: 0 1px 2px 1px #ddd;
     }
     
-    .btn-google:focus
+    .btn-google:focus,
+    .btn-email:focus
         {
         outline: 0;
         box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
@@ -36,3 +38,16 @@
     border-radius: 8px !important;
     }
     
+    
+.b-email,
+.b-social
+    {
+    //transition: all 1s ease-out;
+    //animation: 3s linear 1s slidein;
+    }
+    
+.b-email.m-hide,
+.b-social.m-hide
+    {
+    display: none;
+    }
\ No newline at end of file

src/public/assets/js/login.js

@@ -3,4 +3,44 @@
 
     console.log('AAA login page');
    
+  const select = (el, all = false) => {
+    el = el.trim()
+    if (all) {
+      return [...document.querySelectorAll(el)]
+    } else {
+      return document.querySelector(el)
+    }
+  }
+    
+  const on = (type, el, listener, all = false) => {
+    let selectEl = select(el, all)
+    if (selectEl) {
+      if (all) {
+        selectEl.forEach(e => e.addEventListener(type, listener))
+      } else {
+        selectEl.addEventListener(type, listener)
+      }
+    }
+  }
+  
+    let email = select('.b-email');
+    let social = select('.b-social');
+    
+    function ToggleAuthBlock()
+    {
+        email.classList.toggle('m-hide');
+        social.classList.toggle('m-hide');
+    }
+    
+    on('click', '.btn-email', function(e) {
+        ToggleAuthBlock();
+    });
+
+    on('click', '.b-email_back', function(e) {
+        ToggleAuthBlock();
+    });
+
+    
+    
+
 })()
\ No newline at end of file

src/resources/views/user/create.blade.php

@@ -8,7 +8,7 @@
     <div class='container'>
         
         <div class="row justify-content-center">
-            <div class="col-4 text-center">
+            <div class="col-12 col-sm-10 col-lg-4 text-center">
 
                 <h4>Регiстрацiя</h4>
 

src/resources/views/user/login.blade.php

@@ -14,10 +14,32 @@
 <section>
     <div class='container'>
         
-        <div class="row justify-content-center">
-            <div class="col-4 text-center">
-
+        <div class="text-center">
             <h4>Авторизацiя</h4>
+        </div>
+
+        <div class="b-social row justify-content-center">
+            <div class="col-12 col-sm-10 col-lg-6 text-center">
+                
+                <div>
+                    <div class="row">
+                        <a class="btn btn-google" href="{{ route('login.google') }}" role="button"><img src="https://img.icons8.com/color/16/000000/google-logo.png"> Sign in with Google</a>
+                    </div>
+                    <br>
+                    <div class="row">
+                        @signInWithApple("white", true, "sign-in", 10)
+                    </div>
+                    <br>
+                    <div class="row">
+                        <a class="btn btn-email" href="#" role="button">Продолжить с помощью e-mail</a>
+                    </div>
+                </div>
+            </div>
+            
+        </div>
+        
+        <div class="b-email row justify-content-center m-hide">
+            <div class="col-12 col-sm-10 col-lg-6 text-center">
                 
                 <form method="post" action="{{ route('login') }}">
 
@@ -32,17 +54,11 @@
                         <label for='password'>Password</label>
                         <input class="form-control" type="password" id="password" name="password">
                     </div>
-
-                    <div class="form-group">
+                    <br>
+                    <div class="form-group d-flex justify-content-between">
+                        <a class="b-email_back" href="#">Назад</a>
                         <button type="submit" class="btn btn-primary">Войти</button>
                     </div>
-
-                    <a class="btn btn-google" href="{{ route('login.google') }}"><img src="https://img.icons8.com/color/16/000000/google-logo.png"> Sign in with Google</a>
-                    
-                    <div>
-                        @signInWithApple("black", true, "sign-in", 10)
-                    </div>
-
                 </form>
                 
             </div>