From dfdf53f6eeb5563a69dc75d3bc1cbf10713b5054 Mon Sep 17 00:00:00 2001 From: jeffvli Date: Mon, 24 Oct 2022 21:47:18 -0700 Subject: [PATCH] Update login --- src/renderer/features/auth/index.ts | 2 +- src/renderer/features/auth/queries/login.ts | 48 ------------------- .../features/auth/queries/use-login.ts | 34 +++++++++++++ .../features/auth/queries/use-ping-server.ts | 12 +++++ .../auth/routes/LoginRoute.module.scss | 19 -------- .../features/auth/routes/Register.tsx | 0 .../{LoginRoute.tsx => login-route.tsx} | 33 ++++++++----- 7 files changed, 67 insertions(+), 81 deletions(-) delete mode 100644 src/renderer/features/auth/queries/login.ts create mode 100644 src/renderer/features/auth/queries/use-login.ts create mode 100644 src/renderer/features/auth/queries/use-ping-server.ts delete mode 100644 src/renderer/features/auth/routes/LoginRoute.module.scss delete mode 100644 src/renderer/features/auth/routes/Register.tsx rename src/renderer/features/auth/routes/{LoginRoute.tsx => login-route.tsx} (81%) diff --git a/src/renderer/features/auth/index.ts b/src/renderer/features/auth/index.ts index 75ef295d5..dd5df4c77 100644 --- a/src/renderer/features/auth/index.ts +++ b/src/renderer/features/auth/index.ts @@ -1 +1 @@ -export * from './routes/LoginRoute'; +export * from './routes/login-route'; diff --git a/src/renderer/features/auth/queries/login.ts b/src/renderer/features/auth/queries/login.ts deleted file mode 100644 index 3e96504c4..000000000 --- a/src/renderer/features/auth/queries/login.ts +++ /dev/null @@ -1,48 +0,0 @@ -import md5 from 'md5'; -import { nanoid } from 'nanoid'; -import { useMutation, useQuery } from 'react-query'; -import { authApi } from '../../../api/authApi'; -import { queryKeys } from '../../../api/queryKeys'; -import { useAuthStore } from '../../../store'; - -export const useLogin = ( - serverUrl: string, - body: { - password: string; - username: string; - } -) => { - const login = useAuthStore((state) => state.login); - - return useMutation({ - mutationFn: () => authApi.login(serverUrl, body), - onSuccess: (res) => { - const key = md5(serverUrl); - login({ key, serverUrl }); - - if (!localStorage.getItem('device_id')) { - localStorage.setItem('device_id', nanoid()); - } - - localStorage.setItem( - 'authentication', - JSON.stringify({ - accessToken: res.data.accessToken, - isAuthenticated: true, - key, - refreshToken: res.data.refreshToken, - serverUrl, - }) - ); - }, - }); -}; - -export const usePingServer = (server: string) => { - return useQuery({ - enabled: !!server, - queryFn: () => authApi.ping(server), - queryKey: queryKeys.ping(server), - retry: false, - }); -}; diff --git a/src/renderer/features/auth/queries/use-login.ts b/src/renderer/features/auth/queries/use-login.ts new file mode 100644 index 000000000..9d14e2f4b --- /dev/null +++ b/src/renderer/features/auth/queries/use-login.ts @@ -0,0 +1,34 @@ +import { useMutation } from '@tanstack/react-query'; +import md5 from 'md5'; +import { nanoid } from 'nanoid'; +import { api } from '@/renderer/api'; +import { useAuthStore } from '@/renderer/store'; + +export const useLogin = ( + serverUrl: string, + body: { + password: string; + username: string; + } +) => { + const login = useAuthStore((state) => state.login); + + return useMutation({ + mutationFn: () => api.auth.login(serverUrl, body), + onSuccess: (res) => { + const props = { + accessToken: res.data.accessToken, + permissions: { isAdmin: res.data.isAdmin }, + refreshToken: res.data.refreshToken, + serverKey: md5(serverUrl), + serverUrl, + }; + + login(props); + + if (!localStorage.getItem('device_id')) { + localStorage.setItem('device_id', nanoid()); + } + }, + }); +}; diff --git a/src/renderer/features/auth/queries/use-ping-server.ts b/src/renderer/features/auth/queries/use-ping-server.ts new file mode 100644 index 000000000..dfccfe4ec --- /dev/null +++ b/src/renderer/features/auth/queries/use-ping-server.ts @@ -0,0 +1,12 @@ +import { useQuery } from '@tanstack/react-query'; +import { api } from '@/renderer/api'; +import { queryKeys } from '@/renderer/api/query-keys'; + +export const usePingServer = (server: string) => { + return useQuery({ + enabled: !!server, + queryFn: () => api.auth.ping(server), + queryKey: queryKeys.ping(server), + retry: false, + }); +}; diff --git a/src/renderer/features/auth/routes/LoginRoute.module.scss b/src/renderer/features/auth/routes/LoginRoute.module.scss deleted file mode 100644 index fb74ec8b8..000000000 --- a/src/renderer/features/auth/routes/LoginRoute.module.scss +++ /dev/null @@ -1,19 +0,0 @@ -.container { - min-width: 400px; - max-width: 50%; - margin: auto; - padding: 3rem; - background: rgba(50, 50, 50, 0.4); - border-radius: 5px; -} - -.button { - background: var(--primary-color); - - &:hover, - &:active, - &:focus { - background: var(--primary-color); - filter: brightness(1.1); - } -} diff --git a/src/renderer/features/auth/routes/Register.tsx b/src/renderer/features/auth/routes/Register.tsx deleted file mode 100644 index e69de29bb..000000000 diff --git a/src/renderer/features/auth/routes/LoginRoute.tsx b/src/renderer/features/auth/routes/login-route.tsx similarity index 81% rename from src/renderer/features/auth/routes/LoginRoute.tsx rename to src/renderer/features/auth/routes/login-route.tsx index 1bb0dfe5d..5261a3ff3 100644 --- a/src/renderer/features/auth/routes/LoginRoute.tsx +++ b/src/renderer/features/auth/routes/login-route.tsx @@ -1,4 +1,5 @@ import React, { useState } from 'react'; +import styled from '@emotion/styled'; import { TextInput, PasswordInput, @@ -7,14 +8,24 @@ import { Title, Loader, Alert, + Box, } from '@mantine/core'; import { useDebouncedValue } from '@mantine/hooks'; import { useTranslation } from 'react-i18next'; import { RiCheckboxCircleFill } from 'react-icons/ri'; import { useSearchParams } from 'react-router-dom'; -import { normalizeServerUrl } from '../../../utils'; -import { useLogin, usePingServer } from '../queries/login'; -import styles from './LoginRoute.module.scss'; +import { useLogin } from '@/renderer/features/auth/queries/use-login'; +import { usePingServer } from '@/renderer/features/auth/queries/use-ping-server'; +import { normalizeServerUrl } from '@/renderer/utils'; + +const Container = styled(Box)` + min-width: 400px; + max-width: 50%; + margin: auto; + padding: 3rem; + background: rgba(50, 50, 50, 40%); + border-radius: 5px; +`; export const LoginRoute = () => { const { t } = useTranslation(); @@ -23,7 +34,7 @@ export const LoginRoute = () => { const [username, setUsername] = useState(searchParams.get('username') || ''); const [password, setPassword] = useState(searchParams.get('password') || ''); const [server, setServer] = useState( - searchParams.get('server') || 'http://localhost:9321' + searchParams.get('server') || 'http://localhost:8843' ); const [debouncedServer] = useDebouncedValue(server, 500); @@ -43,7 +54,7 @@ export const LoginRoute = () => { } = usePingServer(normalizeServerUrl(debouncedServer)); return ( -
+ {t('auth.login')}
{ @@ -59,8 +70,8 @@ export const LoginRoute = () => { required disabled={isLoading} error={!isValidServer && isFetched} - label={`${t('auth.server.label')}`} - placeholder={`${t('auth.server.placeholder')}`} + label={t('auth.server.label')} + placeholder={t('auth.server.placeholder')} rightSection={ isCheckingServer ? ( @@ -96,11 +107,7 @@ export const LoginRoute = () => { setPassword(e.currentTarget.value) } /> - {isError && ( @@ -110,6 +117,6 @@ export const LoginRoute = () => { )} -
+ ); };