diff --git a/package-lock.json b/package-lock.json index 5331ba4..27734d6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -32,6 +32,7 @@ "axios": "^0.23.0", "babel-loader": "^8.2.2", "babel-plugin-inline-react-svg": "^2.0.1", + "classnames": "^2.3.1", "css-loader": "^6.3.0", "eslint": "^7.32.0", "eslint-plugin-react": "^7.26.0", @@ -4616,6 +4617,12 @@ "integrity": "sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA==", "dev": true }, + "node_modules/classnames": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz", + "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==", + "dev": true + }, "node_modules/clean-css": { "version": "4.2.3", "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.3.tgz", @@ -18324,6 +18331,12 @@ "integrity": "sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA==", "dev": true }, + "classnames": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz", + "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==", + "dev": true + }, "clean-css": { "version": "4.2.3", "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.3.tgz", diff --git a/package.json b/package.json index 1675171..8da6c78 100644 --- a/package.json +++ b/package.json @@ -86,6 +86,7 @@ "@typescript-eslint/eslint-plugin": "^4.31.2", "@typescript-eslint/parser": "^4.31.2", "axios": "^0.23.0", + "classnames": "^2.3.1", "eslint": "^7.32.0", "eslint-plugin-react": "^7.26.0", "formik": "^2.2.9", diff --git a/src/__mocks__/assets.js b/src/__mocks__/assets.js new file mode 100644 index 0000000..8b6bd69 --- /dev/null +++ b/src/__mocks__/assets.js @@ -0,0 +1 @@ +export default ""; \ No newline at end of file diff --git a/src/__mocks__/css.js b/src/__mocks__/css.js new file mode 100644 index 0000000..7c645e4 --- /dev/null +++ b/src/__mocks__/css.js @@ -0,0 +1 @@ +export default {}; \ No newline at end of file diff --git a/src/assets/images/GalaxyBg.png b/src/assets/images/GalaxyBg.png new file mode 100644 index 0000000..0834c59 Binary files /dev/null and b/src/assets/images/GalaxyBg.png differ diff --git a/src/assets/vectors/back-arrow.svg b/src/assets/vectors/back-arrow.svg new file mode 100644 index 0000000..5ece711 --- /dev/null +++ b/src/assets/vectors/back-arrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/vectors/planet-blue-logo.svg b/src/assets/vectors/planet-blue-logo.svg new file mode 100644 index 0000000..e67f4d3 --- /dev/null +++ b/src/assets/vectors/planet-blue-logo.svg @@ -0,0 +1,10 @@ + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/vectors/planet-blue.svg b/src/assets/vectors/planet-blue.svg new file mode 100644 index 0000000..e599273 --- /dev/null +++ b/src/assets/vectors/planet-blue.svg @@ -0,0 +1,10 @@ + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/vectors/planet-where.svg b/src/assets/vectors/planet-where.svg new file mode 100644 index 0000000..f96cdc3 --- /dev/null +++ b/src/assets/vectors/planet-where.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/vectors/planet-yellow.svg b/src/assets/vectors/planet-yellow.svg new file mode 100644 index 0000000..5c47aeb --- /dev/null +++ b/src/assets/vectors/planet-yellow.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/components/AuthButtonsContainer/AuthButtonsContainer.module.css b/src/components/AuthButtonsContainer/AuthButtonsContainer.module.css new file mode 100644 index 0000000..2e8992f --- /dev/null +++ b/src/components/AuthButtonsContainer/AuthButtonsContainer.module.css @@ -0,0 +1,8 @@ +.container { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + margin-top: 48px; + min-width: 426px; +} \ No newline at end of file diff --git a/src/components/AuthButtonsContainer/AuthButtonsContainer.tsx b/src/components/AuthButtonsContainer/AuthButtonsContainer.tsx new file mode 100644 index 0000000..9bb574f --- /dev/null +++ b/src/components/AuthButtonsContainer/AuthButtonsContainer.tsx @@ -0,0 +1,7 @@ +import React from "react"; + +import styles from "./AuthButtonsContainer.module.css"; + +export const AuthButtonsContainer: React.FC = ({ children }) =>
{children}
; + +export default AuthButtonsContainer; \ No newline at end of file diff --git a/src/components/AuthContainer/AuthContainer.module.css b/src/components/AuthContainer/AuthContainer.module.css new file mode 100644 index 0000000..66717c5 --- /dev/null +++ b/src/components/AuthContainer/AuthContainer.module.css @@ -0,0 +1,11 @@ +.container { + display: flex; + box-sizing: border-box; + background-color: #FFFFFF; + padding: 16px; + border-radius: 16px; + flex-direction: column; + align-items: center; + max-width: 512px; + width: 100%; +} \ No newline at end of file diff --git a/src/components/AuthContainer/AuthContainer.tsx b/src/components/AuthContainer/AuthContainer.tsx new file mode 100644 index 0000000..c29813c --- /dev/null +++ b/src/components/AuthContainer/AuthContainer.tsx @@ -0,0 +1,7 @@ +import React from "react"; + +import styles from "./AuthContainer.module.css"; + +const AuthContainer: React.FC = ({ children }) =>
{children}
; + +export default AuthContainer; \ No newline at end of file diff --git a/src/components/AuthHeadline/AuthHeadline.module.css b/src/components/AuthHeadline/AuthHeadline.module.css new file mode 100644 index 0000000..02c96eb --- /dev/null +++ b/src/components/AuthHeadline/AuthHeadline.module.css @@ -0,0 +1,8 @@ +.headline { + font-size: 28px; + font-family: lato; + color: #000000; + margin-block-start: 0; + margin-block-end: 0; + text-align: center; +} \ No newline at end of file diff --git a/src/components/AuthHeadline/AuthHeadline.tsx b/src/components/AuthHeadline/AuthHeadline.tsx new file mode 100644 index 0000000..ee47b74 --- /dev/null +++ b/src/components/AuthHeadline/AuthHeadline.tsx @@ -0,0 +1,7 @@ +import React from "react"; + +import styles from "./AuthHeadline.module.css"; + +const AuthHeadline: React.FC = ({ children }) =>

{children}

; + +export default AuthHeadline; \ No newline at end of file diff --git a/src/components/AuthInputForm/AuthInputForm.module.css b/src/components/AuthInputForm/AuthInputForm.module.css new file mode 100644 index 0000000..2cc8e8c --- /dev/null +++ b/src/components/AuthInputForm/AuthInputForm.module.css @@ -0,0 +1,9 @@ +.input { + border: 2px solid #071018; + border-radius: 16px; + padding: 16px 48px; + font-size: 18px; + font-family: lato; + text-align: center; + margin-top: 48px; +} \ No newline at end of file diff --git a/src/components/AuthInputForm/AuthInputForm.tsx b/src/components/AuthInputForm/AuthInputForm.tsx new file mode 100644 index 0000000..a63fd31 --- /dev/null +++ b/src/components/AuthInputForm/AuthInputForm.tsx @@ -0,0 +1,9 @@ +import React from "react"; + +import styles from "./AuthInputForm.module.css"; + +export const AuthInputForm: React.FC = () => { + return ; +}; + +export default AuthInputForm; \ No newline at end of file diff --git a/src/components/AuthPrimaryButton/AuthPrimaryButton.module.css b/src/components/AuthPrimaryButton/AuthPrimaryButton.module.css new file mode 100644 index 0000000..6b7c5a5 --- /dev/null +++ b/src/components/AuthPrimaryButton/AuthPrimaryButton.module.css @@ -0,0 +1,18 @@ +.button { + background-color: #009BF9; + color: #FFFFFF; + border: 0px; + border-radius: 16px; + font-size: 24px; + padding: 10px 72px; + transition: transform .5s; +} + +.margin { + margin-top: 48px; +} + +.button:hover { + transform: scale(1.1); + cursor: pointer; +} \ No newline at end of file diff --git a/src/components/AuthPrimaryButton/AuthPrimaryButton.tsx b/src/components/AuthPrimaryButton/AuthPrimaryButton.tsx new file mode 100644 index 0000000..4a038fd --- /dev/null +++ b/src/components/AuthPrimaryButton/AuthPrimaryButton.tsx @@ -0,0 +1,14 @@ +import React from "react"; + +import styles from "./AuthPrimaryButton.module.css"; + +import classNames from "classnames"; + +interface Props { + onClick?: () => void; + margin?: boolean; +} + +export const AuthPrimaryButton: React.FC> = ({ children, onClick, margin }) => ; + +export default AuthPrimaryButton; \ No newline at end of file diff --git a/src/components/AuthSecondaryButton/AuthSecondaryButton.module.css b/src/components/AuthSecondaryButton/AuthSecondaryButton.module.css new file mode 100644 index 0000000..b739a6b --- /dev/null +++ b/src/components/AuthSecondaryButton/AuthSecondaryButton.module.css @@ -0,0 +1,14 @@ +.button { + background-color: transparent; + color: #071018; + border: 2px solid #071018; + border-radius: 16px; + font-size: 24px; + padding: 10px 48px; + transition: transform .5s; +} + +.button:hover { + transform: scale(1.1); + cursor: pointer; +} \ No newline at end of file diff --git a/src/components/AuthSecondaryButton/AuthSecondaryButton.tsx b/src/components/AuthSecondaryButton/AuthSecondaryButton.tsx new file mode 100644 index 0000000..c2fb1aa --- /dev/null +++ b/src/components/AuthSecondaryButton/AuthSecondaryButton.tsx @@ -0,0 +1,11 @@ +import React from "react"; + +import styles from "./AuthSecondaryButton.module.css"; + +interface Props { + onClick?: () => void; +} + +export const AuthSecondaryButton: React.FC> = ({ children, onClick }) => ; + +export default AuthSecondaryButton; \ No newline at end of file diff --git a/src/components/AuthSubtitle/AuthSubtitle.module.css b/src/components/AuthSubtitle/AuthSubtitle.module.css new file mode 100644 index 0000000..4974a24 --- /dev/null +++ b/src/components/AuthSubtitle/AuthSubtitle.module.css @@ -0,0 +1,14 @@ +.subtitle { + font-size: 16px; + color: #000000; + margin-top: 32px; + text-align: center; +} + +.bold { + font-weight: bold; +} + +.marginless { + margin: 0; +} \ No newline at end of file diff --git a/src/components/AuthSubtitle/AuthSubtitle.tsx b/src/components/AuthSubtitle/AuthSubtitle.tsx new file mode 100644 index 0000000..d7ee7ca --- /dev/null +++ b/src/components/AuthSubtitle/AuthSubtitle.tsx @@ -0,0 +1,20 @@ +import React from "react"; + +import styles from "./AuthSubtitle.module.css"; + +import classNames from "classnames"; + +interface Props { + bold?: boolean; + marginless?: boolean; +} + +const AuthSubtitle: React.FC> = ({ children, bold, marginless }) => { + return ( +

+ {children} +

+ ); +}; + +export default AuthSubtitle; \ No newline at end of file diff --git a/src/components/BackgroundWrapper/BackgroundWrapper.module.css b/src/components/BackgroundWrapper/BackgroundWrapper.module.css new file mode 100644 index 0000000..283fe77 --- /dev/null +++ b/src/components/BackgroundWrapper/BackgroundWrapper.module.css @@ -0,0 +1,7 @@ +.wrapper { + width: 100%; + min-height: 100vh; + display: flex; + flex-direction: column; + align-items: center; +} \ No newline at end of file diff --git a/src/components/BackgroundWrapper/BackgroundWrapper.tsx b/src/components/BackgroundWrapper/BackgroundWrapper.tsx new file mode 100644 index 0000000..920fd3c --- /dev/null +++ b/src/components/BackgroundWrapper/BackgroundWrapper.tsx @@ -0,0 +1,15 @@ +import React, { FC } from "react"; + +import styles from "./BackgroundWrapper.module.css"; + +import GalaxyBg from "../../assets/images/GalaxyBg.png"; + +export const BackgroundWrapper: FC = function({ children }) { + return ( +
+ {children} +
+ ); +}; + +export default BackgroundWrapper; \ No newline at end of file diff --git a/src/components/JeteoLogo/JeteoLogo.module.css b/src/components/JeteoLogo/JeteoLogo.module.css new file mode 100644 index 0000000..e0d21f1 --- /dev/null +++ b/src/components/JeteoLogo/JeteoLogo.module.css @@ -0,0 +1,18 @@ +.text { + font-family: Oswald; + font-size: 24px; + margin-left: 12px; +} + +.text.light { + color: #FFFFFF; +} + +.text.dark { + color: #000000; +} + +.container { + display: flex; + align-items: center; +} \ No newline at end of file diff --git a/src/components/JeteoLogo/JeteoLogo.tsx b/src/components/JeteoLogo/JeteoLogo.tsx new file mode 100644 index 0000000..35a934e --- /dev/null +++ b/src/components/JeteoLogo/JeteoLogo.tsx @@ -0,0 +1,26 @@ +import React, { FC } from "react"; + +import PlanetBlueLogo from "../../assets/vectors/planet-blue-logo.svg" + +import Theme from "../../types/theme"; + +import styles from "./JeteoLogo.module.css"; + +import classNames from "classnames"; + +interface Props { + theme?: Theme; +} + +export const JeteoLogo: FC = function({ theme }) { + return ( +
+ +

+ Jeteo +

+
+ ); +}; + +export default JeteoLogo; \ No newline at end of file diff --git a/src/components/MenuBar/Bar.tsx b/src/components/MenuBar/Bar.tsx new file mode 100644 index 0000000..60b129f --- /dev/null +++ b/src/components/MenuBar/Bar.tsx @@ -0,0 +1,9 @@ +import React, { FC } from "react"; + +import styles from "./MenuBar.module.css"; + +export const Bar: FC = function() { + return
; +}; + +export default Bar; \ No newline at end of file diff --git a/src/components/MenuBar/MenuBar.module.css b/src/components/MenuBar/MenuBar.module.css new file mode 100644 index 0000000..8a64c30 --- /dev/null +++ b/src/components/MenuBar/MenuBar.module.css @@ -0,0 +1,17 @@ +.container { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.bar { + width: 36px; + height: 6px; + background-color: #FFFFFF; + border-radius: 25px; +} + +.bar:not(:first-child) { + margin-top: 8px; +} \ No newline at end of file diff --git a/src/components/MenuBar/MenuBar.tsx b/src/components/MenuBar/MenuBar.tsx new file mode 100644 index 0000000..b53a37c --- /dev/null +++ b/src/components/MenuBar/MenuBar.tsx @@ -0,0 +1,17 @@ +import React, { FC } from "react"; + +import Bar from "./Bar"; + +import styles from "./MenuBar.module.css"; + +export const MenuBar: FC = function() { + return ( +
+ + + +
+ ); +}; + +export default MenuBar; \ No newline at end of file diff --git a/src/components/Navbar/Navbar.module.css b/src/components/Navbar/Navbar.module.css new file mode 100644 index 0000000..842967a --- /dev/null +++ b/src/components/Navbar/Navbar.module.css @@ -0,0 +1,12 @@ +.container { + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; + padding: 24px 176px; + box-sizing: border-box; +} + +.link { + text-decoration: none; +} \ No newline at end of file diff --git a/src/components/Navbar/Navbar.tsx b/src/components/Navbar/Navbar.tsx new file mode 100644 index 0000000..76e79d3 --- /dev/null +++ b/src/components/Navbar/Navbar.tsx @@ -0,0 +1,18 @@ +import React from "react"; +import { Link } from "react-router-dom"; + +import JeteoLogo from "../JeteoLogo/JeteoLogo"; +import MenuBar from "../MenuBar/MenuBar"; + +import styles from "./Navbar.module.css"; + +const Navbar: React.FC = () => ( +
+ + + + +
+); + +export default Navbar; \ No newline at end of file diff --git a/src/components/PageContentContainer/PageContentContainer.module.css b/src/components/PageContentContainer/PageContentContainer.module.css new file mode 100644 index 0000000..ec93576 --- /dev/null +++ b/src/components/PageContentContainer/PageContentContainer.module.css @@ -0,0 +1,8 @@ +.contentContainer { + width: 100%; + display: flex; + flex: 1; + flex-direction: row; + justify-content: center; + align-items: center; +} \ No newline at end of file diff --git a/src/components/PageContentContainer/PageContentContainer.tsx b/src/components/PageContentContainer/PageContentContainer.tsx new file mode 100644 index 0000000..cd8415e --- /dev/null +++ b/src/components/PageContentContainer/PageContentContainer.tsx @@ -0,0 +1,13 @@ +import React, { FC } from "react"; + +import styles from "./PageContentContainer.module.css"; + +export const PageContentContainer: FC = function({ children }) { + return ( +
+ {children} +
+ ); +}; + +export default PageContentContainer; \ No newline at end of file diff --git a/src/components/SignInWithSocialMediaButton/SignInWithSocialMediaButton.module.css b/src/components/SignInWithSocialMediaButton/SignInWithSocialMediaButton.module.css new file mode 100644 index 0000000..3d7606a --- /dev/null +++ b/src/components/SignInWithSocialMediaButton/SignInWithSocialMediaButton.module.css @@ -0,0 +1,14 @@ +.provider { + box-sizing: border-box; + border: 2px solid #000000; + border-radius: 16px; + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + font-size: 18px; + color: #071018; + padding: 8px 12px; + min-width: 288px; + margin-bottom: 12px; +} \ No newline at end of file diff --git a/src/components/SignInWithSocialMediaButton/SignInWithSocialMediaButton.tsx b/src/components/SignInWithSocialMediaButton/SignInWithSocialMediaButton.tsx new file mode 100644 index 0000000..8a4416e --- /dev/null +++ b/src/components/SignInWithSocialMediaButton/SignInWithSocialMediaButton.tsx @@ -0,0 +1,19 @@ +import React from "react"; + +import styles from "./SignInWithSocialMediaButton.module.css"; +import ProvidersList from "../../common/models/ProvidersList"; + +interface Props { + label: string; + provider: ProvidersList; +} + +export const SignInWithSocialMediaButton: React.FC = ({ label, provider }) => { + return ( + + {label} + + ); +}; + +export default SignInWithSocialMediaButton; \ No newline at end of file diff --git a/src/components/SocialMediaProvidersContainer/SocialMediaProvidersContainer.module.css b/src/components/SocialMediaProvidersContainer/SocialMediaProvidersContainer.module.css new file mode 100644 index 0000000..7dde799 --- /dev/null +++ b/src/components/SocialMediaProvidersContainer/SocialMediaProvidersContainer.module.css @@ -0,0 +1,11 @@ +.container { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + margin-top: 24px; +} + +.container:hover { + cursor: pointer; +} \ No newline at end of file diff --git a/src/components/SocialMediaProvidersContainer/SocialMediaProvidersContainer.tsx b/src/components/SocialMediaProvidersContainer/SocialMediaProvidersContainer.tsx new file mode 100644 index 0000000..20acf44 --- /dev/null +++ b/src/components/SocialMediaProvidersContainer/SocialMediaProvidersContainer.tsx @@ -0,0 +1,7 @@ +import React from "react"; + +import styles from "./SocialMediaProvidersContainer.module.css"; + +export const SocialMediaProvidersContainer: React.FC = ({ children }) =>
{children}
; + +export default SocialMediaProvidersContainer; \ No newline at end of file diff --git a/src/index.css b/src/index.css index 7167cbc..581f36d 100644 --- a/src/index.css +++ b/src/index.css @@ -5,8 +5,9 @@ --font: 'Lato', sans-serif; } -body { +body, main { margin: 0; padding: 0; + min-height: 100vh; font-family: var(--font); } diff --git a/src/types/socialMedia.ts b/src/types/socialMedia.ts new file mode 100644 index 0000000..2cdded2 --- /dev/null +++ b/src/types/socialMedia.ts @@ -0,0 +1,3 @@ +export type SocialMedia = "twitter" | "facebook" | "github" | "google"; + +export default SocialMedia; \ No newline at end of file diff --git a/src/types/svg.d.ts b/src/types/svg.d.ts index e846062..93dca51 100644 --- a/src/types/svg.d.ts +++ b/src/types/svg.d.ts @@ -1,4 +1,3 @@ - declare module "*.svg" { import React = require("react"); const content: React.FC>; diff --git a/src/types/theme.ts b/src/types/theme.ts new file mode 100644 index 0000000..786190c --- /dev/null +++ b/src/types/theme.ts @@ -0,0 +1,3 @@ +type Theme = "light" | "dark"; + +export default Theme; \ No newline at end of file diff --git a/src/views/auth/callback/CallbackRouter.tsx b/src/views/auth/callback/CallbackRouter.tsx index d23e75e..3768349 100644 --- a/src/views/auth/callback/CallbackRouter.tsx +++ b/src/views/auth/callback/CallbackRouter.tsx @@ -6,6 +6,7 @@ import { GithubDevCallback } from "./githubdev/GithubDevCallback"; export const CallbackRouter: React.FC = () => { return ( + } @@ -19,7 +20,7 @@ export const CallbackRouter: React.FC = () => { }/> + element={() => }/> ) }; diff --git a/src/views/auth/callback/github/index.tsx b/src/views/auth/callback/github/index.tsx index 459c410..825f8a0 100644 --- a/src/views/auth/callback/github/index.tsx +++ b/src/views/auth/callback/github/index.tsx @@ -1,37 +1,39 @@ -import React, { useEffect, useState } from 'react'; -import { Navigate } from 'react-router'; +import React, { useEffect } from 'react'; import { useQuery } from '../../../../common/utils/useQuery'; import { useAuth } from '../../../../common/auth/useAuth.hook'; import Providers from '../../../../common/models/ProvidersList'; +import {useNavigate} from "react-router-dom"; /** * Most advanced auth component */ export const GithubCallback: React.FC = () => { - const { auth, user } = useAuth(); + const { auth } = useAuth(); + const navigator = useNavigate(); const query = useQuery(); - const token = query.get('code'); + const code = query.get('code'); + const error = query.get('error'); const state = query.get('state') || undefined; - const [content, setContent] = useState(

Authorizing...

); - useEffect(() => { + if (error) + return navigator(`/auth/error?message=${error}`, {replace: true}); - if (token) { - auth(Providers.github, token, state) - .then(() => { - setContent(() =>

Redirect in 10s

) - setTimeout(() => { setContent() }, 5 * 1000); - }) - .catch(console.error) + if (code && state) { + auth(Providers.github, code, state) + .then(() => + navigator("/") + ) + .catch((err) => + navigator(`/auth/error?message=${err.message}`, {replace: true}) + ); } - }, [token]) + else + navigator("/auth/error?message=Missing+code+or+state", {replace: true}); + }, []) return ( - <> - {user ? <> Sup {user.nickname}! : "Hold on"} - {content} - +

Connecting with github...

) }; diff --git a/src/views/auth/callback/githubdev/GithubDevCallback.tsx b/src/views/auth/callback/githubdev/GithubDevCallback.tsx index 6576ef5..e827868 100644 --- a/src/views/auth/callback/githubdev/GithubDevCallback.tsx +++ b/src/views/auth/callback/githubdev/GithubDevCallback.tsx @@ -1,34 +1,36 @@ -import React, { useEffect, useState } from 'react'; -import { Navigate } from 'react-router'; +import React, { useEffect } from 'react'; import { useQuery } from '../../../../common/utils/useQuery'; import { useAuth } from '../../../../common/auth/useAuth.hook'; import Providers from '../../../../common/models/ProvidersList'; +import {useNavigate} from "react-router-dom"; export const GithubDevCallback: React.FC = () => { - const { auth, user } = useAuth(); + const { auth } = useAuth(); + const navigator = useNavigate(); const query = useQuery(); - const token = query.get('code'); + const code = query.get('code'); + const error = query.get('error'); const state = query.get('state') || undefined; - const [content, setContent] = useState(

Authorizing [dev 🚧]...

); - useEffect(() => { + if (error) + return navigator(`/auth/error?message=${error}`, {replace: true}); - if (token) { - auth(Providers.githubDev, token, state) - .then(() => { - setContent(() =>

Redirect in 10s

) - setTimeout(() => { setContent() }, 5 * 1000); - }) - .catch(console.error) + if (code && state) { + auth(Providers.githubDev, code, state) + .then(() => + navigator("/") + ) + .catch((err) => + navigator(`/auth/error?message=${err.message}`, {replace: true}) + ); } - }, [token]) + else + navigator("/auth/error?message=Missing+code+or+state", {replace: true}); + }, []) return ( - <> - {user ? <> Sup {user.nickname}! : "Hold on"} - {content} - +

Connecting with github...

) }; diff --git a/src/views/auth/error/AuthErrorView.tsx b/src/views/auth/error/AuthErrorView.tsx new file mode 100644 index 0000000..e6796da --- /dev/null +++ b/src/views/auth/error/AuthErrorView.tsx @@ -0,0 +1,8 @@ +import React from 'react'; +import {useQuery} from "../../../common/utils/useQuery"; + +export const AuthErrorView: React.FC = () => { + const query = useQuery(); + + return <>{query.get("message")}; +} \ No newline at end of file diff --git a/src/views/auth/index.tsx b/src/views/auth/index.tsx index e56ad71..5f16730 100644 --- a/src/views/auth/index.tsx +++ b/src/views/auth/index.tsx @@ -6,19 +6,36 @@ import { import { CallbackRouter } from './callback/CallbackRouter'; import { SigninView } from './signin/SigninView'; import { SignupView } from './signup/SignupView'; +import Navbar from "../../components/Navbar/Navbar"; +import BackgroundWrapper from "../../components/BackgroundWrapper/BackgroundWrapper"; +import PageContentContainer from "../../components/PageContentContainer/PageContentContainer"; +import AuthContainer from "../../components/AuthContainer/AuthContainer"; +import JeteoLogo from "../../components/JeteoLogo/JeteoLogo"; +import {AuthErrorView} from "./error/AuthErrorView"; export const AuthRouter: React.FC = () => { return ( - - } - path="signin/*"/> - } - path="signup/*"/> - } - path="callback/*"/> - + + + + + + + } + path="signin/*"/> + } + path="signup/*"/> + } + path="callback/*"/> + } + path="error"/> + + + + ) }; diff --git a/src/views/auth/signin/SigninView.tsx b/src/views/auth/signin/SigninView.tsx index be22bc6..fe2e98c 100644 --- a/src/views/auth/signin/SigninView.tsx +++ b/src/views/auth/signin/SigninView.tsx @@ -1,23 +1,44 @@ import React from 'react'; +import ProvidersList from "../../../common/models/ProvidersList"; + +import AuthHeadline from "../../../components/AuthHeadline/AuthHeadline"; +import AuthSubtitle from "../../../components/AuthSubtitle/AuthSubtitle"; +import SocialMediaProvidersContainer + from "../../../components/SocialMediaProvidersContainer/SocialMediaProvidersContainer"; +import SignInWithSocialMediaButton from "../../../components/SignInWithSocialMediaButton/SignInWithSocialMediaButton"; + export const SigninView: React.FC = () => { return ( <> -

Placeholder signin view

+ + Zaczynamy przygodę 🚀 + + + Kontynuuj przez: + -
    -
  1. - Github login thing -
    2. + + + {__DEV__ && -
  2. - Github [dev 🚧] login thing -
    3. + } -
+ + + + Nie ma tu twojej ulubionej domeny? + + + Daj nam znać! + ) -} \ No newline at end of file +}; diff --git a/src/views/auth/signup/SignupView.tsx b/src/views/auth/signup/SignupView.tsx index c8c39d3..d2aa1e3 100644 --- a/src/views/auth/signup/SignupView.tsx +++ b/src/views/auth/signup/SignupView.tsx @@ -1,11 +1,20 @@ import React from 'react'; +import AuthHeadline from "../../../components/AuthHeadline/AuthHeadline"; +import AuthInputForm from "../../../components/AuthInputForm/AuthInputForm"; +import AuthPrimaryButton from "../../../components/AuthPrimaryButton/AuthPrimaryButton"; export const SignupView: React.FC = () => { return ( <> -

Oh, hi!

+ + Jak się nazywasz? 🤔 + + + null}> + Gotowe + ) };