b540054388
* Updated example readme * Updated with-passport example * Updated profile page for with-passport * Updated with-passport-and-next-connect * Updated with-magic * Updated with-magic readme * Updated with-iron-session * Updated next version in with-iron-session Co-authored-by: Lee Robinson <me@leerob.io>
98 lines
2.1 KiB
JavaScript
98 lines
2.1 KiB
JavaScript
import { useEffect, useRef } from 'react'
|
|
import Router from 'next/router'
|
|
import { useUser } from '../lib/hooks'
|
|
|
|
function ProfileEdit() {
|
|
const [user, { mutate }] = useUser()
|
|
const nameRef = useRef()
|
|
|
|
useEffect(() => {
|
|
if (!user) return
|
|
nameRef.current.value = user.name
|
|
}, [user])
|
|
|
|
async function handleEditProfile(e) {
|
|
e.preventDefault()
|
|
|
|
const body = {
|
|
name: nameRef.current.value,
|
|
}
|
|
const res = await fetch(`/api/user`, {
|
|
method: 'PUT',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(body),
|
|
})
|
|
const updatedUser = await res.json()
|
|
|
|
mutate(updatedUser)
|
|
}
|
|
|
|
async function handleDeleteProfile() {
|
|
const res = await fetch(`/api/user`, {
|
|
method: 'DELETE',
|
|
})
|
|
|
|
if (res.status === 204) {
|
|
mutate({ user: null })
|
|
Router.replace('/')
|
|
}
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<div className="form-container">
|
|
<form onSubmit={handleEditProfile}>
|
|
<label>
|
|
<span>Name</span>
|
|
<input type="text" ref={nameRef} required />
|
|
</label>
|
|
<div className="submit">
|
|
<button type="submit">Update profile</button>
|
|
<a role="button" className="delete" onClick={handleDeleteProfile}>
|
|
Delete profile
|
|
</a>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<style jsx>{`
|
|
.delete {
|
|
color: #f44336;
|
|
cursor: pointer;
|
|
}
|
|
.delete:hover {
|
|
color: #b71c1c;
|
|
}
|
|
`}</style>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default function ProfilePage() {
|
|
const [user, { loading }] = useUser()
|
|
|
|
useEffect(() => {
|
|
// redirect user to login if not authenticated
|
|
if (!loading && !user) Router.replace('/login')
|
|
}, [user, loading])
|
|
|
|
return (
|
|
<>
|
|
<h1>Profile</h1>
|
|
|
|
{user && (
|
|
<>
|
|
<p>Your session:</p>
|
|
<pre>{JSON.stringify(user, null, 2)}</pre>
|
|
<ProfileEdit />
|
|
</>
|
|
)}
|
|
|
|
<style jsx>{`
|
|
pre {
|
|
white-space: pre-wrap;
|
|
word-wrap: break-word;
|
|
}
|
|
`}</style>
|
|
</>
|
|
)
|
|
}
|