Sample App Forgot Password Using Laravel with Ajax Full
Hello dear,
This tutorial will give you an example of how to clone a Laravel project from Gitlab. let’s discuss the steps to clone the Laravel project from GitHub. I explained simply about the clone Laravel project from GitHub. This article goes into detail on the clone Laravel project from Github on the server.
In this tutorial, I will show you step-by-step how to clone Laravel projects from Github, GitLab, or Bitbucket and set up an Ubuntu server from scratch. you can easily clone Laravel 6, Laravel 7, Laravel 8, Laravel 9, and Laravel 10 projects from this post.
So, let's follow the below step-by-step and get done with the clone Laravel app.
Route
routes/web.php
<?php
use Illuminate\Support\Facades\Route;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider and all of them will
| be assigned to the "web" middleware group. Make something great!
|
*/
/** for side bar menu active */
function set_active( $route ) {
if( is_array( $route ) ){
return in_array(Request::path(), $route) ? 'active' : '';
}
return Request::path() == $route ? 'active' : '';
}
Route::get('/', function () {
return view('auth.login');
});
Route::group(['middleware'=>'auth'],function()
{
Route::get('home',function()
{
return view('home');
});
Route::get('home',function()
{
return view('home');
});
});
Auth::routes();
Route::group(['namespace' => 'App\Http\Controllers\Auth'],function()
{
// ----------------------------login ------------------------------//
Route::controller(LoginController::class)->group(function () {
Route::get('login', 'login')->name('login');
Route::post('login/push', 'authenticate')->name('login/push');
Route::get('/logout', 'logout')->name('logout');
Route::post('change/password', 'changePassword')->name('change/password');
});
// ------------------------ register sccount ----------------------//
Route::controller(RegisterController::class)->group(function () {
Route::get('register/form', 'index')->name('register/form');
Route::post('register/save','saveRecord')->name('register/save');
});
// -------------------------- forgot password ---------------------//
Route::controller(ForgotPasswordController::class)->group(function () {
Route::get('/forgot/password','sendEmail')->name('forgot/password');
Route::post('post/email', 'postEmail')->name('post/email');
});
// ------------------------- reset password -----------------------//
Route::controller(ResetPasswordController::class)->group(function () {
Route::get('reset/password/{token}', 'getPassword');
Route::post('reset/password', 'updatePassword')->name('reset/password');
});
// ------------------------ confirm password -----------------------//
Route::controller(ConfirmPasswordController::class)->group(function () {
Route::get('confirm/password', 'confirmPassword')->name('confirm/password');
});
});
Route::group(['namespace' => 'App\Http\Controllers'],function()
{
// -------------------------- main dashboard ----------------------//
Route::controller(HomeController::class)->group(function () {
Route::get('/home', 'index')->middleware('auth')->name('home');
});
});
<?php
use Illuminate\Support\Facades\Route;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider and all of them will
| be assigned to the "web" middleware group. Make something great!
|
*/
/** for side bar menu active */
function set_active( $route ) {
if( is_array( $route ) ){
return in_array(Request::path(), $route) ? 'active' : '';
}
return Request::path() == $route ? 'active' : '';
}
Route::get('/', function () {
return view('auth.login');
});
Route::group(['middleware'=>'auth'],function()
{
Route::get('home',function()
{
return view('home');
});
Route::get('home',function()
{
return view('home');
});
});
Auth::routes();
Route::group(['namespace' => 'App\Http\Controllers\Auth'],function()
{
// ----------------------------login ------------------------------//
Route::controller(LoginController::class)->group(function () {
Route::get('login', 'login')->name('login');
Route::post('login/push', 'authenticate')->name('login/push');
Route::get('/logout', 'logout')->name('logout');
Route::post('change/password', 'changePassword')->name('change/password');
});
// ------------------------ register sccount ----------------------//
Route::controller(RegisterController::class)->group(function () {
Route::get('register/form', 'index')->name('register/form');
Route::post('register/save','saveRecord')->name('register/save');
});
// -------------------------- forgot password ---------------------//
Route::controller(ForgotPasswordController::class)->group(function () {
Route::get('/forgot/password','sendEmail')->name('forgot/password');
Route::post('post/email', 'postEmail')->name('post/email');
});
// ------------------------- reset password -----------------------//
Route::controller(ResetPasswordController::class)->group(function () {
Route::get('reset/password/{token}', 'getPassword');
Route::post('reset/password', 'updatePassword')->name('reset/password');
});
// ------------------------ confirm password -----------------------//
Route::controller(ConfirmPasswordController::class)->group(function () {
Route::get('confirm/password', 'confirmPassword')->name('confirm/password');
});
});
Route::group(['namespace' => 'App\Http\Controllers'],function()
{
// -------------------------- main dashboard ----------------------//
Route::controller(HomeController::class)->group(function () {
Route::get('/home', 'index')->middleware('auth')->name('home');
});
});
ForgotPasswordController
app/Http/Controllers/Auth/ForgotPasswordController.php
<?php
namespace App\Http\Controllers\Auth;
use DB;
use Mail;
use Carbon\Carbon;
use Illuminate\Support\Str;
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use Illuminate\Foundation\Auth\SendsPasswordResetEmails;
class ForgotPasswordController extends Controller
{
/*
|--------------------------------------------------------------------------
| Password Reset Controller
|--------------------------------------------------------------------------
|
| This controller is responsible for handling password reset emails and
| includes a trait which assists in sending these notifications from
| your application to your users. Feel free to explore this trait.
|
*/
use SendsPasswordResetEmails;
/** send email forgot password */
public function sendEmail()
{
return view('auth.passwords.email');
}
/** post email */
public function postEmail(Request $request)
{
try {
$token = Str::random(60);
$email = $request->email;
$passwordReset = [
'email' => $email,
'token' => $token,
'created_at' => Carbon::now(),
];
DB::table('password_resets')->insert($passwordReset);
Mail::send('auth.verify',['token' => $token], function($message) use ($request,$email) {
$message->from($request->email);
$message->to($email); /** input your email to send */
$message->subject('Reset Password Notification');
});
$data = [];
$data['response_code'] = '200';
$data['status'] = 'success';
$data['message'] = 'success Post Email';
return response()->json($data);
} catch(\Exception $e) {
\Log::info($e);
DB::rollback();
$data = [];
$data['response_code'] = '400';
$data['status'] = 'error';
$data['message'] = 'fail Send Email';
return response()->json($data);
}
}
}
<?php
namespace App\Http\Controllers\Auth;
use DB;
use Mail;
use Carbon\Carbon;
use Illuminate\Support\Str;
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use Illuminate\Foundation\Auth\SendsPasswordResetEmails;
class ForgotPasswordController extends Controller
{
/*
|--------------------------------------------------------------------------
| Password Reset Controller
|--------------------------------------------------------------------------
|
| This controller is responsible for handling password reset emails and
| includes a trait which assists in sending these notifications from
| your application to your users. Feel free to explore this trait.
|
*/
use SendsPasswordResetEmails;
/** send email forgot password */
public function sendEmail()
{
return view('auth.passwords.email');
}
/** post email */
public function postEmail(Request $request)
{
try {
$token = Str::random(60);
$email = $request->email;
$passwordReset = [
'email' => $email,
'token' => $token,
'created_at' => Carbon::now(),
];
DB::table('password_resets')->insert($passwordReset);
Mail::send('auth.verify',['token' => $token], function($message) use ($request,$email) {
$message->from($request->email);
$message->to($email); /** input your email to send */
$message->subject('Reset Password Notification');
});
$data = [];
$data['response_code'] = '200';
$data['status'] = 'success';
$data['message'] = 'success Post Email';
return response()->json($data);
} catch(\Exception $e) {
\Log::info($e);
DB::rollback();
$data = [];
$data['response_code'] = '400';
$data['status'] = 'error';
$data['message'] = 'fail Send Email';
return response()->json($data);
}
}
}ResetPasswordController
app/Http/Controllers/Auth/ResetPasswordController.php
<?php
namespace App\Http\Controllers\Auth;
use App\Http\Controllers\Controller;
use DB;
use Hash;
use App\Models\User;
use Illuminate\Http\Request;
class ResetPasswordController extends Controller
{
/** page reset password */
public function getPassword($token)
{
return view('auth.passwords.reset', ['token' => $token]);
}
/** update new password */
public function updatePassword(Request $request)
{
try {
$updatePassword = DB::table('password_resets')->where(['email' => $request->email, 'token' => $request->token])->first();
if (!$updatePassword) {
$data = [];
$data['response_code'] = '401';
$data['status'] = 'error';
$data['message'] = 'Invalid token! :)';
return response()->json($request->token);
} else {
$update = [
'password' => Hash::make($request->password),
];
User::where('email', $request->email)->update($update);
DB::table('password_resets')->where(['email'=> $request->email])->delete();
$data = [];
$data['response_code'] = '200';
$data['status'] = 'success';
$data['message'] = 'Your password has been changed! :)';
return response()->json($data);
}
} catch(\Exception $e) {
\Log::info($e);
DB::rollback();
$data = [];
$data['response_code'] = '400';
$data['status'] = 'error';
$data['message'] = 'fail Update! :)';
return response()->json($data);
}
}
}
<?php
namespace App\Http\Controllers\Auth;
use App\Http\Controllers\Controller;
use DB;
use Hash;
use App\Models\User;
use Illuminate\Http\Request;
class ResetPasswordController extends Controller
{
/** page reset password */
public function getPassword($token)
{
return view('auth.passwords.reset', ['token' => $token]);
}
/** update new password */
public function updatePassword(Request $request)
{
try {
$updatePassword = DB::table('password_resets')->where(['email' => $request->email, 'token' => $request->token])->first();
if (!$updatePassword) {
$data = [];
$data['response_code'] = '401';
$data['status'] = 'error';
$data['message'] = 'Invalid token! :)';
return response()->json($request->token);
} else {
$update = [
'password' => Hash::make($request->password),
];
User::where('email', $request->email)->update($update);
DB::table('password_resets')->where(['email'=> $request->email])->delete();
$data = [];
$data['response_code'] = '200';
$data['status'] = 'success';
$data['message'] = 'Your password has been changed! :)';
return response()->json($data);
}
} catch(\Exception $e) {
\Log::info($e);
DB::rollback();
$data = [];
$data['response_code'] = '400';
$data['status'] = 'error';
$data['message'] = 'fail Update! :)';
return response()->json($data);
}
}
}ConfirmPasswordController
app/Http/Controllers/Auth/ConfirmPasswordController.php
<?php
namespace App\Http\Controllers\Auth;
use App\Http\Controllers\Controller;
use App\Providers\RouteServiceProvider;
use Illuminate\Foundation\Auth\ConfirmsPasswords;
class ConfirmPasswordController extends Controller
{
/*
|--------------------------------------------------------------------------
| Confirm Password Controller
|--------------------------------------------------------------------------
|
| This controller is responsible for handling password confirmations and
| uses a simple trait to include the behavior. You're free to explore
| this trait and override any functions that require customization.
|
*/
use ConfirmsPasswords;
/**
* Where to redirect users when the intended url fails.
*
* @var string
*/
protected $redirectTo = RouteServiceProvider::HOME;
/**
* Create a new controller instance.
*
* @return void
*/
// public function __construct()
// {
// $this->middleware('auth');
// }
/** confirm password */
public function confirmPassword()
{
return view('auth.passwords.confirm');
}
}
<?php
namespace App\Http\Controllers\Auth;
use App\Http\Controllers\Controller;
use App\Providers\RouteServiceProvider;
use Illuminate\Foundation\Auth\ConfirmsPasswords;
class ConfirmPasswordController extends Controller
{
/*
|--------------------------------------------------------------------------
| Confirm Password Controller
|--------------------------------------------------------------------------
|
| This controller is responsible for handling password confirmations and
| uses a simple trait to include the behavior. You're free to explore
| this trait and override any functions that require customization.
|
*/
use ConfirmsPasswords;
/**
* Where to redirect users when the intended url fails.
*
* @var string
*/
protected $redirectTo = RouteServiceProvider::HOME;
/**
* Create a new controller instance.
*
* @return void
*/
// public function __construct()
// {
// $this->middleware('auth');
// }
/** confirm password */
public function confirmPassword()
{
return view('auth.passwords.confirm');
}
}resources/views/auth/passwords/email.blade.php
@extends('layouts.app')
@section('content')
<div class="d-flex flex-column flex-root" id="kt_app_root">
<div class="d-flex flex-column flex-lg-row flex-column-fluid">
<div class="d-flex flex-column flex-lg-row-auto bg-primary w-xl-600px positon-xl-relative">
<div class="d-flex flex-column position-xl-fixed top-0 bottom-0 w-xl-600px scroll-y">
<div class="d-flex flex-row-fluid flex-column text-center p-5 p-lg-10 pt-lg-20">
<a href="{{ route('home') }}" style="padding-top: 5rem !important;padding-bottom: 2rem">
<img alt="Logo" src="{{ URL::to('assets/media/logos/logo.png') }}" class="theme-light-show h-70px h-lg-80px">
</a>
<h1 class="d-none d-lg-block fw-bold text-white fs-2qx pb-5 pb-md-10">
Welcome to Subscribers </h1>
<p class="d-none d-lg-block fw-semibold fs-2 text-white">
Plan your learn can choosing a sample creating <br>
an online and free soure code
</p>
</div>
<div class="d-none d-lg-block d-flex flex-row-auto bgi-no-repeat bgi-position-x-center bgi-size-contain bgi-position-y-bottom min-h-100px min-h-lg-350px" style="background-image: url({{ URL::to('assets/media/illustrations/dozzy-1/17.png') }})"></div>
</div>
</div>
<div class="d-flex flex-column flex-lg-row-fluid py-10">
<div class="d-flex flex-center flex-column flex-column-fluid">
<div class="w-lg-500px p-10 p-lg-15 mx-auto">
<form class="form w-100" novalidate="novalidate" data-kt-redirect-url="/login" id="kt_password_reset_form">
<div class="text-center mb-10">
<h1 class="text-dark mb-3">
Forgot Password ?
</h1>
<div class="text-gray-400 fw-semibold fs-4">
Enter your email to reset your password.
</div>
</div>
<div class="fv-row mb-10">
<label class="form-label fw-bold text-gray-900 fs-6">Email</label>
<input class="form-control form-control-solid" type="email" placeholder="Enter email" name="email" placeholder="Enter email" autocomplete="off">
</div>
<div class="d-flex flex-wrap justify-content-center pb-lg-0">
<button type="button" id="kt_password_reset_submit" class="btn btn-lg btn-primary fw-bold me-4">
<span class="indicator-label">
Submit
</span>
<span class="indicator-progress">
Please wait...
<span class="spinner-border spinner-border-sm align-middle ms-2"></span>
</span>
</button>
<a href="{{ route('login') }}" class="btn btn-lg btn-light-primary fw-bold">Cancel</a>
</div>
</form>
</div>
</div>
<div class="d-flex flex-center flex-wrap fs-6 p-5 pb-0">
<div class="d-flex flex-center fw-semibold fs-6">
<a href="https://www.linkedin.com/in/soengsouy/" class="text-muted text-hover-primary px-2" target="_blank">About</a>
<a href="https://www.facebook.com/starcodekh" class="text-muted text-hover-primary px-2" target="_blank">Support</a>
<a href="https://souysoeng.com" class="text-muted text-hover-primary px-2" target="_blank">Website</a>
</div>
</div>
</div>
</div>
@section('script')
<script>
// Class Definition
var KHAuthResetPassword = function() {
// Elements
var form;
var submitButton;
var validator;
var handleForm = function(e) {
// Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
validator = FormValidation.formValidation(
form,
{
fields: {
'email': {
validators: {
regexp: {
regexp: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
message: 'The value is not a valid email address',
},
notEmpty: {
message: 'Email address is required'
}
}
}
},
plugins: {
trigger: new FormValidation.plugins.Trigger(),
bootstrap: new FormValidation.plugins.Bootstrap5({
rowSelector: '.fv-row',
eleInvalidClass: '', // comment to enable invalid state icons
eleValidClass: '' // comment to enable valid state icons
})
}
}
);
submitButton.addEventListener('click', function (e) {
e.preventDefault();
validator.validate().then(function (status) { // Validate form
if (status == 'Valid') { // Show loading indication
submitButton.setAttribute('data-kt-indicator', 'on'); // Disable button to avoid multiple click
submitButton.disabled = true; // Simulate ajax request
var url = "{{ route('post/email') }}"; // route name url
var forms = $('#kt_password_reset_form'); // Prepare form data
var data = $(forms).serialize();
$.ajax({
type: 'POST',
dataType: 'JSON',
url: url,
data: data,
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
success: function(response){
if(response.response_code == 200) {
setTimeout(function(time) {
submitButton.removeAttribute('data-kt-indicator'); // Hide loading indication
submitButton.disabled = false; // Enable button
Swal.fire({
text: "We have send a password reset link to your email.",
icon: "success",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary"
},
}).then(function(success) {
var redirectUrl = form.getAttribute('data-kt-redirect-url');
if (redirectUrl) {
location.href = redirectUrl;
}
});
},);
} else {
submitButton.removeAttribute('data-kt-indicator'); // Hide loading indication
submitButton.disabled = false; // Enable button
Swal.fire({
text: "Sorry, the email is incorrect, please try again.",
icon: "error",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary"
}
});
}
},
error: function(response) {
submitButton.removeAttribute('data-kt-indicator'); // Hide loading indication
submitButton.disabled = false; // Enable button
Swal.fire({
text: "Sorry, the email is incorrect, please try again.",
icon: "error",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary"
}
});
}
});
} else {
submitButton.removeAttribute('data-kt-indicator'); // Hide loading indication
submitButton.disabled = false; // Enable button
// Show error popup. For more info check the plugin's official documentation: https://sweetalert2.github.io/
Swal.fire({
text: "Sorry, looks like there are some errors detected, please try again.",
icon: "error",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary"
}
});
}
});
});
}
// Public Functions
return {
// public functions
init: function() {
form = document.querySelector('#kt_password_reset_form');
submitButton = document.querySelector('#kt_password_reset_submit');
handleForm();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function() {
KHAuthResetPassword.init();
});
</script>
@endsection
@endsection
@extends('layouts.app')
@section('content')
<div class="d-flex flex-column flex-root" id="kt_app_root">
<div class="d-flex flex-column flex-lg-row flex-column-fluid">
<div class="d-flex flex-column flex-lg-row-auto bg-primary w-xl-600px positon-xl-relative">
<div class="d-flex flex-column position-xl-fixed top-0 bottom-0 w-xl-600px scroll-y">
<div class="d-flex flex-row-fluid flex-column text-center p-5 p-lg-10 pt-lg-20">
<a href="{{ route('home') }}" style="padding-top: 5rem !important;padding-bottom: 2rem">
<img alt="Logo" src="{{ URL::to('assets/media/logos/logo.png') }}" class="theme-light-show h-70px h-lg-80px">
</a>
<h1 class="d-none d-lg-block fw-bold text-white fs-2qx pb-5 pb-md-10">
Welcome to Subscribers </h1>
<p class="d-none d-lg-block fw-semibold fs-2 text-white">
Plan your learn can choosing a sample creating <br>
an online and free soure code
</p>
</div>
<div class="d-none d-lg-block d-flex flex-row-auto bgi-no-repeat bgi-position-x-center bgi-size-contain bgi-position-y-bottom min-h-100px min-h-lg-350px" style="background-image: url({{ URL::to('assets/media/illustrations/dozzy-1/17.png') }})"></div>
</div>
</div>
<div class="d-flex flex-column flex-lg-row-fluid py-10">
<div class="d-flex flex-center flex-column flex-column-fluid">
<div class="w-lg-500px p-10 p-lg-15 mx-auto">
<form class="form w-100" novalidate="novalidate" data-kt-redirect-url="/login" id="kt_password_reset_form">
<div class="text-center mb-10">
<h1 class="text-dark mb-3">
Forgot Password ?
</h1>
<div class="text-gray-400 fw-semibold fs-4">
Enter your email to reset your password.
</div>
</div>
<div class="fv-row mb-10">
<label class="form-label fw-bold text-gray-900 fs-6">Email</label>
<input class="form-control form-control-solid" type="email" placeholder="Enter email" name="email" placeholder="Enter email" autocomplete="off">
</div>
<div class="d-flex flex-wrap justify-content-center pb-lg-0">
<button type="button" id="kt_password_reset_submit" class="btn btn-lg btn-primary fw-bold me-4">
<span class="indicator-label">
Submit
</span>
<span class="indicator-progress">
Please wait...
<span class="spinner-border spinner-border-sm align-middle ms-2"></span>
</span>
</button>
<a href="{{ route('login') }}" class="btn btn-lg btn-light-primary fw-bold">Cancel</a>
</div>
</form>
</div>
</div>
<div class="d-flex flex-center flex-wrap fs-6 p-5 pb-0">
<div class="d-flex flex-center fw-semibold fs-6">
<a href="https://www.linkedin.com/in/soengsouy/" class="text-muted text-hover-primary px-2" target="_blank">About</a>
<a href="https://www.facebook.com/starcodekh" class="text-muted text-hover-primary px-2" target="_blank">Support</a>
<a href="https://souysoeng.com" class="text-muted text-hover-primary px-2" target="_blank">Website</a>
</div>
</div>
</div>
</div>
@section('script')
<script>
// Class Definition
var KHAuthResetPassword = function() {
// Elements
var form;
var submitButton;
var validator;
var handleForm = function(e) {
// Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
validator = FormValidation.formValidation(
form,
{
fields: {
'email': {
validators: {
regexp: {
regexp: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
message: 'The value is not a valid email address',
},
notEmpty: {
message: 'Email address is required'
}
}
}
},
plugins: {
trigger: new FormValidation.plugins.Trigger(),
bootstrap: new FormValidation.plugins.Bootstrap5({
rowSelector: '.fv-row',
eleInvalidClass: '', // comment to enable invalid state icons
eleValidClass: '' // comment to enable valid state icons
})
}
}
);
submitButton.addEventListener('click', function (e) {
e.preventDefault();
validator.validate().then(function (status) { // Validate form
if (status == 'Valid') { // Show loading indication
submitButton.setAttribute('data-kt-indicator', 'on'); // Disable button to avoid multiple click
submitButton.disabled = true; // Simulate ajax request
var url = "{{ route('post/email') }}"; // route name url
var forms = $('#kt_password_reset_form'); // Prepare form data
var data = $(forms).serialize();
$.ajax({
type: 'POST',
dataType: 'JSON',
url: url,
data: data,
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
success: function(response){
if(response.response_code == 200) {
setTimeout(function(time) {
submitButton.removeAttribute('data-kt-indicator'); // Hide loading indication
submitButton.disabled = false; // Enable button
Swal.fire({
text: "We have send a password reset link to your email.",
icon: "success",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary"
},
}).then(function(success) {
var redirectUrl = form.getAttribute('data-kt-redirect-url');
if (redirectUrl) {
location.href = redirectUrl;
}
});
},);
} else {
submitButton.removeAttribute('data-kt-indicator'); // Hide loading indication
submitButton.disabled = false; // Enable button
Swal.fire({
text: "Sorry, the email is incorrect, please try again.",
icon: "error",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary"
}
});
}
},
error: function(response) {
submitButton.removeAttribute('data-kt-indicator'); // Hide loading indication
submitButton.disabled = false; // Enable button
Swal.fire({
text: "Sorry, the email is incorrect, please try again.",
icon: "error",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary"
}
});
}
});
} else {
submitButton.removeAttribute('data-kt-indicator'); // Hide loading indication
submitButton.disabled = false; // Enable button
// Show error popup. For more info check the plugin's official documentation: https://sweetalert2.github.io/
Swal.fire({
text: "Sorry, looks like there are some errors detected, please try again.",
icon: "error",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary"
}
});
}
});
});
}
// Public Functions
return {
// public functions
init: function() {
form = document.querySelector('#kt_password_reset_form');
submitButton = document.querySelector('#kt_password_reset_submit');
handleForm();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function() {
KHAuthResetPassword.init();
});
</script>
@endsection
@endsectionverify
resources/views/auth/verify.blade.php
@extends('layouts.app')
@section('content')
<style>
html,
body {
padding: 0;
margin: 0;
}
</style>
<div
style="font-family:Arial,Helvetica,sans-serif; line-height: 1.5; font-weight: normal; font-size: 15px; color: #2F3044; min-height: 100%; margin:0; padding:0; width:100%; background-color:#edf2f7">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%"
style="border-collapse:collapse;margin:0 auto; padding:0; max-width:600px">
<tbody>
<tr>
<td align="center" valign="center" style="text-align:center; padding: 10px">
<a href="https://souysoeng.com" rel="noopener" target="_blank">
<img alt="Logo" src="https://blogger.googleusercontent.com/img/a/AVvXsEi22QSrQgGkTlZ_KdmZx9jRwqTe40SpFx41DukLyxBKKK36XsOCHlPj9NA_ecEZ_ju3Olrt_HcLVrnLXn5Kjgx8pFgPeWslLIJhVu0-Yb5ehLElSJGdsNVamMWksTq8M6-M2_JTtx-2ge_CYS9i_sPgX7noLlbjLbQjFfVXUVS4vxyyp6ULiBR1FxXmYzDO=s256" style="min-height:30px;width: 15%;">
</a>
</td>
</tr>
<tr>
<td align="left" valign="center">
<div
style="text-align:left; margin: 0 20px; padding: 40px; background-color:#ffffff; border-radius: 6px">
<!--begin:Email content-->
<div style="padding-bottom: 30px; font-size: 17px;">
<strong>Welcome to Subscribers!</strong>
</div>
<div style="padding-bottom: 30px">
To activate your account, please click on the button below to verify your email address.
</div>
<div style="padding-bottom: 40px; text-align:center;">
<a href="{{ url('reset/password/'.$token) }}" rel="noopener" target="_blank" style="text-decoration:none;display:inline-block;text-align:center;padding:0.75575rem 1.3rem;font-size:0.925rem;line-height:1.5;border-radius:0.35rem;color:#ffffff;background-color:#3E97FF;border:0px;margin-right:0.75rem!important;font-weight:600!important;outline:none!important;vertical-align:middle" target="_blank">
Click Change Password Account
</a>
</div>
<div style="padding-bottom: 30px">
This password reset link will expire in 60 minutes.
If you did not request a password reset, no further action is required.
</div>
<div style="border-bottom: 1px solid #eeeeee; margin: 15px 0"></div>
<div style="padding-bottom: 50px; word-wrap: break-all;">
<p style="margin-bottom: 10px;">
Button not working? Try pasting this URL into your browser:
</p>
<a href="{{ url('reset/password/'.$token) }}" rel="noopener" target="_blank" style="text-decoration:none;color: #3E97FF">
{{ url('reset/password/'.$token) }}
</a>
</div>
<!--end:Email content-->
<div style="padding-bottom: 10px">
Kind regards,<br>
The StarCode Kh.
</div>
</div>
</td>
</tr>
<tr>
<td align="center" valign="center"
style="font-size: 13px; text-align:center;padding: 20px; color: #6d6e7c;">
<p> #248, Preah Monivong Blvd. (Street 110),Phnom Phenh</p>
<p> Copyright © <a href="https://www.readfreekh.com/" rel="noopener" target="_blank">StarCode Kh</a>.
</p>
</td>
</tr>
</tbody>
</table>
</div>
@endsection
@extends('layouts.app')
@section('content')
<style>
html,
body {
padding: 0;
margin: 0;
}
</style>
<div
style="font-family:Arial,Helvetica,sans-serif; line-height: 1.5; font-weight: normal; font-size: 15px; color: #2F3044; min-height: 100%; margin:0; padding:0; width:100%; background-color:#edf2f7">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%"
style="border-collapse:collapse;margin:0 auto; padding:0; max-width:600px">
<tbody>
<tr>
<td align="center" valign="center" style="text-align:center; padding: 10px">
<a href="https://souysoeng.com" rel="noopener" target="_blank">
<img alt="Logo" src="https://blogger.googleusercontent.com/img/a/AVvXsEi22QSrQgGkTlZ_KdmZx9jRwqTe40SpFx41DukLyxBKKK36XsOCHlPj9NA_ecEZ_ju3Olrt_HcLVrnLXn5Kjgx8pFgPeWslLIJhVu0-Yb5ehLElSJGdsNVamMWksTq8M6-M2_JTtx-2ge_CYS9i_sPgX7noLlbjLbQjFfVXUVS4vxyyp6ULiBR1FxXmYzDO=s256" style="min-height:30px;width: 15%;">
</a>
</td>
</tr>
<tr>
<td align="left" valign="center">
<div
style="text-align:left; margin: 0 20px; padding: 40px; background-color:#ffffff; border-radius: 6px">
<!--begin:Email content-->
<div style="padding-bottom: 30px; font-size: 17px;">
<strong>Welcome to Subscribers!</strong>
</div>
<div style="padding-bottom: 30px">
To activate your account, please click on the button below to verify your email address.
</div>
<div style="padding-bottom: 40px; text-align:center;">
<a href="{{ url('reset/password/'.$token) }}" rel="noopener" target="_blank" style="text-decoration:none;display:inline-block;text-align:center;padding:0.75575rem 1.3rem;font-size:0.925rem;line-height:1.5;border-radius:0.35rem;color:#ffffff;background-color:#3E97FF;border:0px;margin-right:0.75rem!important;font-weight:600!important;outline:none!important;vertical-align:middle" target="_blank">
Click Change Password Account
</a>
</div>
<div style="padding-bottom: 30px">
This password reset link will expire in 60 minutes.
If you did not request a password reset, no further action is required.
</div>
<div style="border-bottom: 1px solid #eeeeee; margin: 15px 0"></div>
<div style="padding-bottom: 50px; word-wrap: break-all;">
<p style="margin-bottom: 10px;">
Button not working? Try pasting this URL into your browser:
</p>
<a href="{{ url('reset/password/'.$token) }}" rel="noopener" target="_blank" style="text-decoration:none;color: #3E97FF">
{{ url('reset/password/'.$token) }}
</a>
</div>
<!--end:Email content-->
<div style="padding-bottom: 10px">
Kind regards,<br>
The StarCode Kh.
</div>
</div>
</td>
</tr>
<tr>
<td align="center" valign="center"
style="font-size: 13px; text-align:center;padding: 20px; color: #6d6e7c;">
<p> #248, Preah Monivong Blvd. (Street 110),Phnom Phenh</p>
<p> Copyright © <a href="https://www.readfreekh.com/" rel="noopener" target="_blank">StarCode Kh</a>.
</p>
</td>
</tr>
</tbody>
</table>
</div>
@endsection
reset
resources/views/auth/passwords/reset.blade.php
@extends('layouts.app')
@section('content')
<div class="d-flex flex-column flex-root" id="kt_app_root">
<div class="d-flex flex-column flex-lg-row flex-column-fluid">
<div class="d-flex flex-column flex-lg-row-auto bg-primary w-xl-600px positon-xl-relative">
<div class="d-flex flex-column position-xl-fixed top-0 bottom-0 w-xl-600px scroll-y">
<div class="d-flex flex-row-fluid flex-column text-center p-5 p-lg-10 pt-lg-20">
<a href="{{ route('home') }}" style="padding-top: 5rem !important;padding-bottom: 2rem">
<img alt="Logo" src="{{ URL::to('assets/media/logos/logo.png') }}" class="theme-light-show h-70px h-lg-80px">
</a>
<h1 class="d-none d-lg-block fw-bold text-white fs-2qx pb-5 pb-md-10">
Welcome to Subscribers </h1>
<p class="d-none d-lg-block fw-semibold fs-2 text-white">
Plan your learn can choosing a sample creating <br>
an online and free soure code
</p>
</div>
<div class="d-none d-lg-block d-flex flex-row-auto bgi-no-repeat bgi-position-x-center bgi-size-contain bgi-position-y-bottom min-h-100px min-h-lg-350px" style="background-image: url({{ URL::to('assets/media/illustrations/dozzy-1/17.png') }})"></div>
</div>
</div>
<div class="d-flex flex-column flex-lg-row-fluid py-10">
<div class="d-flex flex-center flex-column flex-column-fluid">
<div class="w-lg-500px p-10 p-lg-15 mx-auto">
<form class="form w-100" novalidate="novalidate" data-kt-redirect-url="/login" id="kt_new_password_form">
<input type="hidden" name="token" value="{{ $token }}">
<div class="text-center mb-10">
<h1 class="text-dark mb-3">Setup New Password</h1>
<div class="text-gray-400 fw-semibold fs-4">
Already have reset your password ?
<a href="{{ route('register/form') }}" class="link-primary fw-bold">
Sign in here
</a>
</div>
</div>
<div class="fv-row mb-7">
<label class="form-label fw-bold text-dark fs-6">Email</label>
<input class="form-control form-control-lg form-control-solid" type="email" placeholder="Enter email" name="email" autocomplete="off">
</div>
<div class="mb-10 fv-row" data-kt-password-meter="true">
<div class="mb-1">
<label class="form-label fw-bold text-dark fs-6">Password</label>
<div class="position-relative mb-3">
<input class="form-control form-control-lg form-control-solid" type="password" name="password" placeholder="Enter Password" autocomplete="off">
<span class="btn btn-sm btn-icon position-absolute translate-middle top-50 end-0 me-n2" data-kt-password-meter-control="visibility">
<i class="ki-duotone ki-eye-slash fs-2"></i>
<i class="ki-duotone ki-eye fs-2 d-none"></i>
</span>
</div>
<div class="d-flex align-items-center mb-3" data-kt-password-meter-control="highlight">
<div class="flex-grow-1 bg-secondary bg-active-success rounded h-5px me-2"></div>
<div class="flex-grow-1 bg-secondary bg-active-success rounded h-5px me-2"></div>
<div class="flex-grow-1 bg-secondary bg-active-success rounded h-5px me-2"></div>
<div class="flex-grow-1 bg-secondary bg-active-success rounded h-5px"></div>
</div>
</div>
<div class="text-muted">
Use 8 or more characters with a mix of letters, numbers & symbols.
</div>
</div>
<div class="fv-row mb-10">
<label class="form-label fw-bold text-dark fs-6">Confirm Password</label>
<input class="form-control form-control-lg form-control-solid" type="password" name="confirm-password" placeholder="Enter Confirm Password" autocomplete="off">
</div>
<div class="fv-row mb-10">
<div class="form-check form-check-custom form-check-solid form-check-inline">
<input class="form-check-input" type="checkbox" name="toc" value="1">
<label class="form-check-label fw-semibold text-gray-700 fs-6">
I Agree &
<a href="#" class="ms-1 link-primary">Terms and conditions</a>.
</label>
</div>
</div>
<div class="text-center">
<button type="button" id="kt_new_password_submit" class="btn btn-lg btn-primary fw-bold">
<span class="indicator-label">Submit</span>
<span class="indicator-progress">
Please wait...
<span class="spinner-border spinner-border-sm align-middle ms-2"></span>
</span>
</button>
</div>
</form>
</div>
</div>
<div class="d-flex flex-center flex-wrap fs-6 p-5 pb-0">
<div class="d-flex flex-center fw-semibold fs-6">
<a href="https://www.linkedin.com/in/soengsouy/" class="text-muted text-hover-primary px-2" target="_blank">About</a>
<a href="https://www.facebook.com/starcodekh" class="text-muted text-hover-primary px-2" target="_blank">Support</a>
<a href="https://souysoeng.com" class="text-muted text-hover-primary px-2" target="_blank">Website</a>
</div>
</div>
</div>
</div>
@section('script')
<script>
// Class Definition
var KHAuthNewPassword = function() {
// Elements
var form;
var submitButton;
var validator;
var passwordMeter;
var handleForm = function(e) {
// Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
validator = FormValidation.formValidation(
form,
{
fields: {
'email': {
validators: {
regexp: {
regexp: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
message: 'The value is not a valid email address',
},
notEmpty: {
message: 'Email address is required'
}
}
},
'password': {
validators: {
notEmpty: {
message: 'The password is required'
},
callback: {
message: 'Please enter valid password',
callback: function(input) {
if (input.value.length > 0) {
return validatePassword();
}
}
}
}
},
'confirm-password': {
validators: {
notEmpty: {
message: 'The password confirmation is required'
},
identical: {
compare: function() {
return form.querySelector('[name="password"]').value;
},
message: 'The password and its confirm are not the same'
}
}
},
'toc': {
validators: {
notEmpty: {
message: 'You must accept the terms and conditions'
}
}
}
},
plugins: {
trigger: new FormValidation.plugins.Trigger({
event: {
password: false
}
}),
bootstrap: new FormValidation.plugins.Bootstrap5({
rowSelector: '.fv-row',
eleInvalidClass: '', // comment to enable invalid state icons
eleValidClass: '' // comment to enable valid state icons
})
}
}
);
submitButton.addEventListener('click', function (e) {
e.preventDefault();
validator.revalidateField('password');
validator.validate().then(function(status) {
if (status == 'Valid') {
// Show loading indication
submitButton.setAttribute('data-kt-indicator', 'on');
// Disable button to avoid multiple click
submitButton.disabled = true;
// route name url
var url = "{{ route('reset/password') }}"; // route name url
var forms = $('#kt_new_password_form'); // Prepare form data
var data = $(forms).serialize();
$.ajax({
type: 'POST',
dataType: 'JSON',
url: url,
data: data,
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
}).then(function(response) {
if(response.response_code == 200) {
setTimeout(function(time) {
submitButton.removeAttribute('data-kt-indicator'); // Hide loading indication
submitButton.disabled = false; // Enable button
Swal.fire({
text: "You have successfully reset your password!",
icon: "success",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary"
},
}).then(function(success) {
var redirectUrl = form.getAttribute('data-kt-redirect-url');
if (redirectUrl) {
location.href = redirectUrl;
}
});
},);
} else {
console.log(response);
if(response.response_code == 401) {
submitButton.removeAttribute('data-kt-indicator'); // Hide loading indication
submitButton.disabled = false; // Enable button
Swal.fire({
text: "Sorry, invalid token, please try again.",
icon: "error",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary"
}
});
} else {
submitButton.removeAttribute('data-kt-indicator'); // Hide loading indication
submitButton.disabled = false; // Enable button
Swal.fire({
text: "Sorry, the email or password is incorrect, please try again.",
icon: "error",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary"
}
});
}
}
});
} else {
submitButton.removeAttribute('data-kt-indicator'); // Hide loading indication
submitButton.disabled = false; // Enable button
// Show error popup. For more info check the plugin's official documentation: https://sweetalert2.github.io/
Swal.fire({
text: "Sorry, looks like there are some errors detected, please try again.",
icon: "error",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary"
}
});
}
});
});
form.querySelector('input[name="password"]').addEventListener('input', function() {
if (this.value.length > 0) {
validator.updateFieldStatus('password', 'NotValidated');
}
});
}
var validatePassword = function() {
return (passwordMeter.getScore() === 100);
}
// Public Functions
return {
// public functions
init: function() {
form = document.querySelector('#kt_new_password_form');
submitButton = document.querySelector('#kt_new_password_submit');
passwordMeter = KTPasswordMeter.getInstance(form.querySelector('[data-kt-password-meter="true"]'));
handleForm();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function() {
KHAuthNewPassword.init();
});
</script>
@endsection
@endsection
@extends('layouts.app')
@section('content')
<div class="d-flex flex-column flex-root" id="kt_app_root">
<div class="d-flex flex-column flex-lg-row flex-column-fluid">
<div class="d-flex flex-column flex-lg-row-auto bg-primary w-xl-600px positon-xl-relative">
<div class="d-flex flex-column position-xl-fixed top-0 bottom-0 w-xl-600px scroll-y">
<div class="d-flex flex-row-fluid flex-column text-center p-5 p-lg-10 pt-lg-20">
<a href="{{ route('home') }}" style="padding-top: 5rem !important;padding-bottom: 2rem">
<img alt="Logo" src="{{ URL::to('assets/media/logos/logo.png') }}" class="theme-light-show h-70px h-lg-80px">
</a>
<h1 class="d-none d-lg-block fw-bold text-white fs-2qx pb-5 pb-md-10">
Welcome to Subscribers </h1>
<p class="d-none d-lg-block fw-semibold fs-2 text-white">
Plan your learn can choosing a sample creating <br>
an online and free soure code
</p>
</div>
<div class="d-none d-lg-block d-flex flex-row-auto bgi-no-repeat bgi-position-x-center bgi-size-contain bgi-position-y-bottom min-h-100px min-h-lg-350px" style="background-image: url({{ URL::to('assets/media/illustrations/dozzy-1/17.png') }})"></div>
</div>
</div>
<div class="d-flex flex-column flex-lg-row-fluid py-10">
<div class="d-flex flex-center flex-column flex-column-fluid">
<div class="w-lg-500px p-10 p-lg-15 mx-auto">
<form class="form w-100" novalidate="novalidate" data-kt-redirect-url="/login" id="kt_new_password_form">
<input type="hidden" name="token" value="{{ $token }}">
<div class="text-center mb-10">
<h1 class="text-dark mb-3">Setup New Password</h1>
<div class="text-gray-400 fw-semibold fs-4">
Already have reset your password ?
<a href="{{ route('register/form') }}" class="link-primary fw-bold">
Sign in here
</a>
</div>
</div>
<div class="fv-row mb-7">
<label class="form-label fw-bold text-dark fs-6">Email</label>
<input class="form-control form-control-lg form-control-solid" type="email" placeholder="Enter email" name="email" autocomplete="off">
</div>
<div class="mb-10 fv-row" data-kt-password-meter="true">
<div class="mb-1">
<label class="form-label fw-bold text-dark fs-6">Password</label>
<div class="position-relative mb-3">
<input class="form-control form-control-lg form-control-solid" type="password" name="password" placeholder="Enter Password" autocomplete="off">
<span class="btn btn-sm btn-icon position-absolute translate-middle top-50 end-0 me-n2" data-kt-password-meter-control="visibility">
<i class="ki-duotone ki-eye-slash fs-2"></i>
<i class="ki-duotone ki-eye fs-2 d-none"></i>
</span>
</div>
<div class="d-flex align-items-center mb-3" data-kt-password-meter-control="highlight">
<div class="flex-grow-1 bg-secondary bg-active-success rounded h-5px me-2"></div>
<div class="flex-grow-1 bg-secondary bg-active-success rounded h-5px me-2"></div>
<div class="flex-grow-1 bg-secondary bg-active-success rounded h-5px me-2"></div>
<div class="flex-grow-1 bg-secondary bg-active-success rounded h-5px"></div>
</div>
</div>
<div class="text-muted">
Use 8 or more characters with a mix of letters, numbers & symbols.
</div>
</div>
<div class="fv-row mb-10">
<label class="form-label fw-bold text-dark fs-6">Confirm Password</label>
<input class="form-control form-control-lg form-control-solid" type="password" name="confirm-password" placeholder="Enter Confirm Password" autocomplete="off">
</div>
<div class="fv-row mb-10">
<div class="form-check form-check-custom form-check-solid form-check-inline">
<input class="form-check-input" type="checkbox" name="toc" value="1">
<label class="form-check-label fw-semibold text-gray-700 fs-6">
I Agree &
<a href="#" class="ms-1 link-primary">Terms and conditions</a>.
</label>
</div>
</div>
<div class="text-center">
<button type="button" id="kt_new_password_submit" class="btn btn-lg btn-primary fw-bold">
<span class="indicator-label">Submit</span>
<span class="indicator-progress">
Please wait...
<span class="spinner-border spinner-border-sm align-middle ms-2"></span>
</span>
</button>
</div>
</form>
</div>
</div>
<div class="d-flex flex-center flex-wrap fs-6 p-5 pb-0">
<div class="d-flex flex-center fw-semibold fs-6">
<a href="https://www.linkedin.com/in/soengsouy/" class="text-muted text-hover-primary px-2" target="_blank">About</a>
<a href="https://www.facebook.com/starcodekh" class="text-muted text-hover-primary px-2" target="_blank">Support</a>
<a href="https://souysoeng.com" class="text-muted text-hover-primary px-2" target="_blank">Website</a>
</div>
</div>
</div>
</div>
@section('script')
<script>
// Class Definition
var KHAuthNewPassword = function() {
// Elements
var form;
var submitButton;
var validator;
var passwordMeter;
var handleForm = function(e) {
// Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
validator = FormValidation.formValidation(
form,
{
fields: {
'email': {
validators: {
regexp: {
regexp: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
message: 'The value is not a valid email address',
},
notEmpty: {
message: 'Email address is required'
}
}
},
'password': {
validators: {
notEmpty: {
message: 'The password is required'
},
callback: {
message: 'Please enter valid password',
callback: function(input) {
if (input.value.length > 0) {
return validatePassword();
}
}
}
}
},
'confirm-password': {
validators: {
notEmpty: {
message: 'The password confirmation is required'
},
identical: {
compare: function() {
return form.querySelector('[name="password"]').value;
},
message: 'The password and its confirm are not the same'
}
}
},
'toc': {
validators: {
notEmpty: {
message: 'You must accept the terms and conditions'
}
}
}
},
plugins: {
trigger: new FormValidation.plugins.Trigger({
event: {
password: false
}
}),
bootstrap: new FormValidation.plugins.Bootstrap5({
rowSelector: '.fv-row',
eleInvalidClass: '', // comment to enable invalid state icons
eleValidClass: '' // comment to enable valid state icons
})
}
}
);
submitButton.addEventListener('click', function (e) {
e.preventDefault();
validator.revalidateField('password');
validator.validate().then(function(status) {
if (status == 'Valid') {
// Show loading indication
submitButton.setAttribute('data-kt-indicator', 'on');
// Disable button to avoid multiple click
submitButton.disabled = true;
// route name url
var url = "{{ route('reset/password') }}"; // route name url
var forms = $('#kt_new_password_form'); // Prepare form data
var data = $(forms).serialize();
$.ajax({
type: 'POST',
dataType: 'JSON',
url: url,
data: data,
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
}).then(function(response) {
if(response.response_code == 200) {
setTimeout(function(time) {
submitButton.removeAttribute('data-kt-indicator'); // Hide loading indication
submitButton.disabled = false; // Enable button
Swal.fire({
text: "You have successfully reset your password!",
icon: "success",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary"
},
}).then(function(success) {
var redirectUrl = form.getAttribute('data-kt-redirect-url');
if (redirectUrl) {
location.href = redirectUrl;
}
});
},);
} else {
console.log(response);
if(response.response_code == 401) {
submitButton.removeAttribute('data-kt-indicator'); // Hide loading indication
submitButton.disabled = false; // Enable button
Swal.fire({
text: "Sorry, invalid token, please try again.",
icon: "error",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary"
}
});
} else {
submitButton.removeAttribute('data-kt-indicator'); // Hide loading indication
submitButton.disabled = false; // Enable button
Swal.fire({
text: "Sorry, the email or password is incorrect, please try again.",
icon: "error",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary"
}
});
}
}
});
} else {
submitButton.removeAttribute('data-kt-indicator'); // Hide loading indication
submitButton.disabled = false; // Enable button
// Show error popup. For more info check the plugin's official documentation: https://sweetalert2.github.io/
Swal.fire({
text: "Sorry, looks like there are some errors detected, please try again.",
icon: "error",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary"
}
});
}
});
});
form.querySelector('input[name="password"]').addEventListener('input', function() {
if (this.value.length > 0) {
validator.updateFieldStatus('password', 'NotValidated');
}
});
}
var validatePassword = function() {
return (passwordMeter.getScore() === 100);
}
// Public Functions
return {
// public functions
init: function() {
form = document.querySelector('#kt_new_password_form');
submitButton = document.querySelector('#kt_new_password_submit');
passwordMeter = KTPasswordMeter.getInstance(form.querySelector('[data-kt-password-meter="true"]'));
handleForm();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function() {
KHAuthNewPassword.init();
});
</script>
@endsection
@endsectionConfirm Password
@extends('layouts.app')
@section('content')
<div class="d-flex flex-column flex-root" id="kt_app_root">
<div class="d-flex flex-column flex-column-fluid">
<div class="d-flex flex-row-fluid flex-column flex-column-fluid text-center p-10 py-lg-20">
<a href="{{ route('home') }}" class="pt-lg-20 mb-12">
<img alt="Logo" src="{{ URL::to('assets/media/logos/logo.png') }}"class="theme-light-show h-40px h-lg-50px">
<img alt="Logo" src="{{ URL::to('assets/media/logos/logo.png') }}" class="theme-dark-show h-40px h-lg-50px">
</a>
<h1 class="fw-bold fs-2qx text-gray-800 mb-7">Password is changed</h1>
<div class="fw-semibold fs-3 text-muted mb-15">
Your password is successfully changed. Please Sign <br>
in to your account and start a new project.
</div>
<div class="text-center">
<a href="{{ route('login') }}" class="btn btn-primary btn-lg fw-bold">Sign In</a>
</div>
<div class="text-gray-700 fw-semibold fs-4 pt-7">Did't receive an email?
<a href="{{ route('forgot/password') }}" class="text-primary fw-bold">Try Again</a>
</div>
</div>
<div class="d-flex flex-row-auto bgi-no-repeat bgi-position-x-center bgi-size-contain bgi-position-y-bottom min-h-150px min-h-lg-350px"
style="background-image: url(../../assets/media/illustrations/dozzy-1/7.png)">
</div>
</div>
</div>
@endsection
@extends('layouts.app')
@section('content')
<div class="d-flex flex-column flex-root" id="kt_app_root">
<div class="d-flex flex-column flex-column-fluid">
<div class="d-flex flex-row-fluid flex-column flex-column-fluid text-center p-10 py-lg-20">
<a href="{{ route('home') }}" class="pt-lg-20 mb-12">
<img alt="Logo" src="{{ URL::to('assets/media/logos/logo.png') }}"class="theme-light-show h-40px h-lg-50px">
<img alt="Logo" src="{{ URL::to('assets/media/logos/logo.png') }}" class="theme-dark-show h-40px h-lg-50px">
</a>
<h1 class="fw-bold fs-2qx text-gray-800 mb-7">Password is changed</h1>
<div class="fw-semibold fs-3 text-muted mb-15">
Your password is successfully changed. Please Sign <br>
in to your account and start a new project.
</div>
<div class="text-center">
<a href="{{ route('login') }}" class="btn btn-primary btn-lg fw-bold">Sign In</a>
</div>
<div class="text-gray-700 fw-semibold fs-4 pt-7">Did't receive an email?
<a href="{{ route('forgot/password') }}" class="text-primary fw-bold">Try Again</a>
</div>
</div>
<div class="d-flex flex-row-auto bgi-no-repeat bgi-position-x-center bgi-size-contain bgi-position-y-bottom min-h-150px min-h-lg-350px"
style="background-image: url(../../assets/media/illustrations/dozzy-1/7.png)">
</div>
</div>
</div>
@endsectionGit Clone Full Project
1.Run `git clone 'link projer github'
2.Run composer update
3.Run cp .env.example .env or copy .env.example .env
4.Run php artisan key:generate
5.Run php artisan migrate
6.Run php artisan serve
7.Go to link localhost:8000Step 1: Git Clone Laravel 10
First, clone a new Laravel app just by running the below command in your terminal.
https://gitlab.com/SoengSouy/app-sample-laravel-10.gitStep 2: Composer Update
Type the command in your terminal.
composer update
composer updateStep 3: Update Your Database Credentials
After that update your database credentials in your .env file which is located in your project root.
1. connection databases
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=your_db
DB_USERNAME=root
DB_PASSWORD=#your database password2. for send mail when fogot passwordMAIL_DRIVER=smtp
MAIL_HOST=smtp.gmail.com
MAIL_PORT=587
MAIL_USERNAME=your email
MAIL_PASSWORD='your password email'
MAIL_ENCRYPTION=tls
MAIL_DRIVER=smtp
MAIL_HOST=smtp.gmail.com
MAIL_PORT=587
MAIL_USERNAME=your email
MAIL_PASSWORD='your password email'
MAIL_ENCRYPTION=tlsStep 4: Make Migration
After adding the migration file run the migrate command.
php artisan migrateStep 5:Run
After adding the run file now run the migrate command.
php artisan serve
