├── public ├── favicon.ico ├── robots.txt ├── mix-manifest.json ├── .htaccess └── index.php ├── database ├── .gitignore ├── seeds │ ├── DatabaseSeeder.php │ ├── UserSeeder.php │ └── TodoSeeder.php ├── factories │ ├── TodoFactory.php │ └── UserFactory.php └── migrations │ ├── 2018_08_02_000000_create_password_resets_table.php │ ├── 2018_08_03_000000_create_todos_table.php │ └── 2018_08_01_000000_create_users_table.php ├── bootstrap ├── cache │ └── .gitignore └── app.php ├── storage ├── logs │ └── .gitignore ├── app │ ├── public │ │ └── .gitignore │ └── .gitignore └── framework │ ├── cache │ └── .gitignore │ ├── testing │ └── .gitignore │ ├── views │ └── .gitignore │ ├── sessions │ └── .gitignore │ └── .gitignore ├── .eslintignore ├── .babelrc ├── .htaccess ├── resources ├── js │ ├── services │ │ ├── index.js │ │ └── authService.js │ ├── store │ │ ├── action-types │ │ │ └── index.js │ │ ├── reducers │ │ │ ├── index.js │ │ │ ├── persistStore.js │ │ │ └── Auth.js │ │ ├── index.js │ │ └── actions │ │ │ └── index.js │ ├── pages │ │ ├── NoMatch.js │ │ ├── Archive.js │ │ ├── Dashboard.js │ │ ├── ForgotPassword.js │ │ ├── Login.js │ │ ├── Home.js │ │ └── ResetPassword.js │ ├── Base.js │ ├── routes │ │ ├── Public.js │ │ ├── index.js │ │ ├── Split.js │ │ ├── Private.js │ │ └── routes.js │ ├── Http.js │ ├── app.js │ └── components │ │ └── Header.js ├── sass │ ├── _variables.scss │ └── app.scss ├── views │ └── index.blade.php └── lang │ └── en │ ├── pagination.php │ ├── auth.php │ ├── passwords.php │ └── validation.php ├── .gitattributes ├── docs ├── database-seeds.md ├── automated-testing.md ├── code-standards.md └── api-format.md ├── tests ├── TestCase.php ├── CreatesApplication.php └── Feature │ ├── LogoutTest.php │ ├── LoginTest.php │ ├── RegistrationTest.php │ ├── PasswordResetTest.php │ └── TodoTest.php ├── .editorconfig ├── .gitignore ├── app ├── Http │ ├── Middleware │ │ ├── EncryptCookies.php │ │ ├── VerifyCsrfToken.php │ │ ├── TrimStrings.php │ │ ├── TrustProxies.php │ │ └── RedirectIfAuthenticated.php │ ├── Controllers │ │ ├── Controller.php │ │ ├── Auth │ │ │ ├── LogoutController.php │ │ │ ├── LoginController.php │ │ │ ├── ForgotPasswordController.php │ │ │ ├── RegisterController.php │ │ │ └── ResetPasswordController.php │ │ ├── APIController.php │ │ ├── ApiController.php │ │ └── TodoController.php │ ├── Resources │ │ ├── TodoCollection.php │ │ ├── ApiResource.php │ │ ├── ApiResourceCollection.php │ │ └── TodoResource.php │ └── Kernel.php ├── Providers │ ├── BroadcastServiceProvider.php │ ├── AuthServiceProvider.php │ ├── AppServiceProvider.php │ ├── EventServiceProvider.php │ └── RouteServiceProvider.php ├── Custom │ └── Hasher.php ├── Todo.php ├── Console │ └── Kernel.php ├── Exceptions │ └── Handler.php ├── Notifications │ └── ResetPassword.php └── User.php ├── .eslintrc.js ├── routes ├── channels.php ├── web.php ├── console.php └── api.php ├── webpack.mix.js ├── server.php ├── phpcs.xml ├── .env.example ├── phpunit.xml ├── .github └── workflows │ └── laravel.yml ├── config ├── cors.php ├── view.php ├── services.php ├── hashing.php ├── broadcasting.php ├── filesystems.php ├── logging.php ├── queue.php ├── cache.php ├── auth.php ├── database.php ├── mail.php ├── session.php └── app.php ├── LICENSE.md ├── package.json ├── artisan ├── composer.json ├── .php_cs └── readme.md /public/favicon.ico: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /database/.gitignore: -------------------------------------------------------------------------------- 1 | *.sqlite 2 | -------------------------------------------------------------------------------- /bootstrap/cache/.gitignore: -------------------------------------------------------------------------------- 1 | * 2 | !.gitignore 3 | -------------------------------------------------------------------------------- /storage/logs/.gitignore: -------------------------------------------------------------------------------- 1 | * 2 | !.gitignore 3 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | vendor 4 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | User-agent: * 2 | Disallow: 3 | -------------------------------------------------------------------------------- /storage/app/public/.gitignore: -------------------------------------------------------------------------------- 1 | * 2 | !.gitignore 3 | -------------------------------------------------------------------------------- /storage/app/.gitignore: -------------------------------------------------------------------------------- 1 | * 2 | !public/ 3 | !.gitignore 4 | -------------------------------------------------------------------------------- /storage/framework/cache/.gitignore: -------------------------------------------------------------------------------- 1 | * 2 | !.gitignore 3 | -------------------------------------------------------------------------------- /storage/framework/testing/.gitignore: -------------------------------------------------------------------------------- 1 | * 2 | !.gitignore 3 | -------------------------------------------------------------------------------- /storage/framework/views/.gitignore: -------------------------------------------------------------------------------- 1 | * 2 | !.gitignore 3 | -------------------------------------------------------------------------------- /storage/framework/sessions/.gitignore: -------------------------------------------------------------------------------- 1 | * 2 | !.gitignore 3 | -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": ["@babel/plugin-proposal-class-properties"] 3 | } 4 | -------------------------------------------------------------------------------- /.htaccess: -------------------------------------------------------------------------------- 1 | 2 | RewriteEngine On 3 | RewriteRule ^(.*)$ public/$1 [L] 4 | -------------------------------------------------------------------------------- /public/mix-manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "/js/app.js": "/js/app.js", 3 | "/css/app.css": "/css/app.css" 4 | } 5 | -------------------------------------------------------------------------------- /resources/js/services/index.js: -------------------------------------------------------------------------------- 1 | import * as AuthService from './authService'; 2 | 3 | export default AuthService; 4 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | * text=auto 2 | *.css linguist-vendored 3 | *.scss linguist-vendored 4 | *.js linguist-vendored 5 | CHANGELOG.md export-ignore 6 | -------------------------------------------------------------------------------- /storage/framework/.gitignore: -------------------------------------------------------------------------------- 1 | config.php 2 | routes.php 3 | schedule-* 4 | compiled.php 5 | services.json 6 | events.scanned.php 7 | routes.scanned.php 8 | down 9 | -------------------------------------------------------------------------------- /resources/js/store/action-types/index.js: -------------------------------------------------------------------------------- 1 | export const AUTH_LOGIN = 'AUTH_LOGIN'; 2 | export const AUTH_CHECK = 'AUTH_CHECK'; 3 | export const AUTH_LOGOUT = 'AUTH_LOGOUT'; 4 | -------------------------------------------------------------------------------- /docs/database-seeds.md: -------------------------------------------------------------------------------- 1 | ### Seeding the Database 2 | 3 | Fresh Migration: 4 | 5 | ``` 6 | php artisan migrate:refresh --seed --force 7 | ``` 8 | 9 | ``` 10 | php artisan db:seed --class=ExampleSeeder 11 | ``` 12 | -------------------------------------------------------------------------------- /tests/TestCase.php: -------------------------------------------------------------------------------- 1 | ( 4 |
5 |
6 |

404

7 |

No page found.

