Add registration javascript

app/Http/Kernel.php

@@ -40,6 +40,7 @@ class Kernel extends HttpKernel
         ],
 
         'api' => [
+			\Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class,
             'throttle:api',
             \Illuminate\Routing\Middleware\SubstituteBindings::class,
         ],

composer.json

@@ -10,6 +10,7 @@
         "fruitcake/laravel-cors": "^2.0",
         "guzzlehttp/guzzle": "^7.0.1",
         "laravel/framework": "^8.12",
+        "laravel/sanctum": "^2.10",
         "laravel/tinker": "^2.5"
     },
     "require-dev": {

composer.lock

@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "4a16c3c541bd99241cab1c21ce8e83ac",
+    "content-hash": "021dc802e1b0b9bf55a1649f44b5b26a",
     "packages": [
         {
             "name": "asm89/stack-cors",
@@ -1061,6 +1061,70 @@
             },
             "time": "2021-03-30T21:34:17+00:00"
         },
+        {
+            "name": "laravel/sanctum",
+            "version": "v2.10.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/laravel/sanctum.git",
+                "reference": "a08cfee365c6b6df3e91c8f43b92f7163ffc8a94"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/laravel/sanctum/zipball/a08cfee365c6b6df3e91c8f43b92f7163ffc8a94",
+                "reference": "a08cfee365c6b6df3e91c8f43b92f7163ffc8a94",
+                "shasum": ""
+            },
+            "require": {
+                "ext-json": "*",
+                "illuminate/contracts": "^6.9|^7.0|^8.0",
+                "illuminate/database": "^6.9|^7.0|^8.0",
+                "illuminate/support": "^6.9|^7.0|^8.0",
+                "php": "^7.2|^8.0"
+            },
+            "require-dev": {
+                "mockery/mockery": "^1.0",
+                "orchestra/testbench": "^4.0|^5.0|^6.0",
+                "phpunit/phpunit": "^8.0|^9.3"
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-master": "2.x-dev"
+                },
+                "laravel": {
+                    "providers": [
+                        "Laravel\\Sanctum\\SanctumServiceProvider"
+                    ]
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Laravel\\Sanctum\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Taylor Otwell",
+                    "email": "taylor@laravel.com"
+                }
+            ],
+            "description": "Laravel Sanctum provides a featherweight authentication system for SPAs and simple APIs.",
+            "keywords": [
+                "auth",
+                "laravel",
+                "sanctum"
+            ],
+            "support": {
+                "issues": "https://github.com/laravel/sanctum/issues",
+                "source": "https://github.com/laravel/sanctum"
+            },
+            "time": "2021-04-20T16:20:46+00:00"
+        },
         {
             "name": "laravel/tinker",
             "version": "v2.6.1",

config/sanctum.php

@@ -0,0 +1,50 @@
+<?php
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Stateful Domains
+    |--------------------------------------------------------------------------
+    |
+    | Requests from the following domains / hosts will receive stateful API
+    | authentication cookies. Typically, these should include your local
+    | and production domains which access your API via a frontend SPA.
+    |
+    */
+
+    'stateful' => explode(',', env(
+        'SANCTUM_STATEFUL_DOMAINS',
+        'localhost,localhost:3000,127.0.0.1,127.0.0.1:8000,::1,'.parse_url(env('APP_URL'), PHP_URL_HOST)
+    )),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Expiration Minutes
+    |--------------------------------------------------------------------------
+    |
+    | This value controls the number of minutes until an issued token will be
+    | considered expired. If this value is null, personal access tokens do
+    | not expire. This won't tweak the lifetime of first-party sessions.
+    |
+    */
+
+    'expiration' => null,
+
+    /*
+    |--------------------------------------------------------------------------
+    | Sanctum Middleware
+    |--------------------------------------------------------------------------
+    |
+    | When authenticating your first-party SPA with Sanctum you may need to
+    | customize some of the middleware Sanctum uses while processing the
+    | request. You may change the middleware listed below as required.
+    |
+    */
+
+    'middleware' => [
+        'verify_csrf_token' => App\Http\Middleware\VerifyCsrfToken::class,
+        'encrypt_cookies' => App\Http\Middleware\EncryptCookies::class,
+    ],
+
+];

