Merge pull request #3 from michaeldyrynda/pr-1

Add auth scaffolding and documentation

README.md

@@ -1 +1,23 @@
 # Tachyons preset for the Laravel framework
+
+### Installing
+```bash
+$ npm install
+```
+
+### Setting up the new preset
+```bash
+$ php artisan preset tachyons
+```
+
+### Auth scaffolding
+```bash
+$ php artisan preset tachyons-auth
+```
+
+### Compiling assets
+```bash
+$ npm run dev
+```
+
+Enjoy!

src/TachyonsPreset.php

@@ -13,6 +13,7 @@ public static function install()
     {
         static::updatePackages();
         static::updateSass();
+        static::updateBootstrapping();
         static::updateWelcomePage();
         static::removeNodeModules();
     }

src/tachyons-stubs/views/auth/login.blade.php

@@ -0,0 +1,48 @@
+@extends('layouts.app')
+
+@section('content')
+
+	<div class="pa4-l">
+		<form class="bg-near-white mw6 center pa4 br2-ns ba b--black-10" method="POST" action="{{ route('login') }}">
+			{{ csrf_field() }}
+			<fieldset class="cf bn ma0 pa0">
+				<legend class="pa0 f4-ns mb3 black-80">Login</legend>
+				<div class="cf">
+					<label class="clip" for="email">Email Address</label>
+					<input
+						class="f6 f5-l input-reset black-80 bg-white pa3 lh-solid w-100 br2-ns @if ($errors->has('email')) ba b--light-red @else bn @endif"
+						placeholder="Your Email Address"
+						type="text"
+						name="email"
+						value="{{ old('email') }}"
+						id="email">
+					@if ($errors->has('email'))
+						<p class="light-red f5 mt1">{{ $errors->first('email') }}</p>
+					@endif
+
+					<input
+						class="f6 f5-l input-reset black-80 bg-white pa3 lh-solid w-100 mt3 br2-ns @if ($errors->has('password'))ba b--light-red @else bn @endif"
+						type="password"
+						name="password"
+						value=""
+						id="password"
+						placeholder="Password">
+					@if ($errors->has('password'))
+						<p class="light-red f5 mt1">{{ $errors->first('password') }}</p>
+					@endif
+
+					<label class="f6 f5-l w-100 dt mb3 mt3">
+                        <input type="checkbox" name="remember" {{ old('remember') ? 'checked' : '' }}> Remember Me
+                    </label>
+                    <a
+                    	href="{{ route('password.request') }}"
+                    	class="link w-100 f6 f5-l dt gray mt3 mb3">Forgot your password?</a>
+					<input
+						class="f6 f5-l button-reset pv3 fr tc bn bg-animate bg-black-70 hover-bg-black white pointer w-100 w-25-m w-20-l br2-ns"
+						type="submit"
+						value="Login">
+				</div>
+			</fieldset>
+		</form>
+	</div>
+@endsection

src/tachyons-stubs/views/auth/passwords/email.blade.php

@@ -0,0 +1,40 @@
+@extends('layouts.app')
+
+@section('content')
+    <div class="pa4-l">
+        @if (session('status'))
+            <div class="mw6 center mb3 flex items-center justify-center pa4 bg-light-green navy">
+                <svg class="w1" data-icon="info" viewBox="0 0 32 32" style="fill:currentcolor">
+                    <title>info icon</title>
+                    <path d="M16 0 A16 16 0 0 1 16 32 A16 16 0 0 1 16 0 M19 15 L13 15 L13 26 L19 26 z M16 6 A3 3 0 0 0 16 12 A3 3 0 0 0 16 6"></path>
+                </svg>
+                <span class="lh-title ml3">{{ session('status') }}</span>
+            </div>
+        @endif
+
+        <form class="bg-near-white mw6 center pa4 br2-ns ba b--black-10" method="POST" action="{{ route('password.email') }}">
+            {{ csrf_field() }}
+            <fieldset class="cf bn ma0 pa0">
+                <legend class="pa0 f4-ns mb3 black-80">Reset Password</legend>
+                <div class="cf">
+                    <label class="clip" for="email">E-Mail Address</label>
+                    <input
+                        class="f6 f5-l input-reset black-80 bg-white pa3 lh-solid w-100 br2-ns @if ($errors->has('email')) ba b--light-red @else bn @endif"
+                        placeholder="Your Email Address"
+                        type="text"
+                        name="email"
+                        value="{{ old('email') }}"
+                        id="email">
+                    @if ($errors->has('email'))
+                        <p class="light-red f5 mt1">{{ $errors->first('email') }}</p>
+                    @endif
+
+                    <input
+                        class="f6 f5-l button-reset pv3 fr tc bn bg-animate bg-black-70 hover-bg-black white pointer w-100 w-100-m w-50-l br2-ns mt3"
+                        type="submit"
+                        value="Send Password Reset Link">
+                </div>
+            </fieldset>
+        </form>
+    </div>
+@endsection

