mirror of
https://github.com/kevin-DL/breeze-next-template.git
synced 2026-01-11 02:14:31 +00:00
first
This commit is contained in:
Taylor Otwell
1
.env.example
Normal file
1
.env.example
Normal file
@@ -0,0 +1 @@
|
||||
NEXT_PUBLIC_BACKEND_URL=http://localhost:8000
|
||||
43
.eslintrc.js
Normal file
43
.eslintrc.js
Normal file
@@ -0,0 +1,43 @@
|
||||
module.exports = {
|
||||
root: true,
|
||||
parser: 'babel-eslint',
|
||||
env: {
|
||||
node: true,
|
||||
browser: true,
|
||||
es6: true,
|
||||
commonjs: true,
|
||||
},
|
||||
extends: [
|
||||
'eslint:recommended',
|
||||
'plugin:react/recommended',
|
||||
'plugin:prettier/recommended',
|
||||
],
|
||||
parserOptions: {
|
||||
ecmaFeatures: {
|
||||
jsx: true,
|
||||
},
|
||||
ecmaVersion: 2020,
|
||||
},
|
||||
plugins: ['react', '@next/eslint-plugin-next', 'prettier'],
|
||||
rules: {
|
||||
'import/prefer-default-export': 0,
|
||||
'no-console': 'warn',
|
||||
'no-nested-ternary': 0,
|
||||
'no-underscore-dangle': 0,
|
||||
'no-unused-expressions': ['error', { allowTernary: true }],
|
||||
camelcase: 0,
|
||||
'react/self-closing-comp': 1,
|
||||
'react/jsx-filename-extension': [1, { extensions: ['.js', 'jsx'] }],
|
||||
'react/prop-types': 0,
|
||||
'react/destructuring-assignment': 0,
|
||||
'react/jsx-no-comment-textnodes': 0,
|
||||
'react/jsx-props-no-spreading': 0,
|
||||
'react/no-array-index-key': 0,
|
||||
'react/no-unescaped-entities': 0,
|
||||
'react/require-default-props': 0,
|
||||
'react/react-in-jsx-scope': 0,
|
||||
'linebreak-style': ['error', 'unix'],
|
||||
semi: ['error', 'never'],
|
||||
'prettier/prettier': ['error', {}, { usePrettierrc: true }],
|
||||
},
|
||||
}
|
||||
34
.gitignore
vendored
Normal file
34
.gitignore
vendored
Normal file
@@ -0,0 +1,34 @@
|
||||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
/.pnp
|
||||
.pnp.js
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
|
||||
# next.js
|
||||
/.next/
|
||||
/out/
|
||||
|
||||
# production
|
||||
/build
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
*.pem
|
||||
|
||||
# debug
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
# local env files
|
||||
.env.local
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
|
||||
# vercel
|
||||
.vercel
|
||||
8
.prettierrc.json
Normal file
8
.prettierrc.json
Normal file
@@ -0,0 +1,8 @@
|
||||
{
|
||||
"arrowParens": "avoid",
|
||||
"jsxBracketSameLine": true,
|
||||
"semi": false,
|
||||
"singleQuote": true,
|
||||
"tabWidth": 4,
|
||||
"trailingComma": "all"
|
||||
}
|
||||
40
README.md
Normal file
40
README.md
Normal file
@@ -0,0 +1,40 @@
|
||||
# Laravel Breeze Next.js Starter (Frontend)
|
||||
|
||||
Corresponding backend: https://github.com/taylorotwell/next-example-backend
|
||||
|
||||
## Introduction
|
||||
|
||||
Clone this repository and install its dependencies with `yarn install` or `npm install`. Then, copy the `.env.example` file to `.env.local` and supply the URL of your backend:
|
||||
|
||||
```
|
||||
NEXT_PUBLIC_BACKEND_URL=http://localhost:8000
|
||||
```
|
||||
|
||||
The application can be run via `npm run dev` and will be available at `http://localhost:3000`:
|
||||
|
||||
```
|
||||
npm run dev
|
||||
```
|
||||
|
||||
> Note: Currently, for this example, we recommend using `localhost` during local development to avoid "Same-Origin" issues.
|
||||
|
||||
## Usage
|
||||
|
||||
This example Next.js application contains a custom `useAuth` hook, designed to abstract all authentication logic away from your pages. It can be used as follows:
|
||||
|
||||
```js
|
||||
const ExamplePage = () => {
|
||||
const { logout, user } = useAuth({ middleware: 'auth' /* or 'guest */ })
|
||||
|
||||
return (
|
||||
<>
|
||||
<p>{user?.name}</p>
|
||||
<button onClick={logout}>Sign out</button>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default ExamplePage
|
||||
```
|
||||
|
||||
> Note: You'll need to use [optional chaining](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining) (`user?.name` instead of `user.name`) when accessing properties on the user object to account for Next.js's initial server-side render.
|
||||
8
jsconfig.json
Normal file
8
jsconfig.json
Normal file
@@ -0,0 +1,8 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"baseUrl": "src/",
|
||||
"paths": {
|
||||
"@/*": ["./*"]
|
||||
}
|
||||
}
|
||||
}
|
||||
33
package.json
Normal file
33
package.json
Normal file
@@ -0,0 +1,33 @@
|
||||
{
|
||||
"name": "breeze-next",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "next dev",
|
||||
"build": "next build",
|
||||
"start": "next start"
|
||||
},
|
||||
"dependencies": {
|
||||
"@headlessui/react": "^1.4.2",
|
||||
"@tailwindcss/forms": "^0.2.1",
|
||||
"autoprefixer": "^10.1.0",
|
||||
"axios": "^0.21.1",
|
||||
"next": "^12.0.4",
|
||||
"postcss": "^8.2.2",
|
||||
"react": "^17.0.2",
|
||||
"react-dom": "^17.0.2",
|
||||
"swr": "^0.3.11",
|
||||
"tailwindcss": "^2.0.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/eslint-parser": "^7.12.1",
|
||||
"@next/eslint-plugin-next": "^10.0.4",
|
||||
"babel-eslint": "^10.1.0",
|
||||
"eslint": "^7.17.0",
|
||||
"eslint-config-prettier": "^7.1.0",
|
||||
"eslint-plugin-next": "^0.0.0",
|
||||
"eslint-plugin-prettier": "^3.3.0",
|
||||
"eslint-plugin-react": "^7.22.0",
|
||||
"prettier": "2.2.1"
|
||||
}
|
||||
}
|
||||
6
postcss.config.js
Normal file
6
postcss.config.js
Normal file
@@ -0,0 +1,6 @@
|
||||
module.exports = {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
BIN
public/favicon.ico
Normal file
BIN
public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
4
public/vercel.svg
Normal file
4
public/vercel.svg
Normal file
@@ -0,0 +1,4 @@
|
||||
<svg width="283" height="64" viewBox="0 0 283 64" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
7
src/components/ApplicationLogo.js
Normal file
7
src/components/ApplicationLogo.js
Normal file
@@ -0,0 +1,7 @@
|
||||
const ApplicationLogo = props => (
|
||||
<svg viewBox="0 0 316 316" xmlns="http://www.w3.org/2000/svg" {...props}>
|
||||
<path d="M305.8 81.125C305.77 80.995 305.69 80.885 305.65 80.755C305.56 80.525 305.49 80.285 305.37 80.075C305.29 79.935 305.17 79.815 305.07 79.685C304.94 79.515 304.83 79.325 304.68 79.175C304.55 79.045 304.39 78.955 304.25 78.845C304.09 78.715 303.95 78.575 303.77 78.475L251.32 48.275C249.97 47.495 248.31 47.495 246.96 48.275L194.51 78.475C194.33 78.575 194.19 78.725 194.03 78.845C193.89 78.955 193.73 79.045 193.6 79.175C193.45 79.325 193.34 79.515 193.21 79.685C193.11 79.815 192.99 79.935 192.91 80.075C192.79 80.285 192.71 80.525 192.63 80.755C192.58 80.875 192.51 80.995 192.48 81.125C192.38 81.495 192.33 81.875 192.33 82.265V139.625L148.62 164.795V52.575C148.62 52.185 148.57 51.805 148.47 51.435C148.44 51.305 148.36 51.195 148.32 51.065C148.23 50.835 148.16 50.595 148.04 50.385C147.96 50.245 147.84 50.125 147.74 49.995C147.61 49.825 147.5 49.635 147.35 49.485C147.22 49.355 147.06 49.265 146.92 49.155C146.76 49.025 146.62 48.885 146.44 48.785L93.99 18.585C92.64 17.805 90.98 17.805 89.63 18.585L37.18 48.785C37 48.885 36.86 49.035 36.7 49.155C36.56 49.265 36.4 49.355 36.27 49.485C36.12 49.635 36.01 49.825 35.88 49.995C35.78 50.125 35.66 50.245 35.58 50.385C35.46 50.595 35.38 50.835 35.3 51.065C35.25 51.185 35.18 51.305 35.15 51.435C35.05 51.805 35 52.185 35 52.575V232.235C35 233.795 35.84 235.245 37.19 236.025L142.1 296.425C142.33 296.555 142.58 296.635 142.82 296.725C142.93 296.765 143.04 296.835 143.16 296.865C143.53 296.965 143.9 297.015 144.28 297.015C144.66 297.015 145.03 296.965 145.4 296.865C145.5 296.835 145.59 296.775 145.69 296.745C145.95 296.655 146.21 296.565 146.45 296.435L251.36 236.035C252.72 235.255 253.55 233.815 253.55 232.245V174.885L303.81 145.945C305.17 145.165 306 143.725 306 142.155V82.265C305.95 81.875 305.89 81.495 305.8 81.125ZM144.2 227.205L100.57 202.515L146.39 176.135L196.66 147.195L240.33 172.335L208.29 190.625L144.2 227.205ZM244.75 114.995V164.795L226.39 154.225L201.03 139.625V89.825L219.39 100.395L244.75 114.995ZM249.12 57.105L292.81 82.265L249.12 107.425L205.43 82.265L249.12 57.105ZM114.49 184.425L96.13 194.995V85.305L121.49 70.705L139.85 60.135V169.815L114.49 184.425ZM91.76 27.425L135.45 52.585L91.76 77.745L48.07 52.585L91.76 27.425ZM43.67 60.135L62.03 70.705L87.39 85.305V202.545V202.555V202.565C87.39 202.735 87.44 202.895 87.46 203.055C87.49 203.265 87.49 203.485 87.55 203.695V203.705C87.6 203.875 87.69 204.035 87.76 204.195C87.84 204.375 87.89 204.575 87.99 204.745C87.99 204.745 87.99 204.755 88 204.755C88.09 204.905 88.22 205.035 88.33 205.175C88.45 205.335 88.55 205.495 88.69 205.635L88.7 205.645C88.82 205.765 88.98 205.855 89.12 205.965C89.28 206.085 89.42 206.225 89.59 206.325C89.6 206.325 89.6 206.325 89.61 206.335C89.62 206.335 89.62 206.345 89.63 206.345L139.87 234.775V285.065L43.67 229.705V60.135ZM244.75 229.705L148.58 285.075V234.775L219.8 194.115L244.75 179.875V229.705ZM297.2 139.625L253.49 164.795V114.995L278.85 100.395L297.21 89.825V139.625H297.2Z" />
|
||||
</svg>
|
||||
)
|
||||
|
||||
export default ApplicationLogo
|
||||
11
src/components/AuthCard.js
Normal file
11
src/components/AuthCard.js
Normal file
@@ -0,0 +1,11 @@
|
||||
const AuthCard = ({ logo, children }) => (
|
||||
<div className="min-h-screen flex flex-col sm:justify-center items-center pt-6 sm:pt-0 bg-gray-100">
|
||||
<div>{logo}</div>
|
||||
|
||||
<div className="w-full sm:max-w-md mt-6 px-6 py-4 bg-white shadow-md overflow-hidden sm:rounded-lg">
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
export default AuthCard
|
||||
13
src/components/AuthSessionStatus.js
Normal file
13
src/components/AuthSessionStatus.js
Normal file
@@ -0,0 +1,13 @@
|
||||
const AuthSessionStatus = ({ status, className, ...props }) => (
|
||||
<>
|
||||
{status && (
|
||||
<div
|
||||
className={`${className} font-medium text-sm text-green-600`}
|
||||
{...props}>
|
||||
{status}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
|
||||
export default AuthSessionStatus
|
||||
19
src/components/AuthValidationErrors.js
Normal file
19
src/components/AuthValidationErrors.js
Normal file
@@ -0,0 +1,19 @@
|
||||
const AuthValidationErrors = ({ errors = [], ...props }) => (
|
||||
<>
|
||||
{errors.length > 0 && (
|
||||
<div {...props}>
|
||||
<div className="font-medium text-red-600">
|
||||
Whoops! Something went wrong.
|
||||
</div>
|
||||
|
||||
<ul className="mt-3 list-disc list-inside text-sm text-red-600">
|
||||
{errors.map(error => (
|
||||
<li key={error}>{error}</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
|
||||
export default AuthValidationErrors
|
||||
9
src/components/Button.js
Normal file
9
src/components/Button.js
Normal file
@@ -0,0 +1,9 @@
|
||||
const Button = ({ type = 'submit', className, ...props }) => (
|
||||
<button
|
||||
type={type}
|
||||
className={`${className} inline-flex items-center px-4 py-2 bg-gray-800 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-gray-700 active:bg-gray-900 focus:outline-none focus:border-gray-900 focus:ring ring-gray-300 disabled:opacity-25 transition ease-in-out duration-150`}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
|
||||
export default Button
|
||||
61
src/components/Dropdown.js
Normal file
61
src/components/Dropdown.js
Normal file
@@ -0,0 +1,61 @@
|
||||
import React, { useState } from 'react'
|
||||
import { Menu, Transition } from '@headlessui/react'
|
||||
|
||||
const Dropdown = ({
|
||||
align = 'right',
|
||||
width = 48,
|
||||
contentClasses = 'py-1 bg-white',
|
||||
trigger,
|
||||
children,
|
||||
}) => {
|
||||
let alignmentClasses
|
||||
|
||||
switch (width) {
|
||||
case '48':
|
||||
width = 'w-48'
|
||||
break
|
||||
}
|
||||
|
||||
switch (align) {
|
||||
case 'left':
|
||||
alignmentClasses = 'origin-top-left left-0'
|
||||
break
|
||||
case 'top':
|
||||
alignmentClasses = 'origin-top'
|
||||
break
|
||||
case 'right':
|
||||
default:
|
||||
alignmentClasses = 'origin-top-right right-0'
|
||||
break
|
||||
}
|
||||
|
||||
const [open, setOpen] = useState(false)
|
||||
|
||||
return (
|
||||
<Menu as="div" className="relative">
|
||||
{({ open }) => (
|
||||
<>
|
||||
<Menu.Button as={React.Fragment}>{trigger}</Menu.Button>
|
||||
|
||||
<Transition
|
||||
show={open}
|
||||
enter="transition ease-out duration-200"
|
||||
enterFrom="transform opacity-0 scale-95"
|
||||
enterTo="transform opacity-100 scale-100"
|
||||
leave="transition ease-in duration-75"
|
||||
leaveFrom="transform opacity-100 scale-100"
|
||||
leaveTo="transform opacity-0 scale-95"
|
||||
>
|
||||
<div className={`absolute z-50 mt-2 ${width} rounded-md shadow-lg ${alignmentClasses}`}>
|
||||
<Menu.Items className={`rounded-md focus:outline-none ring-1 ring-black ring-opacity-5 ${contentClasses}`} static>
|
||||
{children}
|
||||
</Menu.Items>
|
||||
</div>
|
||||
</Transition>
|
||||
</>
|
||||
)}
|
||||
</Menu>
|
||||
)
|
||||
}
|
||||
|
||||
export default Dropdown
|
||||
26
src/components/DropdownLink.js
Normal file
26
src/components/DropdownLink.js
Normal file
@@ -0,0 +1,26 @@
|
||||
import Link from 'next/link'
|
||||
import { Menu } from '@headlessui/react'
|
||||
|
||||
const DropdownLink = ({ children, ...props }) => (
|
||||
<Menu.Item>{({ active }) => (
|
||||
<Link {...props}>
|
||||
<a className={`w-full text-left block px-4 py-2 text-sm leading-5 text-gray-700 ${active ? 'bg-gray-100' : ''} focus:outline-none transition duration-150 ease-in-out`}>
|
||||
{children}
|
||||
</a>
|
||||
</Link>
|
||||
)}
|
||||
</Menu.Item>
|
||||
)
|
||||
|
||||
export const DropdownButton = ({ children, ...props }) => (
|
||||
<Menu.Item>{({ active }) => (
|
||||
<button
|
||||
className={`w-full text-left block px-4 py-2 text-sm leading-5 text-gray-700 ${active ? 'bg-gray-100' : ''} focus:outline-none transition duration-150 ease-in-out`}
|
||||
{...props}>
|
||||
{children}
|
||||
</button>
|
||||
)}
|
||||
</Menu.Item>
|
||||
)
|
||||
|
||||
export default DropdownLink
|
||||
9
src/components/Input.js
Normal file
9
src/components/Input.js
Normal file
@@ -0,0 +1,9 @@
|
||||
const Input = ({ disabled = false, className, ...props }) => (
|
||||
<input
|
||||
disabled={disabled}
|
||||
className={`${className} rounded-md shadow-sm border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50`}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
|
||||
export default Input
|
||||
9
src/components/Label.js
Normal file
9
src/components/Label.js
Normal file
@@ -0,0 +1,9 @@
|
||||
const Label = ({ className, children, ...props }) => (
|
||||
<label
|
||||
className={`${className} block font-medium text-sm text-gray-700`}
|
||||
{...props}>
|
||||
{children}
|
||||
</label>
|
||||
)
|
||||
|
||||
export default Label
|
||||
24
src/components/Layouts/AppLayout.js
Normal file
24
src/components/Layouts/AppLayout.js
Normal file
@@ -0,0 +1,24 @@
|
||||
import Navigation from '@/components/Layouts/Navigation'
|
||||
import { useAuth } from '@/hooks/auth'
|
||||
|
||||
const AppLayout = ({ header, children }) => {
|
||||
const { user } = useAuth({ middleware: 'auth' })
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-100">
|
||||
<Navigation user={user} />
|
||||
|
||||
{/* Page Heading */}
|
||||
<header className="bg-white shadow">
|
||||
<div className="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
|
||||
{header}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Page Content */}
|
||||
<main>{children}</main>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default AppLayout
|
||||
17
src/components/Layouts/GuestLayout.js
Normal file
17
src/components/Layouts/GuestLayout.js
Normal file
@@ -0,0 +1,17 @@
|
||||
import Head from 'next/head'
|
||||
|
||||
const GuestLayout = ({ children }) => {
|
||||
return (
|
||||
<div>
|
||||
<Head>
|
||||
<title>Laravel</title>
|
||||
</Head>
|
||||
|
||||
<div className="font-sans text-gray-900 antialiased">
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default GuestLayout
|
||||
160
src/components/Layouts/Navigation.js
Normal file
160
src/components/Layouts/Navigation.js
Normal file
@@ -0,0 +1,160 @@
|
||||
import ApplicationLogo from '@/components/ApplicationLogo'
|
||||
import Dropdown from '@/components/Dropdown'
|
||||
import Link from 'next/link'
|
||||
import NavLink from '@/components/NavLink'
|
||||
import ResponsiveNavLink, { ResponsiveNavButton } from '@/components/ResponsiveNavLink'
|
||||
import { DropdownButton } from '@/components/DropdownLink'
|
||||
import { useAuth } from '@/hooks/auth'
|
||||
import { useRouter } from 'next/router'
|
||||
import { useState } from 'react'
|
||||
|
||||
const Navigation = ({ user }) => {
|
||||
const router = useRouter()
|
||||
|
||||
const { logout } = useAuth()
|
||||
|
||||
const [open, setOpen] = useState(false)
|
||||
|
||||
return (
|
||||
<nav className="bg-white border-b border-gray-100">
|
||||
{/* Primary Navigation Menu */}
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="flex justify-between h-16">
|
||||
<div className="flex">
|
||||
{/* Logo */}
|
||||
<div className="flex-shrink-0 flex items-center">
|
||||
<Link href="/dashboard">
|
||||
<a>
|
||||
<ApplicationLogo className="block h-10 w-auto fill-current text-gray-600" />
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Navigation Links */}
|
||||
<div className="hidden space-x-8 sm:-my-px sm:ml-10 sm:flex">
|
||||
<NavLink
|
||||
href="/dashboard"
|
||||
active={router.pathname == '/dashboard'}>
|
||||
Dashboard
|
||||
</NavLink>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Settings Dropdown */}
|
||||
<div className="hidden sm:flex sm:items-center sm:ml-6">
|
||||
<Dropdown
|
||||
align="right"
|
||||
width="48"
|
||||
trigger={
|
||||
<button className="flex items-center text-sm font-medium text-gray-500 hover:text-gray-700 focus:outline-none transition duration-150 ease-in-out">
|
||||
<div>{user?.name}</div>
|
||||
|
||||
<div className="ml-1">
|
||||
<svg
|
||||
className="fill-current h-4 w-4"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 20">
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</button>
|
||||
}>
|
||||
|
||||
{/* Authentication */}
|
||||
<DropdownButton onClick={logout}>
|
||||
Logout
|
||||
</DropdownButton>
|
||||
</Dropdown>
|
||||
</div>
|
||||
|
||||
{/* Hamburger */}
|
||||
<div className="-mr-2 flex items-center sm:hidden">
|
||||
<button
|
||||
onClick={() => setOpen(open => !open)}
|
||||
className="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out">
|
||||
<svg
|
||||
className="h-6 w-6"
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24">
|
||||
{open ? (
|
||||
<path
|
||||
className="inline-flex"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
d="M6 18L18 6M6 6l12 12"
|
||||
/>
|
||||
) : (
|
||||
<path
|
||||
className="inline-flex"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
d="M4 6h16M4 12h16M4 18h16"
|
||||
/>
|
||||
)}
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Responsive Navigation Menu */}
|
||||
{open && (
|
||||
<div className="block sm:hidden">
|
||||
<div className="pt-2 pb-3 space-y-1">
|
||||
<ResponsiveNavLink
|
||||
href="/dashboard"
|
||||
active={router.pathname == '/dashboard'}>
|
||||
Dashboard
|
||||
</ResponsiveNavLink>
|
||||
</div>
|
||||
|
||||
{/* Responsive Settings Options */}
|
||||
<div className="pt-4 pb-1 border-t border-gray-200">
|
||||
<div className="flex items-center px-4">
|
||||
<div className="flex-shrink-0">
|
||||
<svg
|
||||
className="h-10 w-10 fill-current text-gray-400"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor">
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div className="ml-3">
|
||||
<div className="font-medium text-base text-gray-800">
|
||||
{user?.name}
|
||||
</div>
|
||||
<div className="font-medium text-sm text-gray-500">
|
||||
{user?.email}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-3 space-y-1">
|
||||
{/* Authentication */}
|
||||
<ResponsiveNavButton onClick={logout}>
|
||||
Logout
|
||||
</ResponsiveNavButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</nav>
|
||||
)
|
||||
}
|
||||
|
||||
export default Navigation
|
||||
16
src/components/NavLink.js
Normal file
16
src/components/NavLink.js
Normal file
@@ -0,0 +1,16 @@
|
||||
import Link from 'next/link'
|
||||
|
||||
const NavLink = ({ active = false, children, ...props }) => (
|
||||
<Link {...props}>
|
||||
<a
|
||||
className={`inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium leading-5 focus:outline-none transition duration-150 ease-in-out ${
|
||||
active
|
||||
? 'border-indigo-400 text-gray-900 focus:border-indigo-700'
|
||||
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:text-gray-700 focus:border-gray-300'
|
||||
}`}>
|
||||
{children}
|
||||
</a>
|
||||
</Link>
|
||||
)
|
||||
|
||||
export default NavLink
|
||||
23
src/components/ResponsiveNavLink.js
Normal file
23
src/components/ResponsiveNavLink.js
Normal file
@@ -0,0 +1,23 @@
|
||||
import Link from 'next/link'
|
||||
|
||||
const ResponsiveNavLink = ({ active = false, children, ...props }) => (
|
||||
<Link {...props}>
|
||||
<a
|
||||
className={`block pl-3 pr-4 py-2 border-l-4 text-base font-medium leading-5 focus:outline-none transition duration-150 ease-in-out ${
|
||||
active
|
||||
? 'border-indigo-400 text-indigo-700 bg-indigo-50 focus:text-indigo-800 focus:bg-indigo-100 focus:border-indigo-700'
|
||||
: 'border-transparent text-gray-600 hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300 focus:text-gray-800 focus:bg-gray-50 focus:border-gray-300'
|
||||
}`}>
|
||||
{children}
|
||||
</a>
|
||||
</Link>
|
||||
)
|
||||
|
||||
export const ResponsiveNavButton = props => (
|
||||
<button
|
||||
className="block w-full pl-3 pr-4 py-2 border-l-4 text-left text-base font-medium leading-5 focus:outline-none transition duration-150 ease-in-out border-transparent text-gray-600 hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300 focus:text-gray-800 focus:bg-gray-50 focus:border-gray-300"
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
|
||||
export default ResponsiveNavLink
|
||||
115
src/hooks/auth.js
Normal file
115
src/hooks/auth.js
Normal file
@@ -0,0 +1,115 @@
|
||||
import useSWR from 'swr'
|
||||
import axios from '@/lib/axios'
|
||||
import { useEffect } from 'react'
|
||||
import { useRouter } from 'next/router'
|
||||
|
||||
export const useAuth = ({ middleware, redirectIfAuthenticated } = {}) => {
|
||||
const router = useRouter()
|
||||
|
||||
const { data: user, error, revalidate } = useSWR('/api/user', () =>
|
||||
axios
|
||||
.get('/api/user')
|
||||
.then(res => res.data)
|
||||
.catch(error => {
|
||||
if (error.response.status != 409) throw error
|
||||
|
||||
router.push('/verify-email')
|
||||
}),
|
||||
)
|
||||
|
||||
const csrf = () => axios.get('/sanctum/csrf-cookie')
|
||||
|
||||
const register = async ({ setErrors, ...props }) => {
|
||||
await csrf()
|
||||
|
||||
setErrors([])
|
||||
|
||||
axios
|
||||
.post('/register', props)
|
||||
.then(() => revalidate())
|
||||
.catch(error => {
|
||||
if (error.response.status != 422) throw error
|
||||
|
||||
setErrors(Object.values(error.response.data.errors).flat())
|
||||
})
|
||||
}
|
||||
|
||||
const login = async ({ setErrors, setStatus, ...props }) => {
|
||||
await csrf()
|
||||
|
||||
setErrors([])
|
||||
setStatus(null)
|
||||
|
||||
axios
|
||||
.post('/login', props)
|
||||
.then(() => revalidate())
|
||||
.catch(error => {
|
||||
if (error.response.status != 422) throw error
|
||||
|
||||
setErrors(Object.values(error.response.data.errors).flat())
|
||||
})
|
||||
}
|
||||
|
||||
const forgotPassword = async ({ setErrors, setStatus, email }) => {
|
||||
await csrf()
|
||||
|
||||
setErrors([])
|
||||
setStatus(null)
|
||||
|
||||
axios
|
||||
.post('/forgot-password', { email })
|
||||
.then(response => setStatus(response.data.status))
|
||||
.catch(error => {
|
||||
if (error.response.status != 422) throw error
|
||||
|
||||
setErrors(Object.values(error.response.data.errors).flat())
|
||||
})
|
||||
}
|
||||
|
||||
const resetPassword = async ({ setErrors, setStatus, ...props }) => {
|
||||
await csrf()
|
||||
|
||||
setErrors([])
|
||||
setStatus(null)
|
||||
|
||||
axios
|
||||
.post('/reset-password', { token: router.query.token, ...props })
|
||||
.then(response => router.push('/login?reset=' + btoa(response.data.status)))
|
||||
.catch(error => {
|
||||
if (error.response.status != 422) throw error
|
||||
|
||||
setErrors(Object.values(error.response.data.errors).flat())
|
||||
})
|
||||
}
|
||||
|
||||
const resendEmailVerification = ({ setStatus }) => {
|
||||
axios
|
||||
.post('/email/verification-notification')
|
||||
.then(response => setStatus(response.data.status))
|
||||
}
|
||||
|
||||
const logout = async () => {
|
||||
if (! error) {
|
||||
await axios.post('/logout')
|
||||
|
||||
revalidate()
|
||||
}
|
||||
|
||||
window.location.pathname = '/login'
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (middleware == 'guest' && redirectIfAuthenticated && user) router.push(redirectIfAuthenticated)
|
||||
if (middleware == 'auth' && error) logout()
|
||||
}, [user, error])
|
||||
|
||||
return {
|
||||
user,
|
||||
register,
|
||||
login,
|
||||
forgotPassword,
|
||||
resetPassword,
|
||||
resendEmailVerification,
|
||||
logout,
|
||||
}
|
||||
}
|
||||
11
src/lib/axios.js
Normal file
11
src/lib/axios.js
Normal file
@@ -0,0 +1,11 @@
|
||||
import Axios from 'axios'
|
||||
|
||||
const axios = Axios.create({
|
||||
baseURL: process.env.NEXT_PUBLIC_BACKEND_URL,
|
||||
headers: {
|
||||
'X-Requested-With': 'XMLHttpRequest',
|
||||
},
|
||||
withCredentials: true,
|
||||
})
|
||||
|
||||
export default axios
|
||||
17
src/pages/404.js
Normal file
17
src/pages/404.js
Normal file
@@ -0,0 +1,17 @@
|
||||
const NotFoundPage = () => (
|
||||
<div className="relative flex items-top justify-center min-h-screen bg-gray-100 dark:bg-gray-900 sm:items-center sm:pt-0">
|
||||
<div className="max-w-xl mx-auto sm:px-6 lg:px-8">
|
||||
<div className="flex items-center pt-8 sm:justify-start sm:pt-0">
|
||||
<div className="px-4 text-lg text-gray-500 border-r border-gray-400 tracking-wider">
|
||||
404
|
||||
</div>
|
||||
|
||||
<div className="ml-4 text-lg text-gray-500 uppercase tracking-wider">
|
||||
Not Found
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
export default NotFoundPage
|
||||
5
src/pages/_app.js
Normal file
5
src/pages/_app.js
Normal file
@@ -0,0 +1,5 @@
|
||||
import 'tailwindcss/tailwind.css'
|
||||
|
||||
const App = ({ Component, pageProps }) => <Component {...pageProps} />
|
||||
|
||||
export default App
|
||||
27
src/pages/_document.js
Normal file
27
src/pages/_document.js
Normal file
@@ -0,0 +1,27 @@
|
||||
import Document, { Html, Head, Main, NextScript } from 'next/document'
|
||||
|
||||
class MyDocument extends Document {
|
||||
static async getInitialProps(ctx) {
|
||||
const initialProps = await Document.getInitialProps(ctx)
|
||||
return { ...initialProps }
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Html>
|
||||
<Head>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
</Head>
|
||||
<body className="antialiased">
|
||||
<Main />
|
||||
<NextScript />
|
||||
</body>
|
||||
</Html>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default MyDocument
|
||||
30
src/pages/dashboard.js
Normal file
30
src/pages/dashboard.js
Normal file
@@ -0,0 +1,30 @@
|
||||
import AppLayout from '@/components/Layouts/AppLayout'
|
||||
import Head from 'next/head'
|
||||
|
||||
const Dashboard = () => {
|
||||
return (
|
||||
<AppLayout
|
||||
header={
|
||||
<h2 className="font-semibold text-xl text-gray-800 leading-tight">
|
||||
Dashboard
|
||||
</h2>
|
||||
}>
|
||||
|
||||
<Head>
|
||||
<title>Laravel - Dashboard</title>
|
||||
</Head>
|
||||
|
||||
<div className="py-12">
|
||||
<div className="max-w-7xl mx-auto sm:px-6 lg:px-8">
|
||||
<div className="bg-white overflow-hidden shadow-sm sm:rounded-lg">
|
||||
<div className="p-6 bg-white border-b border-gray-200">
|
||||
You're logged in!
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</AppLayout>
|
||||
)
|
||||
}
|
||||
|
||||
export default Dashboard
|
||||
74
src/pages/forgot-password.js
Normal file
74
src/pages/forgot-password.js
Normal file
@@ -0,0 +1,74 @@
|
||||
import ApplicationLogo from '@/components/ApplicationLogo'
|
||||
import AuthCard from '@/components/AuthCard'
|
||||
import AuthSessionStatus from '@/components/AuthSessionStatus'
|
||||
import AuthValidationErrors from '@/components/AuthValidationErrors'
|
||||
import Button from '@/components/Button'
|
||||
import GuestLayout from '@/components/Layouts/GuestLayout'
|
||||
import Input from '@/components/Input'
|
||||
import Label from '@/components/Label'
|
||||
import Link from 'next/link'
|
||||
import { useAuth } from '@/hooks/auth'
|
||||
import { useState } from 'react'
|
||||
|
||||
const ForgotPassword = () => {
|
||||
const { forgotPassword } = useAuth({ middleware: 'guest' })
|
||||
|
||||
const [email, setEmail] = useState('')
|
||||
const [errors, setErrors] = useState([])
|
||||
const [status, setStatus] = useState(null)
|
||||
|
||||
const submitForm = event => {
|
||||
event.preventDefault()
|
||||
|
||||
forgotPassword({ email, setErrors, setStatus })
|
||||
}
|
||||
|
||||
return (
|
||||
<GuestLayout>
|
||||
<AuthCard
|
||||
logo={
|
||||
<Link href="/">
|
||||
<a>
|
||||
<ApplicationLogo className="w-20 h-20 fill-current text-gray-500" />
|
||||
</a>
|
||||
</Link>
|
||||
}>
|
||||
|
||||
<div className="mb-4 text-sm text-gray-600">
|
||||
Forgot your password? No problem. Just let us know your
|
||||
email address and we will email you a password reset link
|
||||
that will allow you to choose a new one.
|
||||
</div>
|
||||
|
||||
{/* Session Status */}
|
||||
<AuthSessionStatus className="mb-4" status={status} />
|
||||
|
||||
{/* Validation Errors */}
|
||||
<AuthValidationErrors className="mb-4" errors={errors} />
|
||||
|
||||
<form onSubmit={submitForm}>
|
||||
{/* Email Address */}
|
||||
<div>
|
||||
<Label htmlFor="email">Email</Label>
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
name="email"
|
||||
value={email}
|
||||
className="block mt-1 w-full"
|
||||
onChange={event => setEmail(event.target.value)}
|
||||
required
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-end mt-4">
|
||||
<Button>Email Password Reset Link</Button>
|
||||
</div>
|
||||
</form>
|
||||
</AuthCard>
|
||||
</GuestLayout>
|
||||
)
|
||||
}
|
||||
|
||||
export default ForgotPassword
|
||||
291
src/pages/index.js
Normal file
291
src/pages/index.js
Normal file
@@ -0,0 +1,291 @@
|
||||
import Head from 'next/head'
|
||||
import Link from 'next/link'
|
||||
import { useAuth } from '@/hooks/auth'
|
||||
|
||||
export default function Home() {
|
||||
const { user } = useAuth({ middleware: 'guest' })
|
||||
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>Laravel</title>
|
||||
</Head>
|
||||
|
||||
<div className="relative flex items-top justify-center min-h-screen bg-gray-100 dark:bg-gray-900 sm:items-center sm:pt-0">
|
||||
<div className="hidden fixed top-0 right-0 px-6 py-4 sm:block">
|
||||
{user ?
|
||||
<Link href="/dashboard">
|
||||
<a className="ml-4 text-sm text-gray-700 underline">
|
||||
Dashboard
|
||||
</a>
|
||||
</Link>
|
||||
:
|
||||
<>
|
||||
<Link href="/login">
|
||||
<a className="text-sm text-gray-700 underline">Login</a>
|
||||
</Link>
|
||||
|
||||
<Link href="/register">
|
||||
<a className="ml-4 text-sm text-gray-700 underline">
|
||||
Register
|
||||
</a>
|
||||
</Link>
|
||||
</>
|
||||
}
|
||||
</div>
|
||||
|
||||
<div className="max-w-6xl mx-auto sm:px-6 lg:px-8">
|
||||
<div className="flex justify-center pt-8 sm:justify-start sm:pt-0">
|
||||
<svg
|
||||
viewBox="0 0 651 192"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="h-16 w-auto text-gray-700 sm:h-20">
|
||||
<g clipPath="url(#clip0)" fill="#EF3B2D">
|
||||
<path d="M248.032 44.676h-16.466v100.23h47.394v-14.748h-30.928V44.676zM337.091 87.202c-2.101-3.341-5.083-5.965-8.949-7.875-3.865-1.909-7.756-2.864-11.669-2.864-5.062 0-9.69.931-13.89 2.792-4.201 1.861-7.804 4.417-10.811 7.661-3.007 3.246-5.347 6.993-7.016 11.239-1.672 4.249-2.506 8.713-2.506 13.389 0 4.774.834 9.26 2.506 13.459 1.669 4.202 4.009 7.925 7.016 11.169 3.007 3.246 6.609 5.799 10.811 7.66 4.199 1.861 8.828 2.792 13.89 2.792 3.913 0 7.804-.955 11.669-2.863 3.866-1.908 6.849-4.533 8.949-7.875v9.021h15.607V78.182h-15.607v9.02zm-1.431 32.503c-.955 2.578-2.291 4.821-4.009 6.73-1.719 1.91-3.795 3.437-6.229 4.582-2.435 1.146-5.133 1.718-8.091 1.718-2.96 0-5.633-.572-8.019-1.718-2.387-1.146-4.438-2.672-6.156-4.582-1.719-1.909-3.032-4.152-3.938-6.73-.909-2.577-1.36-5.298-1.36-8.161 0-2.864.451-5.585 1.36-8.162.905-2.577 2.219-4.819 3.938-6.729 1.718-1.908 3.77-3.437 6.156-4.582 2.386-1.146 5.059-1.718 8.019-1.718 2.958 0 5.656.572 8.091 1.718 2.434 1.146 4.51 2.674 6.229 4.582 1.718 1.91 3.054 4.152 4.009 6.729.953 2.577 1.432 5.298 1.432 8.162-.001 2.863-.479 5.584-1.432 8.161zM463.954 87.202c-2.101-3.341-5.083-5.965-8.949-7.875-3.865-1.909-7.756-2.864-11.669-2.864-5.062 0-9.69.931-13.89 2.792-4.201 1.861-7.804 4.417-10.811 7.661-3.007 3.246-5.347 6.993-7.016 11.239-1.672 4.249-2.506 8.713-2.506 13.389 0 4.774.834 9.26 2.506 13.459 1.669 4.202 4.009 7.925 7.016 11.169 3.007 3.246 6.609 5.799 10.811 7.66 4.199 1.861 8.828 2.792 13.89 2.792 3.913 0 7.804-.955 11.669-2.863 3.866-1.908 6.849-4.533 8.949-7.875v9.021h15.607V78.182h-15.607v9.02zm-1.432 32.503c-.955 2.578-2.291 4.821-4.009 6.73-1.719 1.91-3.795 3.437-6.229 4.582-2.435 1.146-5.133 1.718-8.091 1.718-2.96 0-5.633-.572-8.019-1.718-2.387-1.146-4.438-2.672-6.156-4.582-1.719-1.909-3.032-4.152-3.938-6.73-.909-2.577-1.36-5.298-1.36-8.161 0-2.864.451-5.585 1.36-8.162.905-2.577 2.219-4.819 3.938-6.729 1.718-1.908 3.77-3.437 6.156-4.582 2.386-1.146 5.059-1.718 8.019-1.718 2.958 0 5.656.572 8.091 1.718 2.434 1.146 4.51 2.674 6.229 4.582 1.718 1.91 3.054 4.152 4.009 6.729.953 2.577 1.432 5.298 1.432 8.162 0 2.863-.479 5.584-1.432 8.161zM650.772 44.676h-15.606v100.23h15.606V44.676zM365.013 144.906h15.607V93.538h26.776V78.182h-42.383v66.724zM542.133 78.182l-19.616 51.096-19.616-51.096h-15.808l25.617 66.724h19.614l25.617-66.724h-15.808zM591.98 76.466c-19.112 0-34.239 15.706-34.239 35.079 0 21.416 14.641 35.079 36.239 35.079 12.088 0 19.806-4.622 29.234-14.688l-10.544-8.158c-.006.008-7.958 10.449-19.832 10.449-13.802 0-19.612-11.127-19.612-16.884h51.777c2.72-22.043-11.772-40.877-33.023-40.877zm-18.713 29.28c.12-1.284 1.917-16.884 18.589-16.884 16.671 0 18.697 15.598 18.813 16.884h-37.402zM184.068 43.892c-.024-.088-.073-.165-.104-.25-.058-.157-.108-.316-.191-.46-.056-.097-.137-.176-.203-.265-.087-.117-.161-.242-.265-.345-.085-.086-.194-.148-.29-.223-.109-.085-.206-.182-.327-.252l-.002-.001-.002-.002-35.648-20.524a2.971 2.971 0 00-2.964 0l-35.647 20.522-.002.002-.002.001c-.121.07-.219.167-.327.252-.096.075-.205.138-.29.223-.103.103-.178.228-.265.345-.066.089-.147.169-.203.265-.083.144-.133.304-.191.46-.031.085-.08.162-.104.25-.067.249-.103.51-.103.776v38.979l-29.706 17.103V24.493a3 3 0 00-.103-.776c-.024-.088-.073-.165-.104-.25-.058-.157-.108-.316-.191-.46-.056-.097-.137-.176-.203-.265-.087-.117-.161-.242-.265-.345-.085-.086-.194-.148-.29-.223-.109-.085-.206-.182-.327-.252l-.002-.001-.002-.002L40.098 1.396a2.971 2.971 0 00-2.964 0L1.487 21.919l-.002.002-.002.001c-.121.07-.219.167-.327.252-.096.075-.205.138-.29.223-.103.103-.178.228-.265.345-.066.089-.147.169-.203.265-.083.144-.133.304-.191.46-.031.085-.08.162-.104.25-.067.249-.103.51-.103.776v122.09c0 1.063.568 2.044 1.489 2.575l71.293 41.045c.156.089.324.143.49.202.078.028.15.074.23.095a2.98 2.98 0 001.524 0c.069-.018.132-.059.2-.083.176-.061.354-.119.519-.214l71.293-41.045a2.971 2.971 0 001.489-2.575v-38.979l34.158-19.666a2.971 2.971 0 001.489-2.575V44.666a3.075 3.075 0 00-.106-.774zM74.255 143.167l-29.648-16.779 31.136-17.926.001-.001 34.164-19.669 29.674 17.084-21.772 12.428-43.555 24.863zm68.329-76.259v33.841l-12.475-7.182-17.231-9.92V49.806l12.475 7.182 17.231 9.92zm2.97-39.335l29.693 17.095-29.693 17.095-29.693-17.095 29.693-17.095zM54.06 114.089l-12.475 7.182V46.733l17.231-9.92 12.475-7.182v74.537l-17.231 9.921zM38.614 7.398l29.693 17.095-29.693 17.095L8.921 24.493 38.614 7.398zM5.938 29.632l12.475 7.182 17.231 9.92v79.676l.001.005-.001.006c0 .114.032.221.045.333.017.146.021.294.059.434l.002.007c.032.117.094.222.14.334.051.124.088.255.156.371a.036.036 0 00.004.009c.061.105.149.191.222.288.081.105.149.22.244.314l.008.01c.084.083.19.142.284.215.106.083.202.178.32.247l.013.005.011.008 34.139 19.321v34.175L5.939 144.867V29.632h-.001zm136.646 115.235l-65.352 37.625V148.31l48.399-27.628 16.953-9.677v33.862zm35.646-61.22l-29.706 17.102V66.908l17.231-9.92 12.475-7.182v33.841z" />
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div className="mt-8 bg-white dark:bg-gray-800 overflow-hidden shadow sm:rounded-lg">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2">
|
||||
<div className="p-6">
|
||||
<div className="flex items-center">
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
viewBox="0 0 24 24"
|
||||
className="w-8 h-8 text-gray-500">
|
||||
<path d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
|
||||
</svg>
|
||||
|
||||
<div className="ml-4 text-lg leading-7 font-semibold">
|
||||
<a
|
||||
href="https://laravel.com/docs"
|
||||
className="underline text-gray-900 dark:text-white">
|
||||
Documentation
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="ml-12">
|
||||
<div className="mt-2 text-gray-600 dark:text-gray-400 text-sm">
|
||||
Laravel has wonderful, thorough
|
||||
documentation covering every aspect of
|
||||
the framework. Whether you are new to
|
||||
the framework or have previous
|
||||
experience with Laravel, we recommend
|
||||
reading all of the documentation from
|
||||
beginning to end.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-6 border-t border-gray-200 dark:border-gray-700 md:border-t-0 md:border-l">
|
||||
<div className="flex items-center">
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
viewBox="0 0 24 24"
|
||||
className="w-8 h-8 text-gray-500">
|
||||
<path d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
|
||||
<path d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
</svg>
|
||||
|
||||
<div className="ml-4 text-lg leading-7 font-semibold">
|
||||
<a
|
||||
href="https://laracasts.com"
|
||||
className="underline text-gray-900 dark:text-white">
|
||||
Laracasts
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="ml-12">
|
||||
<div className="mt-2 text-gray-600 dark:text-gray-400 text-sm">
|
||||
Laracasts offers thousands of video
|
||||
tutorials on Laravel, PHP, and
|
||||
JavaScript development. Check them out,
|
||||
see for yourself, and massively level up
|
||||
your development skills in the process.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-6 border-t border-gray-200 dark:border-gray-700">
|
||||
<div className="flex items-center">
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
viewBox="0 0 24 24"
|
||||
className="w-8 h-8 text-gray-500">
|
||||
<path d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z" />
|
||||
</svg>
|
||||
|
||||
<div className="ml-4 text-lg leading-7 font-semibold">
|
||||
<a
|
||||
href="https://laravel-news.com/"
|
||||
className="underline text-gray-900 dark:text-white">
|
||||
Laravel News
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="ml-12">
|
||||
<div className="mt-2 text-gray-600 dark:text-gray-400 text-sm">
|
||||
Laravel News is a community driven
|
||||
portal and newsletter aggregating all of
|
||||
the latest and most important news in
|
||||
the Laravel ecosystem, including new
|
||||
package releases and tutorials.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-6 border-t border-gray-200 dark:border-gray-700 md:border-l">
|
||||
<div className="flex items-center">
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
viewBox="0 0 24 24"
|
||||
className="w-8 h-8 text-gray-500">
|
||||
<path d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
|
||||
<div className="ml-4 text-lg leading-7 font-semibold text-gray-900 dark:text-white">
|
||||
Vibrant Ecosystem
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="ml-12">
|
||||
<div className="mt-2 text-gray-600 dark:text-gray-400 text-sm">
|
||||
Laravel's robust library of first-party
|
||||
tools and libraries, such as{' '}
|
||||
<a
|
||||
href="https://forge.laravel.com"
|
||||
className="underline">
|
||||
Forge
|
||||
</a>
|
||||
,{' '}
|
||||
<a
|
||||
href="https://vapor.laravel.com"
|
||||
className="underline">
|
||||
Vapor
|
||||
</a>
|
||||
,{' '}
|
||||
<a
|
||||
href="https://nova.laravel.com"
|
||||
className="underline">
|
||||
Nova
|
||||
</a>
|
||||
, and{' '}
|
||||
<a
|
||||
href="https://envoyer.io"
|
||||
className="underline">
|
||||
Envoyer
|
||||
</a>{' '}
|
||||
help you take your projects to the next
|
||||
level. Pair them with powerful open
|
||||
source libraries like{' '}
|
||||
<a
|
||||
href="https://laravel.com/docs/billing"
|
||||
className="underline">
|
||||
Cashier
|
||||
</a>
|
||||
,{' '}
|
||||
<a
|
||||
href="https://laravel.com/docs/dusk"
|
||||
className="underline">
|
||||
Dusk
|
||||
</a>
|
||||
,{' '}
|
||||
<a
|
||||
href="https://laravel.com/docs/broadcasting"
|
||||
className="underline">
|
||||
Echo
|
||||
</a>
|
||||
,{' '}
|
||||
<a
|
||||
href="https://laravel.com/docs/horizon"
|
||||
className="underline">
|
||||
Horizon
|
||||
</a>
|
||||
,{' '}
|
||||
<a
|
||||
href="https://laravel.com/docs/sanctum"
|
||||
className="underline">
|
||||
Sanctum
|
||||
</a>
|
||||
,{' '}
|
||||
<a
|
||||
href="https://laravel.com/docs/telescope"
|
||||
className="underline">
|
||||
Telescope
|
||||
</a>
|
||||
, and more.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-center mt-4 sm:items-center sm:justify-between">
|
||||
<div className="text-center text-sm text-gray-500 sm:text-left">
|
||||
<div className="flex items-center">
|
||||
<svg
|
||||
fill="none"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
className="-mt-px w-5 h-5 text-gray-400">
|
||||
<path d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />
|
||||
</svg>
|
||||
|
||||
<a
|
||||
href="https://laravel.bigcartel.com"
|
||||
className="ml-1 underline">
|
||||
Shop
|
||||
</a>
|
||||
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
viewBox="0 0 24 24"
|
||||
className="ml-4 -mt-px w-5 h-5 text-gray-400">
|
||||
<path d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
|
||||
</svg>
|
||||
|
||||
<a
|
||||
href="https://github.com/sponsors/taylorotwell"
|
||||
className="ml-1 underline">
|
||||
Sponsor
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="ml-4 text-center text-sm text-gray-500 sm:text-right sm:ml-0">
|
||||
Laravel Breeze + Next.js template
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
122
src/pages/login.js
Normal file
122
src/pages/login.js
Normal file
@@ -0,0 +1,122 @@
|
||||
import ApplicationLogo from '@/components/ApplicationLogo'
|
||||
import AuthCard from '@/components/AuthCard'
|
||||
import AuthSessionStatus from '@/components/AuthSessionStatus'
|
||||
import AuthValidationErrors from '@/components/AuthValidationErrors'
|
||||
import Button from '@/components/Button'
|
||||
import GuestLayout from '@/components/Layouts/GuestLayout'
|
||||
import Input from '@/components/Input'
|
||||
import Label from '@/components/Label'
|
||||
import Link from 'next/link'
|
||||
import { useAuth } from '@/hooks/auth'
|
||||
import { useEffect, useState } from 'react'
|
||||
import { useRouter } from 'next/router'
|
||||
|
||||
const Login = () => {
|
||||
const router = useRouter()
|
||||
|
||||
const { login } = useAuth({
|
||||
middleware: 'guest',
|
||||
redirectIfAuthenticated: '/dashboard',
|
||||
})
|
||||
|
||||
const [email, setEmail] = useState('')
|
||||
const [password, setPassword] = useState('')
|
||||
const [errors, setErrors] = useState([])
|
||||
const [status, setStatus] = useState(null)
|
||||
|
||||
useEffect(() => {
|
||||
if (router.query.reset?.length > 0 && errors.length == 0) {
|
||||
setStatus(atob(router.query.reset))
|
||||
} else {
|
||||
setStatus(null)
|
||||
}
|
||||
})
|
||||
|
||||
const submitForm = async event => {
|
||||
event.preventDefault()
|
||||
|
||||
login({ email, password, setErrors, setStatus })
|
||||
}
|
||||
|
||||
return (
|
||||
<GuestLayout>
|
||||
<AuthCard
|
||||
logo={
|
||||
<Link href="/">
|
||||
<a>
|
||||
<ApplicationLogo className="w-20 h-20 fill-current text-gray-500" />
|
||||
</a>
|
||||
</Link>
|
||||
}>
|
||||
|
||||
{/* Session Status */}
|
||||
<AuthSessionStatus className="mb-4" status={status} />
|
||||
|
||||
{/* Validation Errors */}
|
||||
<AuthValidationErrors className="mb-4" errors={errors} />
|
||||
|
||||
<form onSubmit={submitForm}>
|
||||
{/* Email Address */}
|
||||
<div>
|
||||
<Label htmlFor="email">Email</Label>
|
||||
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
value={email}
|
||||
className="block mt-1 w-full"
|
||||
onChange={event => setEmail(event.target.value)}
|
||||
required
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Password */}
|
||||
<div className="mt-4">
|
||||
<Label htmlFor="password">Password</Label>
|
||||
|
||||
<Input
|
||||
id="password"
|
||||
type="password"
|
||||
value={password}
|
||||
className="block mt-1 w-full"
|
||||
onChange={event => setPassword(event.target.value)}
|
||||
required
|
||||
autoComplete="current-password"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Remember Me */}
|
||||
<div className="block mt-4">
|
||||
<label
|
||||
htmlFor="remember_me"
|
||||
className="inline-flex items-center">
|
||||
<input
|
||||
id="remember_me"
|
||||
type="checkbox"
|
||||
name="remember"
|
||||
className="rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
|
||||
/>
|
||||
|
||||
<span className="ml-2 text-sm text-gray-600">
|
||||
Remember me
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-end mt-4">
|
||||
<Link href="/forgot-password">
|
||||
<a className="underline text-sm text-gray-600 hover:text-gray-900">
|
||||
Forgot your password?
|
||||
</a>
|
||||
</Link>
|
||||
|
||||
<Button className="ml-3">Login</Button>
|
||||
</div>
|
||||
</form>
|
||||
</AuthCard>
|
||||
</GuestLayout>
|
||||
)
|
||||
}
|
||||
|
||||
export default Login
|
||||
114
src/pages/password-reset/[token].js
Normal file
114
src/pages/password-reset/[token].js
Normal file
@@ -0,0 +1,114 @@
|
||||
import ApplicationLogo from '@/components/ApplicationLogo'
|
||||
import AuthCard from '@/components/AuthCard'
|
||||
import AuthSessionStatus from '@/components/AuthSessionStatus'
|
||||
import AuthValidationErrors from '@/components/AuthValidationErrors'
|
||||
import Button from '@/components/Button'
|
||||
import GuestLayout from '@/components/Layouts/GuestLayout'
|
||||
import Input from '@/components/Input'
|
||||
import Label from '@/components/Label'
|
||||
import Link from 'next/link'
|
||||
import { useAuth } from '@/hooks/auth'
|
||||
import { useEffect, useState } from 'react'
|
||||
import { useRouter } from 'next/router'
|
||||
|
||||
const PasswordReset = () => {
|
||||
const router = useRouter()
|
||||
|
||||
const { resetPassword } = useAuth({ middleware: 'guest' })
|
||||
|
||||
const [email, setEmail] = useState('')
|
||||
const [password, setPassword] = useState('')
|
||||
const [password_confirmation, setPasswordConfirmation] = useState('')
|
||||
const [errors, setErrors] = useState([])
|
||||
const [status, setStatus] = useState(null)
|
||||
|
||||
const submitForm = event => {
|
||||
event.preventDefault()
|
||||
|
||||
resetPassword({
|
||||
email,
|
||||
password,
|
||||
password_confirmation,
|
||||
setErrors,
|
||||
setStatus,
|
||||
})
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
setEmail(router.query.email || '')
|
||||
}, [router.query.email])
|
||||
|
||||
return (
|
||||
<GuestLayout>
|
||||
<AuthCard
|
||||
logo={
|
||||
<Link href="/">
|
||||
<a>
|
||||
<ApplicationLogo className="w-20 h-20 fill-current text-gray-500" />
|
||||
</a>
|
||||
</Link>
|
||||
}>
|
||||
|
||||
{/* Session Status */}
|
||||
<AuthSessionStatus className="mb-4" status={status} />
|
||||
|
||||
{/* Validation Errors */}
|
||||
<AuthValidationErrors className="mb-4" errors={errors} />
|
||||
|
||||
<form onSubmit={submitForm}>
|
||||
{/* Email Address */}
|
||||
<div>
|
||||
<Label htmlFor="email">Email</Label>
|
||||
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
value={email}
|
||||
className="block mt-1 w-full"
|
||||
onChange={event => setEmail(event.target.value)}
|
||||
required
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Password */}
|
||||
<div className="mt-4">
|
||||
<Label htmlFor="password">Password</Label>
|
||||
<Input
|
||||
id="password"
|
||||
type="password"
|
||||
value={password}
|
||||
className="block mt-1 w-full"
|
||||
onChange={event => setPassword(event.target.value)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Confirm Password */}
|
||||
<div className="mt-4">
|
||||
<Label htmlFor="password_confirmation">
|
||||
Confirm Password
|
||||
</Label>
|
||||
|
||||
<Input
|
||||
id="password_confirmation"
|
||||
type="password"
|
||||
value={password_confirmation}
|
||||
className="block mt-1 w-full"
|
||||
onChange={event =>
|
||||
setPasswordConfirmation(event.target.value)
|
||||
}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-end mt-4">
|
||||
<Button>Reset Password</Button>
|
||||
</div>
|
||||
</form>
|
||||
</AuthCard>
|
||||
</GuestLayout>
|
||||
)
|
||||
}
|
||||
|
||||
export default PasswordReset
|
||||
122
src/pages/register.js
Normal file
122
src/pages/register.js
Normal file
@@ -0,0 +1,122 @@
|
||||
import ApplicationLogo from '@/components/ApplicationLogo'
|
||||
import AuthCard from '@/components/AuthCard'
|
||||
import AuthValidationErrors from '@/components/AuthValidationErrors'
|
||||
import Button from '@/components/Button'
|
||||
import GuestLayout from '@/components/Layouts/GuestLayout'
|
||||
import Input from '@/components/Input'
|
||||
import Label from '@/components/Label'
|
||||
import Link from 'next/link'
|
||||
import { useAuth } from '@/hooks/auth'
|
||||
import { useState } from 'react'
|
||||
|
||||
const Register = () => {
|
||||
const { register } = useAuth({
|
||||
middleware: 'guest',
|
||||
redirectIfAuthenticated: '/dashboard',
|
||||
})
|
||||
|
||||
const [name, setName] = useState('')
|
||||
const [email, setEmail] = useState('')
|
||||
const [password, setPassword] = useState('')
|
||||
const [password_confirmation, setPasswordConfirmation] = useState('')
|
||||
const [errors, setErrors] = useState([])
|
||||
|
||||
const submitForm = event => {
|
||||
event.preventDefault()
|
||||
|
||||
register({ name, email, password, password_confirmation, setErrors })
|
||||
}
|
||||
|
||||
return (
|
||||
<GuestLayout>
|
||||
<AuthCard
|
||||
logo={
|
||||
<Link href="/">
|
||||
<a>
|
||||
<ApplicationLogo className="w-20 h-20 fill-current text-gray-500" />
|
||||
</a>
|
||||
</Link>
|
||||
}>
|
||||
|
||||
{/* Validation Errors */}
|
||||
<AuthValidationErrors className="mb-4" errors={errors} />
|
||||
|
||||
<form onSubmit={submitForm}>
|
||||
{/* Name */}
|
||||
<div>
|
||||
<Label htmlFor="name">Name</Label>
|
||||
|
||||
<Input
|
||||
id="name"
|
||||
type="text"
|
||||
value={name}
|
||||
className="block mt-1 w-full"
|
||||
onChange={event => setName(event.target.value)}
|
||||
required
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Email Address */}
|
||||
<div className="mt-4">
|
||||
<Label htmlFor="email">Email</Label>
|
||||
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
value={email}
|
||||
className="block mt-1 w-full"
|
||||
onChange={event => setEmail(event.target.value)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Password */}
|
||||
<div className="mt-4">
|
||||
<Label htmlFor="password">Password</Label>
|
||||
|
||||
<Input
|
||||
id="password"
|
||||
type="password"
|
||||
value={password}
|
||||
className="block mt-1 w-full"
|
||||
onChange={event => setPassword(event.target.value)}
|
||||
required
|
||||
autoComplete="new-password"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Confirm Password */}
|
||||
<div className="mt-4">
|
||||
<Label htmlFor="password_confirmation">
|
||||
Confirm Password
|
||||
</Label>
|
||||
|
||||
<Input
|
||||
id="password_confirmation"
|
||||
type="password"
|
||||
value={password_confirmation}
|
||||
className="block mt-1 w-full"
|
||||
onChange={event =>
|
||||
setPasswordConfirmation(event.target.value)
|
||||
}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-end mt-4">
|
||||
<Link href="/login">
|
||||
<a className="underline text-sm text-gray-600 hover:text-gray-900">
|
||||
Already registered?
|
||||
</a>
|
||||
</Link>
|
||||
|
||||
<Button className="ml-4">Register</Button>
|
||||
</div>
|
||||
</form>
|
||||
</AuthCard>
|
||||
</GuestLayout>
|
||||
)
|
||||
}
|
||||
|
||||
export default Register
|
||||
59
src/pages/verify-email.js
Normal file
59
src/pages/verify-email.js
Normal file
@@ -0,0 +1,59 @@
|
||||
import ApplicationLogo from '@/components/ApplicationLogo'
|
||||
import AuthCard from '@/components/AuthCard'
|
||||
import Button from '@/components/Button'
|
||||
import GuestLayout from '@/components/Layouts/GuestLayout'
|
||||
import Link from 'next/link'
|
||||
import { useAuth } from '@/hooks/auth'
|
||||
import { useState } from 'react'
|
||||
|
||||
const VerifyEmail = () => {
|
||||
const { logout, resendEmailVerification } = useAuth({
|
||||
middleware: 'auth',
|
||||
})
|
||||
|
||||
const [status, setStatus] = useState(null)
|
||||
|
||||
return (
|
||||
<GuestLayout>
|
||||
<AuthCard
|
||||
logo={
|
||||
<Link href="/">
|
||||
<a>
|
||||
<ApplicationLogo className="w-20 h-20 fill-current text-gray-500" />
|
||||
</a>
|
||||
</Link>
|
||||
}>
|
||||
|
||||
<div className="mb-4 text-sm text-gray-600">
|
||||
Thanks for signing up! Before getting started, could you
|
||||
verify your email address by clicking on the link we just
|
||||
emailed to you? If you didn't receive the email, we will
|
||||
gladly send you another.
|
||||
</div>
|
||||
|
||||
{status == 'verification-link-sent' && (
|
||||
<div className="mb-4 font-medium text-sm text-green-600">
|
||||
A new verification link has been sent to the email
|
||||
address you provided during registration.
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="mt-4 flex items-center justify-between">
|
||||
<Button
|
||||
onClick={() => resendEmailVerification({ setStatus })}>
|
||||
Resend Verification Email
|
||||
</Button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className="underline text-sm text-gray-600 hover:text-gray-900"
|
||||
onClick={logout}>
|
||||
Logout
|
||||
</button>
|
||||
</div>
|
||||
</AuthCard>
|
||||
</GuestLayout>
|
||||
)
|
||||
}
|
||||
|
||||
export default VerifyEmail
|
||||
19
tailwind.config.js
Normal file
19
tailwind.config.js
Normal file
@@ -0,0 +1,19 @@
|
||||
const defaultTheme = require('tailwindcss/defaultTheme')
|
||||
|
||||
module.exports = {
|
||||
purge: ['./src/**/*.js'],
|
||||
darkMode: 'media',
|
||||
theme: {
|
||||
extend: {
|
||||
fontFamily: {
|
||||
sans: ['Nunito', ...defaultTheme.fontFamily.sans],
|
||||
},
|
||||
},
|
||||
},
|
||||
variants: {
|
||||
extend: {
|
||||
opacity: ['disabled'],
|
||||
},
|
||||
},
|
||||
plugins: [require('@tailwindcss/forms')],
|
||||
}
|
||||
Reference in New Issue
Block a user