Fix login and register layout (underline), add fullname and nickname …

…to database and form

app/Http/Controllers/Auth/LogoutController.php

@@ -0,0 +1,22 @@
+<?php
+
+namespace App\Http\Controllers\Auth;
+
+use App\Http\Controllers\Controller;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+
+class LogoutController extends Controller
+{
+    public function logoutStudent() {
+        Auth::guard('student')->logout();
+
+        return redirect()->route('home');
+    }
+
+    public function logoutTeacher() {
+        Auth::guard('teacher')->logout();
+
+        return redirect()->route('home');
+    }
+}

app/Http/Controllers/Auth/RegisterController.php

@@ -22,6 +22,7 @@ public function showTeacherRegisterForm() {
     public function registerStudent(Request $request) {
         $this->validate($request, [
             'name' => 'required|max:255',
+            'nickname' => 'required|max:255',
             'email' => 'required|email|unique:students|max:255',
             'password' => 'required|confirmed',
         ]);
@@ -40,6 +41,7 @@ public function registerStudent(Request $request) {
     public function registerTeacher(Request $request) {
         $this->validate($request, [
             'name' => 'required|max:255',
+            'nickname' => 'required|max:255',
             'school_name' => 'required|max:255',
             'email' => 'required|email|unique:teachers|max:255',
             'password' => 'required|confirmed',

database/migrations/2020_11_21_015348_create_students_table.php

@@ -16,6 +16,7 @@ public function up()
         Schema::create('students', function (Blueprint $table) {
             $table->id();
             $table->string('name');
+            $table->string('nickname');
             $table->string('email')->unique();
             $table->json('classroom_joined')->nullable();
             $table->timestamp('email_verified_at')->nullable();

database/migrations/2020_11_26_234638_create_teachers_table.php

@@ -16,6 +16,7 @@ public function up()
         Schema::create('teachers', function (Blueprint $table) {
             $table->id();
             $table->string('name');
+            $table->string('nickname');
             $table->string('school_name');
             $table->string('email')->unique();
             $table->json('classroom_teached')->nullable();

public/css/app.css

@@ -31168,6 +31168,10 @@ video {
           animation: bounce 1s infinite;
 }
 
+.text-underline-custom {
+  border-bottom: 5px rgba(223, 77, 102, 1) solid;
+}
+
 @media (min-width: 640px) {
   .sm\:container {
     width: 100%;

resources/css/app.css

@@ -1,3 +1,7 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+.text-underline-custom {
+    border-bottom: 5px rgba(223, 77, 102, 1) solid;
+}

resources/views/auth/login-student.blade.php

@@ -5,13 +5,13 @@
 <section class="bg-gradient-to-r from-blue-300 to-green-400 pt-12 pb-16 md:pt-8 px-8 h-screen" id="login">
     <div class="container mx-auto flex flex-wrap flex-col md:flex-row items-center px-10">
         <div class="w-full xl:w-7/12 py-6 overflow-y-hidden">
-            <img class="w-5/6 lg:mr-0" src="http://www.pngall.com/wp-content/uploads/5/Learning-PNG-Free-Download.png">
+            <img class="w-5/6 lg:mr-0" src="{{ asset('img/student-illustration.png') }}">
         </div>
         <div class="flex flex-col w-full xl:w-5/12 justify-center overflow-y-hidden">
             <div class="bg-blue-500 px-4 py-8">
-                <span class="text-black font-extrabold text-center text-3xl inline mx-9"> LOGIN </span>
+                <span class="text-black font-extrabold text-center text-3xl inline mx-9 text-underline-custom"> LOGIN </span>
                 <p class="text-black font-extrabold text-center text-3xl inline mx-9 "> | </p>
-                <a class="text-gray-600 font-extrabold text-center text-3xl inline mx-9" href="{{ route('register.student') }}"> SIGN UP </a>
+                <a class="text-gray-600 hover:text-black font-extrabold text-center text-3xl inline mx-9" href="{{ route('register.student') }}"> SIGN UP </a>
             </div>
             <div class="bg-white pb-16 pt-5 px-20">
                 <div>

resources/views/auth/login-teacher.blade.php

@@ -5,13 +5,13 @@
 <section class="bg-gradient-to-r from-blue-300 to-green-400 pt-12 pb-16 md:pt-8 px-8 h-screen" id="login">
     <div class="container mx-auto flex flex-wrap flex-col md:flex-row items-center px-10">
         <div class="w-full xl:w-7/12 py-6 overflow-y-hidden">
-            <img class="w-5/6 lg:mr-0" src="http://www.pngall.com/wp-content/uploads/5/Learning-PNG-Free-Download.png">
+            <img class="w-5/6 lg:mr-0" src="{{ asset('img/teacher-illustration.svg') }}">
         </div>
         <div class="flex flex-col w-full xl:w-5/12 justify-center overflow-y-hidden">
             <div class="bg-blue-500 px-4 py-8">
-                <span class="text-black font-extrabold text-center text-3xl inline mx-9"> LOGIN </span>
+                <span class="text-black font-extrabold text-center text-3xl inline mx-9 text-underline-custom"> LOGIN </span>
                 <p class="text-black font-extrabold text-center text-3xl inline mx-9 "> | </p>
-                <a class="text-gray-600 font-extrabold text-center text-3xl inline mx-9" href="{{ route('register.teacher') }}"> SIGN UP </a>
+                <a class="text-gray-600 hover:text-black font-extrabold text-center text-3xl inline mx-9" href="{{ route('register.teacher') }}"> SIGN UP </a>
             </div>
             <div class="bg-white pb-16 pt-5 px-20">
                 <div>

resources/views/auth/register-student.blade.php

@@ -4,13 +4,13 @@
     <section class="bg-gradient-to-r from-blue-300 to-green-400 pt-12 pb-16 md:pt-8 px-8 h-screen" id="login">
         <div class="container mx-auto flex flex-wrap flex-col md:flex-row items-center px-10">
             <div class="w-full xl:w-7/12 py-6 overflow-y-hidden">
-                <img class="w-5/6 lg:mr-0" src="http://www.pngall.com/wp-content/uploads/5/Learning-PNG-Free-Download.png">
+                <img class="w-5/6 lg:mr-0" src="{{ asset('img/student-illustration.png') }}">
             </div>
             <div class="flex flex-col w-full xl:w-5/12 justify-center overflow-y-hidden">
                 <div class="bg-blue-500 px-4 py-8">
-                    <a class="text-gray-600 font-extrabold text-center text-3xl inline mx-9" href="{{ route('login.student') }}"> LOGIN </a>
+                    <a class="text-gray-600 hover:text-black font-extrabold text-center text-3xl inline mx-9" href="{{ route('login.student') }}"> LOGIN </a>
                     <p class="text-black font-extrabold text-center text-3xl inline mx-9 "> | </p>
-                    <span class="text-blck font-extrabold text-center text-3xl inline mx-9"> SIGN UP </span>
+                    <span class="text-black font-extrabold text-center text-3xl inline mx-9 text-underline-custom"> SIGN UP </span>
                 </div>
                 <div class="bg-white pt-2 pb-8 px-20">
                     <div>
@@ -20,8 +20,8 @@
                     <form action="{{ route('register.student') }}" method="POST">
                         @csrf
                         <div class="mb-4">
-                            <label for="name" class="uppercase tracking-wide text-gray text-xs font-bold">Nama Lengkap</label>
-                            <input type="text" name="name" id="name" placeholder="Nama"
+                            <label for="name" class="uppercase tracking-wide text-gray text-xs font-bold">Full Name</label>
+                            <input type="text" name="name" id="name" placeholder="Name"
                             class="bg-gray-100 border-2 w-full p-4 rounded-lg @error('name') border-red-500 @enderror" value="{{ old('name') }}">
 
                             @error('name')
@@ -31,6 +31,18 @@ class="bg-gray-100 border-2 w-full p-4 rounded-lg @error('name') border-red-500
                             @enderror
                         </div>
 
+                        <div class="mb-4">
+                            <label for="nickname" class="uppercase tracking-wide text-gray text-xs font-bold">Nickname</label>
+                            <input type="text" name="nickname" id="nickname" placeholder="Nickname"
+                            class="bg-gray-100 border-2 w-full p-4 rounded-lg @error('nickname') border-red-500 @enderror" value="{{ old('nickname') }}">
+
+                            @error('nickname')
+                                <div class="text-red-500 mt-2 text-sm">
+                                    {{ $message }}
+                                </div>
+                            @enderror
+                        </div>
+
                         <div class="mb-4">
                             <label for="email" class="uppercase tracking-wide text-gray text-xs font-bold">Email</label>
                             <input type="text" name="email" id="email" placeholder="Email"
@@ -56,7 +68,7 @@ class="bg-gray-100 border-2 w-full p-4 rounded-lg @error('password') border-red-
                         </div>
 
                         <div class="mb-4">
-                            <label for="password_confirmation" class="uppercase tracking-wide text-gray text-xs font-bold">Ulangi password</label>
+                            <label for="password_confirmation" class="uppercase tracking-wide text-gray text-xs font-bold">Repeat your password</label>
                             <input type="password" name="password_confirmation" id="password_confirmation" placeholder="Confirm password"
                             class="bg-gray-100 border-2 w-full p-4 rounded-lg @error('password_confirmation') border-red-500 @enderror" value="">
 

resources/views/auth/register-teacher.blade.php

@@ -4,24 +4,24 @@
     <section class="bg-gradient-to-r from-blue-300 to-green-400 pt-12 pb-16 md:pt-8 px-8 h-screen" id="login">
         <div class="container mx-auto flex flex-wrap flex-col md:flex-row items-center px-10">
             <div class="w-full xl:w-7/12 py-6 overflow-y-hidden">
-                <img class="w-5/6 lg:mr-0" src="http://www.pngall.com/wp-content/uploads/5/Learning-PNG-Free-Download.png">
+                <img class="w-5/6 lg:mr-0" src="{{ asset('img/teacher-illustration.svg') }}">
             </div>
             <div class="flex flex-col w-full xl:w-5/12 justify-center overflow-y-hidden">
                 <div class="bg-blue-500 px-4 py-8">
-                    <a class="text-gray-600 font-extrabold text-center text-3xl inline mx-9" href="{{ route('login.teacher') }}"> LOGIN </a>
+                    <a class="text-gray-600 hover:text-black font-extrabold text-center text-3xl inline mx-9" href="{{ route('login.teacher') }}"> LOGIN </a>
                     <p class="text-black font-extrabold text-center text-3xl inline mx-9 "> | </p>
-                    <span class="text-blck font-extrabold text-center text-3xl inline mx-9"> SIGN UP </span>
+                    <span class="text-black font-extrabold text-center text-3xl inline mx-9 text-underline-custom"> SIGN UP </span>
                 </div>
                 <div class="bg-white pt-2 pb-8 px-20">
                     <div>
                         <p class="pt-2 text-black">Currently signing up as <span class="font-bold text-black">Teacher</span>.</p>
-                    <p class="pb-4 text-gray-500 text-sm"> or sign up as Student <a class="underline" href="{{route('register.student')}}">here</a></p>
+                    <p class="pb-4 text-gray-500 text-sm"> or sign up as Student <a class="underline" href="{{ route('register.student') }}">here</a></p>
                     </div>
                     <form action="{{ route('register.teacher') }}" method="POST">
                         @csrf
                         <div class="mb-4">
-                            <label for="name" class="uppercase tracking-wide text-gray text-xs font-bold">Nama Lengkap</label>
-                            <input type="text" name="name" id="name" placeholder="Nama"
+                            <label for="name" class="uppercase tracking-wide text-gray text-xs font-bold">Full Name</label>
+                            <input type="text" name="name" id="name" placeholder="Name"
                             class="bg-gray-100 border-2 w-full p-4 rounded-lg @error('name') border-red-500 @enderror" value="{{ old('name') }}">
 
                             @error('name')
@@ -32,8 +32,20 @@ class="bg-gray-100 border-2 w-full p-4 rounded-lg @error('name') border-red-500
                         </div>
 
                         <div class="mb-4">
-                            <label for="school_name" class="uppercase tracking-wide text-gray text-xs font-bold">Nama Sekolah</label>
-                            <input type="text" name="school_name" id="school_name" placeholder="Cth: SMA N 8 Yogyakarta"
+                            <label for="nickname" class="uppercase tracking-wide text-gray text-xs font-bold">Nickname</label>
+                            <input type="text" name="nickname" id="nickname" placeholder="Nickname"
+                            class="bg-gray-100 border-2 w-full p-4 rounded-lg @error('nickname') border-red-500 @enderror" value="{{ old('nickname') }}">
+
+                            @error('nickname')
+                                <div class="text-red-500 mt-2 text-sm">
+                                    {{ $message }}
+                                </div>
+                            @enderror
+                        </div>
+
+                        <div class="mb-4">
+                            <label for="school_name" class="uppercase tracking-wide text-gray text-xs font-bold">High School Name</label>
+                            <input type="text" name="school_name" id="school_name" placeholder="High School"
                             class="bg-gray-100 border-2 w-full p-4 rounded-lg @error('name') border-red-500 @enderror" value="{{ old('school_name') }}">
 
                             @error('school_name')
@@ -68,7 +80,7 @@ class="bg-gray-100 border-2 w-full p-4 rounded-lg @error('password') border-red-
                         </div>
 
                         <div class="mb-4">
-                            <label for="password_confirmation" class="uppercase tracking-wide text-gray text-xs font-bold">Ulangi password</label>
+                            <label for="password_confirmation" class="uppercase tracking-wide text-gray text-xs font-bold">Repeat your password</label>
                             <input type="password" name="password_confirmation" id="password_confirmation" placeholder="Confirm password"
                             class="bg-gray-100 border-2 w-full p-4 rounded-lg @error('password_confirmation') border-red-500 @enderror" value="">
 

resources/views/home.blade.php

@@ -34,7 +34,7 @@
                 </li>
             @else
                 <li>
-                    <a href="{{ route('register.student') }}" class="p-3 text-white bg-blue-500 rounded hover:bg-blue-700"> Login / Signup </a>
+                    <a href="{{ route('login.student') }}" class="p-3 text-white bg-blue-500 rounded hover:bg-blue-700"> Login / Signup </a>
                 </li>
             @endif
         </ul>
@@ -48,12 +48,12 @@
         <h1 class="my-4 text-3xl md:text-5xl text-black font-bold leading-tight text-center md:text-left">Maintain your online classes</h1>
         <p class="text-base md:text-2xl mb-8 text-center md:text-left">Get a free and easy tool to help educators efficiently manage and assess progress, while enhancing connections with learners from school, from home, or on the go.</p>
         <button class="p-4 bg-blue-500 text-white rounded-lg hover:bg-blue-700">
-            <a href="#" >Sign Up Now</a>
+            <a href="{{ route('register.student') }}" >Sign Up Now</a>
         </button>
     </div>
 
     <div class="w-full xl:w-3/5 py-6 overflow-y-hidden">
-        <img class="w-4/6 mx-auto lg:mr-0" src="http://www.pngall.com/wp-content/uploads/5/Learning-PNG-Free-Download.png">
+        <img class="w-4/6 mx-auto lg:mr-0" src="{{ asset('img/landing-illustration.png') }}">
     </div>
     </div>
 </section>

resources/views/layouts/studenthome.blade.php

@@ -22,14 +22,20 @@
     <div class="bg-gray-100 pt-7">
         @yield('maincontent')
     </div>
-    
+
     <div class="h-screen bg-white pt-6">
-        <div class="mb-6 text-black text-base text-center">
+        <div class="flex justify-around">
+            <div class="mb-6 text-black text-base text-center">
                 <a href="#">{{ auth()->guard('student')->user()->name }}</a>
-                <button class="px-1 pb-1 bg-red-500 text-white rounded hover:bg-red-600 ml-6">
-                    <a href="#" class="text-xs">Logout</a>
-                </button>
+                <form action="{{ route('logout.student') }}" method="POST" class="inline">
+                    @csrf
+                    <button class="px-1 pb-1 bg-red-500 text-white rounded hover:bg-red-600 ml-6" type="submit">
+                        Logout
+                    </button>
+                </form>
+            </div>
         </div>
+
     </div>
 </div>
 

routes/web.php

@@ -1,6 +1,7 @@
 <?php
 
 use App\Http\Controllers\Auth\LoginController;
+use App\Http\Controllers\Auth\LogoutController;
 use App\Http\Controllers\Auth\RegisterController;
 use App\Http\Controllers\TeacherController;
 use App\Http\Controllers\StudentController;
@@ -20,17 +21,20 @@
     return view('home');
 })->name('home');
 
+Route::get('/student/register', [RegisterController::class, 'showStudentRegisterForm'])->name('register.student');
+Route::post('/student/register', [RegisterController::class, 'registerStudent']);
+
+Route::get('/teacher/register', [RegisterController::class, 'showTeacherRegisterForm'])->name('register.teacher');
+Route::post('/teacher/register', [RegisterController::class, 'registerTeacher']);
+
 Route::get('/student/login', [LoginController::class, 'showStudentLoginForm'])->name('login.student');
 Route::post('/student/login', [LoginController::class, 'loginStudent'])->name('login.student');
 
 Route::get('/teacher/login', [LoginController::class, 'showTeacherLoginForm'])->name('login.teacher');
 Route::post('/teacher/login', [LoginController::class, 'loginTeacher'])->name('login.teacher');
 
-Route::get('/student/register', [RegisterController::class, 'showStudentRegisterForm'])->name('register.student');
-Route::post('/student/register', [RegisterController::class, 'registerStudent']);
-
-Route::get('/teacher/register', [RegisterController::class, 'showTeacherRegisterForm'])->name('register.teacher');
-Route::post('/teacher/register', [RegisterController::class, 'registerTeacher']);
+Route::post('student/logout', [LogoutController::class, 'logoutStudent'])->name('logout.student');
+Route::post('teacher/logout', [LogoutController::class, 'logoutTeacher'])->name('logout.teacher');
 
 Route::get('/student/dashboard', [StudentController::class, 'index'])->name('student.dashboard');
 Route::get('/teacher/dashboard', [TeacherController::class, 'index'])->name('teacher.dashboard');