types for all auth related things (#135)

This commit is contained in:
Ulf Gebhardt 2025-02-20 10:45:58 +01:00 committed by GitHub
parent ba27c3f560
commit 27e4282624
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
8 changed files with 40 additions and 58 deletions

View File

@ -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'}

View File

@ -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'}

View File

@ -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'}

View File

@ -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'}

View File

@ -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
} }

View File

@ -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'

View File

@ -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)
} }

View File

@ -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
} }