Basic styling of the login page

resources/scss/app.scss

@@ -38,6 +38,7 @@ nav .fa {
 
 main {
 	display: flex;
+	flex-direction: column;
 	width: min(max(90vw,1080px), 100%);
 	background-color: beige;
 	flex-grow: 1;

resources/scss/login.scss

@@ -0,0 +1,13 @@
+.login-register-container {
+	display: flex;
+	width: 100%;
+	justify-content: space-around;
+	flex-wrap: wrap;
+	& div {
+		&, & form {
+			display: flex;
+			flex-direction: column;
+		}
+	}
+}
+

resources/views/layouts/app.blade.php

@@ -16,6 +16,18 @@
     </div>
 </nav>
 <main>    
+    <div class="alerts">
+        @if(Session::has('success'))
+            <div class="alert alert-success">
+                {{ Session::get('success') }}
+            </div>
+        @endif
+        @foreach($errors->all() as $message)
+            <div class="alert alert-error">
+                {{ $message }}
+            </div>
+        @endforeach
+    </div>
     @yield('main')    
 </main>
 

resources/views/login.blade.php

@@ -1,31 +1,35 @@
 @extends('layouts.app')
 
+@push('head')
+<link rel="stylesheet" href="{{ mix("css/login.css") }}">
+@endpush
+
 @section('title', "Sklep")
 
 @section('main')
-@if(Session::has('success'))
-    <div class="alert alert-success">
-        {{ Session::get('success') }}
-    </div>
-@endif
-    <div>
-        <form method="post">
-            <input type="email" name="email">
-            <input type="password" name="password">
-            <input type="submit">
-            @csrf
-        </form>    
-    </div>
-    <div>
-        <form method="post" action="{{ url("register") }}">
-            <!-- TODO validation in js !-->
-            <input type="email" name="email" placeholder="email">
-            <input type="text" name="name" placeholder="Imie">
-            <input type="password" name="password" placeholder="Hasło">
-            <input type="password" name="repeat-password" placeholder="Powtórz hasło">
-            <input type="submit">
-            @csrf
-        </form>
+
+    <div class="login-register-container">
+        <div class="login-register-form">
+            <h1> Zaloguj się </h1>
+            <form method="post">
+                <input type="email" name="email">
+                <input type="password" name="password">
+                <input type="submit">
+                @csrf
+            </form>    
+        </div>
+        <div>
+            <h1> Zarejstruj się </h1>
+            <form method="post" action="{{ url("register") }}">
+                <!-- TODO validation in js !-->
+                <input type="email" name="email" placeholder="email">
+                <input type="text" name="name" placeholder="Imie">
+                <input type="password" name="password" placeholder="Hasło">
+                <input type="password" name="repeat-password" placeholder="Powtórz hasło">
+                <input type="submit">
+                @csrf
+            </form>
+        </div>
     </div>
 </body>
 </html>

webpack.mix.js

@@ -14,4 +14,7 @@ const mix = require("laravel-mix");
 mix.js("resources/js/app.js", "public/js").sass(
     "resources/scss/app.scss",
     "public/css"
+).sass(
+    "resources/scss/login.scss",
+    "public/css"
 );