mirror of
https://github.com/utopia-os/utopia-ui.git
synced 2025-12-13 07:46:10 +00:00
types for all auth related things (#135)
This commit is contained in:
parent
ba27c3f560
commit
27e4282624
@ -1,8 +1,3 @@
|
|||||||
/* eslint-disable @typescript-eslint/no-misused-promises */
|
|
||||||
/* eslint-disable @typescript-eslint/restrict-template-expressions */
|
|
||||||
/* eslint-disable @typescript-eslint/no-unsafe-member-access */
|
|
||||||
/* eslint-disable @typescript-eslint/no-unsafe-call */
|
|
||||||
/* eslint-disable @typescript-eslint/no-floating-promises */
|
|
||||||
import { useEffect, useState } from 'react'
|
import { useEffect, useState } from 'react'
|
||||||
import { Link, useNavigate } from 'react-router-dom'
|
import { Link, useNavigate } from 'react-router-dom'
|
||||||
import { toast } from 'react-toastify'
|
import { toast } from 'react-toastify'
|
||||||
@ -28,14 +23,14 @@ export function LoginPage() {
|
|||||||
success: {
|
success: {
|
||||||
render({ data }) {
|
render({ data }) {
|
||||||
navigate('/')
|
navigate('/')
|
||||||
return `Hi ${data?.first_name}`
|
return `Hi ${data?.first_name ? data.first_name : 'Traveler'}`
|
||||||
},
|
},
|
||||||
// other options
|
// other options
|
||||||
icon: '✌️',
|
icon: '✌️',
|
||||||
},
|
},
|
||||||
error: {
|
error: {
|
||||||
render({ data }) {
|
render({ data }) {
|
||||||
return `${data}`
|
return `${data as string}`
|
||||||
},
|
},
|
||||||
autoClose: 10000,
|
autoClose: 10000,
|
||||||
},
|
},
|
||||||
@ -44,9 +39,10 @@ export function LoginPage() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const keyDownHandler = (event) => {
|
const keyDownHandler = (event: KeyboardEvent) => {
|
||||||
if (event.key === 'Enter') {
|
if (event.key === 'Enter') {
|
||||||
event.preventDefault()
|
event.preventDefault()
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-floating-promises
|
||||||
onLogin()
|
onLogin()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -86,6 +82,7 @@ export function LoginPage() {
|
|||||||
? 'tw-btn tw-btn-disabled tw-btn-block tw-btn-primary'
|
? 'tw-btn tw-btn-disabled tw-btn-block tw-btn-primary'
|
||||||
: 'tw-btn tw-btn-primary tw-btn-block'
|
: 'tw-btn tw-btn-primary tw-btn-block'
|
||||||
}
|
}
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-misused-promises
|
||||||
onClick={() => onLogin()}
|
onClick={() => onLogin()}
|
||||||
>
|
>
|
||||||
{loading ? <span className='tw-loading tw-loading-spinner'></span> : 'Login'}
|
{loading ? <span className='tw-loading tw-loading-spinner'></span> : 'Login'}
|
||||||
|
|||||||
@ -1,6 +1,3 @@
|
|||||||
/* eslint-disable @typescript-eslint/restrict-template-expressions */
|
|
||||||
/* eslint-disable @typescript-eslint/no-misused-promises */
|
|
||||||
/* eslint-disable @typescript-eslint/no-unsafe-argument */
|
|
||||||
import { useState } from 'react'
|
import { useState } from 'react'
|
||||||
import { useNavigate } from 'react-router-dom'
|
import { useNavigate } from 'react-router-dom'
|
||||||
import { toast } from 'react-toastify'
|
import { toast } from 'react-toastify'
|
||||||
@ -12,8 +9,7 @@ import { useAuth } from './useAuth'
|
|||||||
/**
|
/**
|
||||||
* @category Auth
|
* @category Auth
|
||||||
*/
|
*/
|
||||||
// eslint-disable-next-line react/prop-types
|
export function RequestPasswordPage({ resetUrl }: { resetUrl: string }) {
|
||||||
export function RequestPasswordPage({ resetUrl }) {
|
|
||||||
const [email, setEmail] = useState<string>('')
|
const [email, setEmail] = useState<string>('')
|
||||||
|
|
||||||
const { requestPasswordReset, loading } = useAuth()
|
const { requestPasswordReset, loading } = useAuth()
|
||||||
@ -32,7 +28,7 @@ export function RequestPasswordPage({ resetUrl }) {
|
|||||||
},
|
},
|
||||||
error: {
|
error: {
|
||||||
render({ data }) {
|
render({ data }) {
|
||||||
return `${data}`
|
return `${data as string}`
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
pending: 'sending email ...',
|
pending: 'sending email ...',
|
||||||
@ -56,6 +52,7 @@ export function RequestPasswordPage({ resetUrl }) {
|
|||||||
? 'tw-btn tw-btn-disabled tw-btn-block tw-btn-primary'
|
? 'tw-btn tw-btn-disabled tw-btn-block tw-btn-primary'
|
||||||
: 'tw-btn tw-btn-primary tw-btn-block'
|
: 'tw-btn tw-btn-primary tw-btn-block'
|
||||||
}
|
}
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-misused-promises
|
||||||
onClick={() => onReset()}
|
onClick={() => onReset()}
|
||||||
>
|
>
|
||||||
{loading ? <span className='tw-loading tw-loading-spinner'></span> : 'Send'}
|
{loading ? <span className='tw-loading tw-loading-spinner'></span> : 'Send'}
|
||||||
|
|||||||
@ -1,5 +1,3 @@
|
|||||||
/* eslint-disable @typescript-eslint/no-misused-promises */
|
|
||||||
/* eslint-disable @typescript-eslint/restrict-template-expressions */
|
|
||||||
import { useState } from 'react'
|
import { useState } from 'react'
|
||||||
import { useNavigate } from 'react-router-dom'
|
import { useNavigate } from 'react-router-dom'
|
||||||
import { toast } from 'react-toastify'
|
import { toast } from 'react-toastify'
|
||||||
@ -20,8 +18,6 @@ export function SetNewPasswordPage() {
|
|||||||
|
|
||||||
const onReset = async () => {
|
const onReset = async () => {
|
||||||
const token = window.location.search.split('token=')[1]
|
const token = window.location.search.split('token=')[1]
|
||||||
// eslint-disable-next-line no-console
|
|
||||||
console.log(token)
|
|
||||||
|
|
||||||
await toast.promise(passwordReset(token, password), {
|
await toast.promise(passwordReset(token, password), {
|
||||||
success: {
|
success: {
|
||||||
@ -32,7 +28,7 @@ export function SetNewPasswordPage() {
|
|||||||
},
|
},
|
||||||
error: {
|
error: {
|
||||||
render({ data }) {
|
render({ data }) {
|
||||||
return `${data}`
|
return `${data as string}`
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
pending: 'setting password ...',
|
pending: 'setting password ...',
|
||||||
@ -55,6 +51,7 @@ export function SetNewPasswordPage() {
|
|||||||
? 'tw-btn tw-btn-disabled tw-btn-block tw-btn-primary'
|
? 'tw-btn tw-btn-disabled tw-btn-block tw-btn-primary'
|
||||||
: 'tw-btn tw-btn-primary tw-btn-block'
|
: 'tw-btn tw-btn-primary tw-btn-block'
|
||||||
}
|
}
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-misused-promises
|
||||||
onClick={() => onReset()}
|
onClick={() => onReset()}
|
||||||
>
|
>
|
||||||
{loading ? <span className='tw-loading tw-loading-spinner'></span> : 'Set'}
|
{loading ? <span className='tw-loading tw-loading-spinner'></span> : 'Set'}
|
||||||
|
|||||||
@ -1,8 +1,3 @@
|
|||||||
/* eslint-disable @typescript-eslint/restrict-template-expressions */
|
|
||||||
/* eslint-disable @typescript-eslint/no-floating-promises */
|
|
||||||
/* eslint-disable @typescript-eslint/no-unsafe-call */
|
|
||||||
/* eslint-disable @typescript-eslint/no-unsafe-member-access */
|
|
||||||
/* eslint-disable @typescript-eslint/no-misused-promises */
|
|
||||||
import { useEffect, useState } from 'react'
|
import { useEffect, useState } from 'react'
|
||||||
import { useNavigate } from 'react-router-dom'
|
import { useNavigate } from 'react-router-dom'
|
||||||
import { toast } from 'react-toastify'
|
import { toast } from 'react-toastify'
|
||||||
@ -30,14 +25,14 @@ export function SignupPage() {
|
|||||||
success: {
|
success: {
|
||||||
render({ data }) {
|
render({ data }) {
|
||||||
navigate('/')
|
navigate('/')
|
||||||
return `Hi ${data?.first_name}`
|
return `Hi ${data?.first_name ? data.first_name : 'Traveler'}`
|
||||||
},
|
},
|
||||||
// other options
|
// other options
|
||||||
icon: '✌️',
|
icon: '✌️',
|
||||||
},
|
},
|
||||||
error: {
|
error: {
|
||||||
render({ data }) {
|
render({ data }) {
|
||||||
return `${data}`
|
return `${data as string}`
|
||||||
},
|
},
|
||||||
autoClose: 10000,
|
autoClose: 10000,
|
||||||
},
|
},
|
||||||
@ -46,9 +41,10 @@ export function SignupPage() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const keyDownHandler = (event) => {
|
const keyDownHandler = (event: KeyboardEvent) => {
|
||||||
if (event.key === 'Enter') {
|
if (event.key === 'Enter') {
|
||||||
event.preventDefault()
|
event.preventDefault()
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-floating-promises
|
||||||
onRegister()
|
onRegister()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -88,6 +84,7 @@ export function SignupPage() {
|
|||||||
? 'tw-btn tw-btn-disabled tw-btn-block tw-btn-primary'
|
? 'tw-btn tw-btn-disabled tw-btn-block tw-btn-primary'
|
||||||
: 'tw-btn tw-btn-primary tw-btn-block'
|
: 'tw-btn tw-btn-primary tw-btn-block'
|
||||||
}
|
}
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-misused-promises
|
||||||
onClick={() => onRegister()}
|
onClick={() => onRegister()}
|
||||||
>
|
>
|
||||||
{loading ? <span className='tw-loading tw-loading-spinner'></span> : 'Sign Up'}
|
{loading ? <span className='tw-loading tw-loading-spinner'></span> : 'Sign Up'}
|
||||||
|
|||||||
@ -1,8 +1,3 @@
|
|||||||
/* eslint-disable @typescript-eslint/no-unused-vars */
|
|
||||||
/* eslint-disable @typescript-eslint/no-unsafe-return */
|
|
||||||
/* eslint-disable @typescript-eslint/no-unsafe-argument */
|
|
||||||
/* eslint-disable @typescript-eslint/no-floating-promises */
|
|
||||||
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
||||||
import { createContext, useState, useContext, useEffect } from 'react'
|
import { createContext, useState, useContext, useEffect } from 'react'
|
||||||
|
|
||||||
import type { UserApi } from '#types/UserApi'
|
import type { UserApi } from '#types/UserApi'
|
||||||
@ -28,11 +23,11 @@ interface AuthContextProps {
|
|||||||
login: (credentials: AuthCredentials) => Promise<UserItem | undefined>
|
login: (credentials: AuthCredentials) => Promise<UserItem | undefined>
|
||||||
register: (credentials: AuthCredentials, userName: string) => Promise<UserItem | undefined>
|
register: (credentials: AuthCredentials, userName: string) => Promise<UserItem | undefined>
|
||||||
loading: boolean
|
loading: boolean
|
||||||
logout: () => Promise<any>
|
logout: () => Promise<void>
|
||||||
updateUser: (user: UserItem) => any
|
updateUser: (user: UserItem) => Promise<UserItem>
|
||||||
token: string | null
|
token: string | undefined
|
||||||
requestPasswordReset: (email: string, reset_url: string) => Promise<any>
|
requestPasswordReset: (email: string, reset_url: string) => Promise<void>
|
||||||
passwordReset: (token: string, new_password: string) => Promise<any>
|
passwordReset: (token: string, new_password: string) => Promise<void>
|
||||||
}
|
}
|
||||||
|
|
||||||
const AuthContext = createContext<AuthContextProps>({
|
const AuthContext = createContext<AuthContextProps>({
|
||||||
@ -53,12 +48,13 @@ const AuthContext = createContext<AuthContextProps>({
|
|||||||
*/
|
*/
|
||||||
export const AuthProvider = ({ userApi, children }: AuthProviderProps) => {
|
export const AuthProvider = ({ userApi, children }: AuthProviderProps) => {
|
||||||
const [user, setUser] = useState<UserItem | null>(null)
|
const [user, setUser] = useState<UserItem | null>(null)
|
||||||
const [token, setToken] = useState<string | null>(null)
|
const [token, setToken] = useState<string>()
|
||||||
const [loading, setLoading] = useState<boolean>(false)
|
const [loading, setLoading] = useState<boolean>(false)
|
||||||
const isAuthenticated = !!user
|
const isAuthenticated = !!user
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setLoading(true)
|
setLoading(true)
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-floating-promises
|
||||||
loadUser()
|
loadUser()
|
||||||
setLoading(false)
|
setLoading(false)
|
||||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
@ -84,10 +80,10 @@ export const AuthProvider = ({ userApi, children }: AuthProviderProps) => {
|
|||||||
const login = async (credentials: AuthCredentials): Promise<UserItem | undefined> => {
|
const login = async (credentials: AuthCredentials): Promise<UserItem | undefined> => {
|
||||||
setLoading(true)
|
setLoading(true)
|
||||||
try {
|
try {
|
||||||
const res = await userApi.login(credentials.email, credentials.password)
|
const user = await userApi.login(credentials.email, credentials.password)
|
||||||
setToken(res?.access_token)
|
setToken(user?.access_token)
|
||||||
return await loadUser()
|
return await loadUser()
|
||||||
} catch (error: any) {
|
} catch (error) {
|
||||||
setLoading(false)
|
setLoading(false)
|
||||||
throw error
|
throw error
|
||||||
}
|
}
|
||||||
@ -95,13 +91,13 @@ export const AuthProvider = ({ userApi, children }: AuthProviderProps) => {
|
|||||||
|
|
||||||
const register = async (
|
const register = async (
|
||||||
credentials: AuthCredentials,
|
credentials: AuthCredentials,
|
||||||
userName,
|
userName: string,
|
||||||
): Promise<UserItem | undefined> => {
|
): Promise<UserItem | undefined> => {
|
||||||
setLoading(true)
|
setLoading(true)
|
||||||
try {
|
try {
|
||||||
/* const res = */ await userApi.register(credentials.email, credentials.password, userName)
|
/* const res = */ await userApi.register(credentials.email, credentials.password, userName)
|
||||||
return await login(credentials)
|
return await login(credentials)
|
||||||
} catch (error: any) {
|
} catch (error) {
|
||||||
setLoading(false)
|
setLoading(false)
|
||||||
throw error
|
throw error
|
||||||
}
|
}
|
||||||
@ -111,7 +107,7 @@ export const AuthProvider = ({ userApi, children }: AuthProviderProps) => {
|
|||||||
try {
|
try {
|
||||||
await userApi.logout()
|
await userApi.logout()
|
||||||
setUser(null)
|
setUser(null)
|
||||||
} catch (error: any) {
|
} catch (error) {
|
||||||
setLoading(false)
|
setLoading(false)
|
||||||
throw error
|
throw error
|
||||||
}
|
}
|
||||||
@ -119,37 +115,35 @@ export const AuthProvider = ({ userApi, children }: AuthProviderProps) => {
|
|||||||
|
|
||||||
const updateUser = async (user: UserItem) => {
|
const updateUser = async (user: UserItem) => {
|
||||||
setLoading(true)
|
setLoading(true)
|
||||||
const { id, ...userRest } = user
|
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const res = await userApi.updateUser(userRest)
|
const updatedUser = await userApi.updateUser(user)
|
||||||
setUser(res as any)
|
setUser(updatedUser)
|
||||||
loadUser()
|
await loadUser()
|
||||||
setLoading(false)
|
setLoading(false)
|
||||||
return res as any
|
return updatedUser
|
||||||
} catch (error: any) {
|
} catch (error) {
|
||||||
setLoading(false)
|
setLoading(false)
|
||||||
throw error
|
throw error
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const requestPasswordReset = async (email: string, resetUrl?: string): Promise<any> => {
|
const requestPasswordReset = async (email: string, resetUrl?: string): Promise<void> => {
|
||||||
setLoading(true)
|
setLoading(true)
|
||||||
try {
|
try {
|
||||||
await userApi.requestPasswordReset(email, resetUrl)
|
await userApi.requestPasswordReset(email, resetUrl)
|
||||||
return setLoading(false)
|
return setLoading(false)
|
||||||
} catch (error: any) {
|
} catch (error) {
|
||||||
setLoading(false)
|
setLoading(false)
|
||||||
throw error
|
throw error
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const passwordReset = async (token: string, newPassword: string): Promise<any> => {
|
const passwordReset = async (token: string, newPassword: string): Promise<void> => {
|
||||||
setLoading(true)
|
setLoading(true)
|
||||||
try {
|
try {
|
||||||
await userApi.passwordReset(token, newPassword)
|
await userApi.passwordReset(token, newPassword)
|
||||||
return setLoading(false)
|
return setLoading(false)
|
||||||
} catch (error: any) {
|
} catch (error) {
|
||||||
setLoading(false)
|
setLoading(false)
|
||||||
throw error
|
throw error
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,4 +1,3 @@
|
|||||||
/* eslint-disable @typescript-eslint/no-unsafe-argument */
|
|
||||||
/* eslint-disable @typescript-eslint/restrict-template-expressions */
|
/* eslint-disable @typescript-eslint/restrict-template-expressions */
|
||||||
import { useEffect, useState } from 'react'
|
import { useEffect, useState } from 'react'
|
||||||
import { useNavigate } from 'react-router-dom'
|
import { useNavigate } from 'react-router-dom'
|
||||||
|
|||||||
4
src/types/UserApi.d.ts
vendored
4
src/types/UserApi.d.ts
vendored
@ -8,8 +8,8 @@ export interface UserApi {
|
|||||||
login(email: string, password: string): Promise<UserItem | undefined>
|
login(email: string, password: string): Promise<UserItem | undefined>
|
||||||
logout(): Promise<void>
|
logout(): Promise<void>
|
||||||
getUser(): Promise<UserItem>
|
getUser(): Promise<UserItem>
|
||||||
getToken(): Promise<string | null>
|
getToken(): Promise<string | undefined>
|
||||||
updateUser(user: UserItem): Promise<void>
|
updateUser(user: UserItem): Promise<UserItem>
|
||||||
requestPasswordReset(email: string, reset_url?: string)
|
requestPasswordReset(email: string, reset_url?: string)
|
||||||
passwordReset(token: string, new_password: string)
|
passwordReset(token: string, new_password: string)
|
||||||
}
|
}
|
||||||
|
|||||||
1
src/types/UserItem.d.ts
vendored
1
src/types/UserItem.d.ts
vendored
@ -11,6 +11,7 @@ export interface UserItem {
|
|||||||
password?: string
|
password?: string
|
||||||
profile?: Profile
|
profile?: Profile
|
||||||
first_name?: string
|
first_name?: string
|
||||||
|
access_token?: string
|
||||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||||
[key: string]: any
|
[key: string]: any
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user