8 |
9 |
10 | ); 11 | 12 | export default NoMatch; 13 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | /public/css 3 | /public/hot 4 | /public/js 5 | /public/storage 6 | /storage/*.key 7 | /vendor 8 | /.idea 9 | /.vscode 10 | /.vagrant 11 | Homestead.json 12 | Homestead.yaml 13 | npm-debug.log 14 | yarn-error.log 15 | .env 16 | .DS_Store 17 | .phpunit.result.cache 18 | _ide_helper.php 19 | -------------------------------------------------------------------------------- /docs/automated-testing.md: -------------------------------------------------------------------------------- 1 | # Automated Tests 2 | 3 | This project has Browser, Feature, and Unit tests. 4 | 5 | ### PHP Tests 6 | 7 | Support for [testing with PHPUnit](https://laravel.com/docs/5.7/testing) is included out of the box with Laravel. 8 | 9 | To run the feature and unit tests use: 10 | `vendor/bin/phpunit` 11 | -------------------------------------------------------------------------------- /resources/js/store/index.js: -------------------------------------------------------------------------------- 1 | import { applyMiddleware, createStore, compose } from 'redux'; 2 | import { persistStore } from 'redux-persist'; 3 | import ReduxThunk from 'redux-thunk'; 4 | import RootReducer from './reducers'; 5 | 6 | const store = createStore(RootReducer, compose(applyMiddleware(ReduxThunk))); 7 | 8 | persistStore(store); 9 | 10 | export default store; 11 | -------------------------------------------------------------------------------- /app/Http/Middleware/EncryptCookies.php: -------------------------------------------------------------------------------- 1 | { 7 | switch (type) { 8 | case 'persist/REHYDRATE': 9 | return persistStore(state, payload); 10 | default: 11 | return state; 12 | } 13 | }; 14 | 15 | export default reducer; 16 | -------------------------------------------------------------------------------- /resources/js/Base.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { connect } from 'react-redux'; 3 | import Header from './components/Header'; 4 | 5 | const Base = ({ children }) => ( 6 |
7 |
8 |
{children}
9 |
10 | ); 11 | 12 | const mapStateToProps = (state) => ({ 13 | isAuthenticated: state.Auth.isAuthenticated, 14 | }); 15 | 16 | export default connect(mapStateToProps)(Base); 17 | -------------------------------------------------------------------------------- /resources/js/store/actions/index.js: -------------------------------------------------------------------------------- 1 | import * as ActionTypes from '../action-types'; 2 | 3 | export function authLogin(payload) { 4 | return { 5 | type: ActionTypes.AUTH_LOGIN, 6 | payload, 7 | }; 8 | } 9 | 10 | export function authLogout() { 11 | return { 12 | type: ActionTypes.AUTH_LOGOUT, 13 | }; 14 | } 15 | 16 | export function authCheck() { 17 | return { 18 | type: ActionTypes.AUTH_CHECK, 19 | }; 20 | } 21 | -------------------------------------------------------------------------------- /app/Http/Controllers/Controller.php: -------------------------------------------------------------------------------- 1 | call(UserSeeder::class); 15 | 16 | // Create Todo data. 17 | $this->call(TodoSeeder::class); 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: 'airbnb', 3 | parser: 'babel-eslint', 4 | rules: { 5 | 'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx'] }], 6 | 'jsx-a11y/label-has-for': [2, { 7 | components: ['Label'], 8 | required: { 9 | every: ['id'], 10 | }, 11 | allowChildren: false, 12 | }], 13 | "react/jsx-props-no-spreading": "off", 14 | }, 15 | env: { 16 | browser: true, 17 | }, 18 | }; 19 | -------------------------------------------------------------------------------- /resources/js/routes/Public.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import { Route } from 'react-router'; 4 | import Base from '../Base'; 5 | 6 | const PublicRoute = ({ component: Component, ...rest }) => ( 7 | ( 10 | 11 | 12 | 13 | )} 14 | /> 15 | ); 16 | 17 | PublicRoute.propTypes = {}; 18 | 19 | export default PublicRoute; 20 | -------------------------------------------------------------------------------- /app/Http/Resources/TodoCollection.php: -------------------------------------------------------------------------------- 1 | logout(); 18 | return $this->responseSuccess('Successfully logged out.'); 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /resources/js/Http.js: -------------------------------------------------------------------------------- 1 | import axios from 'axios'; 2 | import store from './store'; 3 | import * as actions from './store/actions'; 4 | 5 | const token = localStorage.getItem('access_token'); 6 | axios.defaults.headers.common.Authorization = `Bearer ${token}`; 7 | 8 | axios.interceptors.response.use( 9 | (response) => response, 10 | (error) => { 11 | if (error.response.status === 401) { 12 | store.dispatch(actions.authLogout()); 13 | } 14 | return Promise.reject(error); 15 | }, 16 | ); 17 | 18 | export default axios; 19 | -------------------------------------------------------------------------------- /app/Http/Middleware/TrustProxies.php: -------------------------------------------------------------------------------- 1 | 13 | 14 | 15 | 16 | 17 | 18 | , 19 | document.getElementById('app'), 20 | ); 21 | -------------------------------------------------------------------------------- /routes/channels.php: -------------------------------------------------------------------------------- 1 | id === (int) $id; 16 | }); 17 | -------------------------------------------------------------------------------- /tests/CreatesApplication.php: -------------------------------------------------------------------------------- 1 | make(Kernel::class)->bootstrap(); 20 | 21 | Hash::driver('bcrypt')->setRounds(4); 22 | 23 | return $app; 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /app/Custom/Hasher.php: -------------------------------------------------------------------------------- 1 | encode(...$args); 12 | } 13 | 14 | public static function decode($enc) 15 | { 16 | // Decode the value. 17 | $decoded = app(Hashids::class)->decode($enc); 18 | 19 | // Return the first item if we were able to decode it. 20 | if (count($decoded)) { 21 | return $decoded[0]; 22 | } 23 | 24 | return ''; 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /webpack.mix.js: -------------------------------------------------------------------------------- 1 | const mix = require('laravel-mix'); 2 | 3 | /* 4 | |-------------------------------------------------------------------------- 5 | | Mix Asset Management 6 | |-------------------------------------------------------------------------- 7 | | 8 | | Mix provides a clean, fluent API for defining some Webpack build steps 9 | | for your Laravel application. By default, we are compiling the Sass 10 | | file for the application as well as bundling up all the JS files. 11 | | 12 | */ 13 | 14 | mix.js('resources/js/app.js', 'public/js').react(); 15 | mix.sass('resources/sass/app.scss', 'public/css'); 16 | -------------------------------------------------------------------------------- /routes/web.php: -------------------------------------------------------------------------------- 1 | name('password.reset'); 16 | 17 | // Catches all other web routes. 18 | Route::get('{slug}', function () { 19 | return view('index'); 20 | })->where('slug', '^(?!api).*$'); 21 | -------------------------------------------------------------------------------- /app/Http/Resources/ApiResource.php: -------------------------------------------------------------------------------- 1 | 200), (array) $response->getData()); 19 | $response->setData($data); 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /resources/views/index.blade.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | {{ env('APP_NAME') }} 8 | 9 | 10 | 11 |
12 |
13 |
14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /resources/lang/en/pagination.php: -------------------------------------------------------------------------------- 1 | '« Previous', 17 | 'next' => 'Next »', 18 | 19 | ]; 20 | -------------------------------------------------------------------------------- /routes/console.php: -------------------------------------------------------------------------------- 1 | comment(Inspiring::quote()); 18 | })->describe('Display an inspiring quote'); 19 | -------------------------------------------------------------------------------- /server.php: -------------------------------------------------------------------------------- 1 | 8 | */ 9 | 10 | $uri = urldecode( 11 | parse_url($_SERVER['REQUEST_URI'], PHP_URL_PATH) 12 | ); 13 | 14 | // This file allows us to emulate Apache's "mod_rewrite" functionality from the 15 | // built-in PHP web server. This provides a convenient way to test a Laravel 16 | // application without having installed a "real" web server software here. 17 | if ($uri !== '/' && file_exists(__DIR__.'/public'.$uri)) { 18 | return false; 19 | } 20 | 21 | require_once __DIR__.'/public/index.php'; 22 | -------------------------------------------------------------------------------- /app/Http/Resources/ApiResourceCollection.php: -------------------------------------------------------------------------------- 1 | 200), (array) $response->getData()); 19 | $response->setData($data); 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /app/Http/Middleware/RedirectIfAuthenticated.php: -------------------------------------------------------------------------------- 1 | check()) { 21 | return redirect('/'); 22 | } 23 | 24 | return $next($request); 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /phpcs.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | The coding standard for our project. 4 | app 5 | database 6 | tests 7 | */migrations/* 8 | 9 | 10 | 11 | 12 | 13 | /database/migrations/ 14 | /database/seeds/ 15 | 16 | 17 | -------------------------------------------------------------------------------- /database/seeds/UserSeeder.php: -------------------------------------------------------------------------------- 1 | 'User Test', 17 | 'email' => 'user@test.dev', 18 | 'password' => bcrypt('password') 19 | ]); 20 | 21 | // Create another five user accounts. 22 | factory(User::class, 5)->create(); 23 | 24 | $this->command->info('Users table seeded.'); 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /public/.htaccess: -------------------------------------------------------------------------------- 1 | 2 | 3 | Options -MultiViews -Indexes 4 | 5 | 6 | RewriteEngine On 7 | 8 | # Handle Authorization Header 9 | RewriteCond %{HTTP:Authorization} . 10 | RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}] 11 | 12 | # Redirect Trailing Slashes If Not A Folder... 13 | RewriteCond %{REQUEST_FILENAME} !-d 14 | RewriteCond %{REQUEST_URI} (.+)/$ 15 | RewriteRule ^ %1 [L,R=301] 16 | 17 | # Handle Front Controller... 18 | RewriteCond %{REQUEST_FILENAME} !-d 19 | RewriteCond %{REQUEST_FILENAME} !-f 20 | RewriteRule ^ index.php [L] 21 | 22 | -------------------------------------------------------------------------------- /app/Providers/AuthServiceProvider.php: -------------------------------------------------------------------------------- 1 | 'App\Policies\ModelPolicy', 17 | ]; 18 | 19 | /** 20 | * Register any authentication / authorization services. 21 | * 22 | * @return void 23 | */ 24 | public function boot() 25 | { 26 | $this->registerPolicies(); 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /resources/lang/en/auth.php: -------------------------------------------------------------------------------- 1 | 'These credentials do not match our records.', 17 | 'throttle' => 'Too many login attempts. Please try again in :seconds seconds.', 18 | 19 | ]; 20 | -------------------------------------------------------------------------------- /database/factories/TodoFactory.php: -------------------------------------------------------------------------------- 1 | $this->faker->sentence(6), 26 | 'status' => $this->faker->randomElement(['open', 'closed']) 27 | ]; 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /app/Providers/AppServiceProvider.php: -------------------------------------------------------------------------------- 1 | app->bind(Hashids::class, function () { 29 | return new Hashids(env('HASHIDS_SALT'), 10); 30 | }); 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /resources/js/routes/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { BrowserRouter as Router, Switch } from 'react-router-dom'; 3 | import routes from './routes'; 4 | import PublicRoute from './Public'; 5 | import PrivateRoute from './Private'; 6 | import SplitRoute from './Split'; 7 | 8 | const Routes = () => ( 9 | 10 | 11 | {routes.map((route) => { 12 | if (route.auth && route.fallback) { 13 | return ; 14 | } if (route.auth) { 15 | return ; 16 | } 17 | return ; 18 | })} 19 | 20 | 21 | ); 22 | 23 | export default Routes; 24 | -------------------------------------------------------------------------------- /app/Providers/EventServiceProvider.php: -------------------------------------------------------------------------------- 1 | [ 17 | 'App\Listeners\EventListener', 18 | ], 19 | ]; 20 | 21 | /** 22 | * Register any events for your application. 23 | * 24 | * @return void 25 | */ 26 | public function boot() 27 | { 28 | parent::boot(); 29 | 30 | // 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /app/Http/Resources/TodoResource.php: -------------------------------------------------------------------------------- 1 | (string)$this->created_at->toDateTimeString(), 19 | 'updated_at' => (string)$this->updated_at->toDateTimeString(), 20 | 'id' => $this->id, 21 | 'user' => Hasher::encode($this->user_id), 22 | 'value' => $this->value, 23 | 'status' => $this->status, 24 | ]; 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /database/factories/UserFactory.php: -------------------------------------------------------------------------------- 1 | $this->faker->name, 26 | 'email' => $this->faker->unique()->safeEmail, 27 | 'password' => '$2y$10$TKh8H1.PfQx37YgCzwiKb.KjNyWgaHb9cbcoQgdIVFlYg7B77UdFm', // secret 28 | 'remember_token' => Str::random(10), 29 | ]; 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /resources/js/routes/Split.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import { Route } from 'react-router'; 4 | import { connect } from 'react-redux'; 5 | import Base from '../Base'; 6 | 7 | const SplitRoute = ({ 8 | component: Component, 9 | fallback: Fallback, 10 | isAuthenticated, 11 | ...rest 12 | }) => ( 13 | (isAuthenticated ? ( 16 | 17 | 18 | 19 | ) : ( 20 | 21 | 22 | 23 | ))} 24 | /> 25 | ); 26 | 27 | SplitRoute.propTypes = { 28 | isAuthenticated: PropTypes.bool.isRequired, 29 | }; 30 | 31 | const mapStateToProps = (state) => ({ 32 | isAuthenticated: state.Auth.isAuthenticated, 33 | }); 34 | 35 | export default connect(mapStateToProps)(SplitRoute); 36 | -------------------------------------------------------------------------------- /database/migrations/2018_08_02_000000_create_password_resets_table.php: -------------------------------------------------------------------------------- 1 | string('email')->index(); 18 | $table->string('token'); 19 | $table->timestamp('created_at')->nullable(); 20 | }); 21 | } 22 | 23 | /** 24 | * Reverse the migrations. 25 | * 26 | * @return void 27 | */ 28 | public function down() 29 | { 30 | Schema::dropIfExists('password_resets'); 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /resources/lang/en/passwords.php: -------------------------------------------------------------------------------- 1 | 'Passwords must be at least six characters and match the confirmation.', 17 | 'reset' => 'Your password has been reset!', 18 | 'sent' => 'We have e-mailed your password reset link!', 19 | 'token' => 'This password reset token is invalid.', 20 | 'user' => "We can't find a user with that e-mail address.", 21 | 22 | ]; 23 | -------------------------------------------------------------------------------- /resources/js/routes/Private.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import { Route, Redirect } from 'react-router'; 4 | import { connect } from 'react-redux'; 5 | import Base from '../Base'; 6 | 7 | const PrivateRoute = ({ component: Component, isAuthenticated, ...rest }) => ( 8 | (isAuthenticated ? ( 11 | 12 | 13 | 14 | ) : ( 15 | 21 | ))} 22 | /> 23 | ); 24 | 25 | PrivateRoute.propTypes = { 26 | isAuthenticated: PropTypes.bool.isRequired, 27 | }; 28 | 29 | const mapStateToProps = (state) => ({ 30 | isAuthenticated: state.Auth.isAuthenticated, 31 | }); 32 | 33 | export default connect(mapStateToProps)(PrivateRoute); 34 | -------------------------------------------------------------------------------- /app/Todo.php: -------------------------------------------------------------------------------- 1 | 'integer', 31 | ]; 32 | 33 | /** 34 | * A Todo belongs to a User. 35 | * 36 | * @return \Illuminate\Database\Eloquent\Relations\BelongsTo 37 | */ 38 | public function user() 39 | { 40 | return $this->belongsTo(User::class, 'user_id'); 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /database/migrations/2018_08_03_000000_create_todos_table.php: -------------------------------------------------------------------------------- 1 | timestamps(); 18 | $table->increments('id'); 19 | $table->integer('user_id'); 20 | $table->string('value'); 21 | $table->enum('status', ['open', 'closed'])->default('open'); 22 | }); 23 | } 24 | 25 | /** 26 | * Reverse the migrations. 27 | * 28 | * @return void 29 | */ 30 | public function down() 31 | { 32 | Schema::dropIfExists('todos'); 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /database/migrations/2018_08_01_000000_create_users_table.php: -------------------------------------------------------------------------------- 1 | timestamps(); 18 | $table->increments('id'); 19 | $table->string('name'); 20 | $table->string('email')->unique(); 21 | $table->string('password'); 22 | $table->rememberToken(); 23 | }); 24 | } 25 | 26 | /** 27 | * Reverse the migrations. 28 | * 29 | * @return void 30 | */ 31 | public function down() 32 | { 33 | Schema::dropIfExists('users'); 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /.env.example: -------------------------------------------------------------------------------- 1 | APP_NAME="Laravel React To Do App" 2 | APP_ENV=local 3 | APP_KEY= 4 | APP_DEBUG=true 5 | APP_URL=http://localhost 6 | 7 | LOG_CHANNEL=stack 8 | 9 | DB_CONNECTION=mysql 10 | DB_HOST=127.0.0.1 11 | DB_PORT=3306 12 | DB_DATABASE=todo 13 | DB_USERNAME=root 14 | DB_PASSWORD= 15 | 16 | BROADCAST_DRIVER=log 17 | CACHE_DRIVER=file 18 | SESSION_DRIVER=file 19 | SESSION_LIFETIME=120 20 | QUEUE_DRIVER=sync 21 | 22 | REDIS_HOST=127.0.0.1 23 | REDIS_PASSWORD=null 24 | REDIS_PORT=6379 25 | 26 | MAIL_DRIVER=log 27 | MAIL_HOST=smtp.mailtrap.io 28 | MAIL_PORT=2525 29 | MAIL_USERNAME=null 30 | MAIL_PASSWORD=null 31 | MAIL_ENCRYPTION=null 32 | 33 | PUSHER_APP_ID= 34 | PUSHER_APP_KEY= 35 | PUSHER_APP_SECRET= 36 | PUSHER_APP_CLUSTER=mt1 37 | 38 | MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}" 39 | MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}" 40 | 41 | # URL Hashes 42 | HASHIDS_SALT= 43 | 44 | # Javascript Web Token Keys 45 | JWT_PUBLIC_KEY= 46 | JWT_PRIVATE_KEY= 47 | JWT_SECRET= 48 | -------------------------------------------------------------------------------- /app/Console/Kernel.php: -------------------------------------------------------------------------------- 1 | command('inspire') 28 | // ->hourly(); 29 | } 30 | 31 | /** 32 | * Register the commands for the application. 33 | * 34 | * @return void 35 | */ 36 | protected function commands() 37 | { 38 | $this->load(__DIR__.'/Commands'); 39 | 40 | require base_path('routes/console.php'); 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /phpunit.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | ./app 6 | 7 | 8 | 9 | 10 | ./tests/Feature 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /app/Http/Controllers/Auth/LoginController.php: -------------------------------------------------------------------------------- 1 | attempt($credentials)) { 20 | return $this->responseUnauthorized(); 21 | } 22 | 23 | // Get the user data. 24 | $user = auth()->user(); 25 | 26 | return response()->json([ 27 | 'status' => 200, 28 | 'message' => 'Authorized.', 29 | 'access_token' => $token, 30 | 'token_type' => 'bearer', 31 | 'expires_in' => auth()->factory()->getTTL() * 60, 32 | 'user' => array( 33 | 'id' => $user->hashid, 34 | 'name' => $user->name 35 | ) 36 | ], 200); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /.github/workflows/laravel.yml: -------------------------------------------------------------------------------- 1 | name: Laravel 2 | 3 | on: 4 | push: 5 | branches: [ master ] 6 | pull_request: 7 | branches: [ master ] 8 | 9 | jobs: 10 | laravel-tests: 11 | 12 | runs-on: ubuntu-latest 13 | 14 | steps: 15 | - uses: actions/checkout@v2 16 | - name: Copy .env 17 | run: php -r "file_exists('.env') || copy('.env.example', '.env');" 18 | - name: Setup PHP 19 | uses: shivammathur/setup-php@v2 20 | with: 21 | php-version: '7.4' 22 | - name: Install Dependencies 23 | run: composer install -q --no-ansi --no-interaction --no-scripts --no-progress --prefer-dist 24 | - name: Generate key 25 | run: php artisan key:generate 26 | - name: Directory Permissions 27 | run: chmod -R 777 storage bootstrap/cache 28 | - name: Create Database 29 | run: | 30 | mkdir -p database 31 | touch database/database.sqlite 32 | - name: Execute tests (Unit and Feature tests) via PHPUnit 33 | env: 34 | DB_CONNECTION: sqlite 35 | DB_DATABASE: database/database.sqlite 36 | run: vendor/bin/phpunit 37 | -------------------------------------------------------------------------------- /docs/code-standards.md: -------------------------------------------------------------------------------- 1 | # Code Standards 2 | 3 | The .editorconfig defines code standards for spacing and indents. 4 | 5 | ### PHP 6 | 7 | This project follows the same code standards as Laravel itself. 8 | 9 | PHP files use [PSR-2](https://github.com/php-fig/fig-standards/blob/master/accepted/PSR-2-coding-style-guide.md) code standards. 10 | 11 | A PHP code sniffer is automatically installed by Composer when you install this project. The rules are defined in phpcs.xml. 12 | 13 | Before committing PHP code you can validate it against the code standards with: 14 | 15 | `vendor/bin/phpcs` 16 | 17 | To automatically fix validation issues, use: 18 | 19 | `vendor/bin/phpcbf` 20 | 21 | Pre-commit Git hooks may be added at a later date. 22 | 23 | ### Javascript 24 | 25 | We use eslint for javascript linting. You can install globally using: 26 | 27 | `npm i -g eslint` 28 | 29 | We follow the Airbnb Javascript Style Guide: 30 | https://github.com/airbnb/javascript 31 | 32 | To lint code from the command line, run: 33 | `eslint resources/*` 34 | 35 | To automatically fix validation issues, use: 36 | `eslint resources/* --fix` 37 | -------------------------------------------------------------------------------- /config/cors.php: -------------------------------------------------------------------------------- 1 | ['api/*'], 10 | 11 | /* 12 | * Matches the request method. `[*]` allows all methods. 13 | */ 14 | 'allowed_methods' => ['*'], 15 | 16 | /* 17 | * Matches the request origin. `[*]` allows all origins. 18 | */ 19 | 'allowed_origins' => ['*'], 20 | 21 | /* 22 | * Matches the request origin with, similar to `Request::is()` 23 | */ 24 | 'allowed_origins_patterns' => [], 25 | 26 | /* 27 | * Sets the Access-Control-Allow-Headers response header. `[*]` allows all headers. 28 | */ 29 | 'allowed_headers' => ['*'], 30 | 31 | /* 32 | * Sets the Access-Control-Expose-Headers response header. 33 | */ 34 | 'exposed_headers' => false, 35 | 36 | /* 37 | * Sets the Access-Control-Max-Age response header. 38 | */ 39 | 'max_age' => false, 40 | 41 | /* 42 | * Sets the Access-Control-Allow-Credentials header. 43 | */ 44 | 'supports_credentials' => false, 45 | ]; -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Devin Price 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /config/view.php: -------------------------------------------------------------------------------- 1 | [ 17 | resource_path('views'), 18 | ], 19 | 20 | /* 21 | |-------------------------------------------------------------------------- 22 | | Compiled View Path 23 | |-------------------------------------------------------------------------- 24 | | 25 | | This option determines where all the compiled Blade templates will be 26 | | stored for your application. Typically, this is within the storage 27 | | directory. However, as usual, you are free to change this value. 28 | | 29 | */ 30 | 31 | 'compiled' => realpath(storage_path('framework/views')), 32 | 33 | ]; 34 | -------------------------------------------------------------------------------- /tests/Feature/LogoutTest.php: -------------------------------------------------------------------------------- 1 | create([ 21 | 'password' => Hash::make('password') 22 | ]); 23 | 24 | $credentials = [ 25 | 'email' => $user['email'], 26 | 'password' => 'password' 27 | ]; 28 | 29 | $response = $this->json('POST', $this->api . '/login', $credentials); 30 | $token = $response->getData()->access_token; 31 | 32 | $response = $this->json( 33 | 'POST', 34 | $this->api . '/logout', 35 | [], 36 | ['Authorization' => 'Bearer ' . $token] 37 | ); 38 | 39 | $message = $response->getData()->message; 40 | $this->assertEquals("Successfully logged out.", $message); 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /config/services.php: -------------------------------------------------------------------------------- 1 | [ 18 | 'domain' => env('MAILGUN_DOMAIN'), 19 | 'secret' => env('MAILGUN_SECRET'), 20 | ], 21 | 22 | 'ses' => [ 23 | 'key' => env('SES_KEY'), 24 | 'secret' => env('SES_SECRET'), 25 | 'region' => env('SES_REGION', 'us-east-1'), 26 | ], 27 | 28 | 'sparkpost' => [ 29 | 'secret' => env('SPARKPOST_SECRET'), 30 | ], 31 | 32 | 'stripe' => [ 33 | 'model' => App\User::class, 34 | 'key' => env('STRIPE_KEY'), 35 | 'secret' => env('STRIPE_SECRET'), 36 | ], 37 | 38 | ]; 39 | -------------------------------------------------------------------------------- /routes/api.php: -------------------------------------------------------------------------------- 1 | 'v1/auth' 19 | ], function ($router) { 20 | Route::post('login', 'Auth\LoginController@login'); 21 | Route::post('logout', 'Auth\LogoutController@logout'); 22 | Route::post('register', 'Auth\RegisterController@register'); 23 | Route::post('forgot-password', 'Auth\ForgotPasswordController@email'); 24 | Route::post('password-reset', 'Auth\ResetPasswordController@reset'); 25 | }); 26 | 27 | // Resource Endpoints 28 | Route::group([ 29 | 'prefix' => 'v1' 30 | ], function ($router) { 31 | Route::apiResource('todo', 'TodoController'); 32 | }); 33 | 34 | // Not Found 35 | Route::fallback(function(){ 36 | return response()->json(['message' => 'Resource not found.'], 404); 37 | }); 38 | -------------------------------------------------------------------------------- /database/seeds/TodoSeeder.php: -------------------------------------------------------------------------------- 1 | $timestamp->format('Y-m-d H:i:s'), 26 | 'updated_at' => $timestamp->format('Y-m-d H:i:s'), 27 | 'user_id' => $user->id, 28 | 'value' => $faker->sentence(6), 29 | 'status' => $faker->randomElement(['open', 'closed']) 30 | ); 31 | $timestamp = $timestamp->subDay(); 32 | } 33 | 34 | // Bulk insert generated todo data for each user. 35 | DB::table('todos')->insert($todos); 36 | } 37 | 38 | $this->command->info('Todos table seeded.'); 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /resources/js/routes/routes.js: -------------------------------------------------------------------------------- 1 | import Home from '../pages/Home'; 2 | import Login from '../pages/Login'; 3 | import Dashboard from '../pages/Dashboard'; 4 | import Register from '../pages/Register'; 5 | import ForgotPassword from '../pages/ForgotPassword'; 6 | import ResetPassword from '../pages/ResetPassword'; 7 | import Archive from '../pages/Archive'; 8 | import NoMatch from '../pages/NoMatch'; 9 | 10 | const routes = [ 11 | { 12 | path: '/', 13 | exact: true, 14 | auth: true, 15 | component: Dashboard, 16 | fallback: Home, 17 | }, 18 | { 19 | path: '/login', 20 | exact: true, 21 | auth: false, 22 | component: Login, 23 | }, 24 | { 25 | path: '/register', 26 | exact: true, 27 | auth: false, 28 | component: Register, 29 | }, 30 | { 31 | path: '/forgot-password', 32 | exact: true, 33 | auth: false, 34 | component: ForgotPassword, 35 | }, 36 | { 37 | path: '/reset-password', 38 | exact: true, 39 | auth: false, 40 | component: ResetPassword, 41 | }, 42 | { 43 | path: '/archive', 44 | exact: true, 45 | auth: true, 46 | component: Archive, 47 | }, 48 | { 49 | path: '', 50 | exact: false, 51 | auth: false, 52 | component: NoMatch, 53 | }, 54 | ]; 55 | 56 | export default routes; 57 | -------------------------------------------------------------------------------- /app/Exceptions/Handler.php: -------------------------------------------------------------------------------- 1 | create([ 21 | 'password' => Hash::make('password') 22 | ]); 23 | 24 | $credentials = [ 25 | 'email' => $user['email'], 26 | 'password' => 'password' 27 | ]; 28 | 29 | $response = $this->json('POST', $this->api .'/login', $credentials); 30 | $response->assertStatus(200); 31 | $this->assertNotNull($response->getData()->access_token); 32 | } 33 | 34 | /** @test */ 35 | public function unregisteredUserCannotLogin() 36 | { 37 | $credentials = [ 38 | 'email' => 'unregistered@example.com', 39 | 'password' => 'password' 40 | ]; 41 | 42 | $response = $this->json('POST', $this->api .'/login', $credentials); 43 | $response->assertStatus(401)->assertJson([ 44 | 'status' => 401, 45 | 'errors' => [ 46 | 'Unauthorized.' 47 | ] 48 | ]); 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "scripts": { 4 | "development": "mix", 5 | "watch": "mix watch", 6 | "watch-poll": "mix watch -- --watch-options-poll=1000", 7 | "hot": "mix watch --hot", 8 | "production": "mix --production" 9 | }, 10 | "dependencies": { 11 | "axios": "^0.21.1", 12 | "bootstrap": "^5.0.1", 13 | "classnames": "^2.3.1", 14 | "cross-env": "^7.0.3", 15 | "laravel-mix": "^6.0.19", 16 | "lodash": "^4.17.21", 17 | "popper.js": "^1.16.1", 18 | "prop-types": "^15.7.2", 19 | "react": "^16.14.0", 20 | "react-dom": "^16.14.0", 21 | "react-redux": "^7.2.4", 22 | "react-router": "^5.2.0", 23 | "react-router-dom": "^5.2.0", 24 | "reactstrap": "^8.9.0", 25 | "redux": "^4.1.0", 26 | "redux-persist": "^6.0.0", 27 | "redux-thunk": "^2.3.0", 28 | "ree-validate": "3.0.2", 29 | "resolve-url-loader": "^4.0.0" 30 | }, 31 | "devDependencies": { 32 | "@babel/plugin-proposal-class-properties": "^7.13.0", 33 | "@babel/preset-react": "^7.13.13", 34 | "babel-eslint": "^10.1.0", 35 | "eslint": "^7.27.0", 36 | "eslint-config-airbnb": "^18.2.1", 37 | "eslint-plugin-import": "^2.23.4", 38 | "eslint-plugin-jsx-a11y": "^6.4.1", 39 | "eslint-plugin-react": "^7.24.0", 40 | "postcss": "^8.3.0", 41 | "sass": "^1.34.0", 42 | "sass-loader": "^11.1.1" 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /tests/Feature/RegistrationTest.php: -------------------------------------------------------------------------------- 1 | 'Name', 21 | 'email' => 'name@example.com', 22 | 'password' => 'foobar', 23 | 'password_confirmation' => 'foobar' 24 | ]; 25 | 26 | $response = $this->json('POST', $this->api . '/register', $user); 27 | $response->assertStatus(200); 28 | 29 | $this->assertDatabaseHas('users', [ 30 | 'email' => 'name@example.com' 31 | ]); 32 | } 33 | 34 | /** @test */ 35 | public function existingUserCannotRegister() 36 | { 37 | $existing_user = User::factory()->create(); 38 | $user = [ 39 | 'name' => $existing_user->name, 40 | 'email' => $existing_user->email, 41 | 'password' => 'foobar', 42 | 'password_confirmation' => 'foobar' 43 | ]; 44 | $response = $this->json('POST', $this->api . '/register', $user); 45 | 46 | $response->assertStatus(422)->assertJson([ 47 | 'status' => 422, 48 | 'errors' => [ 49 | 'email' => ['The email has already been taken.'] 50 | ] 51 | ]); 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /config/hashing.php: -------------------------------------------------------------------------------- 1 | 'bcrypt', 19 | 20 | /* 21 | |-------------------------------------------------------------------------- 22 | | Bcrypt Options 23 | |-------------------------------------------------------------------------- 24 | | 25 | | Here you may specify the configuration options that should be used when 26 | | passwords are hashed using the Bcrypt algorithm. This will allow you 27 | | to control the amount of time it takes to hash the given password. 28 | | 29 | */ 30 | 31 | 'bcrypt' => [ 32 | 'rounds' => 10, 33 | ], 34 | 35 | /* 36 | |-------------------------------------------------------------------------- 37 | | Argon Options 38 | |-------------------------------------------------------------------------- 39 | | 40 | | Here you may specify the configuration options that should be used when 41 | | passwords are hashed using the Argon algorithm. These will allow you 42 | | to control the amount of time it takes to hash the given password. 43 | | 44 | */ 45 | 46 | 'argon' => [ 47 | 'memory' => 1024, 48 | 'threads' => 2, 49 | 'time' => 2, 50 | ], 51 | 52 | ]; 53 | -------------------------------------------------------------------------------- /resources/js/store/reducers/Auth.js: -------------------------------------------------------------------------------- 1 | import * as ActionTypes from '../action-types'; 2 | import Http from '../../Http'; 3 | 4 | const defaultUser = { 5 | id: null, 6 | name: null, 7 | email: null, 8 | }; 9 | 10 | const initialState = { 11 | isAuthenticated: false, 12 | user: defaultUser, 13 | }; 14 | 15 | const authLogin = (state, payload) => { 16 | const { access_token: AccessToken, user } = payload; 17 | localStorage.setItem('access_token', AccessToken); 18 | localStorage.setItem('user', JSON.stringify(user)); 19 | Http.defaults.headers.common.Authorization = `Bearer ${AccessToken}`; 20 | const stateObj = { 21 | ...state, 22 | isAuthenticated: true, 23 | user, 24 | }; 25 | return stateObj; 26 | }; 27 | 28 | const checkAuth = (state) => { 29 | const stateObj = { 30 | ...state, 31 | isAuthenticated: !!localStorage.getItem('access_token'), 32 | user: JSON.parse(localStorage.getItem('user')), 33 | }; 34 | if (state.isAuthenticated) { 35 | Http.defaults.headers.common.Authorization = `Bearer ${localStorage.getItem( 36 | 'access_token', 37 | )}`; 38 | } 39 | return stateObj; 40 | }; 41 | 42 | const logout = (state) => { 43 | localStorage.removeItem('access_token'); 44 | localStorage.removeItem('user'); 45 | const stateObj = { 46 | ...state, 47 | isAuthenticated: false, 48 | user: defaultUser, 49 | }; 50 | return stateObj; 51 | }; 52 | 53 | const Auth = (state = initialState, { type, payload = null }) => { 54 | switch (type) { 55 | case ActionTypes.AUTH_LOGIN: 56 | return authLogin(state, payload); 57 | case ActionTypes.AUTH_CHECK: 58 | return checkAuth(state); 59 | case ActionTypes.AUTH_LOGOUT: 60 | return logout(state); 61 | default: 62 | return state; 63 | } 64 | }; 65 | 66 | export default Auth; 67 | -------------------------------------------------------------------------------- /bootstrap/app.php: -------------------------------------------------------------------------------- 1 | singleton( 30 | Illuminate\Contracts\Http\Kernel::class, 31 | App\Http\Kernel::class 32 | ); 33 | 34 | $app->singleton( 35 | Illuminate\Contracts\Console\Kernel::class, 36 | App\Console\Kernel::class 37 | ); 38 | 39 | $app->singleton( 40 | Illuminate\Contracts\Debug\ExceptionHandler::class, 41 | App\Exceptions\Handler::class 42 | ); 43 | 44 | /* 45 | |-------------------------------------------------------------------------- 46 | | Return The Application 47 | |-------------------------------------------------------------------------- 48 | | 49 | | This script returns the application instance. The instance is given to 50 | | the calling script so we can separate the building of the instances 51 | | from the actual running of the application and sending responses. 52 | | 53 | */ 54 | 55 | return $app; 56 | -------------------------------------------------------------------------------- /config/broadcasting.php: -------------------------------------------------------------------------------- 1 | env('BROADCAST_DRIVER', 'null'), 19 | 20 | /* 21 | |-------------------------------------------------------------------------- 22 | | Broadcast Connections 23 | |-------------------------------------------------------------------------- 24 | | 25 | | Here you may define all of the broadcast connections that will be used 26 | | to broadcast events to other systems or over websockets. Samples of 27 | | each available type of connection are provided inside this array. 28 | | 29 | */ 30 | 31 | 'connections' => [ 32 | 33 | 'pusher' => [ 34 | 'driver' => 'pusher', 35 | 'key' => env('PUSHER_APP_KEY'), 36 | 'secret' => env('PUSHER_APP_SECRET'), 37 | 'app_id' => env('PUSHER_APP_ID'), 38 | 'options' => [ 39 | 'cluster' => env('PUSHER_APP_CLUSTER'), 40 | 'encrypted' => true, 41 | ], 42 | ], 43 | 44 | 'redis' => [ 45 | 'driver' => 'redis', 46 | 'connection' => 'default', 47 | ], 48 | 49 | 'log' => [ 50 | 'driver' => 'log', 51 | ], 52 | 53 | 'null' => [ 54 | 'driver' => 'null', 55 | ], 56 | 57 | ], 58 | 59 | ]; 60 | -------------------------------------------------------------------------------- /app/Providers/RouteServiceProvider.php: -------------------------------------------------------------------------------- 1 | mapApiRoutes(); 39 | 40 | $this->mapWebRoutes(); 41 | 42 | // 43 | } 44 | 45 | /** 46 | * Define the "web" routes for the application. 47 | * 48 | * These routes all receive session state, CSRF protection, etc. 49 | * 50 | * @return void 51 | */ 52 | protected function mapWebRoutes() 53 | { 54 | Route::middleware('web') 55 | ->namespace($this->namespace) 56 | ->group(base_path('routes/web.php')); 57 | } 58 | 59 | /** 60 | * Define the "api" routes for the application. 61 | * 62 | * These routes are typically stateless. 63 | * 64 | * @return void 65 | */ 66 | protected function mapApiRoutes() 67 | { 68 | Route::prefix('api') 69 | ->middleware('api') 70 | ->namespace($this->namespace) 71 | ->group(base_path('routes/api.php')); 72 | } 73 | } 74 | -------------------------------------------------------------------------------- /artisan: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env php 2 | make(Illuminate\Contracts\Console\Kernel::class); 34 | 35 | $status = $kernel->handle( 36 | $input = new Symfony\Component\Console\Input\ArgvInput, 37 | new Symfony\Component\Console\Output\ConsoleOutput 38 | ); 39 | 40 | /* 41 | |-------------------------------------------------------------------------- 42 | | Shutdown The Application 43 | |-------------------------------------------------------------------------- 44 | | 45 | | Once Artisan has finished running, we will fire off the shutdown events 46 | | so that any final work may be done by the application before we shut 47 | | down the process. This is the last thing to happen to the request. 48 | | 49 | */ 50 | 51 | $kernel->terminate($input, $status); 52 | 53 | exit($status); 54 | -------------------------------------------------------------------------------- /resources/js/components/Header.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { connect } from 'react-redux'; 3 | import { Link } from 'react-router-dom'; 4 | import { 5 | Nav, 6 | NavItem, 7 | NavLink, 8 | UncontrolledDropdown, 9 | DropdownToggle, 10 | DropdownMenu, 11 | DropdownItem, 12 | } from 'reactstrap'; 13 | import * as actions from '../store/actions'; 14 | 15 | class Header extends Component { 16 | handleLogout = (e) => { 17 | e.preventDefault(); 18 | this.props.dispatch(actions.authLogout()); 19 | }; 20 | 21 | render() { 22 | return ( 23 |
24 |

