add remember me checkbox
This commit is contained in:
parent
334435cf78
commit
3b4f384582
6 changed files with 43 additions and 9 deletions
|
@ -188,8 +188,7 @@ export interface paths {
|
|||
requestBody: {
|
||||
content: {
|
||||
'multipart/form-data': {
|
||||
/** Format: binary */
|
||||
file?: string
|
||||
file?: components['schemas']['IFormFile']
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -502,6 +501,8 @@ export interface components {
|
|||
DeletePostReactionRequest: {
|
||||
emoji: string
|
||||
}
|
||||
/** Format: binary */
|
||||
IFormFile: string
|
||||
ListSignupCodesResult: {
|
||||
signupCodes: components['schemas']['SignupCodeDto'][]
|
||||
}
|
||||
|
@ -513,6 +514,7 @@ export interface components {
|
|||
LoginRequest: {
|
||||
username: string
|
||||
password: string
|
||||
rememberMe: boolean | null
|
||||
}
|
||||
LoginResponse: {
|
||||
/** Format: uuid */
|
||||
|
@ -560,7 +562,7 @@ export interface components {
|
|||
username: string
|
||||
password: string
|
||||
signupCode: string
|
||||
email: string | null
|
||||
rememberMe: boolean | null
|
||||
}
|
||||
RegisterResponse: {
|
||||
/** Format: uuid */
|
||||
|
|
|
@ -6,9 +6,9 @@ import { ApiClient } from '../api/client.ts'
|
|||
export class AuthService {
|
||||
constructor(private readonly client: ApiClient) {}
|
||||
|
||||
async login(username: string, password: string) {
|
||||
async login(username: string, password: string, rememberMe: boolean = false) {
|
||||
const res = await this.client.POST('/auth/login', {
|
||||
body: { username, password },
|
||||
body: { username, password, rememberMe },
|
||||
credentials: 'include',
|
||||
})
|
||||
|
||||
|
@ -19,9 +19,9 @@ export class AuthService {
|
|||
dispatchMessage('auth:logged-in', null)
|
||||
}
|
||||
|
||||
async signup(username: string, password: string, signupCode: string) {
|
||||
async signup(username: string, password: string, signupCode: string, rememberMe: boolean = false) {
|
||||
const res = await this.client.POST('/auth/register', {
|
||||
body: { username, password, signupCode, email: null },
|
||||
body: { username, password, signupCode, email: null, rememberMe },
|
||||
credentials: 'include',
|
||||
})
|
||||
|
||||
|
|
|
@ -17,6 +17,7 @@ export default function LoginPage({ authService }: LoginPageProps) {
|
|||
const [isSubmitting, setIsSubmitting] = useState(false)
|
||||
const [username, setUsername] = useState('')
|
||||
const [password, setPassword] = useState('')
|
||||
const [rememberMe, setRememberMe] = useState(false)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const usernameInputRef = useRef<HTMLInputElement | null>(null)
|
||||
const passwordInputRef = useRef<HTMLInputElement | null>(null)
|
||||
|
@ -49,7 +50,7 @@ export default function LoginPage({ authService }: LoginPageProps) {
|
|||
setIsSubmitting(true)
|
||||
|
||||
try {
|
||||
await authService.login(username, password)
|
||||
await authService.login(username, password, rememberMe)
|
||||
} catch (error: unknown) {
|
||||
setError(error instanceof Error ? error.message : 'something went terribly wrong')
|
||||
} finally {
|
||||
|
@ -95,6 +96,19 @@ export default function LoginPage({ authService }: LoginPageProps) {
|
|||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 mt-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="rememberMe"
|
||||
checked={rememberMe}
|
||||
onChange={(e) => setRememberMe(e.target.checked)}
|
||||
className="h-4 w-4"
|
||||
/>
|
||||
<label htmlFor="rememberMe" className="text-sm text-gray-600">
|
||||
DONT log me out >:(
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<Button className="mt-4" disabled={isSubmitting} type="submit">
|
||||
{isSubmitting ? 'wait...' : 'make login pls'}
|
||||
</Button>
|
||||
|
|
|
@ -20,6 +20,7 @@ export default function SignupPage({ authService }: SignupPageProps) {
|
|||
const { code } = useParams()
|
||||
const [signupCode, setSignupCode] = useState<string | null>(null)
|
||||
const [isSubmitting, setIsSubmitting] = useState(false)
|
||||
const [rememberMe, setRememberMe] = useState(false)
|
||||
const [error, setError] = useState<string>('')
|
||||
const [username, setUsername, usernameError, validateUsername] =
|
||||
useValidatedInput(isValidUsername)
|
||||
|
@ -79,7 +80,7 @@ export default function SignupPage({ authService }: SignupPageProps) {
|
|||
setIsSubmitting(true)
|
||||
|
||||
try {
|
||||
await authService.signup(username, password, signupCode)
|
||||
await authService.signup(username, password, signupCode, rememberMe)
|
||||
navigate('/')
|
||||
} catch (e: unknown) {
|
||||
const err = e as Error
|
||||
|
@ -116,6 +117,18 @@ export default function SignupPage({ authService }: SignupPageProps) {
|
|||
type="password"
|
||||
ref={passwordInputRef}
|
||||
/>
|
||||
<div className="flex items-center gap-2 mt-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="rememberMe"
|
||||
checked={rememberMe}
|
||||
onChange={(e) => setRememberMe(e.target.checked)}
|
||||
className="h-4 w-4"
|
||||
/>
|
||||
<label htmlFor="rememberMe" className="text-sm text-gray-600">
|
||||
DONT log me out >:(
|
||||
</label>
|
||||
</div>
|
||||
<Button
|
||||
className="mt-4"
|
||||
disabled={isSubmitting || !!usernameError || !!passwordError}
|
||||
|
|
|
@ -15,5 +15,8 @@ export function initApp() {
|
|||
const mediaService = new MediaService(client)
|
||||
const authService = new AuthService(client)
|
||||
|
||||
setGlobal('postsService', postService)
|
||||
setGlobal('authService', authService)
|
||||
|
||||
return { postService, mediaService, authService }
|
||||
}
|
||||
|
|
2
src/types.d.ts
vendored
2
src/types.d.ts
vendored
|
@ -19,4 +19,6 @@ declare global {
|
|||
export interface FemtoApp {
|
||||
version: string
|
||||
user: User | null
|
||||
authService: AuthService | null
|
||||
postsService: PostsService | null
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue