Skip to content

Commit

Permalink
Switch axios and SWR to Ky and react-query
Browse files Browse the repository at this point in the history
  • Loading branch information
@MaalTi
MaalTi committed Jun 23, 2024
1 parent f2e0a46 commit 7189bbc
Show file tree
Hide file tree
Showing 9 changed files with 331 additions and 213 deletions.
35 changes: 19 additions & 16 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,24 +10,27 @@
"lint:fix": "next lint --fix"
},
"dependencies": {
"@headlessui/react": "^1.4.2",
"axios": "^0.21.1",
"next": "^14.2.3",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"swr": "^1.3.0"
"@headlessui/react": "^1.7.19",
"@tanstack/react-query": "^5.45.1",
"ky": "^1.3.0",
"next": "^14.2.4",
"react": "^18.3.1",
"react-dom": "^18.3.1"
},
"devDependencies": {
"@babel/eslint-parser": "^7.12.1",
"@babel/preset-react": "^7.18.6",
"@next/eslint-plugin-next": "^14.2.3",
"@tailwindcss/forms": "^0.5.2",
"autoprefixer": "^10.4.2",
"eslint": "^8.27.0",
"eslint-config-next": "^14.0.3",
"@babel/eslint-parser": "^7.24.7",
"@babel/preset-react": "^7.24.7",
"@next/eslint-plugin-next": "^14.2.4",
"@tailwindcss/forms": "^0.5.7",
"@tanstack/eslint-plugin-query": "^5.43.1",
"@tanstack/react-query-devtools": "^5.45.1",
"autoprefixer": "^10.4.19",
"eslint": "^8.57.0",
"eslint-config-next": "^14.2.4",
"eslint-config-prettier": "^7.2.0",
"postcss": "^8.4.6",
"prettier": "^3.2.5",
"tailwindcss": "^3.4.3"
"postcss": "^8.4.38",
"prettier": "^3.3.2",
"react-icons": "^5.2.1",
"tailwindcss": "^3.4.4"
}
}
77 changes: 41 additions & 36 deletions src/app/(auth)/login/page.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,25 +9,29 @@ import { useAuth } from '@/hooks/auth'
import { useEffect, useState } from 'react'
import { useRouter } from 'next/navigation'
import AuthSessionStatus from '@/app/(auth)/AuthSessionStatus'
import { HiOutlineEye, HiOutlineEyeOff } from "react-icons/hi"

const Login = () => {
const router = useRouter()

const { login } = useAuth({
const { login, loginPending } = useAuth({
middleware: 'guest',
redirectIfAuthenticated: '/dashboard',
})

const [email, setEmail] = useState('')
const [password, setPassword] = useState('')
const [shouldRemember, setShouldRemember] = useState(false)
const [showPassword, setShowPassword] = useState(false)
const [errors, setErrors] = useState([])
const [status, setStatus] = useState(null)

useEffect(() => {
if (router.reset?.length > 0 && errors.length === 0) {
if (router.reset?.length > 0 && errors.length === 0)
{
setStatus(atob(router.reset))
} else {
} else
{
setStatus(null)
}
})
Expand All @@ -51,38 +55,38 @@ const Login = () => {
{/* Email Address */}
<div>
<Label htmlFor="email">Email</Label>

<Input
id="email"
type="email"
value={email}
className="block mt-1 w-full"
className="block w-full mt-1"
onChange={event => setEmail(event.target.value)}
required
autoFocus
autoComplete="email"
/>

<InputError messages={errors.email} className="mt-2" />
</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"
/>

<InputError
messages={errors.password}
className="mt-2"
/>
<div className="relative">
<Input
id="password"
type={showPassword ? "text" : "password"}
value={password}
className="block w-full mt-1"
onChange={event => setPassword(event.target.value)}
required
autoComplete="current-password"
/>
<button className="absolute flex items-center justify-center w-6 h-6 top-2 right-2" title={showPassword ? 'Masquer' : 'Afficher'} onClick={() => setShowPassword(!showPassword)}>
{showPassword ? <HiOutlineEyeOff /> : <HiOutlineEye />}
</button>
</div>
<InputError messages={errors.password} className="mt-2" />
</div>

{/* Remember Me */}
Expand All @@ -94,26 +98,27 @@ const Login = () => {
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"
onChange={event =>
setShouldRemember(event.target.checked)
}
className="text-indigo-600 border-gray-300 rounded shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
onChange={event => setShouldRemember(event.target.checked)}
/>

<span className="ml-2 text-sm text-gray-600">
Remember me
</span>
<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"
className="underline text-sm text-gray-600 hover:text-gray-900">
Forgot your password?
</Link>

<Button className="ml-3">Login</Button>
<div className="flex items-center mt-4">
<div className="flex flex-wrap items-center">
<Link
href="/register"
className="text-sm text-gray-600 underline hover:text-gray-900">
No account yet?
</Link>
<Link
href="/forgot-password"
className="text-sm text-gray-600 underline hover:text-gray-900">
Forgot your password?
</Link>
</div>
<Button className="ml-3" disabled={loginPending}>{loginPending ? 'Please wait...' : 'Login'}</Button>
</div>
</form>
</>
Expand Down
56 changes: 31 additions & 25 deletions src/app/(auth)/password-reset/[token]/page.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import { useAuth } from '@/hooks/auth'
import { useEffect, useState } from 'react'
import { useSearchParams } from 'next/navigation'
import AuthSessionStatus from '@/app/(auth)/AuthSessionStatus'
import { HiOutlineEye, HiOutlineEyeOff } from "react-icons/hi"

const PasswordReset = () => {
const searchParams = useSearchParams()
Expand All @@ -17,6 +18,7 @@ const PasswordReset = () => {
const [email, setEmail] = useState('')
const [password, setPassword] = useState('')
const [passwordConfirmation, setPasswordConfirmation] = useState('')
const [showPassword, setShowPassword] = useState(false)
const [errors, setErrors] = useState([])
const [status, setStatus] = useState(null)

Expand Down Expand Up @@ -45,32 +47,34 @@ const PasswordReset = () => {
{/* Email Address */}
<div>
<Label htmlFor="email">Email</Label>

<Input
id="email"
type="email"
value={email}
className="block mt-1 w-full"
className="block w-full mt-1"
onChange={event => setEmail(event.target.value)}
required
autoFocus
/>

<InputError messages={errors.email} className="mt-2" />
</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 className="relative">
<Input
id="password"
type={showPassword ? "text" : "password"}
value={password}
className="block w-full mt-1"
onChange={event => setPassword(event.target.value)}
required
/>
<button className="absolute flex items-center justify-center w-6 h-6 top-2 right-2" title={showPassword ? 'Masquer' : 'Afficher'} onClick={() => setShowPassword(!showPassword)}>
{showPassword ? <HiOutlineEyeOff /> : <HiOutlineEye />}
</button>
</div>
<InputError
messages={errors.password}
className="mt-2"
Expand All @@ -82,24 +86,26 @@ const PasswordReset = () => {
<Label htmlFor="passwordConfirmation">
Confirm Password
</Label>

<Input
id="passwordConfirmation"
type="password"
value={passwordConfirmation}
className="block mt-1 w-full"
onChange={event =>
setPasswordConfirmation(event.target.value)
}
required
/>

<div className="relative">
<Input
id="passwordConfirmation"
type={showPassword ? "text" : "password"}
value={passwordConfirmation}
className="block w-full mt-1"
onChange={event =>
setPasswordConfirmation(event.target.value)
}
required
/>
<button className="absolute flex items-center justify-center w-6 h-6 top-2 right-2" title={showPassword ? 'Masquer' : 'Afficher'} onClick={() => setShowPassword(!showPassword)}>
{showPassword ? <HiOutlineEyeOff /> : <HiOutlineEye />}
</button>
</div>
<InputError
messages={errors.password_confirmation}
className="mt-2"
/>
</div>

<div className="flex items-center justify-end mt-4">
<Button>Reset Password</Button>
</div>
Expand Down
Loading

0 comments on commit 7189bbc

Please sign in to comment.