Do you have any examples on how to create a public New User Registration page?
This is a great little project and you have a login page for it but no user registration form.
I've created a registration form but I don't know how to use axios to submit the form and save a new user to the users table. I'm not using the customers tables like in your video, I'm just using the default users table to add new registrations.
I have the login process working as per your video series, just need to get the registration process working
Any help would be appreciated.
This is my api.php file
<?php
use Illuminate\Http\Request;
/*
|--------------------------------------------------------------------------
| API Routes
|--------------------------------------------------------------------------
|
| Here is where you can register API routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| is assigned the "api" middleware group. Enjoy building your API!
|
*/
Route::group(['prefix' => 'auth'], function ($router) {
Route::post('login', 'Auth\AuthController@login');
Route::post('logout', 'Auth\AuthController@logout');
Route::post('refresh', 'Auth\AuthController@refresh');
Route::post('register', 'Auth\RegisterController@register');
Route::post('me', 'Auth\AuthController@me');
});
This is my RegisterController.php
<?php
namespace App\Http\Controllers\Auth;
use App\User;
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
class RegisterController extends Controller
{
/*
|--------------------------------------------------------------------------
| Register Controller
|--------------------------------------------------------------------------
|
| This controller handles the registration of new users as well as their
| validation and creation. By default this controller uses a trait to
| provide this functionality without requiring any additional code.
|
*/
use RegistersUsers;
/**
* Where to redirect users after registration.
*
* @var string
*/
protected $redirectTo = '/login';
/**
* Create a new controller instance.
*
* @return void
*/
public function __construct()
{
//$this->middleware('guest');
$this->middleware('auth:api', ['except' => ['register']]);
}
/**
* Get a validator for an incoming registration request.
*
* @param array $data
* @return \Illuminate\Contracts\Validation\Validator
*/
protected function validator(array $data)
{
return Validator::make($data, [
'name' => 'required|string|max:255',
'email' => 'required|string|email|max:255|unique:users',
'password' => 'required|string|min:6|confirmed',
]);
}
/**
* Create a new user instance after a valid registration.
*
* @param array $data
* @return \App\User
*/
protected function register(Request $request)
{
$user = User::create($request->only(["name", "email", "password"]));
return response()->json([
"user" => $user
], 200);
}
/**
* Override the default Laravel Guard here
*/
public function guard(){
return \Auth::Guard('api');
}
}
This is my User.php file
<?php
namespace App;
use Tymon\JWTAuth\Contracts\JWTSubject;
use Illuminate\Notifications\Notifiable;
use Illuminate\Foundation\Auth\User as Authenticatable;
class User extends Authenticatable implements JWTSubject
{
use Notifiable;
protected $guarded = [];
/**
* The attributes that are mass assignable.
*
* @var array
*/
protected $fillable = [
'name', 'email', 'password',
];
/**
* The attributes that should be hidden for arrays.
*
* @var array
*/
protected $hidden = [
'password', 'remember_token',
];
/**
* Get the identifier that will be stored in the subject claim of the JWT.
*
* @return mixed
*/
public function getJWTIdentifier()
{
return $this->getKey();
}
/**
* Return a key value array, containing any custom claims to be added to the JWT.
*
* @return array
*/
public function getJWTCustomClaims()
{
return [];
}
}
This is the script in my register.vue file that has the registration form.
<script>
import validate from 'validate.js'
export default {
name: 'register',
metaInfo: {
title: 'Registration'
},
data() {
return {
form: {
name: '',
email: '',
password: ''
},
errors: null
}
},
methods: {
register() {
this.errors = null;
const contraints = this.getContraints();
const errors = validate(this.$data.form, contraints);
if (errors) {
this.errors = errors;
return;
}
//Post New User Registration to the API
axios.post('/api/auth/register', this.$data.form, {
})
.then((response) => {
this.$router.push('/login');
})
},
getContraints() {
return {
name: {
presence: true,
length: {
minimum: 3,
message: "must be at least 3 characters long"
}
},
email: {
presence: true,
email: true,
},
password: {
presence: true,
length: {
password: true,
minimum: 6,
message: "must be at least 6 characters long"
}
}
}
}
}
}
</script>
This is the error I'm seeing when I submit my registration form
bluebird.min.js:29 Unhandled rejection TypeError: Cannot read property 'status' of undefined
and it points to this code
// Send to login page if user accesses a page that needs authentication and they are not logged in.
axios.interceptors.response.use(null, function (error) {
if (error.resposne.status == 401) {
store.commit('logout');
router.push('/login');
}
return Promise.reject(error);
});
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent