Skip to content

Instantly share code, notes, and snippets.

@javedbaloch4

javedbaloch4/forgot.blade.php

Created September 8, 2020 08:07
Show Gist options
  • Save javedbaloch4/f347ce363798bb6da41309337a2730fd to your computer and use it in GitHub Desktop.
Save javedbaloch4/f347ce363798bb6da41309337a2730fd to your computer and use it in GitHub Desktop.
Download ZIP
TALL Stack auth form repo will be added soon.
Raw
forgot.blade.php
<div>
<!-- component -->
<body class="font-mono bg-gray-400">
<!-- Container -->
<div class="container mx-auto">
<div class="flex justify-center px-6 my-12">
<!-- Row -->
<div class="w-full xl:w-3/4 lg:w-11/12 flex">
<!-- Col -->
<div
class="w-full h-auto bg-gray-400 hidden lg:block lg:w-1/2 bg-cover rounded-l-lg"
style="background-image: url('https://source.unsplash.com/oWTW-jNGl9I/600x800')"
></div>
<!-- Col -->
<div class="w-full lg:w-1/2 bg-white p-5 rounded-lg lg:rounded-l-none">
<div class="px-8 mb-4 text-center">
<h3 class="pt-4 mb-2 text-2xl">Forgot Your Password?</h3>
<p class="mb-4 text-sm text-gray-700">
We get it, stuff happens. Just enter your email address below and we'll send you a
link to reset your password!
</p>
</div>
<div class="px-8 pt-6 pb-8 mb-4 bg-white rounded">
<div class="mb-4">
<label class="block mb-2 text-sm font-bold text-gray-700" for="email">
Email
</label>
<input
class="w-full px-3 py-2 text-sm leading-tight text-gray-700 border rounded shadow appearance-none focus:outline-none focus:shadow-outline"
id="email"
type="email"
placeholder="Enter Email Address..."
/>
@error('email') <span class="text-red">{{ $message }}</span> @enderror
</div>
<div class="mb-6 text-center">
<button
class="w-full px-4 py-2 font-bold text-white bg-red-500 rounded-full hover:bg-red-700 focus:outline-none focus:shadow-outline"
type="button"
>
Reset Password
</button>
</div>
<hr class="mb-6 border-t" />
<div class="text-center">
<button
class="inline-block text-sm text-blue-500 align-baseline hover:text-blue-800"
@click="{ login = false, register = true, forgot = false }"
>
Create an Account!
</button>
</div>
<div class="text-center">
<button
class="inline-block text-sm text-blue-500 align-baseline hover:text-blue-800"
@click="{ login = true, register = false, forgot = false }"
>
Already have an account? Login!
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</div>
Raw
home.blade.php
// Home
<div x-data="{ login: false, register: false, forgot: true }">
<div x-show="register">
<livewire:register/>
</div>
<div x-show="login">
<livewire:login />
</div>
<div x-show="forgot">
<livewire:forgot />
</div>
</div>
Raw
login.blade.php
<div>
<!-- component -->
<body class="font-mono bg-gray-400">
<!-- Container -->
<div class="container mx-auto">
<div class="flex justify-center px-6 my-12">
<!-- Row -->
<div class="w-full xl:w-3/4 lg:w-11/12 flex">
<!-- Col -->
<div
class="w-full h-auto bg-gray-400 hidden lg:block lg:w-1/2 bg-cover rounded-l-lg"
style="background-image: url('https://source.unsplash.com/K4mSJ7kc0As/600x800')"
></div>
<!-- Col -->
<div class="w-full lg:w-1/2 bg-white p-5 rounded-lg lg:rounded-l-none">
<h3 class="pt-4 text-2xl text-center">Welcome Back!</h3>
<div class="px-8 pt-6 pb-8 mb-4 bg-white rounded">
<div class="mb-4">
<label class="block mb-2 text-sm font-bold text-gray-700" for="username">
Username
</label>
<input
class="w-full px-3 py-2 text-sm leading-tight text-gray-700 border rounded shadow appearance-none focus:outline-none focus:shadow-outline"
id="username"
type="text"
placeholder="Username"
/>
</div>
<div class="mb-4">
<label class="block mb-2 text-sm font-bold text-gray-700" for="password">
Password
</label>
<input
class="w-full px-3 py-2 mb-3 text-sm leading-tight text-gray-700 border border-red-500 rounded shadow appearance-none focus:outline-none focus:shadow-outline"
id="password"
type="password"
placeholder="******************"
/>
<p class="text-xs italic text-red-500">Please choose a password.</p>
</div>
<div class="mb-4">
<input class="mr-2 leading-tight" type="checkbox" id="checkbox_id" />
<label class="text-sm" for="checkbox_id">
Remember Me
</label>
</div>
<div class="mb-6 text-center">
<button
class="w-full px-4 py-2 font-bold text-white bg-blue-500 rounded-full hover:bg-blue-700 focus:outline-none focus:shadow-outline"
type="button"
>
Sign In
</button>
</div>
<hr class="mb-6 border-t" />
<div class="text-center">
<button
class="inline-block text-sm text-blue-500 align-baseline hover:text-blue-800"
@click="{ login = false, register = true, forgot = false }"
>
Create an Account!
</button>
</div>
<div class="text-center">
<button
class="inline-block text-sm text-blue-500 align-baseline hover:text-blue-800"
@click="{ login = false, register = false, forgot = true }"
>
Forgot Password?
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</div>
Raw
register.blade.php
<div>
<!-- component -->
<div class="font-mono bg-gray-400">
<!-- Container -->
<div class="container mx-auto">
<div class="flex justify-center px-6 my-12">
<!-- Row -->
<div class="w-full xl:w-3/4 lg:w-11/12 flex">
<!-- Col -->
<div
class="w-full h-auto bg-gray-400 hidden lg:block lg:w-5/12 bg-cover rounded-l-lg"
style="background-image: url('https://source.unsplash.com/Mv9hjnEUHR4/600x800')"
></div>
<!-- Col -->
<div class="w-full lg:w-7/12 bg-white p-5 rounded-lg lg:rounded-l-none">
<h3 class="pt-4 text-2xl text-center">Create an Account!</h3>
<div class="px-8 pt-6 pb-8 mb-4 bg-white rounded">
<div class="mb-4 md:flex md:justify-between">
<div class="mb-4 md:mr-2 md:mb-0">
<label class="block mb-2 text-sm font-bold text-gray-700" for="firstName">
First Name
</label>
<input
class="w-full px-3 py-2 text-sm leading-tight text-gray-700 border rounded shadow appearance-none focus:outline-none focus:shadow-outline"
id="firstName"
type="text"
placeholder="First Name"
/>
</div>
<div class="md:ml-2">
<label class="block mb-2 text-sm font-bold text-gray-700" for="lastName">
Last Name
</label>
<input
class="w-full px-3 py-2 text-sm leading-tight text-gray-700 border rounded shadow appearance-none focus:outline-none focus:shadow-outline"
id="lastName"
type="text"
placeholder="Last Name"
/>
</div>
</div>
<div class="mb-4">
<label class="block mb-2 text-sm font-bold text-gray-700" for="email">
Email
</label>
<input
class="w-full px-3 py-2 mb-3 text-sm leading-tight text-gray-700 border rounded shadow appearance-none focus:outline-none focus:shadow-outline"
id="email"
type="email"
placeholder="Email"
/>
</div>
<div class="mb-4 md:flex md:justify-between">
<div class="mb-4 md:mr-2 md:mb-0">
<label class="block mb-2 text-sm font-bold text-gray-700" for="password">
Password
</label>
<input
class="w-full px-3 py-2 mb-3 text-sm leading-tight text-gray-700 border border-red-500 rounded shadow appearance-none focus:outline-none focus:shadow-outline"
id="password"
type="password"
placeholder="******************"
/>
<p class="text-xs italic text-red-500">Please choose a password.</p>
</div>
<div class="md:ml-2">
<label class="block mb-2 text-sm font-bold text-gray-700" for="c_password">
Confirm Password
</label>
<input
class="w-full px-3 py-2 mb-3 text-sm leading-tight text-gray-700 border rounded shadow appearance-none focus:outline-none focus:shadow-outline"
id="c_password"
type="password"
placeholder="******************"
/>
</div>
</div>
<div class="mb-6 text-center">
<button
class="w-full px-4 py-2 font-bold text-white bg-blue-500 rounded-full hover:bg-blue-700 focus:outline-none focus:shadow-outline"
type="button"
>
Register Account
</button>
</div>
<hr class="mb-6 border-t" />
<div class="text-center">
<button
class="inline-block text-sm text-blue-500 align-baseline hover:text-blue-800"
@click="{ login = false, register = false, forgot = true }"
>
Forgot Password?
</button>
</div>
<div class="text-center">
<button
class="inline-block text-sm text-blue-500 align-baseline hover:text-blue-800"
@click="{ login = true, register = false, forgot = false }"
>
Already have an account? Login!
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment