made login and signup working

.env.example

@@ -8,7 +8,7 @@ LOG_CHANNEL=stack
 LOG_DEPRECATIONS_CHANNEL=null
 LOG_LEVEL=debug
 
-DB_CONNECTION=ṣqlite
+DB_CONNECTION=sqlite
 # DB_CONNECTION=mysql
 # DB_HOST=127.0.0.1
 # DB_PORT=3306

README.md

@@ -5,8 +5,8 @@ # Learn Guide
 ## Tasks :-
 
 - [X] Create Home Page
-- [ ] Create Login Page
-- [ ] Create Signup Page
+- [X] Create Login Page
+- [X] Create Signup Page
 - [ ] Create an simple Dashboard page
 
 

app/Http/Controllers/DashboardController.php

@@ -0,0 +1,13 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+// use
+
+class DashboardController extends Controller
+{
+    public function home(){
+        return view('dashboard.home');
+    }
+}

app/Http/Controllers/HomeController.php

@@ -3,6 +3,9 @@
 namespace App\Http\Controllers;
 
 use Illuminate\Http\Request;
+use App\Models\CustomUser;
+use Auth;
+use Hash;
 
 class HomeController extends Controller
 {
@@ -10,4 +13,85 @@ class HomeController extends Controller
     public function home(){
         return view("home");
     }
+    public function login_form(){
+        return view("login");
+    }
+    public function signup_form(){
+        return view("signup");
+    }
+
+    public function signup(Request $request){
+        // username and password
+        $request->validate([
+            "username"=>[
+                "required",
+                "string",
+                "regex:/^[a-z][a-z0-9-]*[a-z0-9]$/",    // regex for a-z 0-9 and - in middle
+                "unique:App\Models\CustomUser",     // username shouldn't exist in db
+            ],
+            "password"=>[
+                "required",
+                "string",
+                "min:1",
+                "max:30",
+            ],
+            "confirm_password"=>[
+                "required",
+                "string",
+                "min:1",
+                "max:30",
+            ],
+        ]);
+
+        // check if password matchs confirm password
+        \Log::info($request);
+        if($request['password']!=$request['confirm_password'])
+        {
+            // return error
+            return redirect()->back()->withErrors([
+                "confirm_password"=>"confirm password doesn't match the password"
+            ]);
+        }
+        // create user
+        $user = new CustomUser();
+        $user->username = $request->username;
+        $user->password = Hash::make($request->password);
+        $user->save();
+
+        return redirect(route("login.form"));
+    }
+
+    public function login(Request $request){
+        // username and password
+        $request->validate([
+            "username"=>[
+                "required",
+                "string",
+                "regex:/^[a-z][a-z0-9-]*[a-z0-9]$/",    // regex for a-z 0-9 and - in middle
+                "exists:App\Models\CustomUser",     // username should exist in db
+            ],
+            "password"=>[
+                "required",
+                "string",
+                "min:1",
+                "max:30",
+            ],
+        ]);
+
+        // \Log::info($request);
+        // login
+        $user = CustomUser::where("username",$request->username)->first();
+
+        if(!Hash::check($request->password, $user->password)){
+            // password is incorrect
+            Auth::guard('customuser')->logout();
+
+            return redirect()->back()->withErrors([
+                "password"=>"incorrect password"
+            ]);
+        }
+
+        Auth::guard('customuser')->login($user);
+        return redirect(route('dashboard'));
+    }
 }

app/Http/Kernel.php

@@ -64,5 +64,6 @@ class Kernel extends HttpKernel
         'signed' => \App\Http\Middleware\ValidateSignature::class,
         'throttle' => \Illuminate\Routing\Middleware\ThrottleRequests::class,
         'verified' => \Illuminate\Auth\Middleware\EnsureEmailIsVerified::class,
+        'is_customuser' => \App\Http\Middleware\isCustomUser::class,    // custom middleware
     ];
 }

app/Http/Middleware/isCustomUser.php

@@ -0,0 +1,25 @@
+<?php
+
+namespace App\Http\Middleware;
+
+use Closure;
+use Illuminate\Http\Request;
+use Symfony\Component\HttpFoundation\Response;
+use Auth;
+
+class isCustomUser
+{
+    /**
+     * Handle an incoming request.
+     *
+     * @param  \Closure(\Illuminate\Http\Request): (\Symfony\Component\HttpFoundation\Response)  $next
+     */
+    public function handle(Request $request, Closure $next)
+    {
+        if(Auth::guard('customuser')->check()){
+            return $next($request);
+        }
+
+        return redirect(route('login.form'));
+    }
+}