src/tachyons-stubs/views/auth/passwords/reset.blade.php

@@ -0,0 +1,54 @@
+@extends('layouts.app')
+
+@section('content')
+
+    <div class="pa4-l">
+        <form class="bg-near-white mw6 center pa4 br2-ns ba b--black-10" method="POST" action="{{ route('password.request') }}">
+            {{ csrf_field() }}
+            <input type="hidden" name="token" value="{{ $token }}">
+            <fieldset class="cf bn ma0 pa0">
+                <legend class="pa0 f4-ns mb3 black-80">Register</legend>
+                <div class="cf">
+                    <label class="clip" for="email">Email Address</label>
+                    <input
+                        class="f6 mt3 f5-l input-reset black-80 bg-white pa3 lh-solid w-100 br2-ns @if ($errors->has('email')) ba b--light-red @else bn @endif"
+                        placeholder="Your Email Address"
+                        type="text"
+                        name="email"
+                        value="{{ old('email') }}"
+                        id="email">
+                    @if ($errors->has('email'))
+                        <p class="light-red f5 mt1">{{ $errors->first('email') }}</p>
+                    @endif
+
+                    <input
+                        class="f6 f5-l input-reset black-80 bg-white pa3 lh-solid w-100 mt3 br2-ns @if ($errors->has('password'))ba b--light-red @else bn @endif"
+                        type="password"
+                        name="password"
+                        value=""
+                        id="password"
+                        placeholder="Password">
+                    @if ($errors->has('password'))
+                        <p class="light-red f5 mt1">{{ $errors->first('password') }}</p>
+                    @endif
+
+                    <input
+                        class="f6 f5-l input-reset black-80 bg-white pa3 lh-solid w-100 mt3 br2-ns @if ($errors->has('password_confirmation')) ba b--light-red @else bn @endif"
+                        type="password"
+                        name="password_confirmation"
+                        value=""
+                        id="password_confirmation"
+                        placeholder="Confirm Password">
+                    @if ($errors->has('password_confirmation'))
+                        <p class="light-red f5 mt1">{{ $errors->first('password_confirmation') }}</p>
+                    @endif
+
+                    <input
+                        class="f6 f5-l button-reset pv3 fr tc bn bg-animate bg-black-70 hover-bg-black white pointer w-100 w-25-m w-20-l br2-ns mt3"
+                        type="submit"
+                        value="Register">
+                </div>
+            </fieldset>
+        </form>
+    </div>
+@endsection

src/tachyons-stubs/views/auth/register.blade.php

@@ -0,0 +1,65 @@
+@extends('layouts.app')
+
+@section('content')
+
+    <div class="pa4-l">
+        <form class="bg-near-white mw6 center pa4 br2-ns ba b--black-10" method="POST" action="{{ route('register') }}">
+            {{ csrf_field() }}
+            <fieldset class="cf bn ma0 pa0">
+                <legend class="pa0 f4-ns mb3 black-80">Register</legend>
+                <div class="cf">
+                    <label class="clip" for="name">Name</label>
+                    <input
+                        class="f6 f5-l input-reset black-80 bg-white pa3 lh-solid w-100 br2-ns @if ($errors->has('name')) ba b--light-red @else bn @endif"
+                        placeholder="Name"
+                        type="text"
+                        name="name"
+                        value="{{ old('name') }}"
+                        id="name">
+                    @if ($errors->has('name'))
+                        <p class="light-red f5 mt1">{{ $errors->first('name') }}</p>
+                    @endif
+
+                    <label class="clip" for="email">Email Address</label>
+                    <input
+                        class="f6 mt3 f5-l input-reset black-80 bg-white pa3 lh-solid w-100 br2-ns @if ($errors->has('email')) ba b--light-red @else bn @endif"
+                        placeholder="Your Email Address"
+                        type="text"
+                        name="email"
+                        value="{{ old('email') }}"
+                        id="email">
+                    @if ($errors->has('email'))
+                        <p class="light-red f5 mt1">{{ $errors->first('email') }}</p>
+                    @endif
+
+                    <input
+                        class="f6 f5-l input-reset black-80 bg-white pa3 lh-solid w-100 mt3 br2-ns @if ($errors->has('password'))ba b--light-red @else bn @endif"
+                        type="password"
+                        name="password"
+                        value=""
+                        id="password"
+                        placeholder="Password">
+                    @if ($errors->has('password'))
+                        <p class="light-red f5 mt1">{{ $errors->first('password') }}</p>
+                    @endif
+
+                    <input
+                        class="f6 f5-l input-reset black-80 bg-white pa3 lh-solid w-100 mt3 br2-ns @if ($errors->has('password_confirmation')) ba b--light-red @else bn @endif"
+                        type="password"
+                        name="password_confirmation"
+                        value=""
+                        id="password_confirmation"
+                        placeholder="Confirm Password">
+                    @if ($errors->has('password_confirmation'))
+                        <p class="light-red f5 mt1">{{ $errors->first('password_confirmation') }}</p>
+                    @endif
+
+                    <input
+                        class="f6 f5-l button-reset pv3 fr tc bn bg-animate bg-black-70 hover-bg-black white pointer w-100 w-25-m w-20-l br2-ns mt3"
+                        type="submit"
+                        value="Register">
+                </div>
+            </fieldset>
+        </form>
+    </div>
+@endsection