25 | Laravel React 26 |

27 | 28 | {this.props.isAuthenticated && ( 29 |
30 | 49 |
50 | )} 51 |
52 | ); 53 | } 54 | } 55 | 56 | const mapStateToProps = (state) => ({ 57 | isAuthenticated: state.Auth.isAuthenticated, 58 | }); 59 | 60 | export default connect(mapStateToProps)(Header); 61 | -------------------------------------------------------------------------------- /composer.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "devinsays/laravel-react-bootstrap", 3 | "description": "Example to do app built with Laravel and React.", 4 | "license": "MIT", 5 | "type": "project", 6 | "require": { 7 | "php": "^7.4.0", 8 | "fideloper/proxy": "^4.2", 9 | "fruitcake/laravel-cors": "^1.0", 10 | "guzzlehttp/guzzle": "^7.0.1", 11 | "laravel/framework": "^8.0", 12 | "laravel/tinker": "^2.0", 13 | "hashids/hashids": "^4.0", 14 | "tymon/jwt-auth": "^1.0.0", 15 | "laravel/ui": "^3.0" 16 | }, 17 | "require-dev": { 18 | "facade/ignition": "^2.3.6", 19 | "fzaninotto/faker": "^1.9.1", 20 | "mockery/mockery": "^1.3.1", 21 | "nunomaduro/collision": "^5.0", 22 | "phpunit/phpunit": "^9.0" 23 | }, 24 | "config": { 25 | "optimize-autoloader": true, 26 | "preferred-install": "dist", 27 | "sort-packages": true 28 | }, 29 | "extra": { 30 | "laravel": { 31 | "dont-discover": [] 32 | } 33 | }, 34 | "autoload": { 35 | "psr-4": { 36 | "App\\": "app/" 37 | }, 38 | "classmap": [ 39 | "database/seeds", 40 | "database/factories" 41 | ] 42 | }, 43 | "autoload-dev": { 44 | "psr-4": { 45 | "Tests\\": "tests/" 46 | } 47 | }, 48 | "minimum-stability": "dev", 49 | "prefer-stable": true, 50 | "scripts": { 51 | "post-autoload-dump": [ 52 | "Illuminate\\Foundation\\ComposerScripts::postAutoloadDump", 53 | "@php artisan package:discover --ansi" 54 | ], 55 | "post-root-package-install": [ 56 | "@php -r \"file_exists('.env') || copy('.env.example', '.env');\"" 57 | ], 58 | "post-create-project-cmd": [ 59 | "@php artisan key:generate --ansi" 60 | ] 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /app/Http/Controllers/Auth/ForgotPasswordController.php: -------------------------------------------------------------------------------- 1 | middleware('guest'); 33 | } 34 | 35 | /** 36 | * Send a reset link to the given user. 37 | * 38 | * @param \Illuminate\Http\Request $request 39 | * @return \Illuminate\Http\Response 40 | */ 41 | public function email(Request $request) 42 | { 43 | 44 | $validator = Validator::make( 45 | $request->only('email'), 46 | ['email' => 'required|string|email|max:255|exists:users,email'], 47 | ['exists' => "We couldn't find an account with that email."] 48 | ); 49 | 50 | if ($validator->fails()) { 51 | return $this->responseUnprocessable($validator->errors()); 52 | } 53 | 54 | $response = $this->sendResetLinkEmail($request); 55 | 56 | if ($response) { 57 | return $this->responseSuccess('Email reset link sent.'); 58 | } else { 59 | return $this->responseServerError(); 60 | } 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /public/index.php: -------------------------------------------------------------------------------- 1 | 8 | */ 9 | 10 | define('LARAVEL_START', microtime(true)); 11 | 12 | /* 13 | |-------------------------------------------------------------------------- 14 | | Register The Auto Loader 15 | |-------------------------------------------------------------------------- 16 | | 17 | | Composer provides a convenient, automatically generated class loader for 18 | | our application. We just need to utilize it! We'll simply require it 19 | | into the script here so that we don't have to worry about manual 20 | | loading any of our classes later on. It feels great to relax. 21 | | 22 | */ 23 | 24 | require __DIR__.'/../vendor/autoload.php'; 25 | 26 | /* 27 | |-------------------------------------------------------------------------- 28 | | Turn On The Lights 29 | |-------------------------------------------------------------------------- 30 | | 31 | | We need to illuminate PHP development, so let us turn on the lights. 32 | | This bootstraps the framework and gets it ready for use, then it 33 | | will load up this application so that we can run it and send 34 | | the responses back to the browser and delight our users. 35 | | 36 | */ 37 | 38 | $app = require_once __DIR__.'/../bootstrap/app.php'; 39 | 40 | /* 41 | |-------------------------------------------------------------------------- 42 | | Run The Application 43 | |-------------------------------------------------------------------------- 44 | | 45 | | Once we have the application, we can handle the incoming request 46 | | through the kernel, and send the associated response back to 47 | | the client's browser allowing them to enjoy the creative 48 | | and wonderful application we have prepared for them. 49 | | 50 | */ 51 | 52 | $kernel = $app->make(Illuminate\Contracts\Http\Kernel::class); 53 | 54 | $response = $kernel->handle( 55 | $request = Illuminate\Http\Request::capture() 56 | ); 57 | 58 | $response->send(); 59 | 60 | $kernel->terminate($request, $response); 61 | -------------------------------------------------------------------------------- /app/Http/Controllers/Auth/RegisterController.php: -------------------------------------------------------------------------------- 1 | all(), [ 31 | 'name' => 'required|string|max:255', 32 | 'email' => 'required|string|email|max:255|unique:users', 33 | 'password' => 'required|string|min:6|confirmed', 34 | ]); 35 | 36 | if ($validator->fails()) { 37 | return $this->responseUnprocessable($validator->errors()); 38 | } 39 | 40 | try { 41 | $user = $this->create($request->all()); 42 | return $this->responseSuccess('Registered successfully.'); 43 | } catch (Exception $e) { 44 | return $this->responseServerError('Registration error.'); 45 | } 46 | } 47 | 48 | /** 49 | * Create a new user instance after a valid registration. 50 | * 51 | * @param array $data 52 | * @return \App\User 53 | */ 54 | protected function create(array $data) 55 | { 56 | return User::create([ 57 | 'name' => $data['name'], 58 | 'email' => $data['email'], 59 | 'password' => Hash::make($data['password']), 60 | ]); 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /resources/js/services/authService.js: -------------------------------------------------------------------------------- 1 | import Http from '../Http'; 2 | import * as action from '../store/actions'; 3 | 4 | export function login(credentials) { 5 | return (dispatch) => new Promise((resolve, reject) => { 6 | Http.post('/api/v1/auth/login', credentials) 7 | .then((res) => { 8 | dispatch(action.authLogin(res.data)); 9 | return resolve(); 10 | }) 11 | .catch((err) => { 12 | const { status, errors } = err.response.data; 13 | const data = { 14 | status, 15 | errors, 16 | }; 17 | return reject(data); 18 | }); 19 | }); 20 | } 21 | 22 | export function register(credentials) { 23 | return (dispatch) => new Promise((resolve, reject) => { 24 | Http.post('/api/v1/auth/register', credentials) 25 | .then((res) => resolve(res.data)) 26 | .catch((err) => { 27 | const { status, errors } = err.response.data; 28 | const data = { 29 | status, 30 | errors, 31 | }; 32 | return reject(data); 33 | }); 34 | }); 35 | } 36 | 37 | export function resetPassword(credentials) { 38 | return (dispatch) => new Promise((resolve, reject) => { 39 | Http.post('/api/v1/auth/forgot-password', credentials) 40 | .then((res) => resolve(res.data)) 41 | .catch((err) => { 42 | const { status, errors } = err.response.data; 43 | const data = { 44 | status, 45 | errors, 46 | }; 47 | return reject(data); 48 | }); 49 | }); 50 | } 51 | 52 | export function updatePassword(credentials) { 53 | return (dispatch) => new Promise((resolve, reject) => { 54 | Http.post('/api/v1/auth/password-reset', credentials) 55 | .then((res) => { 56 | const { status } = res.data.status; 57 | if (status === 202) { 58 | const data = { 59 | error: res.data.message, 60 | status, 61 | }; 62 | return reject(data); 63 | } 64 | return resolve(res); 65 | }) 66 | .catch((err) => { 67 | const { status, errors } = err.response.data; 68 | const data = { 69 | status, 70 | errors, 71 | }; 72 | return reject(data); 73 | }); 74 | }); 75 | } 76 | -------------------------------------------------------------------------------- /docs/api-format.md: -------------------------------------------------------------------------------- 1 | # API Format 2 | 3 | An API request should always return properly formatted JSON with the correct HTTP status code. 4 | 5 | Common status codes used in this application: 6 | 7 | * 200 - OK 8 | * 201 - Created (Resource Created) 9 | * 400 - Bad Request 10 | * 401 - Unauthorized 11 | * 404 - Not found (Resource, Resource Collection, or API endpoint not found) 12 | * 405 - Method Not Allowed 13 | * 422 - Unprocessable Entity (If parameters are missing or have errors) 14 | * 499 - Token required 15 | 16 | The following status codes are handled by the API automatically unless overridden: 17 | 18 | * 404 19 | * 405 20 | * 500 21 | 22 | ### Basic Response 23 | 24 | A basic response should include: 25 | 26 | * status int|required 27 | * message string|required 28 | * details string|optional 29 | 30 | Additional parameters are optional. 31 | 32 | Example: 33 | 34 | ``` 35 | { 36 | "status": 200 37 | "message": "API status message." 38 | } 39 | ``` 40 | 41 | ### Error Response 42 | 43 | * status int|required 44 | * errors array|required 45 | 46 | Example with validation error: 47 | 48 | ``` 49 | { 50 | "status": 422 51 | "errors": [ 52 | "The token field is required.", 53 | "The email field is required.", 54 | "The password field is required." 55 | ] 56 | } 57 | ``` 58 | 59 | ### GET: Resource Response 60 | 61 | * status int|required 62 | * data array|required 63 | 64 | Example: 65 | 66 | ``` 67 | { 68 | "status" : 200, 69 | "data":[{ 70 | "name": "Devin Price", 71 | "slug": "devin-price", 72 | "created_at": "2018-06-04 16:37:24" 73 | }] 74 | } 75 | ``` 76 | 77 | ### POST: Resource Response 78 | 79 | * status int|required 80 | * message string|required 81 | 82 | Example: 83 | 84 | ``` 85 | { 86 | "status": 201, 87 | "message": "Resource created." 88 | } 89 | ``` 90 | 91 | ### GET: Collection Response 92 | 93 | * status int|required 94 | * data array|required 95 | * links object|required 96 | * first 97 | * last 98 | * prev 99 | * next 100 | * meta object|required 101 | * current_page 102 | * from 103 | * last_page 104 | * path 105 | * per_page 106 | * to 107 | * total 108 | -------------------------------------------------------------------------------- /config/filesystems.php: -------------------------------------------------------------------------------- 1 | env('FILESYSTEM_DRIVER', 'local'), 17 | 18 | /* 19 | |-------------------------------------------------------------------------- 20 | | Default Cloud Filesystem Disk 21 | |-------------------------------------------------------------------------- 22 | | 23 | | Many applications store files both locally and in the cloud. For this 24 | | reason, you may specify a default "cloud" driver here. This driver 25 | | will be bound as the Cloud disk implementation in the container. 26 | | 27 | */ 28 | 29 | 'cloud' => env('FILESYSTEM_CLOUD', 's3'), 30 | 31 | /* 32 | |-------------------------------------------------------------------------- 33 | | Filesystem Disks 34 | |-------------------------------------------------------------------------- 35 | | 36 | | Here you may configure as many filesystem "disks" as you wish, and you 37 | | may even configure multiple disks of the same driver. Defaults have 38 | | been setup for each driver as an example of the required options. 39 | | 40 | | Supported Drivers: "local", "ftp", "sftp", "s3", "rackspace" 41 | | 42 | */ 43 | 44 | 'disks' => [ 45 | 46 | 'local' => [ 47 | 'driver' => 'local', 48 | 'root' => storage_path('app'), 49 | ], 50 | 51 | 'public' => [ 52 | 'driver' => 'local', 53 | 'root' => storage_path('app/public'), 54 | 'url' => env('APP_URL').'/storage', 55 | 'visibility' => 'public', 56 | ], 57 | 58 | 's3' => [ 59 | 'driver' => 's3', 60 | 'key' => env('AWS_ACCESS_KEY_ID'), 61 | 'secret' => env('AWS_SECRET_ACCESS_KEY'), 62 | 'region' => env('AWS_DEFAULT_REGION'), 63 | 'bucket' => env('AWS_BUCKET'), 64 | 'url' => env('AWS_URL'), 65 | ], 66 | 67 | ], 68 | 69 | ]; 70 | -------------------------------------------------------------------------------- /config/logging.php: -------------------------------------------------------------------------------- 1 | env('LOG_CHANNEL', 'stack'), 19 | 20 | /* 21 | |-------------------------------------------------------------------------- 22 | | Log Channels 23 | |-------------------------------------------------------------------------- 24 | | 25 | | Here you may configure the log channels for your application. Out of 26 | | the box, Laravel uses the Monolog PHP logging library. This gives 27 | | you a variety of powerful log handlers / formatters to utilize. 28 | | 29 | | Available Drivers: "single", "daily", "slack", "syslog", 30 | | "errorlog", "monolog", 31 | | "custom", "stack" 32 | | 33 | */ 34 | 35 | 'channels' => [ 36 | 'stack' => [ 37 | 'driver' => 'stack', 38 | 'channels' => ['single'], 39 | ], 40 | 41 | 'single' => [ 42 | 'driver' => 'single', 43 | 'path' => storage_path('logs/laravel.log'), 44 | 'level' => 'debug', 45 | ], 46 | 47 | 'daily' => [ 48 | 'driver' => 'daily', 49 | 'path' => storage_path('logs/laravel.log'), 50 | 'level' => 'debug', 51 | 'days' => 7, 52 | ], 53 | 54 | 'slack' => [ 55 | 'driver' => 'slack', 56 | 'url' => env('LOG_SLACK_WEBHOOK_URL'), 57 | 'username' => 'Laravel Log', 58 | 'emoji' => ':boom:', 59 | 'level' => 'critical', 60 | ], 61 | 62 | 'stderr' => [ 63 | 'driver' => 'monolog', 64 | 'handler' => StreamHandler::class, 65 | 'with' => [ 66 | 'stream' => 'php://stderr', 67 | ], 68 | ], 69 | 70 | 'syslog' => [ 71 | 'driver' => 'syslog', 72 | 'level' => 'debug', 73 | ], 74 | 75 | 'errorlog' => [ 76 | 'driver' => 'errorlog', 77 | 'level' => 'debug', 78 | ], 79 | ], 80 | 81 | ]; 82 | -------------------------------------------------------------------------------- /app/Http/Kernel.php: -------------------------------------------------------------------------------- 1 | [ 32 | \App\Http\Middleware\EncryptCookies::class, 33 | \Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse::class, 34 | \Illuminate\Session\Middleware\StartSession::class, 35 | // \Illuminate\Session\Middleware\AuthenticateSession::class, 36 | \Illuminate\View\Middleware\ShareErrorsFromSession::class, 37 | \App\Http\Middleware\VerifyCsrfToken::class, 38 | \Illuminate\Routing\Middleware\SubstituteBindings::class, 39 | ], 40 | 41 | 'api' => [ 42 | 'throttle:60,1', 43 | 'bindings', 44 | ], 45 | ]; 46 | 47 | /** 48 | * The application's route middleware. 49 | * 50 | * These middleware may be assigned to groups or used individually. 51 | * 52 | * @var array 53 | */ 54 | protected $routeMiddleware = [ 55 | 'auth' => \Illuminate\Auth\Middleware\Authenticate::class, 56 | 'auth.basic' => \Illuminate\Auth\Middleware\AuthenticateWithBasicAuth::class, 57 | 'bindings' => \Illuminate\Routing\Middleware\SubstituteBindings::class, 58 | 'cache.headers' => \Illuminate\Http\Middleware\SetCacheHeaders::class, 59 | 'can' => \Illuminate\Auth\Middleware\Authorize::class, 60 | 'guest' => \App\Http\Middleware\RedirectIfAuthenticated::class, 61 | 'signed' => \Illuminate\Routing\Middleware\ValidateSignature::class, 62 | 'throttle' => \Illuminate\Routing\Middleware\ThrottleRequests::class, 63 | 'jwt.auth' => \Tymon\JWTAuth\Middleware\GetUserFromToken::class, 64 | 'jwt.refresh' => \Tymon\JWTAuth\Middleware\RefreshToken::class, 65 | ]; 66 | } 67 | -------------------------------------------------------------------------------- /app/Notifications/ResetPassword.php: -------------------------------------------------------------------------------- 1 | token = $token; 48 | $this->user_id = $user_id; 49 | } 50 | 51 | /** 52 | * Get the notification's channels. 53 | * 54 | * @param mixed $notifiable 55 | * @return array|string 56 | */ 57 | public function via($notifiable) 58 | { 59 | return ['mail']; 60 | } 61 | 62 | /** 63 | * Build the mail representation of the notification. 64 | * 65 | * @param mixed $notifiable 66 | * @return \Illuminate\Notifications\Messages\MailMessage 67 | */ 68 | public function toMail($notifiable) 69 | { 70 | if (static::$toMailCallback) { 71 | return call_user_func(static::$toMailCallback, $notifiable, $this->token); 72 | } 73 | 74 | return (new MailMessage) 75 | ->line('You are receiving this email because we received a password reset request for your account.') 76 | ->action('Reset Password', url(config('app.url').route('password.reset', ['id' => $this->user_id, 'token' => $this->token], false))) 77 | ->line('If you did not request a password reset, no further action is required.'); 78 | } 79 | 80 | /** 81 | * Set a callback that should be used when building the notification mail message. 82 | * 83 | * @param \Closure $callback 84 | * @return void 85 | */ 86 | public static function toMailUsing($callback) 87 | { 88 | static::$toMailCallback = $callback; 89 | } 90 | } 91 | -------------------------------------------------------------------------------- /app/Http/Controllers/Auth/ResetPasswordController.php: -------------------------------------------------------------------------------- 1 | middleware('guest'); 35 | } 36 | 37 | /** 38 | * Reset the given user's password. 39 | * 40 | * @param \Illuminate\Http\Request $request 41 | * @return \Illuminate\Http\Response 42 | */ 43 | public function reset(Request $request) 44 | { 45 | 46 | if ($request->id) { 47 | // If request contains an id, we'll use that to fetch email. 48 | $user = User::where('id', $request->id)->first(); 49 | if ($user) { 50 | $request->request->add(['email' => $user->email]); 51 | } 52 | } 53 | 54 | $validator = Validator::make( 55 | $request->all(), 56 | $this->rules(), 57 | $this->validationErrorMessages() 58 | ); 59 | 60 | if ($validator->fails()) { 61 | return $this->responseUnprocessable($validator->errors()); 62 | } 63 | 64 | // Here we will attempt to reset the user's password. If it is successful we 65 | // will update the password on an actual user model and persist it to the 66 | // database. Otherwise we will parse the error and return the response. 67 | $response = $this->broker()->reset( 68 | $this->credentials($request), 69 | function ($user, $password) { 70 | $this->resetPassword($user, $password); 71 | } 72 | ); 73 | 74 | if ($response == Password::PASSWORD_RESET) { 75 | return $this->responseSuccess('Password reset successful.'); 76 | } else { 77 | return $this->responseServerError('Password reset failed.'); 78 | } 79 | } 80 | } 81 | -------------------------------------------------------------------------------- /app/User.php: -------------------------------------------------------------------------------- 1 | hasMany(Todo::class); 50 | } 51 | 52 | /** 53 | * Encodes the user id and returns the unique hash. 54 | * 55 | * @return string Hashid 56 | */ 57 | public function hashid() 58 | { 59 | return Hasher::encode($this->id); 60 | } 61 | 62 | /** 63 | * Returns the hashid for a custom attribute. 64 | * 65 | * @return string Hashid 66 | */ 67 | public function getHashidAttribute() 68 | { 69 | return $this->hashid(); 70 | } 71 | 72 | /** 73 | * Get the identifier that will be stored in the subject claim of the JWT. 74 | * 75 | * @return mixed 76 | */ 77 | public function getJWTIdentifier() 78 | { 79 | return $this->getKey(); 80 | } 81 | 82 | /** 83 | * Return a key value array, containing any custom claims to be added to the JWT. 84 | * 85 | * @return array 86 | */ 87 | public function getJWTCustomClaims() 88 | { 89 | return []; 90 | } 91 | 92 | /** 93 | * Allows us to customize the password notification email. 94 | * See: App/Notifications/ResetPassword.php 95 | * 96 | * @param string 97 | */ 98 | public function sendPasswordResetNotification($token) 99 | { 100 | $email = $this->getEmailForPasswordReset(); 101 | $user = $this::where('email', $email)->first(); 102 | $this->notify(new ResetPasswordNotification($token, $user->id)); 103 | } 104 | } 105 | -------------------------------------------------------------------------------- /config/queue.php: -------------------------------------------------------------------------------- 1 | env('QUEUE_DRIVER', 'sync'), 17 | 18 | /* 19 | |-------------------------------------------------------------------------- 20 | | Queue Connections 21 | |-------------------------------------------------------------------------- 22 | | 23 | | Here you may configure the connection information for each server that 24 | | is used by your application. A default configuration has been added 25 | | for each back-end shipped with Laravel. You are free to add more. 26 | | 27 | | Drivers: "sync", "database", "beanstalkd", "sqs", "redis", "null" 28 | | 29 | */ 30 | 31 | 'connections' => [ 32 | 33 | 'sync' => [ 34 | 'driver' => 'sync', 35 | ], 36 | 37 | 'database' => [ 38 | 'driver' => 'database', 39 | 'table' => 'jobs', 40 | 'queue' => 'default', 41 | 'retry_after' => 90, 42 | ], 43 | 44 | 'beanstalkd' => [ 45 | 'driver' => 'beanstalkd', 46 | 'host' => 'localhost', 47 | 'queue' => 'default', 48 | 'retry_after' => 90, 49 | ], 50 | 51 | 'sqs' => [ 52 | 'driver' => 'sqs', 53 | 'key' => env('SQS_KEY', 'your-public-key'), 54 | 'secret' => env('SQS_SECRET', 'your-secret-key'), 55 | 'prefix' => env('SQS_PREFIX', 'https://sqs.us-east-1.amazonaws.com/your-account-id'), 56 | 'queue' => env('SQS_QUEUE', 'your-queue-name'), 57 | 'region' => env('SQS_REGION', 'us-east-1'), 58 | ], 59 | 60 | 'redis' => [ 61 | 'driver' => 'redis', 62 | 'connection' => 'default', 63 | 'queue' => 'default', 64 | 'retry_after' => 90, 65 | 'block_for' => null, 66 | ], 67 | 68 | ], 69 | 70 | /* 71 | |-------------------------------------------------------------------------- 72 | | Failed Queue Jobs 73 | |-------------------------------------------------------------------------- 74 | | 75 | | These options configure the behavior of failed queue job logging so you 76 | | can control which database and table are used to store the jobs that 77 | | have failed. You may change them to any database / table you wish. 78 | | 79 | */ 80 | 81 | 'failed' => [ 82 | 'database' => env('DB_CONNECTION', 'mysql'), 83 | 'table' => 'failed_jobs', 84 | ], 85 | 86 | ]; 87 | -------------------------------------------------------------------------------- /app/Http/Controllers/APIController.php: -------------------------------------------------------------------------------- 1 | json([ 19 | 'status' => 200, 20 | 'message' => $message, 21 | ], 200); 22 | } 23 | 24 | /** 25 | * Returns a resource updated success message (200) JSON response. 26 | * 27 | * @param string $message 28 | * @return \Illuminate\Http\JsonResponse 29 | */ 30 | public function responseResourceUpdated($message = 'Resource updated.') 31 | { 32 | return response()->json([ 33 | 'status' => 200, 34 | 'message' => $message, 35 | ], 200); 36 | } 37 | 38 | /** 39 | * Returns a resource created (201) JSON response. 40 | * 41 | * @param string $message 42 | * @return \Illuminate\Http\JsonResponse 43 | */ 44 | public function responseResourceCreated($message = 'Resource created.') 45 | { 46 | return response()->json([ 47 | 'status' => 201, 48 | 'message' => $message, 49 | ], 201); 50 | } 51 | 52 | /** 53 | * Returns a resource deleted (204) JSON response. 54 | * 55 | * @param string $message 56 | * @return \Illuminate\Http\JsonResponse 57 | */ 58 | public function responseResourceDeleted($message = 'Resource deleted.') 59 | { 60 | return response()->json([ 61 | 'status' => 204, 62 | 'message' => $message, 63 | ], 204); 64 | } 65 | 66 | /** 67 | * Returns an unauthorized (401) JSON response. 68 | * 69 | * @param array $errors 70 | * @return \Illuminate\Http\JsonResponse 71 | */ 72 | public function responseUnauthorized($errors = ['Unauthorized.']) 73 | { 74 | return response()->json([ 75 | 'status' => 401, 76 | 'errors' => $errors, 77 | ], 401); 78 | } 79 | 80 | /** 81 | * Returns a unprocessable entity (422) JSON response. 82 | * 83 | * @param array $errors 84 | * @return \Illuminate\Http\JsonResponse 85 | */ 86 | public function responseUnprocessable($errors) 87 | { 88 | return response()->json([ 89 | 'status' => 422, 90 | 'errors' => $errors, 91 | ], 422); 92 | } 93 | 94 | /** 95 | * Returns a server error (500) JSON response. 96 | * 97 | * @param array $errors 98 | * @return \Illuminate\Http\JsonResponse 99 | */ 100 | public function responseServerError($errors = ['Server error.']) 101 | { 102 | return response()->json([ 103 | 'status' => 500, 104 | 'errors' => $errors 105 | ], 500); 106 | } 107 | } 108 | -------------------------------------------------------------------------------- /app/Http/Controllers/ApiController.php: -------------------------------------------------------------------------------- 1 | json([ 19 | 'status' => 200, 20 | 'message' => $message, 21 | ], 200); 22 | } 23 | 24 | /** 25 | * Returns a resource updated success message (200) JSON response. 26 | * 27 | * @param string $message 28 | * @return \Illuminate\Http\JsonResponse 29 | */ 30 | public function responseResourceUpdated($message = 'Resource updated.') 31 | { 32 | return response()->json([ 33 | 'status' => 200, 34 | 'message' => $message, 35 | ], 200); 36 | } 37 | 38 | /** 39 | * Returns a resource created (201) JSON response. 40 | * 41 | * @param string $message 42 | * @return \Illuminate\Http\JsonResponse 43 | */ 44 | public function responseResourceCreated($message = 'Resource created.') 45 | { 46 | return response()->json([ 47 | 'status' => 201, 48 | 'message' => $message, 49 | ], 201); 50 | } 51 | 52 | /** 53 | * Returns a resource deleted (204) JSON response. 54 | * 55 | * @param string $message 56 | * @return \Illuminate\Http\JsonResponse 57 | */ 58 | public function responseResourceDeleted($message = 'Resource deleted.') 59 | { 60 | return response()->json([ 61 | 'status' => 204, 62 | 'message' => $message, 63 | ], 204); 64 | } 65 | 66 | /** 67 | * Returns an unauthorized (401) JSON response. 68 | * 69 | * @param array $errors 70 | * @return \Illuminate\Http\JsonResponse 71 | */ 72 | public function responseUnauthorized($errors = ['Unauthorized.']) 73 | { 74 | return response()->json([ 75 | 'status' => 401, 76 | 'errors' => $errors, 77 | ], 401); 78 | } 79 | 80 | /** 81 | * Returns a unprocessable entity (422) JSON response. 82 | * 83 | * @param array $errors 84 | * @return \Illuminate\Http\JsonResponse 85 | */ 86 | public function responseUnprocessable($errors) 87 | { 88 | return response()->json([ 89 | 'status' => 422, 90 | 'errors' => $errors, 91 | ], 422); 92 | } 93 | 94 | /** 95 | * Returns a server error (500) JSON response. 96 | * 97 | * @param array $errors 98 | * @return \Illuminate\Http\JsonResponse 99 | */ 100 | public function responseServerError($errors = ['Server error.']) 101 | { 102 | return response()->json([ 103 | 'status' => 500, 104 | 'errors' => $errors 105 | ], 500); 106 | } 107 | } 108 | -------------------------------------------------------------------------------- /resources/sass/app.scss: -------------------------------------------------------------------------------- 1 | // Variables 2 | @import "variables"; 3 | 4 | // Bootstrap 5 | @import '~bootstrap/scss/bootstrap'; 6 | 7 | // General 8 | .grid { 9 | display: grid; 10 | } 11 | 12 | a { 13 | text-decoration: none; 14 | 15 | &:hover { 16 | text-decoration: underline; 17 | } 18 | } 19 | 20 | img { 21 | max-width: 100%; 22 | height: auto; 23 | } 24 | 25 | .form-group { 26 | margin-bottom: 1rem; 27 | } 28 | 29 | label { 30 | margin-bottom: 0.5rem; 31 | } 32 | 33 | // Buttons 34 | $btn-size-base: 1rem; 35 | 36 | .btn { 37 | transition: all 0.2s ease; 38 | 39 | &-loading { 40 | pointer-events: none; 41 | cursor: default; 42 | color: transparent; 43 | position: relative; 44 | 45 | &::after, 46 | &::before { 47 | content: ''; 48 | position: absolute; 49 | top: 50%; 50 | left: 50%; 51 | width: $btn-size-base * 1.5; 52 | height: $btn-size-base * 1.5; 53 | margin-top: -(($btn-size-base * 1.5)/2); 54 | margin-left: -(($btn-size-base * 1.5)/2); 55 | border-radius: 100%; 56 | border: ($btn-size-base * 0.3) solid transparent; 57 | } 58 | 59 | &::before { 60 | border-color: rgba(0, 0, 0, 0.15); 61 | } 62 | 63 | &::after { 64 | border-color: white transparent transparent; 65 | animation: btn-spin 0.6s linear; 66 | animation-iteration-count: infinite; 67 | } 68 | } 69 | } 70 | 71 | @keyframes btn-spin { 72 | from { 73 | transform: rotate(0); 74 | } 75 | 76 | to { 77 | transform: rotate(360deg); 78 | } 79 | } 80 | 81 | // Header 82 | header { 83 | border-bottom: 1px solid #EBEDF8; 84 | z-index: 10; 85 | padding: 20px $grid-gutter-width/2; 86 | @include media-breakpoint-up(md) { 87 | display: grid; 88 | grid-template-columns: 1fr 4fr; 89 | padding: 0; 90 | } 91 | 92 | .logo { 93 | @include media-breakpoint-up(md) { 94 | padding: 15px $grid-gutter-width/2; 95 | } 96 | } 97 | 98 | .navigation { 99 | @include media-breakpoint-up(md) { 100 | padding: 15px $grid-gutter-width/2; 101 | } 102 | } 103 | } 104 | 105 | // Login Page 106 | .section-about { 107 | display: flex; 108 | justify-content: center; 109 | align-items: center; 110 | } 111 | 112 | // Login Form 113 | .section-login { 114 | h4 { 115 | margin-bottom: 1.5rem; 116 | @include media-breakpoint-up(lg) { 117 | text-align: center; 118 | } 119 | } 120 | 121 | .card-body { 122 | padding: 3rem; 123 | } 124 | 125 | .form-remember { 126 | font-size: 0.9rem; 127 | } 128 | 129 | .btn-primary { 130 | width: 100%; 131 | border-radius: 20px; 132 | } 133 | 134 | .login-invite-text { 135 | font-size: 0.9rem; 136 | } 137 | 138 | .password-reset-link { 139 | font-size: 0.9rem; 140 | } 141 | } 142 | -------------------------------------------------------------------------------- /config/cache.php: -------------------------------------------------------------------------------- 1 | env('CACHE_DRIVER', 'file'), 18 | /* 19 | |-------------------------------------------------------------------------- 20 | | Cache Stores 21 | |-------------------------------------------------------------------------- 22 | | 23 | | Here you may define all of the cache "stores" for your application as 24 | | well as their drivers. You may even define multiple stores for the 25 | | same cache driver to group types of items stored in your caches. 26 | | 27 | */ 28 | 'stores' => [ 29 | 'apc' => [ 30 | 'driver' => 'apc', 31 | ], 32 | 'array' => [ 33 | 'driver' => 'array', 34 | ], 35 | 'database' => [ 36 | 'driver' => 'database', 37 | 'table' => 'cache', 38 | 'connection' => null, 39 | ], 40 | 'file' => [ 41 | 'driver' => 'file', 42 | 'path' => storage_path('framework/cache/data'), 43 | ], 44 | 'memcached' => [ 45 | 'driver' => 'memcached', 46 | 'persistent_id' => env('MEMCACHED_PERSISTENT_ID'), 47 | 'sasl' => [ 48 | env('MEMCACHED_USERNAME'), 49 | env('MEMCACHED_PASSWORD'), 50 | ], 51 | 'options' => [ 52 | // Memcached::OPT_CONNECT_TIMEOUT => 2000, 53 | ], 54 | 'servers' => [ 55 | [ 56 | 'host' => env('MEMCACHED_HOST', '127.0.0.1'), 57 | 'port' => env('MEMCACHED_PORT', 11211), 58 | 'weight' => 100, 59 | ], 60 | ], 61 | ], 62 | 'redis' => [ 63 | 'driver' => 'redis', 64 | 'connection' => 'cache', 65 | ], 66 | 'dynamodb' => [ 67 | 'driver' => 'dynamodb', 68 | 'key' => env('AWS_ACCESS_KEY_ID'), 69 | 'secret' => env('AWS_SECRET_ACCESS_KEY'), 70 | 'region' => env('AWS_DEFAULT_REGION', 'us-east-1'), 71 | 'table' => env('DYNAMODB_CACHE_TABLE', 'cache'), 72 | 'endpoint' => env('DYNAMODB_ENDPOINT'), 73 | ], 74 | ], 75 | /* 76 | |-------------------------------------------------------------------------- 77 | | Cache Key Prefix 78 | |-------------------------------------------------------------------------- 79 | | 80 | | When utilizing a RAM based store such as APC or Memcached, there might 81 | | be other applications utilizing the same cache. So, we'll specify a 82 | | value to get prefixed to all our keys so we can avoid collisions. 83 | | 84 | */ 85 | 'prefix' => env('CACHE_PREFIX', Str::slug(env('APP_NAME', 'laravel'), '_').'_cache'), 86 | ]; 87 | -------------------------------------------------------------------------------- /tests/Feature/PasswordResetTest.php: -------------------------------------------------------------------------------- 1 | json('POST', $this->api . '/forgot-password'); 24 | $response->assertStatus(422)->assertJson([ 25 | 'status' => 422, 26 | 'errors' => [ 27 | 'email' => ['The email field is required.'] 28 | ] 29 | ]); 30 | } 31 | 32 | /** @test */ 33 | public function passwordEmailEndpointWithEmail() 34 | { 35 | // Post to the API with a properly formatted email not in database. 36 | $response = $this->json('POST', $this->api . '/forgot-password', ['email' => 'test@example.com']); 37 | $response->assertStatus(422)->assertJson([ 38 | 'status' => 422, 39 | 'errors' => [ 40 | 'email' => ['We couldn\'t find an account with that email.'] 41 | ] 42 | ]); 43 | 44 | // Post to the API with a properly formatted email that is in database. 45 | $user = User::factory()->create(); 46 | $response = $this->json('POST', $this->api . '/forgot-password', ['email' => $user['email']]); 47 | $response->assertStatus(200)->assertJson([ 48 | 'status' => 200, 49 | 'message' => 'Email reset link sent.' 50 | ]); 51 | } 52 | 53 | /** @test */ 54 | public function passwordResetEndpointWithoutCredentials() 55 | { 56 | // Post to the API without an proper credentials. 57 | $response = $this->json('POST', $this->api . '/password-reset'); 58 | 59 | $response->assertStatus(422)->assertJson([ 60 | 'status' => 422, 61 | 'errors' => [ 62 | "token" => ["The token field is required."], 63 | "email" => ["The email field is required."], 64 | "password" => ["The password field is required."] 65 | ] 66 | ]); 67 | } 68 | 69 | /** @test */ 70 | public function passwordResetNotificationAndReset() 71 | { 72 | // Allows us to capture the email notification. 73 | Notification::fake(); 74 | 75 | // Create a user. 76 | $user = User::factory()->create(); 77 | $token = ''; 78 | 79 | $response = $this->json('POST', $this->api . '/forgot-password', ['email' => $user['email']]); 80 | 81 | // Verifies email sent and fetches token. 82 | Notification::assertSentTo( 83 | [$user], 84 | ResetPassword::class, 85 | function ($notification, $channels) use (&$token) { 86 | $token = $notification->token; 87 | return true; 88 | } 89 | ); 90 | 91 | // Posts to password reset endpoint. 92 | $response = $this->postJson($this->api . '/password-reset', [ 93 | 'email' => $user->email, 94 | 'token' => $token, 95 | 'password' => 'password', 96 | 'password_confirmation' => 'password' 97 | ]); 98 | 99 | // Assert API returns correct response. 100 | $response->assertStatus(200); 101 | $message = $response->getData()->message; 102 | $this->assertEquals("Password reset successful.", $message); 103 | 104 | // Fetch fresh $user data. 105 | $user = User::where('id', $user->id)->first(); 106 | 107 | // Assert that the password *actually* was reset. 108 | $this->assertTrue(Hash::check('password', $user->password)); 109 | } 110 | } 111 | -------------------------------------------------------------------------------- /.php_cs: -------------------------------------------------------------------------------- 1 | setRules(array( 5 | '@PSR2' => true, 6 | 'array_indentation' => true, 7 | 'array_syntax' => array('syntax' => 'short'), 8 | 'combine_consecutive_unsets' => true, 9 | 'method_separation' => true, 10 | 'no_multiline_whitespace_before_semicolons' => true, 11 | 'single_quote' => true, 12 | 13 | 'binary_operator_spaces' => array( 14 | 'align_double_arrow' => false, 15 | 'align_equals' => false, 16 | ), 17 | // 'blank_line_after_opening_tag' => true, 18 | // 'blank_line_before_return' => true, 19 | 'braces' => array( 20 | 'allow_single_line_closure' => true, 21 | ), 22 | // 'cast_spaces' => true, 23 | // 'class_definition' => array('singleLine' => true), 24 | 'concat_space' => array('spacing' => 'one'), 25 | 'declare_equal_normalize' => true, 26 | 'function_typehint_space' => true, 27 | 'hash_to_slash_comment' => true, 28 | 'include' => true, 29 | 'lowercase_cast' => true, 30 | // 'native_function_casing' => true, 31 | // 'new_with_braces' => true, 32 | // 'no_blank_lines_after_class_opening' => true, 33 | // 'no_blank_lines_after_phpdoc' => true, 34 | // 'no_empty_comment' => true, 35 | // 'no_empty_phpdoc' => true, 36 | // 'no_empty_statement' => true, 37 | 'no_extra_consecutive_blank_lines' => array( 38 | 'curly_brace_block', 39 | 'extra', 40 | 'parenthesis_brace_block', 41 | 'square_brace_block', 42 | 'throw', 43 | 'use', 44 | ), 45 | // 'no_leading_import_slash' => true, 46 | // 'no_leading_namespace_whitespace' => true, 47 | // 'no_mixed_echo_print' => array('use' => 'echo'), 48 | 'no_multiline_whitespace_around_double_arrow' => true, 49 | // 'no_short_bool_cast' => true, 50 | // 'no_singleline_whitespace_before_semicolons' => true, 51 | 'no_spaces_around_offset' => true, 52 | // 'no_trailing_comma_in_list_call' => true, 53 | // 'no_trailing_comma_in_singleline_array' => true, 54 | // 'no_unneeded_control_parentheses' => true, 55 | // 'no_unused_imports' => true, 56 | 'no_whitespace_before_comma_in_array' => true, 57 | 'no_whitespace_in_blank_line' => true, 58 | // 'normalize_index_brace' => true, 59 | 'object_operator_without_whitespace' => true, 60 | // 'php_unit_fqcn_annotation' => true, 61 | // 'phpdoc_align' => true, 62 | // 'phpdoc_annotation_without_dot' => true, 63 | // 'phpdoc_indent' => true, 64 | // 'phpdoc_inline_tag' => true, 65 | // 'phpdoc_no_access' => true, 66 | // 'phpdoc_no_alias_tag' => true, 67 | // 'phpdoc_no_empty_return' => true, 68 | // 'phpdoc_no_package' => true, 69 | // 'phpdoc_no_useless_inheritdoc' => true, 70 | // 'phpdoc_return_self_reference' => true, 71 | // 'phpdoc_scalar' => true, 72 | // 'phpdoc_separation' => true, 73 | // 'phpdoc_single_line_var_spacing' => true, 74 | // 'phpdoc_summary' => true, 75 | // 'phpdoc_to_comment' => true, 76 | // 'phpdoc_trim' => true, 77 | // 'phpdoc_types' => true, 78 | // 'phpdoc_var_without_name' => true, 79 | // 'pre_increment' => true, 80 | // 'return_type_declaration' => true, 81 | // 'self_accessor' => true, 82 | // 'short_scalar_cast' => true, 83 | 'single_blank_line_before_namespace' => true, 84 | // 'single_class_element_per_statement' => true, 85 | // 'space_after_semicolon' => true, 86 | // 'standardize_not_equals' => true, 87 | 'ternary_operator_spaces' => true, 88 | // 'trailing_comma_in_multiline_array' => true, 89 | 'trim_array_spaces' => true, 90 | 'unary_operator_spaces' => true, 91 | 'whitespace_after_comma_in_array' => true, 92 | )) 93 | //->setIndent("\t") 94 | ->setLineEnding("\n") 95 | ; 96 | -------------------------------------------------------------------------------- /config/auth.php: -------------------------------------------------------------------------------- 1 | [ 17 | 'guard' => 'api', 18 | 'passwords' => 'users', 19 | ], 20 | 21 | /* 22 | |-------------------------------------------------------------------------- 23 | | Authentication Guards 24 | |-------------------------------------------------------------------------- 25 | | 26 | | Next, you may define every authentication guard for your application. 27 | | Of course, a great default configuration has been defined for you 28 | | here which uses session storage and the Eloquent user provider. 29 | | 30 | | All authentication drivers have a user provider. This defines how the 31 | | users are actually retrieved out of your database or other storage 32 | | mechanisms used by this application to persist your user's data. 33 | | 34 | | Supported: "session", "token" 35 | | 36 | */ 37 | 38 | 'guards' => [ 39 | 'api' => [ 40 | 'driver' => 'jwt', 41 | 'provider' => 'users', 42 | ], 43 | ], 44 | 45 | /* 46 | |-------------------------------------------------------------------------- 47 | | User Providers 48 | |-------------------------------------------------------------------------- 49 | | 50 | | All authentication drivers have a user provider. This defines how the 51 | | users are actually retrieved out of your database or other storage 52 | | mechanisms used by this application to persist your user's data. 53 | | 54 | | If you have multiple user tables or models you may configure multiple 55 | | sources which represent each model / table. These sources may then 56 | | be assigned to any extra authentication guards you have defined. 57 | | 58 | | Supported: "database", "eloquent" 59 | | 60 | */ 61 | 62 | 'providers' => [ 63 | 'users' => [ 64 | 'driver' => 'eloquent', 65 | 'model' => App\User::class, 66 | ], 67 | 68 | // 'users' => [ 69 | // 'driver' => 'database', 70 | // 'table' => 'users', 71 | // ], 72 | ], 73 | 74 | /* 75 | |-------------------------------------------------------------------------- 76 | | Resetting Passwords 77 | |-------------------------------------------------------------------------- 78 | | 79 | | You may specify multiple password reset configurations if you have more 80 | | than one user table or model in the application and you want to have 81 | | separate password reset settings based on the specific user types. 82 | | 83 | | The expire time is the number of minutes that the reset token should be 84 | | considered valid. This security feature keeps tokens short-lived so 85 | | they have less time to be guessed. You may change this as needed. 86 | | 87 | */ 88 | 89 | 'passwords' => [ 90 | 'users' => [ 91 | 'provider' => 'users', 92 | 'table' => 'password_resets', 93 | 'expire' => 60, 94 | 'throttle' => 60, 95 | ], 96 | ], 97 | 98 | /* 99 | |-------------------------------------------------------------------------- 100 | | Password Confirmation Timeout 101 | |-------------------------------------------------------------------------- 102 | | 103 | | Here you may define the amount of seconds before a password confirmation 104 | | times out and the user is prompted to re-enter their password via the 105 | | confirmation screen. By default, the timeout lasts for three hours. 106 | | 107 | */ 108 | 109 | 'password_timeout' => 10800, 110 | 111 | ]; 112 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # Laravel React To Do App 2 | 3 | An example To Do App built with Laravel and React. It includes: 4 | 5 | - An auth API, using [tymon/jwt-auth](https://github.com/tymondesigns/jwt-auth) to manage the JSON Web Tokens. 6 | - Routing with react-router (private, public and split routes). 7 | - [Feature tests](https://github.com/devinsays/laravel-react-bootstrap/blob/master/docs/automated-testing.md). 8 | - [Database seeding](https://github.com/devinsays/laravel-react-bootstrap/blob/master/docs/database-seeds.md). 9 | - A base ApiController to help return [standardized responses](https://github.com/devinsays/laravel-react-bootstrap/blob/master/docs/api-format.md). 10 | - Bootstrap for styling. 11 | 12 | Use it as a base for quick prototypes or to learn from. Suggestions, recommendations, and pull requests welcome! 13 | 14 | ## Demo Site 15 | 16 | View a demo of the app at [laravelreact.com](https://laravelreact.com/). 17 | 18 | (Password resets will not be sent from this server. Data will be cleared on a regular basis.) 19 | 20 | ## Development Environment 21 | 22 | This project runs on a LEMP stack (Linux, NGINX, MySQL, & PHP). 23 | 24 | The backend built with Laravel. The frontend is 100% React. 25 | 26 | If you don't already have a LEMP environment running, [Valet](https://laravel.com/docs/valet) is a good option for OSX. 27 | 28 | ## Set Up 29 | 30 | #### Clone the repository: 31 | 32 | ```bash 33 | git clone https://github.com/devinsays/laravel-react-bootstrap 34 | ``` 35 | 36 | #### Create your environment file: 37 | 38 | ```bash 39 | cp .env.example .env 40 | ``` 41 | 42 | _The app key is used to salt passwords. If you need to work with production data you'll want to use the same app key as defined in the .env file in production so password hashes match._ 43 | 44 | #### Update these settings in the .env file: 45 | 46 | - DB_DATABASE (your local database, i.e. "todo") 47 | - DB_USERNAME (your local db username, i.e. "root") 48 | - DB_PASSWORD (your local db password, i.e. "") 49 | - HASHIDS_SALT (use the app key or match the variable used in production) 50 | 51 | #### Install PHP dependencies: 52 | 53 | ```bash 54 | composer install 55 | ``` 56 | 57 | _If you don't have Composer installed, [instructions here](https://getcomposer.org/)._ 58 | 59 | #### Generate an app key: 60 | 61 | ```bash 62 | php artisan key:generate 63 | ``` 64 | 65 | #### Generate JWT keys for the .env file: 66 | 67 | ```bash 68 | php artisan jwt:secret 69 | ``` 70 | 71 | #### Run the database migrations: 72 | 73 | ```bash 74 | php artisan migrate 75 | ``` 76 | 77 | #### Install Javascript dependencies: 78 | 79 | ```bash 80 | npm install 81 | ``` 82 | 83 | _If you don't have Node and NPM installed, [instructions here](https://www.npmjs.com/get-npm)._ 84 | 85 | #### Run an initial build: 86 | 87 | ```bash 88 | npm run development 89 | ``` 90 | 91 | ### Additional Set Up Tips 92 | 93 | #### Database Seeding 94 | 95 | If you need sample data to work with, you can seed the database: 96 | 97 | ``` 98 | php artisan migrate:refresh --seed --force 99 | ``` 100 | 101 | Read more in [/docs/database-seeds.md](https://github.com/devinsays/laravel-react-bootstrap/blob/master/docs/database-seeds.md). 102 | 103 | #### Seeded User 104 | 105 | After seeding the database, you can log in with these credentials: 106 | 107 | Email: `user@test.dev` 108 | Password: `password` 109 | 110 | #### Email Driver 111 | 112 | Laravel sends emails for password resets. The default for MAIL_DRIVER in .env.example is log. You can view logged emails in storage/logs/laravel.log. 113 | 114 | ## Other Notes 115 | 116 | **Internal Docs:** 117 | 118 | - [Code Standards](https://github.com/devinsays/laravel-react-bootstrap/blob/master/docs/code-standards.md) 119 | - [Automated Testing](https://github.com/devinsays/laravel-react-bootstrap/blob/master/docs/automated-testing.md) 120 | - [Database Seeding](https://github.com/devinsays/laravel-react-bootstrap/blob/master/docs/database-seeds.md) 121 | 122 | **Laravel Docs:** 123 | 124 | [https://laravel.com/docs/](https://laravel.com/docs/) 125 | 126 | **Valet Tutorial:** 127 | 128 | [https://scotch.io/tutorials/use-laravel-valet-for-a-super-quick-dev-server](https://scotch.io/tutorials/use-laravel-valet-for-a-super-quick-dev-server) 129 | -------------------------------------------------------------------------------- /resources/js/pages/Archive.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { connect } from 'react-redux'; 3 | import classNames from 'classnames'; 4 | import Http from '../Http'; 5 | 6 | class Archive extends Component { 7 | constructor(props) { 8 | super(props); 9 | 10 | this.state = { 11 | loading: true, 12 | data: {}, 13 | apiMore: '', 14 | moreLoaded: false, 15 | error: false, 16 | }; 17 | 18 | // API Endpoint 19 | this.api = '/api/v1/todo'; 20 | } 21 | 22 | componentDidMount() { 23 | Http.get(this.api) 24 | .then((response) => { 25 | const { data } = response.data; 26 | const apiMore = response.data.links.next; 27 | this.setState({ 28 | data, 29 | apiMore, 30 | loading: false, 31 | error: false, 32 | }); 33 | }) 34 | .catch(() => { 35 | this.setState({ 36 | error: 'Unable to fetch data.', 37 | }); 38 | }); 39 | } 40 | 41 | loadMore = () => { 42 | this.setState({ loading: true }); 43 | Http.get(this.state.apiMore) 44 | .then((response) => { 45 | const { data } = response.data; 46 | const apiMore = response.data.links.next; 47 | const dataMore = this.state.data.concat(data); 48 | this.setState({ 49 | data: dataMore, 50 | apiMore, 51 | loading: false, 52 | moreLoaded: true, 53 | error: false, 54 | }); 55 | }) 56 | .catch(() => { 57 | this.setState({ 58 | error: 'Unable to fetch data.', 59 | }); 60 | }); 61 | }; 62 | 63 | deleteTodo = (e) => { 64 | const { key } = e.target.dataset; 65 | const { data: todos } = this.state; 66 | 67 | Http.delete(`${this.api}/${key}`) 68 | .then((response) => { 69 | if (response.status === 204) { 70 | const index = todos.findIndex( 71 | (todo) => parseInt(todo.id, 10) === parseInt(key, 10), 72 | ); 73 | const update = [...todos.slice(0, index), ...todos.slice(index + 1)]; 74 | this.setState({ data: update }); 75 | } 76 | }) 77 | .catch((error) => { 78 | console.log(error); 79 | }); 80 | }; 81 | 82 | render() { 83 | const { loading, error, apiMore } = this.state; 84 | const todos = Array.from(this.state.data); 85 | 86 | return ( 87 |
88 |

To Do Archive

89 | 90 | {error && ( 91 |
92 |

{error}

93 |
94 | )} 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | {todos.map((todo) => ( 105 | 106 | 107 | 108 | 109 | 119 | 120 | ))} 121 | 122 |
TimeTo DoStatusAction
{todo.created_at}{todo.value}{todo.status} 110 | 118 |
123 | 124 | {apiMore && ( 125 |
126 | 134 |
135 | )} 136 | 137 | {apiMore === null && this.state.moreLoaded === true && ( 138 |
139 |

Everything loaded.

140 |
141 | )} 142 |
143 | ); 144 | } 145 | } 146 | 147 | const mapStateToProps = (state) => ({ 148 | isAuthenticated: state.Auth.isAuthenticated, 149 | user: state.Auth.user, 150 | }); 151 | 152 | export default connect(mapStateToProps)(Archive); 153 | -------------------------------------------------------------------------------- /config/database.php: -------------------------------------------------------------------------------- 1 | env('DB_CONNECTION', 'mysql'), 17 | 18 | /* 19 | |-------------------------------------------------------------------------- 20 | | Database Connections 21 | |-------------------------------------------------------------------------- 22 | | 23 | | Here are each of the database connections setup for your application. 24 | | Of course, examples of configuring each database platform that is 25 | | supported by Laravel is shown below to make development simple. 26 | | 27 | | 28 | | All database work in Laravel is done through the PHP PDO facilities 29 | | so make sure you have the driver for your particular database of 30 | | choice installed on your machine before you begin development. 31 | | 32 | */ 33 | 34 | 'connections' => [ 35 | 36 | 'sqlite' => [ 37 | 'driver' => 'sqlite', 38 | 'database' => env('DB_DATABASE', database_path('database.sqlite')), 39 | 'prefix' => '', 40 | ], 41 | 42 | 'mysql' => [ 43 | 'driver' => 'mysql', 44 | 'host' => env('DB_HOST', '127.0.0.1'), 45 | 'port' => env('DB_PORT', '3306'), 46 | 'database' => env('DB_DATABASE', 'forge'), 47 | 'username' => env('DB_USERNAME', 'forge'), 48 | 'password' => env('DB_PASSWORD', ''), 49 | 'unix_socket' => env('DB_SOCKET', ''), 50 | 'charset' => 'utf8mb4', 51 | 'collation' => 'utf8mb4_unicode_ci', 52 | 'prefix' => '', 53 | 'strict' => true, 54 | 'engine' => null, 55 | 'timezone' => '+00:00' 56 | ], 57 | 58 | 'pgsql' => [ 59 | 'driver' => 'pgsql', 60 | 'host' => env('DB_HOST', '127.0.0.1'), 61 | 'port' => env('DB_PORT', '5432'), 62 | 'database' => env('DB_DATABASE', 'forge'), 63 | 'username' => env('DB_USERNAME', 'forge'), 64 | 'password' => env('DB_PASSWORD', ''), 65 | 'charset' => 'utf8', 66 | 'prefix' => '', 67 | 'schema' => 'public', 68 | 'sslmode' => 'prefer', 69 | ], 70 | 71 | 'sqlsrv' => [ 72 | 'driver' => 'sqlsrv', 73 | 'host' => env('DB_HOST', 'localhost'), 74 | 'port' => env('DB_PORT', '1433'), 75 | 'database' => env('DB_DATABASE', 'forge'), 76 | 'username' => env('DB_USERNAME', 'forge'), 77 | 'password' => env('DB_PASSWORD', ''), 78 | 'charset' => 'utf8', 79 | 'prefix' => '', 80 | ], 81 | 82 | ], 83 | 84 | /* 85 | |-------------------------------------------------------------------------- 86 | | Migration Repository Table 87 | |-------------------------------------------------------------------------- 88 | | 89 | | This table keeps track of all the migrations that have already run for 90 | | your application. Using this information, we can determine which of 91 | | the migrations on disk haven't actually been run in the database. 92 | | 93 | */ 94 | 95 | 'migrations' => 'migrations', 96 | 97 | /* 98 | |-------------------------------------------------------------------------- 99 | | Redis Databases 100 | |-------------------------------------------------------------------------- 101 | | 102 | | Redis is an open source, fast, and advanced key-value store that also 103 | | provides a richer set of commands than a typical key-value systems 104 | | such as APC or Memcached. Laravel makes it easy to dig right in. 105 | | 106 | */ 107 | 108 | 'redis' => [ 109 | 110 | 'client' => 'predis', 111 | 112 | 'default' => [ 113 | 'host' => env('REDIS_HOST', '127.0.0.1'), 114 | 'password' => env('REDIS_PASSWORD', null), 115 | 'port' => env('REDIS_PORT', 6379), 116 | 'database' => 0, 117 | ], 118 | 119 | ], 120 | 121 | ]; 122 | -------------------------------------------------------------------------------- /resources/js/pages/Dashboard.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { connect } from 'react-redux'; 3 | import Http from '../Http'; 4 | 5 | class Dashboard extends Component { 6 | constructor(props) { 7 | super(props); 8 | 9 | // Initial state. 10 | this.state = { 11 | todo: null, 12 | error: false, 13 | data: [], 14 | }; 15 | 16 | // API endpoint. 17 | this.api = '/api/v1/todo'; 18 | } 19 | 20 | componentDidMount() { 21 | Http.get(`${this.api}?status=open`) 22 | .then((response) => { 23 | const { data } = response.data; 24 | this.setState({ 25 | data, 26 | error: false, 27 | }); 28 | }) 29 | .catch(() => { 30 | this.setState({ 31 | error: 'Unable to fetch data.', 32 | }); 33 | }); 34 | } 35 | 36 | handleChange = (e) => { 37 | const { name, value } = e.target; 38 | this.setState({ [name]: value }); 39 | }; 40 | 41 | handleSubmit = (e) => { 42 | e.preventDefault(); 43 | const { todo } = this.state; 44 | this.addTodo(todo); 45 | }; 46 | 47 | addTodo = (todo) => { 48 | Http.post(this.api, { value: todo }) 49 | .then(({ data }) => { 50 | const newItem = { 51 | id: data.id, 52 | value: todo, 53 | }; 54 | const allTodos = [newItem, ...this.state.data]; 55 | this.setState({ data: allTodos, todo: null }); 56 | this.todoForm.reset(); 57 | }) 58 | .catch(() => { 59 | this.setState({ 60 | error: 'Sorry, there was an error saving your to do.', 61 | }); 62 | }); 63 | }; 64 | 65 | closeTodo = (e) => { 66 | const { key } = e.target.dataset; 67 | const { data: todos } = this.state; 68 | 69 | Http.patch(`${this.api}/${key}`, { status: 'closed' }) 70 | .then(() => { 71 | const updatedTodos = todos.filter( 72 | (todo) => todo.id !== parseInt(key, 10), 73 | ); 74 | this.setState({ data: updatedTodos }); 75 | }) 76 | .catch(() => { 77 | this.setState({ 78 | error: 'Sorry, there was an error closing your to do.', 79 | }); 80 | }); 81 | }; 82 | 83 | render() { 84 | const { data, error } = this.state; 85 | 86 | return ( 87 |
88 |
89 |

Add a To Do

90 |
{ 94 | this.todoForm = el; 95 | }} 96 | > 97 |
98 | 99 |
100 | 107 | 110 |
111 |
112 |
113 |
114 | 115 | {error && ( 116 |
117 | {error} 118 |
119 | )} 120 | 121 |
122 |

Open To Dos

123 | 124 | 125 | 126 | 127 | 128 | 129 | {data.map((todo) => ( 130 | 131 | 132 | 142 | 143 | ))} 144 | 145 |
To DoAction
{todo.value} 133 | 141 |
146 |
147 |
148 | ); 149 | } 150 | } 151 | 152 | const mapStateToProps = (state) => ({ 153 | isAuthenticated: state.Auth.isAuthenticated, 154 | user: state.Auth.user, 155 | }); 156 | 157 | export default connect(mapStateToProps)(Dashboard); 158 | -------------------------------------------------------------------------------- /config/mail.php: -------------------------------------------------------------------------------- 1 | env('MAIL_DRIVER', 'smtp'), 20 | 21 | /* 22 | |-------------------------------------------------------------------------- 23 | | SMTP Host Address 24 | |-------------------------------------------------------------------------- 25 | | 26 | | Here you may provide the host address of the SMTP server used by your 27 | | applications. A default option is provided that is compatible with 28 | | the Mailgun mail service which will provide reliable deliveries. 29 | | 30 | */ 31 | 32 | 'host' => env('MAIL_HOST', 'smtp.mailgun.org'), 33 | 34 | /* 35 | |-------------------------------------------------------------------------- 36 | | SMTP Host Port 37 | |-------------------------------------------------------------------------- 38 | | 39 | | This is the SMTP port used by your application to deliver e-mails to 40 | | users of the application. Like the host we have set this value to 41 | | stay compatible with the Mailgun e-mail application by default. 42 | | 43 | */ 44 | 45 | 'port' => env('MAIL_PORT', 587), 46 | 47 | /* 48 | |-------------------------------------------------------------------------- 49 | | Global "From" Address 50 | |-------------------------------------------------------------------------- 51 | | 52 | | You may wish for all e-mails sent by your application to be sent from 53 | | the same address. Here, you may specify a name and address that is 54 | | used globally for all e-mails that are sent by your application. 55 | | 56 | */ 57 | 58 | 'from' => [ 59 | 'address' => env('MAIL_FROM_ADDRESS', 'hello@example.com'), 60 | 'name' => env('MAIL_FROM_NAME', 'Example'), 61 | ], 62 | 63 | /* 64 | |-------------------------------------------------------------------------- 65 | | E-Mail Encryption Protocol 66 | |-------------------------------------------------------------------------- 67 | | 68 | | Here you may specify the encryption protocol that should be used when 69 | | the application send e-mail messages. A sensible default using the 70 | | transport layer security protocol should provide great security. 71 | | 72 | */ 73 | 74 | 'encryption' => env('MAIL_ENCRYPTION', 'tls'), 75 | 76 | /* 77 | |-------------------------------------------------------------------------- 78 | | SMTP Server Username 79 | |-------------------------------------------------------------------------- 80 | | 81 | | If your SMTP server requires a username for authentication, you should 82 | | set it here. This will get used to authenticate with your server on 83 | | connection. You may also set the "password" value below this one. 84 | | 85 | */ 86 | 87 | 'username' => env('MAIL_USERNAME'), 88 | 89 | 'password' => env('MAIL_PASSWORD'), 90 | 91 | /* 92 | |-------------------------------------------------------------------------- 93 | | Sendmail System Path 94 | |-------------------------------------------------------------------------- 95 | | 96 | | When using the "sendmail" driver to send e-mails, we will need to know 97 | | the path to where Sendmail lives on this server. A default path has 98 | | been provided here, which will work well on most of your systems. 99 | | 100 | */ 101 | 102 | 'sendmail' => '/usr/sbin/sendmail -bs', 103 | 104 | /* 105 | |-------------------------------------------------------------------------- 106 | | Markdown Mail Settings 107 | |-------------------------------------------------------------------------- 108 | | 109 | | If you are using Markdown based email rendering, you may configure your 110 | | theme and component paths here, allowing you to customize the design 111 | | of the emails. Or, you may simply stick with the Laravel defaults! 112 | | 113 | */ 114 | 115 | 'markdown' => [ 116 | 'theme' => 'default', 117 | 118 | 'paths' => [ 119 | resource_path('views/vendor/mail'), 120 | ], 121 | ], 122 | 123 | ]; 124 | -------------------------------------------------------------------------------- /tests/Feature/TodoTest.php: -------------------------------------------------------------------------------- 1 | 'Example todo.', 20 | 'status' => 'open' 21 | ]; 22 | 23 | /** @test */ 24 | public function unregisteredUserCannotStoreTodo() 25 | { 26 | $response = $this->json('POST', $this->api_todo, $this->todo); 27 | $response->assertStatus(401); 28 | } 29 | 30 | /** @test */ 31 | public function registeredUserCanStoreTodo() 32 | { 33 | 34 | $user = User::factory()->create(); 35 | $response = $this->actingAs($user)->json('POST', $this->api_todo, $this->todo); 36 | $response->assertStatus(201); 37 | 38 | $this->assertDatabaseHas('todos', [ 39 | 'id' => $response->getData()->id, 40 | ]); 41 | } 42 | 43 | /** @test */ 44 | public function userCanDeleteTheirTodo() 45 | { 46 | $user = User::factory()->create(); 47 | $todo = Todo::factory()->create(['user_id' => $user->id]); 48 | 49 | $endpoint = $this->api_todo . '/' . $todo->id; 50 | 51 | $response = $this->actingAs($user)->json('DELETE', $endpoint); 52 | $response->assertStatus(204); 53 | 54 | $this->assertDatabaseMissing('todos', [ 55 | 'id' => $todo->id, 56 | ]); 57 | } 58 | 59 | /** @test */ 60 | public function userCannotDeleteDifferentUserTodo() 61 | { 62 | $user = User::factory()->create(); 63 | $author = User::factory()->create(); 64 | $todo = Todo::factory()->create(['user_id' => $author->id]); 65 | 66 | $endpoint = $this->api_todo . '/' . $todo->id; 67 | 68 | $response = $this->actingAs($user)->json('DELETE', $endpoint); 69 | $response->assertStatus(401); 70 | 71 | $this->assertDatabaseHas('todos', [ 72 | 'id' => $todo->id, 73 | ]); 74 | } 75 | 76 | /** @test */ 77 | public function userCanPatchTheirTodo() 78 | { 79 | $user = User::factory()->create(); 80 | $todo = Todo::factory()->create([ 81 | 'user_id' => $user->id, 82 | 'status' => 'open' 83 | ]); 84 | 85 | $endpoint = $this->api_todo . '/' . $todo->id; 86 | 87 | $response = $this->actingAs($user)->json('PATCH', $endpoint, ['status' => 'closed']); 88 | $response->assertStatus(200); 89 | 90 | $this->assertDatabaseHas('todos', [ 91 | 'id' => $todo->id, 92 | 'status' => 'closed' 93 | ]); 94 | } 95 | 96 | /** @test */ 97 | public function userCannotPatchDifferentUserTodo() 98 | { 99 | $user = User::factory()->create(); 100 | $author = User::factory()->create(); 101 | $todo = Todo::factory()->create([ 102 | 'user_id' => $author->id, 103 | 'status' => 'open' 104 | ]); 105 | 106 | $endpoint = $this->api_todo . '/' . $todo->id; 107 | 108 | $response = $this->actingAs($user)->json('PATCH', $endpoint, ['status' => 'closed']); 109 | $response->assertStatus(401); 110 | 111 | $this->assertDatabaseHas('todos', [ 112 | 'id' => $todo->id, 113 | 'status' => 'open' 114 | ]); 115 | } 116 | 117 | /** @test */ 118 | public function userCanGetTheirTodos() 119 | { 120 | $user = User::factory()->create(); 121 | $todo = Todo::factory()->count(20)->create([ 122 | 'user_id' => $user->id, 123 | 'status' => 'open' 124 | ]); 125 | $todo = Todo::factory()->count(30)->create([ 126 | 'user_id' => $user->id, 127 | 'status' => 'closed' 128 | ]); 129 | 130 | // Verifies todo count is correct at /todos endpoints. 131 | $response = $this->actingAs($user)->json('GET', $this->api_todo); 132 | $response->assertStatus(200); 133 | $this->assertEquals(50, $response->getData()->meta->total); 134 | 135 | // Verifies todo count is when 'open' query string is set. 136 | $response = $this->actingAs($user)->json('GET', $this->api_todo . '?status=open'); 137 | $response->assertStatus(200); 138 | 139 | // Verifies pagination is working correctly with query string. 140 | $this->assertEquals(20, $response->getData()->meta->total); 141 | $this->assertStringContainsString('status=open&page=2', $response->getData()->links->next); 142 | 143 | // Verifies todo count is when 'closed' query string is set. 144 | $response = $this->actingAs($user)->json('GET', $this->api_todo . '?status=closed'); 145 | $response->assertStatus(200); 146 | 147 | // Verifies pagination is working correctly with query string. 148 | $this->assertEquals(30, $response->getData()->meta->total); 149 | $this->assertStringContainsString('status=closed&page=2', $response->getData()->links->next); 150 | } 151 | } 152 | -------------------------------------------------------------------------------- /app/Http/Controllers/TodoController.php: -------------------------------------------------------------------------------- 1 | setRequest($request)->user()) { 23 | return $this->responseUnauthorized(); 24 | } 25 | 26 | $collection = Todo::where('user_id', $user->id); 27 | 28 | // Check query string filters. 29 | if ($status = $request->query('status')) { 30 | if ('open' === $status || 'closed' === $status) { 31 | $collection = $collection->where('status', $status); 32 | } 33 | } 34 | 35 | $collection = $collection->latest()->paginate(); 36 | 37 | // Appends "status" to pagination links if present in the query. 38 | if ($status) { 39 | $collection = $collection->appends('status', $status); 40 | } 41 | 42 | return new TodoCollection($collection); 43 | } 44 | 45 | /** 46 | * Store a newly created resource in storage. 47 | * 48 | * @param \Illuminate\Http\Request $request 49 | * @return \Illuminate\Http\Response 50 | */ 51 | public function store(Request $request) 52 | { 53 | // Get user from $request token. 54 | if (! $user = auth()->setRequest($request)->user()) { 55 | return $this->responseUnauthorized(); 56 | } 57 | 58 | // Validate all the required parameters have been sent. 59 | $validator = Validator::make($request->all(), [ 60 | 'value' => 'required', 61 | ]); 62 | 63 | if ($validator->fails()) { 64 | return $this->responseUnprocessable($validator->errors()); 65 | } 66 | 67 | // Warning: Data isn't being fully sanitized yet. 68 | try { 69 | $todo = Todo::create([ 70 | 'user_id' => $user->id, 71 | 'value' => request('value'), 72 | ]); 73 | return response()->json([ 74 | 'status' => 201, 75 | 'message' => 'Resource created.', 76 | 'id' => $todo->id 77 | ], 201); 78 | } catch (Exception $e) { 79 | return $this->responseServerError('Error creating resource.'); 80 | } 81 | } 82 | 83 | /** 84 | * Display the specified resource. 85 | * 86 | * @param int $id 87 | * @return \Illuminate\Http\Response 88 | */ 89 | public function show($id) 90 | { 91 | // Get user from $request token. 92 | if (! $user = auth()->setRequest($request)->user()) { 93 | return $this->responseUnauthorized(); 94 | } 95 | 96 | // User can only acccess their own data. 97 | if ($todo->user_id === $user->id) { 98 | return $this->responseUnauthorized(); 99 | } 100 | 101 | $todo = Todo::where('id', $id)->firstOrFail(); 102 | return new TodoResource($todo); 103 | } 104 | 105 | /** 106 | * Update the specified resource in storage. 107 | * 108 | * @param \Illuminate\Http\Request $request 109 | * @param int $id 110 | * @return \Illuminate\Http\Response 111 | */ 112 | public function update(Request $request, $id) 113 | { 114 | // Get user from $request token. 115 | if (! $user = auth()->setRequest($request)->user()) { 116 | return $this->responseUnauthorized(); 117 | } 118 | 119 | // Validates data. 120 | $validator = Validator::make($request->all(), [ 121 | 'value' => 'string', 122 | 'status' => 'in:closed,open', 123 | ]); 124 | 125 | if ($validator->fails()) { 126 | return $this->responseUnprocessable($validator->errors()); 127 | } 128 | 129 | try { 130 | $todo = Todo::where('id', $id)->firstOrFail(); 131 | if ($todo->user_id === $user->id) { 132 | if (request('value')) { 133 | $todo->value = request('value'); 134 | } 135 | if (request('status')) { 136 | $todo->status = request('status'); 137 | } 138 | $todo->save(); 139 | return $this->responseResourceUpdated(); 140 | } else { 141 | return $this->responseUnauthorized(); 142 | } 143 | } catch (Exception $e) { 144 | return $this->responseServerError('Error updating resource.'); 145 | } 146 | } 147 | 148 | /** 149 | * Remove the specified resource from storage. 150 | * 151 | * @param int $id 152 | * @return \Illuminate\Http\Response 153 | */ 154 | public function destroy(Request $request, $id) 155 | { 156 | // Get user from $request token. 157 | if (! $user = auth()->setRequest($request)->user()) { 158 | return $this->responseUnauthorized(); 159 | } 160 | 161 | $todo = Todo::where('id', $id)->firstOrFail(); 162 | 163 | // User can only delete their own data. 164 | if ($todo->user_id !== $user->id) { 165 | return $this->responseUnauthorized(); 166 | } 167 | 168 | try { 169 | $todo->delete(); 170 | return $this->responseResourceDeleted(); 171 | } catch (Exception $e) { 172 | return $this->responseServerError('Error deleting resource.'); 173 | } 174 | } 175 | } 176 | -------------------------------------------------------------------------------- /resources/lang/en/validation.php: -------------------------------------------------------------------------------- 1 | 'The :attribute must be accepted.', 17 | 'active_url' => 'The :attribute is not a valid URL.', 18 | 'after' => 'The :attribute must be a date after :date.', 19 | 'after_or_equal' => 'The :attribute must be a date after or equal to :date.', 20 | 'alpha' => 'The :attribute may only contain letters.', 21 | 'alpha_dash' => 'The :attribute may only contain letters, numbers, and dashes.', 22 | 'alpha_num' => 'The :attribute may only contain letters and numbers.', 23 | 'array' => 'The :attribute must be an array.', 24 | 'before' => 'The :attribute must be a date before :date.', 25 | 'before_or_equal' => 'The :attribute must be a date before or equal to :date.', 26 | 'between' => [ 27 | 'numeric' => 'The :attribute must be between :min and :max.', 28 | 'file' => 'The :attribute must be between :min and :max kilobytes.', 29 | 'string' => 'The :attribute must be between :min and :max characters.', 30 | 'array' => 'The :attribute must have between :min and :max items.', 31 | ], 32 | 'boolean' => 'The :attribute field must be true or false.', 33 | 'confirmed' => 'The :attribute confirmation does not match.', 34 | 'date' => 'The :attribute is not a valid date.', 35 | 'date_format' => 'The :attribute does not match the format :format.', 36 | 'different' => 'The :attribute and :other must be different.', 37 | 'digits' => 'The :attribute must be :digits digits.', 38 | 'digits_between' => 'The :attribute must be between :min and :max digits.', 39 | 'dimensions' => 'The :attribute has invalid image dimensions.', 40 | 'distinct' => 'The :attribute field has a duplicate value.', 41 | 'email' => 'The :attribute must be a valid email address.', 42 | 'exists' => 'The selected :attribute is invalid.', 43 | 'file' => 'The :attribute must be a file.', 44 | 'filled' => 'The :attribute field must have a value.', 45 | 'image' => 'The :attribute must be an image.', 46 | 'in' => 'The selected :attribute is invalid.', 47 | 'in_array' => 'The :attribute field does not exist in :other.', 48 | 'integer' => 'The :attribute must be an integer.', 49 | 'ip' => 'The :attribute must be a valid IP address.', 50 | 'ipv4' => 'The :attribute must be a valid IPv4 address.', 51 | 'ipv6' => 'The :attribute must be a valid IPv6 address.', 52 | 'json' => 'The :attribute must be a valid JSON string.', 53 | 'max' => [ 54 | 'numeric' => 'The :attribute may not be greater than :max.', 55 | 'file' => 'The :attribute may not be greater than :max kilobytes.', 56 | 'string' => 'The :attribute may not be greater than :max characters.', 57 | 'array' => 'The :attribute may not have more than :max items.', 58 | ], 59 | 'mimes' => 'The :attribute must be a file of type: :values.', 60 | 'mimetypes' => 'The :attribute must be a file of type: :values.', 61 | 'min' => [ 62 | 'numeric' => 'The :attribute must be at least :min.', 63 | 'file' => 'The :attribute must be at least :min kilobytes.', 64 | 'string' => 'The :attribute must be at least :min characters.', 65 | 'array' => 'The :attribute must have at least :min items.', 66 | ], 67 | 'not_in' => 'The selected :attribute is invalid.', 68 | 'not_regex' => 'The :attribute format is invalid.', 69 | 'numeric' => 'The :attribute must be a number.', 70 | 'present' => 'The :attribute field must be present.', 71 | 'regex' => 'The :attribute format is invalid.', 72 | 'required' => 'The :attribute field is required.', 73 | 'required_if' => 'The :attribute field is required when :other is :value.', 74 | 'required_unless' => 'The :attribute field is required unless :other is in :values.', 75 | 'required_with' => 'The :attribute field is required when :values is present.', 76 | 'required_with_all' => 'The :attribute field is required when :values is present.', 77 | 'required_without' => 'The :attribute field is required when :values is not present.', 78 | 'required_without_all' => 'The :attribute field is required when none of :values are present.', 79 | 'same' => 'The :attribute and :other must match.', 80 | 'size' => [ 81 | 'numeric' => 'The :attribute must be :size.', 82 | 'file' => 'The :attribute must be :size kilobytes.', 83 | 'string' => 'The :attribute must be :size characters.', 84 | 'array' => 'The :attribute must contain :size items.', 85 | ], 86 | 'string' => 'The :attribute must be a string.', 87 | 'timezone' => 'The :attribute must be a valid zone.', 88 | 'unique' => 'The :attribute has already been taken.', 89 | 'uploaded' => 'The :attribute failed to upload.', 90 | 'url' => 'The :attribute format is invalid.', 91 | 92 | /* 93 | |-------------------------------------------------------------------------- 94 | | Custom Validation Language Lines 95 | |-------------------------------------------------------------------------- 96 | | 97 | | Here you may specify custom validation messages for attributes using the 98 | | convention "attribute.rule" to name the lines. This makes it quick to 99 | | specify a specific custom language line for a given attribute rule. 100 | | 101 | */ 102 | 103 | 'custom' => [ 104 | 'attribute-name' => [ 105 | 'rule-name' => 'custom-message', 106 | ], 107 | ], 108 | 109 | /* 110 | |-------------------------------------------------------------------------- 111 | | Custom Validation Attributes 112 | |-------------------------------------------------------------------------- 113 | | 114 | | The following language lines are used to swap attribute place-holders 115 | | with something more reader friendly such as E-Mail Address instead 116 | | of "email". This simply helps us make messages a little cleaner. 117 | | 118 | */ 119 | 120 | 'attributes' => [], 121 | 122 | ]; 123 | -------------------------------------------------------------------------------- /resources/js/pages/ForgotPassword.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import { connect } from 'react-redux'; 4 | import { Redirect } from 'react-router-dom'; 5 | import ReeValidate from 'ree-validate'; 6 | import classNames from 'classnames'; 7 | import AuthService from '../services'; 8 | 9 | class ForgotPassword extends Component { 10 | constructor() { 11 | super(); 12 | 13 | this.validator = new ReeValidate({ 14 | email: 'required|email', 15 | }); 16 | 17 | this.state = { 18 | loading: false, 19 | email: '', 20 | errors: {}, 21 | response: { 22 | error: false, 23 | message: '', 24 | }, 25 | }; 26 | } 27 | 28 | handleChange = (e) => { 29 | const { name, value } = e.target; 30 | this.setState({ [name]: value }); 31 | 32 | // If a field has a validation error, we'll clear it when corrected. 33 | const { errors } = this.state; 34 | if (name in errors) { 35 | const validation = this.validator.errors; 36 | this.validator.validate(name, value).then(() => { 37 | if (!validation.has(name)) { 38 | delete errors[name]; 39 | this.setState({ errors }); 40 | } 41 | }); 42 | } 43 | }; 44 | 45 | handleBlur = (e) => { 46 | const { name, value } = e.target; 47 | const validation = this.validator.errors; 48 | 49 | // Avoid validation until input has a value. 50 | if (value === '') { 51 | return; 52 | } 53 | 54 | this.validator.validate(name, value).then(() => { 55 | if (validation.has(name)) { 56 | const { errors } = this.state; 57 | errors[name] = validation.first(name); 58 | this.setState({ errors }); 59 | } 60 | }); 61 | }; 62 | 63 | handleSubmit = (e) => { 64 | e.preventDefault(); 65 | const credentials = { 66 | email: this.state.email, 67 | }; 68 | 69 | // Set response state back to default. 70 | this.setState({ response: { error: false, message: '' } }); 71 | 72 | this.validator.validateAll(credentials).then((success) => { 73 | if (success) { 74 | this.setState({ loading: true }); 75 | this.submit(credentials); 76 | } 77 | }); 78 | }; 79 | 80 | submit(credentials) { 81 | this.props 82 | .dispatch(AuthService.resetPassword(credentials)) 83 | .then((res) => { 84 | this.forgotPasswordForm.reset(); 85 | const response = { 86 | error: false, 87 | message: res.message, 88 | }; 89 | this.setState({ loading: false, success: true, response }); 90 | }) 91 | .catch((err) => { 92 | this.forgotPasswordForm.reset(); 93 | const errors = Object.values(err.errors); 94 | errors.join(' '); 95 | const response = { 96 | error: true, 97 | message: errors, 98 | }; 99 | this.setState({ response }); 100 | this.setState({ loading: false }); 101 | }); 102 | } 103 | 104 | render() { 105 | // If user is already authenticated we redirect to entry location. 106 | const { from } = this.props.location.state || { from: { pathname: '/' } }; 107 | const { isAuthenticated } = this.props; 108 | if (isAuthenticated) { 109 | return ; 110 | } 111 | 112 | const { response, errors, loading } = this.state; 113 | 114 | return ( 115 |
116 |
117 |
118 |
119 |
120 |

Request Password Reset

121 | 122 |
123 |
124 | {this.state.success && ( 125 |
129 | A password reset link has been sent! 130 |
131 | )} 132 | 133 | {response.error && ( 134 |
138 | {response.message} 139 |
140 | )} 141 | 142 | {!this.state.success && ( 143 |
{ 148 | this.forgotPasswordForm = el; 149 | }} 150 | > 151 |
152 | 153 | 166 | 167 | {'email' in errors && ( 168 |
169 | {errors.email} 170 |
171 | )} 172 |
173 | 174 |
175 | 183 |
184 |
185 | )} 186 |
187 |
188 |
189 |
190 |
191 |
192 |
193 | ); 194 | } 195 | } 196 | 197 | ForgotPassword.defaultProps = { 198 | location: { 199 | state: { 200 | pathname: '/', 201 | }, 202 | }, 203 | }; 204 | 205 | ForgotPassword.propTypes = { 206 | dispatch: PropTypes.func.isRequired, 207 | isAuthenticated: PropTypes.bool.isRequired, 208 | location: PropTypes.shape({ 209 | state: { 210 | pathname: PropTypes.string, 211 | }, 212 | }), 213 | }; 214 | 215 | const mapStateToProps = (state) => ({ 216 | isAuthenticated: state.Auth.isAuthenticated, 217 | }); 218 | 219 | export default connect(mapStateToProps)(ForgotPassword); 220 | -------------------------------------------------------------------------------- /config/session.php: -------------------------------------------------------------------------------- 1 | env('SESSION_DRIVER', 'file'), 22 | 23 | /* 24 | |-------------------------------------------------------------------------- 25 | | Session Lifetime 26 | |-------------------------------------------------------------------------- 27 | | 28 | | Here you may specify the number of minutes that you wish the session 29 | | to be allowed to remain idle before it expires. If you want them 30 | | to immediately expire on the browser closing, set that option. 31 | | 32 | */ 33 | 34 | 'lifetime' => env('SESSION_LIFETIME', 120), 35 | 36 | 'expire_on_close' => false, 37 | 38 | /* 39 | |-------------------------------------------------------------------------- 40 | | Session Encryption 41 | |-------------------------------------------------------------------------- 42 | | 43 | | This option allows you to easily specify that all of your session data 44 | | should be encrypted before it is stored. All encryption will be run 45 | | automatically by Laravel and you can use the Session like normal. 46 | | 47 | */ 48 | 49 | 'encrypt' => false, 50 | 51 | /* 52 | |-------------------------------------------------------------------------- 53 | | Session File Location 54 | |-------------------------------------------------------------------------- 55 | | 56 | | When using the native session driver, we need a location where session 57 | | files may be stored. A default has been set for you but a different 58 | | location may be specified. This is only needed for file sessions. 59 | | 60 | */ 61 | 62 | 'files' => storage_path('framework/sessions'), 63 | 64 | /* 65 | |-------------------------------------------------------------------------- 66 | | Session Database Connection 67 | |-------------------------------------------------------------------------- 68 | | 69 | | When using the "database" or "redis" session drivers, you may specify a 70 | | connection that should be used to manage these sessions. This should 71 | | correspond to a connection in your database configuration options. 72 | | 73 | */ 74 | 75 | 'connection' => env('SESSION_CONNECTION', null), 76 | 77 | /* 78 | |-------------------------------------------------------------------------- 79 | | Session Database Table 80 | |-------------------------------------------------------------------------- 81 | | 82 | | When using the "database" session driver, you may specify the table we 83 | | should use to manage the sessions. Of course, a sensible default is 84 | | provided for you; however, you are free to change this as needed. 85 | | 86 | */ 87 | 88 | 'table' => 'sessions', 89 | 90 | /* 91 | |-------------------------------------------------------------------------- 92 | | Session Cache Store 93 | |-------------------------------------------------------------------------- 94 | | 95 | | When using the "apc", "memcached", or "dynamodb" session drivers you may 96 | | list a cache store that should be used for these sessions. This value 97 | | must match with one of the application's configured cache "stores". 98 | | 99 | */ 100 | 101 | 'store' => env('SESSION_STORE', null), 102 | 103 | /* 104 | |-------------------------------------------------------------------------- 105 | | Session Sweeping Lottery 106 | |-------------------------------------------------------------------------- 107 | | 108 | | Some session drivers must manually sweep their storage location to get 109 | | rid of old sessions from storage. Here are the chances that it will 110 | | happen on a given request. By default, the odds are 2 out of 100. 111 | | 112 | */ 113 | 114 | 'lottery' => [2, 100], 115 | 116 | /* 117 | |-------------------------------------------------------------------------- 118 | | Session Cookie Name 119 | |-------------------------------------------------------------------------- 120 | | 121 | | Here you may change the name of the cookie used to identify a session 122 | | instance by ID. The name specified here will get used every time a 123 | | new session cookie is created by the framework for every driver. 124 | | 125 | */ 126 | 127 | 'cookie' => env( 128 | 'SESSION_COOKIE', 129 | Str::slug(env('APP_NAME', 'laravel'), '_').'_session' 130 | ), 131 | 132 | /* 133 | |-------------------------------------------------------------------------- 134 | | Session Cookie Path 135 | |-------------------------------------------------------------------------- 136 | | 137 | | The session cookie path determines the path for which the cookie will 138 | | be regarded as available. Typically, this will be the root path of 139 | | your application but you are free to change this when necessary. 140 | | 141 | */ 142 | 143 | 'path' => '/', 144 | 145 | /* 146 | |-------------------------------------------------------------------------- 147 | | Session Cookie Domain 148 | |-------------------------------------------------------------------------- 149 | | 150 | | Here you may change the domain of the cookie used to identify a session 151 | | in your application. This will determine which domains the cookie is 152 | | available to in your application. A sensible default has been set. 153 | | 154 | */ 155 | 156 | 'domain' => env('SESSION_DOMAIN', null), 157 | 158 | /* 159 | |-------------------------------------------------------------------------- 160 | | HTTPS Only Cookies 161 | |-------------------------------------------------------------------------- 162 | | 163 | | By setting this option to true, session cookies will only be sent back 164 | | to the server if the browser has a HTTPS connection. This will keep 165 | | the cookie from being sent to you if it can not be done securely. 166 | | 167 | */ 168 | 169 | 'secure' => env('SESSION_SECURE_COOKIE', null), 170 | 171 | /* 172 | |-------------------------------------------------------------------------- 173 | | HTTP Access Only 174 | |-------------------------------------------------------------------------- 175 | | 176 | | Setting this value to true will prevent JavaScript from accessing the 177 | | value of the cookie and the cookie will only be accessible through 178 | | the HTTP protocol. You are free to modify this option if needed. 179 | | 180 | */ 181 | 182 | 'http_only' => true, 183 | 184 | /* 185 | |-------------------------------------------------------------------------- 186 | | Same-Site Cookies 187 | |-------------------------------------------------------------------------- 188 | | 189 | | This option determines how your cookies behave when cross-site requests 190 | | take place, and can be used to mitigate CSRF attacks. By default, we 191 | | do not enable this as other CSRF protection services are in place. 192 | | 193 | | Supported: "lax", "strict", "none" 194 | | 195 | */ 196 | 197 | 'same_site' => 'lax', 198 | 199 | ]; -------------------------------------------------------------------------------- /resources/js/pages/Login.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import { connect } from 'react-redux'; 4 | import { Link, Redirect } from 'react-router-dom'; 5 | import ReeValidate from 'ree-validate'; 6 | import classNames from 'classnames'; 7 | import AuthService from '../services'; 8 | 9 | class Login extends Component { 10 | constructor() { 11 | super(); 12 | 13 | this.validator = new ReeValidate({ 14 | email: 'required|email', 15 | password: 'required|min:6', 16 | }); 17 | 18 | this.state = { 19 | loading: false, 20 | email: '', 21 | password: '', 22 | errors: {}, 23 | response: { 24 | error: false, 25 | message: '', 26 | }, 27 | }; 28 | } 29 | 30 | handleChange = (e) => { 31 | const { name, value } = e.target; 32 | this.setState({ [name]: value }); 33 | 34 | // If a field has a validation error, we'll clear it when corrected. 35 | const { errors } = this.state; 36 | if (name in errors) { 37 | const validation = this.validator.errors; 38 | this.validator.validate(name, value).then(() => { 39 | if (!validation.has(name)) { 40 | delete errors[name]; 41 | this.setState({ errors }); 42 | } 43 | }); 44 | } 45 | }; 46 | 47 | handleBlur = (e) => { 48 | const { name, value } = e.target; 49 | 50 | // Avoid validation until input has a value. 51 | if (value === '') { 52 | return; 53 | } 54 | 55 | const validation = this.validator.errors; 56 | this.validator.validate(name, value).then(() => { 57 | if (validation.has(name)) { 58 | const { errors } = this.state; 59 | errors[name] = validation.first(name); 60 | this.setState({ errors }); 61 | } 62 | }); 63 | }; 64 | 65 | handleSubmit = (e) => { 66 | e.preventDefault(); 67 | const { email, password } = this.state; 68 | const credentials = { 69 | email, 70 | password, 71 | }; 72 | 73 | // Set response state back to default. 74 | this.setState({ response: { error: false, message: '' } }); 75 | 76 | this.validator.validateAll(credentials).then((success) => { 77 | if (success) { 78 | this.setState({ loading: true }); 79 | this.submit(credentials); 80 | } 81 | }); 82 | }; 83 | 84 | submit(credentials) { 85 | const { dispatch } = this.props; 86 | dispatch(AuthService.login(credentials)).catch((err) => { 87 | this.loginForm.reset(); 88 | const errors = Object.values(err.errors); 89 | errors.join(' '); 90 | const response = { 91 | error: true, 92 | message: errors, 93 | }; 94 | this.setState({ response }); 95 | this.setState({ loading: false }); 96 | }); 97 | } 98 | 99 | render() { 100 | // If user is already authenticated we redirect to entry location. 101 | const { location: state } = this.props; 102 | const { from } = state || { from: { pathname: '/' } }; 103 | const { isAuthenticated } = this.props; 104 | if (isAuthenticated) { 105 | return ; 106 | } 107 | 108 | const { response, errors, loading } = this.state; 109 | 110 | return ( 111 |
112 |
113 |
114 |
115 |
116 |

Log in to the App

117 | 118 |
119 |
120 | {response.error && ( 121 |
125 | Credentials were incorrect. Try again! 126 |
127 | )} 128 | 129 |
{ 134 | this.loginForm = el; 135 | }} 136 | > 137 |
138 | 139 | 152 | 153 | {'email' in errors && ( 154 |
{errors.email}
155 | )} 156 |
157 | 158 |
159 | 160 | 173 | {'password' in errors && ( 174 |
175 | {errors.password} 176 |
177 | )} 178 |
179 | 180 |
181 | 189 |
190 | 191 |
192 | No account? 193 | {' '} 194 | 195 | Register 196 | 197 | . 198 |
199 |
200 |
201 |
202 | 203 |
204 | 205 | Forgot Your Password? 206 | 207 |
208 |
209 |
210 |
211 |
212 |
213 | ); 214 | } 215 | } 216 | 217 | Login.defaultProps = { 218 | location: { 219 | state: { 220 | pathname: '/', 221 | }, 222 | }, 223 | }; 224 | 225 | Login.propTypes = { 226 | dispatch: PropTypes.func.isRequired, 227 | isAuthenticated: PropTypes.bool.isRequired, 228 | location: PropTypes.shape({ 229 | state: { 230 | pathname: PropTypes.string, 231 | }, 232 | }), 233 | }; 234 | 235 | const mapStateToProps = (state) => ({ 236 | isAuthenticated: state.Auth.isAuthenticated, 237 | }); 238 | 239 | export default connect(mapStateToProps)(Login); 240 | -------------------------------------------------------------------------------- /resources/js/pages/Home.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import { connect } from 'react-redux'; 4 | import { Link, Redirect } from 'react-router-dom'; 5 | import ReeValidate from 'ree-validate'; 6 | import classNames from 'classnames'; 7 | import AuthService from '../services'; 8 | 9 | class Home extends Component { 10 | constructor() { 11 | super(); 12 | 13 | this.validator = new ReeValidate({ 14 | email: 'required|email', 15 | password: 'required|min:6', 16 | }); 17 | 18 | this.state = { 19 | loading: false, 20 | email: '', 21 | password: '', 22 | errors: {}, 23 | response: { 24 | error: false, 25 | message: '', 26 | }, 27 | }; 28 | } 29 | 30 | handleChange = (e) => { 31 | const { name, value } = e.target; 32 | this.setState({ [name]: value }); 33 | 34 | // If a field has a validation error, we'll clear it when corrected. 35 | const { errors } = this.state; 36 | if (name in errors) { 37 | const validation = this.validator.errors; 38 | this.validator.validate(name, value).then(() => { 39 | if (!validation.has(name)) { 40 | delete errors[name]; 41 | this.setState({ errors }); 42 | } 43 | }); 44 | } 45 | }; 46 | 47 | handleBlur = (e) => { 48 | const { name, value } = e.target; 49 | 50 | // Avoid validation until input has a value. 51 | if (value === '') { 52 | return; 53 | } 54 | 55 | const validation = this.validator.errors; 56 | this.validator.validate(name, value).then(() => { 57 | if (validation.has(name)) { 58 | const { errors } = this.state; 59 | errors[name] = validation.first(name); 60 | this.setState({ errors }); 61 | } 62 | }); 63 | }; 64 | 65 | handleSubmit = (e) => { 66 | e.preventDefault(); 67 | const { email, password } = this.state; 68 | const credentials = { 69 | email, 70 | password, 71 | }; 72 | 73 | this.validator.validateAll(credentials).then((success) => { 74 | if (success) { 75 | this.setState({ loading: true }); 76 | this.submit(credentials); 77 | } 78 | }); 79 | }; 80 | 81 | submit = (credentials) => { 82 | this.props.dispatch(AuthService.login(credentials)).catch((err) => { 83 | this.loginForm.reset(); 84 | const errors = Object.values(err.errors); 85 | errors.join(' '); 86 | const response = { 87 | error: true, 88 | message: errors, 89 | }; 90 | this.setState({ response }); 91 | this.setState({ loading: false }); 92 | }); 93 | }; 94 | 95 | render() { 96 | // If user is already authenticated we redirect to entry location. 97 | const { from } = this.props.location.state || { from: { pathname: '/' } }; 98 | const { isAuthenticated } = this.props; 99 | if (isAuthenticated) { 100 | return ; 101 | } 102 | 103 | const { response, errors, loading } = this.state; 104 | 105 | return ( 106 |
107 |
108 |
109 |
110 |
111 |
112 |

Example To Do App

113 |

114 | Built with Laravel and React. Includes JWT auth, 115 | registration, login, routing and tests. 116 | {' '} 117 | 118 | Learn more 119 | 120 | . 121 |

122 |

123 | 124 | Source code and documentation on GitHub. 125 | 126 |

127 |
128 |
129 |
130 |

Log in to the App

131 | 132 |
133 |
134 |
{ 139 | this.loginForm = el; 140 | }} 141 | > 142 | {response.error && ( 143 |
144 | Credentials were incorrect. Try again! 145 |
146 | )} 147 | 148 |
149 | 150 | 163 | 164 | {'email' in errors && ( 165 |
{errors.email}
166 | )} 167 |
168 | 169 |
170 | 171 | 184 | {'password' in errors && ( 185 |
186 | {errors.password} 187 |
188 | )} 189 |
190 | 191 |
192 | 200 |
201 | 202 |
203 | {"Don't have an account?"} 204 | {' '} 205 | Register 206 | . 207 |
208 |
209 |
210 |
211 | 212 |
213 | Forgot Your Password? 214 |
215 |
216 |
217 |
218 |
219 |
220 | ); 221 | } 222 | } 223 | 224 | Home.propTypes = { 225 | dispatch: PropTypes.func.isRequired, 226 | isAuthenticated: PropTypes.bool.isRequired, 227 | }; 228 | 229 | const mapStateToProps = (state) => ({ 230 | isAuthenticated: state.Auth.isAuthenticated, 231 | }); 232 | 233 | export default connect(mapStateToProps)(Home); 234 | -------------------------------------------------------------------------------- /resources/js/pages/ResetPassword.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import { connect } from 'react-redux'; 4 | import { Redirect } from 'react-router-dom'; 5 | import ReeValidate from 'ree-validate'; 6 | import classNames from 'classnames'; 7 | import AuthService from '../services'; 8 | 9 | class ResetPassword extends Component { 10 | constructor(props) { 11 | super(props); 12 | 13 | // @TODO Password confirmation validation. 14 | this.validator = new ReeValidate({ 15 | password: 'required|min:6', 16 | password_confirmation: 'required|min:6', 17 | id: 'required', 18 | token: 'required', 19 | }); 20 | 21 | this.state = { 22 | loading: false, 23 | id: this.getResetId(), 24 | token: this.getResetToken(), 25 | password: '', 26 | password_confirmation: '', 27 | errors: {}, 28 | response: { 29 | error: false, 30 | message: '', 31 | }, 32 | }; 33 | } 34 | 35 | getResetId() { 36 | const params = new URLSearchParams(this.props.location.search); 37 | if (params.has('id')) { 38 | return params.get('id'); 39 | } 40 | return ''; 41 | } 42 | 43 | getResetToken() { 44 | const params = new URLSearchParams(this.props.location.search); 45 | if (params.has('token')) { 46 | return params.get('token'); 47 | } 48 | return ''; 49 | } 50 | 51 | handleChange = (e) => { 52 | const { name, value } = e.target; 53 | this.setState({ [name]: value }); 54 | 55 | // If a field has a validation error, we'll clear it when corrected. 56 | const { errors } = this.state; 57 | if (name in errors) { 58 | const validation = this.validator.errors; 59 | this.validator.validate(name, value).then(() => { 60 | if (!validation.has(name)) { 61 | delete errors[name]; 62 | this.setState({ errors }); 63 | } 64 | }); 65 | } 66 | }; 67 | 68 | handleBlur = (e) => { 69 | const { name, value } = e.target; 70 | const validation = this.validator.errors; 71 | 72 | // Avoid validation until input has a value. 73 | if (value === '') { 74 | return; 75 | } 76 | 77 | this.validator.validate(name, value).then(() => { 78 | if (validation.has(name)) { 79 | const { errors } = this.state; 80 | errors[name] = validation.first(name); 81 | this.setState({ errors }); 82 | } 83 | }); 84 | }; 85 | 86 | handleSubmit = (e) => { 87 | e.preventDefault(); 88 | const credentials = { 89 | id: this.state.id, 90 | token: this.state.token, 91 | password: this.state.password, 92 | password_confirmation: this.state.password_confirmation, 93 | }; 94 | 95 | this.setState({ loading: true }); 96 | 97 | this.props 98 | .dispatch(AuthService.updatePassword(credentials)) 99 | .then((res) => { 100 | this.passwordResetForm.reset(); 101 | const response = { 102 | error: false, 103 | message: res.message, 104 | }; 105 | this.setState({ loading: false, success: true, response }); 106 | }) 107 | .catch((err) => { 108 | this.passwordResetForm.reset(); 109 | const errors = Object.values(err.errors); 110 | errors.join(' '); 111 | const response = { 112 | error: true, 113 | message: errors, 114 | }; 115 | this.setState({ response }); 116 | this.setState({ loading: false }); 117 | }); 118 | }; 119 | 120 | render() { 121 | // If user is already authenticated we redirect to entry location. 122 | const { from } = this.props.location.state || { from: { pathname: '/' } }; 123 | const { isAuthenticated } = this.props; 124 | if (isAuthenticated) { 125 | return ; 126 | } 127 | 128 | const { response, errors, loading } = this.state; 129 | 130 | return ( 131 |
132 |
133 |
134 |
135 |
136 |

Password Reset

137 | 138 |
139 |
140 | {this.state.success && ( 141 |
145 | Your password has been reset! 146 |
147 | )} 148 | 149 | {response.error && ( 150 |
154 | {response.message} 155 |
156 | )} 157 | 158 | {!this.state.success && ( 159 |
{ 164 | this.passwordResetForm = el; 165 | }} 166 | > 167 |
168 | 169 | 181 | {'password' in errors && ( 182 |
183 | {errors.password} 184 |
185 | )} 186 |
187 | 188 |
189 | 192 | 204 | {'password_confirmation' in errors && ( 205 |
206 | {errors.password_confirmation} 207 |
208 | )} 209 |
210 | 211 |
212 | 220 |
221 |
222 | )} 223 |
224 |
225 |
226 |
227 |
228 |
229 |
230 | ); 231 | } 232 | } 233 | 234 | ResetPassword.propTypes = { 235 | dispatch: PropTypes.func.isRequired, 236 | isAuthenticated: PropTypes.bool.isRequired, 237 | }; 238 | 239 | const mapStateToProps = (state) => ({ 240 | isAuthenticated: state.Auth.isAuthenticated, 241 | }); 242 | 243 | export default connect(mapStateToProps)(ResetPassword); 244 | -------------------------------------------------------------------------------- /config/app.php: -------------------------------------------------------------------------------- 1 | env('APP_NAME', 'Laravel'), 17 | 18 | /* 19 | |-------------------------------------------------------------------------- 20 | | Application Environment 21 | |-------------------------------------------------------------------------- 22 | | 23 | | This value determines the "environment" your application is currently 24 | | running in. This may determine how you prefer to configure various 25 | | services your application utilizes. Set this in your ".env" file. 26 | | 27 | */ 28 | 29 | 'env' => env('APP_ENV', 'production'), 30 | 31 | /* 32 | |-------------------------------------------------------------------------- 33 | | Application Debug Mode 34 | |-------------------------------------------------------------------------- 35 | | 36 | | When your application is in debug mode, detailed error messages with 37 | | stack traces will be shown on every error that occurs within your 38 | | application. If disabled, a simple generic error page is shown. 39 | | 40 | */ 41 | 42 | 'debug' => env('APP_DEBUG', false), 43 | 44 | /* 45 | |-------------------------------------------------------------------------- 46 | | Application URL 47 | |-------------------------------------------------------------------------- 48 | | 49 | | This URL is used by the console to properly generate URLs when using 50 | | the Artisan command line tool. You should set this to the root of 51 | | your application so that it is used when running Artisan tasks. 52 | | 53 | */ 54 | 55 | 'url' => env('APP_URL', 'http://localhost'), 56 | 57 | /* 58 | |-------------------------------------------------------------------------- 59 | | Application Timezone 60 | |-------------------------------------------------------------------------- 61 | | 62 | | Here you may specify the default timezone for your application, which 63 | | will be used by the PHP date and date-time functions. We have gone 64 | | ahead and set this to a sensible default for you out of the box. 65 | | 66 | */ 67 | 68 | 'timezone' => 'UTC', 69 | 70 | /* 71 | |-------------------------------------------------------------------------- 72 | | Application Locale Configuration 73 | |-------------------------------------------------------------------------- 74 | | 75 | | The application locale determines the default locale that will be used 76 | | by the translation service provider. You are free to set this value 77 | | to any of the locales which will be supported by the application. 78 | | 79 | */ 80 | 81 | 'locale' => 'en', 82 | 83 | /* 84 | |-------------------------------------------------------------------------- 85 | | Application Fallback Locale 86 | |-------------------------------------------------------------------------- 87 | | 88 | | The fallback locale determines the locale to use when the current one 89 | | is not available. You may change the value to correspond to any of 90 | | the language folders that are provided through your application. 91 | | 92 | */ 93 | 94 | 'fallback_locale' => 'en', 95 | 96 | /* 97 | |-------------------------------------------------------------------------- 98 | | Encryption Key 99 | |-------------------------------------------------------------------------- 100 | | 101 | | This key is used by the Illuminate encrypter service and should be set 102 | | to a random, 32 character string, otherwise these encrypted strings 103 | | will not be safe. Please do this before deploying an application! 104 | | 105 | */ 106 | 107 | 'key' => env('APP_KEY'), 108 | 109 | 'cipher' => 'AES-256-CBC', 110 | 111 | /* 112 | |-------------------------------------------------------------------------- 113 | | Autoloaded Service Providers 114 | |-------------------------------------------------------------------------- 115 | | 116 | | The service providers listed here will be automatically loaded on the 117 | | request to your application. Feel free to add your own services to 118 | | this array to grant expanded functionality to your applications. 119 | | 120 | */ 121 | 122 | 'providers' => [ 123 | 124 | /* 125 | * Laravel Framework Service Providers... 126 | */ 127 | Illuminate\Auth\AuthServiceProvider::class, 128 | Illuminate\Broadcasting\BroadcastServiceProvider::class, 129 | Illuminate\Bus\BusServiceProvider::class, 130 | Illuminate\Cache\CacheServiceProvider::class, 131 | Illuminate\Foundation\Providers\ConsoleSupportServiceProvider::class, 132 | Illuminate\Cookie\CookieServiceProvider::class, 133 | Illuminate\Database\DatabaseServiceProvider::class, 134 | Illuminate\Encryption\EncryptionServiceProvider::class, 135 | Illuminate\Filesystem\FilesystemServiceProvider::class, 136 | Illuminate\Foundation\Providers\FoundationServiceProvider::class, 137 | Illuminate\Hashing\HashServiceProvider::class, 138 | Illuminate\Mail\MailServiceProvider::class, 139 | Illuminate\Notifications\NotificationServiceProvider::class, 140 | Illuminate\Pagination\PaginationServiceProvider::class, 141 | Illuminate\Pipeline\PipelineServiceProvider::class, 142 | Illuminate\Queue\QueueServiceProvider::class, 143 | Illuminate\Redis\RedisServiceProvider::class, 144 | Illuminate\Auth\Passwords\PasswordResetServiceProvider::class, 145 | Illuminate\Session\SessionServiceProvider::class, 146 | Illuminate\Translation\TranslationServiceProvider::class, 147 | Illuminate\Validation\ValidationServiceProvider::class, 148 | Illuminate\View\ViewServiceProvider::class, 149 | 150 | /* 151 | * Package Service Providers... 152 | */ 153 | Tymon\JWTAuth\Providers\LaravelServiceProvider::class, 154 | 155 | /* 156 | * Application Service Providers... 157 | */ 158 | App\Providers\AppServiceProvider::class, 159 | App\Providers\AuthServiceProvider::class, 160 | // App\Providers\BroadcastServiceProvider::class, 161 | App\Providers\EventServiceProvider::class, 162 | App\Providers\RouteServiceProvider::class, 163 | 164 | ], 165 | 166 | /* 167 | |-------------------------------------------------------------------------- 168 | | Class Aliases 169 | |-------------------------------------------------------------------------- 170 | | 171 | | This array of class aliases will be registered when this application 172 | | is started. However, feel free to register as many as you wish as 173 | | the aliases are "lazy" loaded so they don't hinder performance. 174 | | 175 | */ 176 | 177 | 'aliases' => [ 178 | 179 | 'App' => Illuminate\Support\Facades\App::class, 180 | 'Artisan' => Illuminate\Support\Facades\Artisan::class, 181 | 'Auth' => Illuminate\Support\Facades\Auth::class, 182 | 'Blade' => Illuminate\Support\Facades\Blade::class, 183 | 'Broadcast' => Illuminate\Support\Facades\Broadcast::class, 184 | 'Bus' => Illuminate\Support\Facades\Bus::class, 185 | 'Cache' => Illuminate\Support\Facades\Cache::class, 186 | 'Config' => Illuminate\Support\Facades\Config::class, 187 | 'Cookie' => Illuminate\Support\Facades\Cookie::class, 188 | 'Crypt' => Illuminate\Support\Facades\Crypt::class, 189 | 'DB' => Illuminate\Support\Facades\DB::class, 190 | 'Eloquent' => Illuminate\Database\Eloquent\Model::class, 191 | 'Event' => Illuminate\Support\Facades\Event::class, 192 | 'File' => Illuminate\Support\Facades\File::class, 193 | 'Gate' => Illuminate\Support\Facades\Gate::class, 194 | 'Hash' => Illuminate\Support\Facades\Hash::class, 195 | 'Lang' => Illuminate\Support\Facades\Lang::class, 196 | 'Log' => Illuminate\Support\Facades\Log::class, 197 | 'Mail' => Illuminate\Support\Facades\Mail::class, 198 | 'Notification' => Illuminate\Support\Facades\Notification::class, 199 | 'Password' => Illuminate\Support\Facades\Password::class, 200 | 'Queue' => Illuminate\Support\Facades\Queue::class, 201 | 'Redirect' => Illuminate\Support\Facades\Redirect::class, 202 | 'Redis' => Illuminate\Support\Facades\Redis::class, 203 | 'Request' => Illuminate\Support\Facades\Request::class, 204 | 'Response' => Illuminate\Support\Facades\Response::class, 205 | 'Route' => Illuminate\Support\Facades\Route::class, 206 | 'Schema' => Illuminate\Support\Facades\Schema::class, 207 | 'Session' => Illuminate\Support\Facades\Session::class, 208 | 'Storage' => Illuminate\Support\Facades\Storage::class, 209 | 'URL' => Illuminate\Support\Facades\URL::class, 210 | 'Validator' => Illuminate\Support\Facades\Validator::class, 211 | 'View' => Illuminate\Support\Facades\View::class, 212 | ], 213 | 214 | ]; 215 | --------------------------------------------------------------------------------