app/Models/CustomUser.php

@@ -0,0 +1,16 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Foundation\Auth\User as Authenticatable;
+use Illuminate\Notifications\Notifiable;
+use Laravel\Sanctum\HasApiTokens;
+
+class CustomUser extends Authenticatable
+{
+    use HasApiTokens, HasFactory, Notifiable;
+
+    protected $guard = "customuser";
+}

config/auth.php

@@ -40,6 +40,14 @@
             'driver' => 'session',
             'provider' => 'users',
         ],
+        'customuser' => [
+            'driver' => 'session',
+            'provider' => 'customuser',
+        ],
+        // 'web' => [
+        //     'driver' => 'session',
+        //     'provider' => 'users',
+        // ],
     ],
 
     /*
@@ -64,6 +72,10 @@
             'driver' => 'eloquent',
             'model' => App\Models\User::class,
         ],
+        'customuser' => [
+            'driver' => 'eloquent',
+            'model' => App\Models\CustomUser::class,
+        ],
 
         // 'users' => [
         //     'driver' => 'database',

database/migrations/2023_12_30_142000_create_custom_users_table.php

@@ -0,0 +1,30 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::create('custom_users', function (Blueprint $table) {
+            $table->id();
+            $table->string('username')->unique();
+            $table->string('password');
+            $table->rememberToken();
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('custom_users');
+    }
+};

public/css/dashboard/home.css

@@ -0,0 +1,74 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&family=Roboto:wght@300&display=swap');
+
+*{
+    margin:0;
+    padding:0;
+    box-sizing: border-box;
+    font-family: 'Poppins', sans-serif;
+}
+
+a{
+    color:#000;
+    /* border:none; */
+    text-decoration: none;
+}
+
+header{
+    height:80px;
+    background-color: #FFC3C3;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    padding:0.7rem 2rem;
+}
+header .circle{
+    border:2px solid #000;
+    border-radius: 50%;
+    aspect-ratio: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.6rem;
+}
+header>.title{
+    font-size:2rem;
+    cursor: pointer;
+}
+
+header>.sub_header{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+}
+
+header>.sub_header a{
+    margin-inline:10px;
+    cursor: pointer;
+}
+header>.sub_header a:hover{
+    border-bottom:2px solid #000;
+}
+
+section{
+    min-height:400px;
+    border-bottom: 1px solid black;
+    padding:1rem 2rem;
+}
+
+section>p{
+    font-size:1.5rem;
+    width:50ch;
+    /* margin-inline:2rem; */
+}
+#get_started_btn{
+    background-color: #44d;
+    color:#fff;
+    border:none;
+    padding: 1em;
+    border-radius: 50px;
+    font-weight: 600;
+    font-size: 1rem;
+    cursor: pointer;
+}

public/css/home.css

@@ -7,6 +7,12 @@
     font-family: 'Poppins', sans-serif;
 }
 
+a{
+    color:#000;
+    /* border:none; */
+    text-decoration: none;
+}
+
 header{
     height:80px;
     background-color: #FFC3C3;

public/css/login.css

@@ -0,0 +1,84 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&family=Roboto:wght@300&display=swap');
+
+*{
+    margin:0;
+    padding:0;
+    box-sizing: border-box;
+    font-family: 'Poppins', sans-serif;
+}
+
+main{
+    width:100%;
+    min-height: 100vh;
+    /* background-color: rgb(0, 0, 0); */
+    padding: 2rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    /* justify-content: center; */
+}
+
+header{
+    text-align: center;
+}
+form{
+    background-color: #FDC5C5;
+    border-radius: 20px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-evenly;
+    margin: 2rem;
+    padding: 2rem 1rem;
+    width:300px;
+}
+#form_title{
+    font-size: 2rem;
+    letter-spacing: 2px;
+}
+
+#input_container{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin: 1rem 0;
+    width:100%;
+}
+.field{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width:100%;
+}
+.field>.error_msg{
+    color:#a22;
+    font-size: 0.8rem;
+}
+.field>input{
+    margin: 0.25rem 0;
+    border: none;
+    outline: none;
+    border-radius: 50px;
+    padding:0.5rem 1rem;
+    width:100%;
+}
+
+#submit_btn{
+    border: none;
+    outline: none;
+    border-radius: 50px;
+    padding:0.5rem 1rem;
+    background-color: #484848;
+    color:#fff;
+    cursor: pointer;
+}
+#submit_btn:focus,#submit_btn:hover{
+    outline: 2px solid #000000;
+}
+
+a{
+    color:hsl(234, 100%, 56%);
+}
+a:hover,a:active,a:focus{
+    color:hsl(234, 50%, 30%);
+}