src/tachyons-stubs/views/home.blade.php

@@ -1,20 +1,22 @@
 @extends('layouts.app')
 
 @section('content')
-<section class="mw5 mw7-ns center pa3 ph5-ns">
-    <article class="center mw5 mw6-ns br3 hidden ba b--black-10 mv4">
-        <h1 class="f4 bg-near-white br3 br--top black-60 mv0 pv2 ph3">Dashboard</h1>
-        <div class="pa3 bt b--black-10">
-            @if (session('status'))
-                <div class="flex pa4 bg-lightest-green green">
-                    <span class="lh-title ml3">
-                        {{ session('status') }}
-                    </span>
-                </div>
-            @endif
-
-            You are logged in!
+    @if (session('status'))
+        <div class="mw6 center mb3 flex items-center justify-center pa4 bg-light-green navy">
+            <svg class="w1" data-icon="info" viewBox="0 0 32 32" style="fill:currentcolor">
+                <title>info icon</title>
+                <path d="M16 0 A16 16 0 0 1 16 32 A16 16 0 0 1 16 0 M19 15 L13 15 L13 26 L19 26 z M16 6 A3 3 0 0 0 16 12 A3 3 0 0 0 16 6"></path>
+            </svg>
+            <span class="lh-title ml3">{{ session('status') }}</span>
         </div>
-    </article>
-</section>
+    @endif
+    <div class="mw5 center bg-white br3 pa3 pa4-ns mv3 ba b--black-10">
+        <div class="tc">
+            <h1 class="f4">Dashboard</h1>
+            <hr class="mw3 bb bw1 b--black-10">
+        </div>
+        <p class="lh-copy measure dt center f5 black-70">
+            You are logged in!
+        </p>
+    </div>
 @endsection

src/tachyons-stubs/views/layouts/app.blade.php

@@ -15,26 +15,25 @@
 </head>
 <body>
     <div id="app">
-        <nav class="pa3 pa4-ns">
-            <a class="link dim black b f6 f5-ns dib mr3" href="{{ url('/') }}">
-                {{ config('app.name', 'Laravel') }}
+        <nav class="db dt-l w-100 border-box pa3 ph5-l bg-almost bg-light-gray">
+            <a class="db dtc-l v-mid mid-gray link dim w-100 w-25-l tc tl-l mb2 mb0-l tracked ttu" href="#" title="Home">
+                {{ config('app.name') }}
             </a>
-            @guest
-                <a class="link dim gray f6 f5-ns dib mr3" href="{{ route('login') }}" title="Login">Login</a>
-                <a class="link dim gray f6 f5-ns dib mr3" href="{{ route('register') }}" title="Register">Register</a>
-            @else
-                <a class="link dim black b f6 f5-ns dib mr3" href="#">
-                    {{ Auth::user()->name }}
-                </a>
-                <a class="link dim gray f6 f5-ns dib mr3"
-                   href="{{ route('logout') }}"
-                   onclick="event.preventDefault(); document.getElementById('logout-form').submit();"
-                >
-                    Logout
-                </a>
-            @endguest
+            <div class="db dtc-l v-mid w-100 w-75-l tc tr-l">
+                @guest
+                    <a class="link dim dark-gray f6 f5-l dib mr3 mr4-l tracked" href="{{ url('/login') }}">Login</a>
+                    <a class="link dim dark-gray f6 f5-l dib tracked" href="{{ url('/register') }}">Register</a>
+                @else
+                    <a href="{{ route('logout') }}"
+                        class="link dim dark-gray f6 f5-l dib mr3 mr4-l tracked"
+                        onclick="event.preventDefault();
+                        document.getElementById('logout-form').submit();">Logout</a>
+                    <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
+                        {{ csrf_field() }}
+                    </form>
+                @endguest
+            </div>
         </nav>
-
         @yield('content')
     </div>