database/migrations/2019_12_14_000001_create_personal_access_tokens_table.php

@@ -0,0 +1,36 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+class CreatePersonalAccessTokensTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::create('personal_access_tokens', function (Blueprint $table) {
+            $table->bigIncrements('id');
+            $table->morphs('tokenable');
+            $table->string('name');
+            $table->string('token', 64)->unique();
+            $table->text('abilities')->nullable();
+            $table->timestamp('last_used_at')->nullable();
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::dropIfExists('personal_access_tokens');
+    }
+}

public/main.js

@@ -1,6 +1,26 @@
-var toggle = document.querySelector(".nav-toggle");
-var heroText = document.querySelectorAll(".landing-hero h2,.landing-hero p");
-var registerToggles = document.querySelectorAll(".register-btn, .register-area .cancel-button, .services-cards button");
+let toggle = document.querySelector(".nav-toggle");
+let heroText = document.querySelectorAll(".landing-hero h2,.landing-hero p");
+let registerToggles = document.querySelectorAll(".register-btn, .register-area	.cancel-button, .services-cards button");
+let form = new FormData(document.getElementById("register-form"));
+const passInput = document.getElementById("password");
+const passInput2 = document.getElementById("confirm_password");
+function register(event) {
+  console.log("register triggered");
+  event.preventDefault();
+  fetch("/register", {
+    method: "POST",
+    headers: {"Content-Type": "application/json"},
+    body: JSON.stringify(form)
+  }).then(console.log((response) => console.log(response.json())));
+}
+function checkPasswords() {
+  if (passInput.value != passInput2.value) {
+    passInput2.setCustomValidity("Passwords must be matching");
+  } else {
+    console.log("pass checks work");
+    passInput2.setCustomValidity("");
+  }
+}
 toggle.addEventListener("click", function() {
   heroText.forEach((item) => {
     item.classList.toggle("hidden");
@@ -13,11 +33,13 @@ for (i = 0; i < registerToggles.length; i++) {
     document.querySelector(".register-area").classList.toggle("active");
   });
 }
-var cols = document.getElementsByClassName("collapsible");
-var i;
+let cols = document.getElementsByClassName("collapsible");
 for (i = 0; i < cols.length; i++) {
   cols[i].addEventListener("click", function() {
     this.classList.toggle("active");
   });
 }
+document.getElementById("register-form").addEventListener("submit", register);
+passInput2.oninput = checkPasswords;
+passInput.oninput = checkPasswords;
 //# sourceMappingURL=main.js.map

resources/js/main.js

@@ -1,7 +1,29 @@
-var toggle = document.querySelector(".nav-toggle")
-var heroText = document.querySelectorAll(".landing-hero h2,.landing-hero p")
-var registerToggles = document.querySelectorAll(".register-btn, .register-area
+let toggle = document.querySelector(".nav-toggle")
+let heroText = document.querySelectorAll(".landing-hero h2,.landing-hero p")
+let registerToggles = document.querySelectorAll(".register-btn, .register-area\
 	.cancel-button, .services-cards button")
+ let form = new FormData( document.getElementById("register-form") )  
+const passInput = document.getElementById("password")
+const passInput2 = document.getElementById("confirm_password")
+
+function register(event) {
+	console.log("register triggered")
+	event.preventDefault();
+	fetch("/register", {
+		method: 'POST',
+		headers: {'Content-Type': 'application/json'},
+		body: JSON.stringify(form)
+	}).then(console.log(response => console.log(response.json())))
+}
+
+function checkPasswords() {
+	if (passInput.value != passInput2.value) {
+		passInput2.setCustomValidity('Passwords must be matching')
+	} else {
+		console.log("pass checks work")
+		passInput2.setCustomValidity('');
+	}
+}
 
 toggle.addEventListener("click", function() {
 	heroText.forEach(item => {
@@ -21,8 +43,8 @@ for (i = 0; i < registerToggles.length; i++) {
 
 
 //FAQ code
-var cols = document.getElementsByClassName("collapsible");
-var i;
+let cols = document.getElementsByClassName("collapsible");
+// let ;
 
 for (i = 0; i < cols.length; i++) {
 	cols[i].addEventListener("click", function() {
@@ -30,3 +52,6 @@ for (i = 0; i < cols.length; i++) {
 	});
 }
 
+document.getElementById('register-form').addEventListener('submit', register)
+passInput2.oninput = checkPasswords
+passInput.oninput = checkPasswords

resources/scss/_vars.scss

@@ -56,6 +56,7 @@ $theme-colors: (
 // bottom right, that darkens on hover
 @mixin special-button($start, $end) {
 	font-family: "PatuaOne";
+	height: 2em;
 	border: none;
 	border-radius: 4px;
 	padding: 3px;

resources/scss/main.scss

@@ -148,13 +148,13 @@ div.hero-filter h2 {
 	width: 10em;
 	font-size: 2.4em;
 	position: absolute;
-	top: 15%;
+	top: 3em;
 	margin-left: 5%;
 }
 
 div.hero-filter p {
 	position: absolute;
-	top: 27%;
+	top: 12em;
 	margin-left: 5%;
 	font-size: 20px;
 	width: 10em;
@@ -282,6 +282,7 @@ section.services-cards button {
 }
 
 section.features-info {
+	// height: fit-content;
 	height: 60em;
 	background: radial-gradient(ellipse at left, #fff, vars.getColor("light-grey") 80%);
 }
@@ -385,7 +386,7 @@ section.benefits-info div {
 section.faq-info {
 	margin-bottom: 6em;
 	margin-top: 3em;
-	height: 30em;
+	min-height: 30em;
 }
 
 .faq-info h2 {
@@ -516,6 +517,10 @@ div.register-area {
 	}
 }
 
+section.features-info {
+	min-height: 70em;
+}
+
 div.register-area.active {
 	height: 400px;
 	opacity: 1;
@@ -600,11 +605,11 @@ div.register-area.active {
 	}
 
 	.landing-hero div.hero-filter h2 {
-		top: 15%;
+		top: 4em;
 	}
 
 	.landing-hero div.hero-filter p {
-		top: 30%;
+		top: 15em;
 	}
 
 	.landing-hero div.hero-filter .register-btn {

resources/views/home.blade.php

@@ -12,25 +12,26 @@
 	<main>
 	<div class="register-area">
 		<h3>Registration</h3>
-		<form class="login" action="">
+		<form id="register-form" class="login" action="">
 			@csrf
 			<div>
 			<label for='sender_name'>Name</label>
 			<input required type='name' name='sender_name' placeholder=''
-spellcheck='false'>
+			spellcheck='false'>
 			</div>
 			<div>
 			<label for='sender_email'>Email</label>
 			<input required type='email' name='sender_email' placeholder=''
-spellcheck='false'>
+			spellcheck='false'>
 			</div>
 			<div>
 			<label for='sender_password'>Password</label>
-			<input required type='password' name='sender_password' placeholder='' spellcheck='false'>
+			<input id='password' required type='password' name='sender_password'
+			placeholder='' spellcheck='false'>
 			</div>
 			<div>
 			<label for='sender_password'>Confirm Password</label>
-			<input required type='password' name='sender_password' placeholder='' spellcheck='false'>
+			<input id='confirm_password' required type='password' name='sender_password' placeholder='' spellcheck='false'>
 			</div>
 			<button class="submit-btn" type="submit">Submit</button>
 			<div class="cancel-button"></div>
@@ -38,7 +39,8 @@ spellcheck='false'>
 	<div class='landing-hero'>
 		<div class='hero-filter'>
 			<h2>The web's #1 content promoter</h2>
-			<p>Give your brand the boost it needs for oganic growth with the web's most trusted social media marketing panel.</p>
+			<p>Give your brand the boost it needs for oganic growth with the
+			web's most trusted social media marketing panel.</p>
 			<a class='register-btn'>Register Now</a>
 		</div>
 	</div>

routes/web.php

@@ -18,3 +18,11 @@ Route::get('/', function () {
 });
 
 Route::view('/panel', 'panel');
+
+Route::get('/login', function () {
+    return view('home');
+});
+
+Route::get('/register', function () {
+    return view('home');
+});