resources/views/components/bottomup.blade.php

@@ -0,0 +1,33 @@
+<style>
+    .bottomup_container{
+        background:#61F867;
+        aspect-ratio:1;
+        height:200px;
+
+        border-radius:10px;
+        color:#fff;
+        padding:20px;
+        display:flex;
+        flex-direction:column;
+        align-items: center;
+        justify-content: center;
+    }
+    .bottomup_container p{
+        width:fit-content;
+    }
+    .bottomup_container .triangle{
+        /* aspect-ratio:1; */
+        /* width:40%; */
+        margin-top:10px;
+        fill:#fff;
+    }
+</style>
+<div class="bottomup_container">
+    <p>Bottom Up</p>
+    <svg class="triangle" width=100 height=84>
+        <polygon points="50 0, 100 84, 0 84"/>
+    </svg>
+    <svg class="triangle" width=100 height=84>
+        <polygon points="50 0, 100 84, 0 84"/>
+    </svg>
+</div>

resources/views/components/topdown.blade.php

@@ -0,0 +1,34 @@
+<style>
+    .topdown_container{
+        background:#6EA1EE;
+        aspect-ratio:1;
+        height:200px;
+
+        border-radius:10px;
+        color:#fff;
+        padding:20px;
+        display:flex;
+        flex-direction:column;
+        align-items: center;
+        justify-content: center;
+    }
+    .topdown_container p{
+        width:fit-content;
+    }
+    .topdown_container .triangle{
+        /* aspect-ratio:1; */
+        /* width:40%; */
+        margin-top:10px;
+        fill:#fff;
+        transform: rotate(180deg);
+    }
+</style>
+<div class="topdown_container">
+    <p>Top Down</p>
+    <svg class="triangle" width=100 height=84>
+        <polygon points="50 0, 100 84, 0 84"/>
+    </svg>
+    <svg class="triangle" width=100 height=84>
+        <polygon points="50 0, 100 84, 0 84"/>
+    </svg>
+</div>

resources/views/dashboard/home.blade.php

@@ -0,0 +1,35 @@
+<html>
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Learn Guide | Home Page</title>
+    <link rel="stylesheet" href="{{ asset('css/dashboard/home.css') }}">
+</head>
+
+<body>
+    <header>
+        <a class='title' href="{{ route('home') }}">LearnGuide</a>
+        <div class="sub_header">
+            <div>
+                <a href="{{ route('dashboard') }}">Dashboard</a>
+                <a>My Skills</a>
+                <a>Explore</a>
+            </div>
+            <div class='circle'>
+                {{ Auth::guard('customuser')->user()->username }}
+            </div>
+        </div>
+    </header>
+    <section>
+        <p>
+            you should start learning the skills which interests you or which can help you with your career.
+        </p>
+        <button id="get_started_btn">Get Started</button>
+        @include('components.topdown')
+        @include('components.bottomup')
+    </section>
+</body>
+
+</html>

resources/views/home.blade.php

@@ -18,7 +18,7 @@
                 <a>Explore</a>
             </div>
             <div>
-                <a>Login</a>
+                <a href="{{ route('login.form') }}">Login</a>
             </div>
         </div>
     </header>
@@ -34,15 +34,15 @@
     <section id='topdown_container'>
         <h2 class="heading">Top Down Approach</h2>
         <div class="main_section">
-            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corrupti vel vero quia impedit! Fuga unde recusandae eum minima. At eius, sequi dolore nostrum optio veritatis aliquid voluptate nesciunt! Libero, at?</p>
-            <img src="{{ asset('images/keep_learning.png') }}">
+            <p>Top-down learning is a teaching style that focuses on providing students a large view of a subject, without explaining the components that make up the subject. It is based on the idea that a teacher drives the classroom and determines what is to be taught. Top-down learning also involves perceiving the world by drawing from what we already know in order to interpret new information. Top-down learning is influenced by higher mental processes such as expectations, beliefs, values, and social influences.</p>
+            @include('components.topdown')
         </div>
     </section>
     <section id='bottomup_container'>
         <h2 class="heading">Bottom Up Approach</h2>
         <div class="main_section">
