= ({
}: {
children: ReactNode;
}) => {
- return {children};
+ const [queryClient] = useState(
+ () =>
+ new QueryClient({
+ queryCache: new QueryCache({
+ onError: (error, query) => {
+ // 🎉 only show error toasts if we already have data in the cache
+ // which indicates a failed background update
+ console.log(query.state);
+ if (query.state.data !== undefined) {
+ toast.error(`Something went wrong: ${error.message}`);
+ }
+ },
+ }),
+ defaultOptions: {
+ queries: {
+ staleTime: 5 * 1000,
+ },
+ },
+ })
+ );
+
+ return (
+
+ {children}
+
+
+ );
};
diff --git a/client/src/app/proxy/email/page.tsx b/client/src/app/proxy/email/page.tsx
new file mode 100644
index 000000000..42c224eef
--- /dev/null
+++ b/client/src/app/proxy/email/page.tsx
@@ -0,0 +1,17 @@
+'use client';
+import { useSearchParams } from 'next/navigation';
+import { useConfirmEmail } from '@/entities/session';
+import { useEffect } from 'react';
+import { Info } from '@/app/proxy/ui/info';
+
+export default function EmailPage() {
+ const searchParams = useSearchParams();
+ const hash = searchParams.get('hash') ?? ''; // default value is ""
+ const { mutate: confirmEmail } = useConfirmEmail();
+
+ useEffect(() => {
+ if (hash) confirmEmail({ hash });
+ }, [hash, confirmEmail]);
+
+ return ;
+}
diff --git a/client/src/app/proxy/github/page.tsx b/client/src/app/proxy/github/page.tsx
new file mode 100644
index 000000000..50cc1af66
--- /dev/null
+++ b/client/src/app/proxy/github/page.tsx
@@ -0,0 +1,17 @@
+'use client';
+import { useSearchParams } from 'next/navigation';
+import { useEffect } from 'react';
+import { useGithub } from '@/entities/session';
+import { Info } from '@/app/proxy/ui/info';
+
+export default function GithubPage() {
+ const searchParams = useSearchParams();
+ const code = searchParams.get('code') ?? ''; // default value is ""
+ const { mutate: confirmGithub } = useGithub();
+
+ useEffect(() => {
+ if (code) confirmGithub({ code });
+ }, [code, confirmGithub]);
+
+ return ;
+}
diff --git a/client/src/app/proxy/google/page.tsx b/client/src/app/proxy/google/page.tsx
new file mode 100644
index 000000000..ba7351f44
--- /dev/null
+++ b/client/src/app/proxy/google/page.tsx
@@ -0,0 +1,17 @@
+'use client';
+import { Info } from '../ui/info';
+import { useSearchParams } from 'next/navigation';
+import { useEffect } from 'react';
+import { useGoogle } from '@/entities/session';
+
+export default function GooglePage() {
+ const searchParams = useSearchParams();
+ const code = searchParams.get('code') ?? ''; // default value is ""
+ const { mutate: confirmGoogle } = useGoogle();
+
+ useEffect(() => {
+ if (code) confirmGoogle({ code });
+ }, [code, confirmGoogle]);
+
+ return ;
+}
diff --git a/client/src/app/proxy/layout.tsx b/client/src/app/proxy/layout.tsx
new file mode 100644
index 000000000..9a36a1724
--- /dev/null
+++ b/client/src/app/proxy/layout.tsx
@@ -0,0 +1,26 @@
+import { ReactNode } from 'react';
+import { Flex } from '@/shared/ui';
+import styles from './proxy.module.scss';
+import { LogoBig } from '@/shared/assets';
+import Link from 'next/link';
+
+export default function ProxyLayout({ children }: { children: ReactNode }) {
+ return (
+
+
+
+
+
+
+
+ {children}
+
+
+ );
+}
diff --git a/client/src/app/proxy/proxy.module.scss b/client/src/app/proxy/proxy.module.scss
new file mode 100644
index 000000000..6e8bc24af
--- /dev/null
+++ b/client/src/app/proxy/proxy.module.scss
@@ -0,0 +1,22 @@
+.container {
+ height: 100dvh;
+ width: 100%;
+ padding: 48px 55px;
+ background: var(--cards-color);
+
+ @media (width <= 1120px) {
+ padding: 48px 24px;
+ }
+
+ @media (width <= 580px) {
+ padding: 24px;
+ }
+}
+
+.logo {
+ cursor: pointer;
+}
+
+.children {
+ min-height: calc(100% - 48px);
+}
diff --git a/client/src/app/proxy/ui/info/index.ts b/client/src/app/proxy/ui/info/index.ts
new file mode 100644
index 000000000..ddef16a50
--- /dev/null
+++ b/client/src/app/proxy/ui/info/index.ts
@@ -0,0 +1 @@
+export { Info } from './info';
diff --git a/client/src/app/proxy/ui/info/info.tsx b/client/src/app/proxy/ui/info/info.tsx
new file mode 100644
index 000000000..d34170490
--- /dev/null
+++ b/client/src/app/proxy/ui/info/info.tsx
@@ -0,0 +1,15 @@
+import { Flex, Typography } from '@/shared/ui';
+import { RaceBy } from '@uiball/loaders';
+
+interface InfoProps {
+ text: string;
+ size?: number;
+}
+export const Info = ({ text, size = 237 }: InfoProps) => {
+ return (
+
+
+ {text}
+
+ );
+};
diff --git a/client/src/entities/session/api/index.ts b/client/src/entities/session/api/index.ts
new file mode 100644
index 000000000..3cf32888c
--- /dev/null
+++ b/client/src/entities/session/api/index.ts
@@ -0,0 +1,11 @@
+/* Here will be imports for session hooks */
+export { useConfirmEmail } from './useConfirmEmail';
+export { useForgotPassword } from './useForgotPassword';
+export { useGetMe } from './useGetMe';
+export { useGithub } from './useGithub';
+export { useGoogle } from './useGoogle';
+export { useLogin } from './useLogin';
+export { useLogout } from './useLogout';
+export { useRegister } from './useRegister';
+export { useResetPassword } from './useResetPassword';
+export { useUpdateMe } from './useUpdateMe';
diff --git a/client/src/entities/session/api/useConfirmEmail.tsx b/client/src/entities/session/api/useConfirmEmail.tsx
new file mode 100644
index 000000000..dfd201961
--- /dev/null
+++ b/client/src/entities/session/api/useConfirmEmail.tsx
@@ -0,0 +1,25 @@
+import { useMutation } from '@tanstack/react-query';
+import { API } from '@/shared/api';
+import { IConfirmEmail, ILoginResponse } from '@teameights/types';
+import { toast } from 'sonner';
+import { API_EMAIL_CONFIRM, DEFAULT, ONBOARDING } from '@/shared/constant';
+import { useRouter } from 'next/navigation';
+import Cookies from 'js-cookie';
+
+export const useConfirmEmail = () => {
+ const router = useRouter();
+ return useMutation({
+ mutationFn: async (data: IConfirmEmail) =>
+ await API.post(API_EMAIL_CONFIRM, data),
+ onSuccess: data => {
+ localStorage.setItem('token', data.data.token);
+ Cookies.set('refreshToken', data.data.refreshToken);
+
+ router.push(ONBOARDING);
+ },
+ onError: () => {
+ router.push(DEFAULT);
+ toast.error('Invalid email confirmation');
+ },
+ });
+};
diff --git a/client/src/entities/session/api/useForgotPassword.tsx b/client/src/entities/session/api/useForgotPassword.tsx
new file mode 100644
index 000000000..506dc3fe3
--- /dev/null
+++ b/client/src/entities/session/api/useForgotPassword.tsx
@@ -0,0 +1,15 @@
+import { useMutation } from '@tanstack/react-query';
+import { API } from '@/shared/api';
+import { IForgotPassword } from '@teameights/types';
+import { API_FORGOT_PASSWORD, PASSWORD_CONFIRMATION } from '@/shared/constant';
+import { useRouter } from 'next/navigation';
+
+export const useForgotPassword = () => {
+ const router = useRouter();
+ return useMutation({
+ mutationFn: async (data: IForgotPassword) => await API.post(API_FORGOT_PASSWORD, data),
+ onSuccess: () => {
+ router.push(PASSWORD_CONFIRMATION);
+ },
+ });
+};
diff --git a/client/src/entities/session/api/useGetMe.tsx b/client/src/entities/session/api/useGetMe.tsx
new file mode 100644
index 000000000..bf86c6e1c
--- /dev/null
+++ b/client/src/entities/session/api/useGetMe.tsx
@@ -0,0 +1,17 @@
+'use client';
+import { useQuery } from '@tanstack/react-query';
+import { IUserProtectedResponse } from '@teameights/types';
+import { API } from '@/shared/api';
+import { API_ME } from '@/shared/constant';
+
+export const useGetMe = () => {
+ return useQuery({
+ queryKey: ['useGetMe'],
+ queryFn: async () => {
+ const { data } = await API.get(API_ME);
+ return data;
+ },
+ refetchOnMount: false,
+ refetchOnWindowFocus: false,
+ });
+};
diff --git a/client/src/entities/session/api/useGithub.tsx b/client/src/entities/session/api/useGithub.tsx
new file mode 100644
index 000000000..b763695f4
--- /dev/null
+++ b/client/src/entities/session/api/useGithub.tsx
@@ -0,0 +1,36 @@
+import { useMutation } from '@tanstack/react-query';
+import { API } from '@/shared/api';
+import { IGithubLogin, ILoginResponse } from '@teameights/types';
+import { toast } from 'sonner';
+import { API_GITHUB_LOGIN, DEFAULT, ONBOARDING } from '@/shared/constant';
+import { useRouter } from 'next/navigation';
+import Cookies from 'js-cookie';
+
+export const useGithub = () => {
+ const router = useRouter();
+ return useMutation({
+ mutationFn: async (data: IGithubLogin) =>
+ await API.post(API_GITHUB_LOGIN, data),
+ onSuccess: data => {
+ const user = data?.data.user;
+
+ localStorage.setItem('token', data.data.token);
+ Cookies.set('refreshToken', data.data.refreshToken);
+ /*
+ * If user has username it means he already signed up, so we don't need to
+ * redirect him to onboarding, otherwise we should.
+ * */
+ if (user.username) {
+ toast.success('Logged in!');
+ router.push(DEFAULT);
+ } else {
+ toast('User is not registered, redirecting to complete registration!');
+ router.push(ONBOARDING);
+ }
+ },
+ onError: () => {
+ router.push(DEFAULT);
+ toast.error('Invalid github login');
+ },
+ });
+};
diff --git a/client/src/entities/session/api/useGoogle.tsx b/client/src/entities/session/api/useGoogle.tsx
new file mode 100644
index 000000000..200e19fef
--- /dev/null
+++ b/client/src/entities/session/api/useGoogle.tsx
@@ -0,0 +1,35 @@
+import { useMutation } from '@tanstack/react-query';
+import { API } from '@/shared/api';
+import { IGoogleLogin, ILoginResponse } from '@teameights/types';
+import { toast } from 'sonner';
+import { DEFAULT, API_GOOGLE_LOGIN, ONBOARDING } from '@/shared/constant';
+import { useRouter } from 'next/navigation';
+import Cookies from 'js-cookie';
+
+export const useGoogle = () => {
+ const router = useRouter();
+ return useMutation({
+ mutationFn: async (data: IGoogleLogin) =>
+ await API.post(API_GOOGLE_LOGIN, data),
+ onSuccess: data => {
+ const user = data?.data.user;
+ localStorage.setItem('token', data.data.token);
+ Cookies.set('refreshToken', data.data.refreshToken);
+ /*
+ * If user has username it means he already signed up, so we don't need to
+ * redirect him to onboarding, otherwise we should.
+ * */
+ if (user.username) {
+ toast.success('Logged in!');
+ router.push(DEFAULT);
+ } else {
+ toast('User is not registered, redirecting to complete registration!');
+ router.push(ONBOARDING);
+ }
+ },
+ onError: () => {
+ router.push(DEFAULT);
+ toast.error('Invalid google login');
+ },
+ });
+};
diff --git a/client/src/entities/session/api/useLogin.tsx b/client/src/entities/session/api/useLogin.tsx
new file mode 100644
index 000000000..4b129519d
--- /dev/null
+++ b/client/src/entities/session/api/useLogin.tsx
@@ -0,0 +1,32 @@
+import { useMutation } from '@tanstack/react-query';
+import { API } from '@/shared/api';
+import { ILoginResponse, IRegisterLogin } from '@teameights/types';
+import Cookies from 'js-cookie';
+import { toast } from 'sonner';
+import { API_EMAIL_LOGIN, DEFAULT, ONBOARDING } from '@/shared/constant';
+import { useRouter } from 'next/navigation';
+
+export const useLogin = () => {
+ const router = useRouter();
+ return useMutation({
+ mutationFn: async (data: IRegisterLogin) =>
+ await API.post(API_EMAIL_LOGIN, data),
+ onSuccess: data => {
+ const user = data?.data.user;
+
+ localStorage.setItem('token', data.data.token);
+ Cookies.set('refreshToken', data.data.refreshToken);
+ /*
+ * If user has username it means he already signed up, so we don't need to
+ * redirect him to onboarding, otherwise we should.
+ * */
+ if (user.username) {
+ toast.success('Logged in!');
+ router.push(DEFAULT);
+ } else {
+ toast('User is not registered, redirecting to complete registration!');
+ router.push(ONBOARDING);
+ }
+ },
+ });
+};
diff --git a/client/src/entities/session/api/useLogout.tsx b/client/src/entities/session/api/useLogout.tsx
new file mode 100644
index 000000000..56f60461b
--- /dev/null
+++ b/client/src/entities/session/api/useLogout.tsx
@@ -0,0 +1,23 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { API } from '@/shared/api';
+import { API_LOGOUT } from '@/shared/constant';
+import { toast } from 'sonner';
+import Cookies from 'js-cookie';
+
+export const useLogout = () => {
+ const queryClient = useQueryClient();
+ return useMutation({
+ mutationFn: async () => await API.post(API_LOGOUT),
+ onSuccess: () => {
+ localStorage.removeItem('token');
+ Cookies.remove('refreshToken');
+ // Invalidate and fetch again
+ toast.success('Successful logout. See you soon!');
+ return queryClient.removeQueries();
+ },
+ onError: error => {
+ console.log(error);
+ toast.error('Failed to logout, you are not logged in!');
+ },
+ });
+};
diff --git a/client/src/entities/session/api/useRegister.tsx b/client/src/entities/session/api/useRegister.tsx
new file mode 100644
index 000000000..7e9759b29
--- /dev/null
+++ b/client/src/entities/session/api/useRegister.tsx
@@ -0,0 +1,15 @@
+import { useMutation } from '@tanstack/react-query';
+import { API } from '@/shared/api';
+import { IRegisterLogin } from '@teameights/types';
+import { API_EMAIL_REGISTER, SIGNUP_CONFIRMATION } from '@/shared/constant';
+import { useRouter } from 'next/navigation';
+
+export const useRegister = () => {
+ const router = useRouter();
+ return useMutation({
+ mutationFn: async (data: IRegisterLogin) => await API.post(API_EMAIL_REGISTER, data),
+ onSuccess: () => {
+ router.push(SIGNUP_CONFIRMATION);
+ },
+ });
+};
diff --git a/client/src/entities/session/api/useResetPassword.tsx b/client/src/entities/session/api/useResetPassword.tsx
new file mode 100644
index 000000000..4b8dded0a
--- /dev/null
+++ b/client/src/entities/session/api/useResetPassword.tsx
@@ -0,0 +1,18 @@
+import { useMutation } from '@tanstack/react-query';
+import { API } from '@/shared/api';
+import { IResetPassword } from '@teameights/types';
+import { API_RESET_PASSWORD, PASSWORD_EXPIRED, PASSWORD_SUCCESS } from '@/shared/constant';
+import { useRouter } from 'next/navigation';
+
+export const useResetPassword = () => {
+ const router = useRouter();
+ return useMutation({
+ mutationFn: async (data: IResetPassword) => await API.post(API_RESET_PASSWORD, data),
+ onSuccess: () => {
+ router.push(PASSWORD_SUCCESS);
+ },
+ onError: () => {
+ router.push(PASSWORD_EXPIRED);
+ },
+ });
+};
diff --git a/client/src/entities/session/api/useUpdateMe.tsx b/client/src/entities/session/api/useUpdateMe.tsx
new file mode 100644
index 000000000..e5f23790b
--- /dev/null
+++ b/client/src/entities/session/api/useUpdateMe.tsx
@@ -0,0 +1,19 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { API } from '@/shared/api';
+import { API_ME } from '@/shared/constant';
+import { toast } from 'sonner';
+import { IUserRequest } from '@teameights/types';
+
+export const useUpdateMe = () => {
+ const queryClient = useQueryClient();
+ return useMutation({
+ mutationFn: async (data: IUserRequest) => await API.patch(API_ME, data),
+ onSuccess: () => {
+ // Invalidate and refetch
+ queryClient
+ .invalidateQueries({ queryKey: ['useGetMe'] })
+ .then(() => console.log('invalidated'));
+ toast.success('Updated user!');
+ },
+ });
+};
diff --git a/client/src/entities/session/index.ts b/client/src/entities/session/index.ts
new file mode 100644
index 000000000..b1c13e734
--- /dev/null
+++ b/client/src/entities/session/index.ts
@@ -0,0 +1 @@
+export * from './api';
diff --git a/client/src/shared/api/config.ts b/client/src/shared/api/config.ts
new file mode 100644
index 000000000..9e5c6cae9
--- /dev/null
+++ b/client/src/shared/api/config.ts
@@ -0,0 +1,55 @@
+import axios from 'axios';
+import { IRefreshResponse } from '@teameights/types';
+import Cookies from 'js-cookie';
+
+// * API url is set based on current DEV_TYPE var
+const LOCAL_PATH =
+ process.env.NODE_ENV === 'development'
+ ? 'http://localhost:3001'
+ : 'https://teameights-server.herokuapp.com';
+
+export const API_URL = LOCAL_PATH + '/api/v1';
+
+export const API = axios.create({
+ baseURL: API_URL,
+});
+
+API.interceptors.request.use(config => {
+ config.headers.Authorization = `Bearer ${localStorage.getItem('token')}`;
+
+ return config;
+});
+
+API.interceptors.response.use(
+ config => {
+ return config;
+ },
+ async error => {
+ const originalRequest = error.config;
+
+ if (error.response.status === 401 && error.config && !error.config._isRetry) {
+ originalRequest._isRetry = true;
+ try {
+ const response = await axios.post(
+ `${API_URL}/auth/refresh`,
+ {},
+ {
+ headers: {
+ Authorization: `Bearer ${Cookies.get('refreshToken')}`,
+ },
+ }
+ );
+ localStorage.setItem('token', response.data.token);
+ Cookies.set('refreshToken', response.data.refreshToken);
+ originalRequest.headers.Authorization = `Bearer ${response.data.token}`;
+ return API.request(originalRequest);
+ } catch (err) {
+ // TODO: Rewrite to logger
+ console.log('Not authorized');
+ localStorage.removeItem('token');
+ Cookies.remove('refreshToken');
+ }
+ }
+ throw error;
+ }
+);
diff --git a/client/src/shared/api/index.ts b/client/src/shared/api/index.ts
new file mode 100644
index 000000000..f03c2281a
--- /dev/null
+++ b/client/src/shared/api/index.ts
@@ -0,0 +1 @@
+export * from './config';
diff --git a/client/src/shared/assets/icons/arrows/arrow-left.tsx b/client/src/shared/assets/icons/arrows/arrow-left.tsx
index cde9cdd67..68bcbf16a 100644
--- a/client/src/shared/assets/icons/arrows/arrow-left.tsx
+++ b/client/src/shared/assets/icons/arrows/arrow-left.tsx
@@ -1,5 +1,6 @@
import { FC, SVGProps } from 'react';
export const ArrowLeft: FC> = props => {
+ // props: size: '20' | '28' | '40'
return (