-            <img src="{{ asset('images/keep_learning.png') }}">
-            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corrupti vel vero quia impedit! Fuga unde recusandae eum minima. At eius, sequi dolore nostrum optio veritatis aliquid voluptate nesciunt! Libero, at?</p>
+            @include('components.bottomup')
+            <p>Bottom-up learning is a teaching style that focuses on providing students the components that make up a subject, and then building up to a larger view of the subject. It is based on the idea that students are active learners who construct their own knowledge from the bottom up. Bottom-up learning also involves perceiving the world by processing sensory information and building up to higher levels of cognition. Bottom-up learning is influenced by lower mental processes such as perception, attention, memory, and reasoning.</p>
         </div>
     </section>
 

resources/views/login.blade.php

@@ -0,0 +1,46 @@
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Login</title>
+    <link rel="stylesheet" href="{{ asset('css/login.css') }}">
+</head>
+
+<body>
+    <main>
+        <header>
+            <h1>Learn Guide</h1>
+            <h4>use Learn Guide to learn how to learn skills efficently</h4>
+        </header>
+        <form method="POST" action="{{ route('login') }}">
+            @csrf
+            <h3 id="form_title">Login</h3>
+            <div id="input_container">
+                <div class="field">
+                    <input type="text" name="username" value="{{ old('username') }}" placeholder="Username">
+                    <span class="error_msg">
+                        @error('username')
+                            {{ $message }}
+                        @enderror
+                    </span>
+                </div>
+                <div class="field">
+
+                    <input type="password" name="password" placeholder="Password">
+                    <span class="error_msg">
+                        @error('password')
+                            {{ $message }}
+                        @enderror
+                    </span>
+                </div>
+
+            </div>
+            <input type="submit" id="submit_btn" value="Login">
+        </form>
+        <p>new to learn guide ? <a href="{{ route('signup.form') }}">Sign up now</a></p>
+    </main>
+</body>
+
+</html>

resources/views/signup.blade.php

@@ -0,0 +1,54 @@
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Signup</title>
+    <link rel="stylesheet" href="{{ asset('css/login.css') }}">
+</head>
+
+<body>
+    <main>
+        <header>
+            <h1>Learn Guide</h1>
+            <h4>use Learn Guide to learn how to learn skills efficently</h4>
+        </header>
+        <form method="POST" action="{{ route('signup') }}">
+            @csrf
+            <h3 id="form_title">Signup</h3>
+            <div id="input_container">
+                <div class="field">
+                    <input type="text" name="username" value="{{ old('username') }}" placeholder="Username">
+                    <span class="error_msg">
+                        @error('username')
+                            {{ $message }}
+                        @enderror
+                    </span>
+                </div>
+                <div class="field">
+
+                    <input type="password" name="password" placeholder="Password">
+                    <span class="error_msg">
+                        @error('password')
+                            {{ $message }}
+                        @enderror
+                    </span>
+                </div>
+                <div class="field">
+
+                    <input type="password" name="confirm_password" placeholder="Confirm password">
+                    <span class="error_msg">
+                        @error('confirm_password')
+                            {{ $message }}
+                        @enderror
+                    </span>
+                </div>
+            </div>
+            <input type="submit" id="submit_btn" value="Login">
+        </form>
+        <p>Already have an account? <a href="{{ route('login.form') }}">Log in</a></p>
+    </main>
+</body>
+
+</html>

routes/web.php

@@ -2,6 +2,7 @@
 
 use Illuminate\Support\Facades\Route;
 use App\Http\Controllers\HomeController;
+use App\Http\Controllers\DashboardController;
 /*
 |--------------------------------------------------------------------------
 | Web Routes
@@ -15,4 +16,14 @@
 
 Route::prefix("/")->controller(HomeController::class)->group(function(){
     Route::get('/','home')->name("home");
+    Route::get('/login','login_form')->name("login.form");
+    Route::get('/signup','signup_form')->name("signup.form");
+    Route::post('/login/verify','login')->name("login");
+    Route::post('/signup/verify','signup')->name("signup");
+});
+
+Route::prefix('/dashboard')->middleware('is_customuser')->controller(DashboardController::class)->group(function(){
+
+    Route::get("/",'home')->name("dashboard");
+
 });