Aeris : feat/oauth-sign - Exchanging Files cause of Spotify Error

web-app/src/components/Authorizations/ServiceAuth.tsx

@@ -0,0 +1,23 @@
+import { useNavigate, useSearchParams } from "react-router-dom";
+import { sendServiceAuthToken } from "../../utils/utils";
+import { useEffect } from "react";
+
+interface ServiceAuthProps {
+    service: string
+    redirect_uri: string
+    navigate_to: string
+}
+
+export default function ServiceAuth({ service, redirect_uri, navigate_to }: ServiceAuthProps) {
+    const [searchParams] = useSearchParams();
+    const navigate = useNavigate();
+    const authCode = searchParams.get("code") as string;
+
+    useEffect(() => {
+        sendServiceAuthToken(authCode, "/auth/" + service, `${window.location.origin}/${redirect_uri}`).then((ok) => {
+            navigate(navigate_to);
+        })
+    }, []);
+
+    return <div />;
+}

web-app/src/index.tsx

@@ -1,8 +1,9 @@
-import { StrictMode } from "react";
+import {StrictMode, useState} from "react";
 import ReactDOM from "react-dom";
 import "./App.css";
 
 import App from "./App";
+import ServiceAuth from "./components/Authorizations/ServiceAuth";
 import GithubAuth from "./components/Authorizations/GithubAuth";
 import SpotifyAuth from "./components/Authorizations/SpotifyAuth";
 import GoogleAuth from "./components/Authorizations/YoutubeAuth";
@@ -15,11 +16,15 @@ import PipelinePage from "./pages/HomePage";
 import { ThemeProvider } from "@mui/material";
 
 import theme from "./Aeris.theme";
+import {AppServices} from "./utils/globals";
+import {AppServiceType} from "./utils/types";
 
 /**
  * Creates the routing tree.
  */
 function AerisRouter() {
+	const [possibleServices, setServices] = useState<Array<AppServiceType>>(AppServices)
+
 	return (
 		<ThemeProvider theme={theme}>
 			<div className="App">
@@ -29,12 +34,12 @@ function AerisRouter() {
 							<Route path="/" element={<App />} />
 							<Route path="/auth" element={<AuthComponent />} />
 							<Route path="/pipelines" element={<PipelinePage />} />
-							<Route path="/authorization/github" element={<GithubAuth />} />
-							<Route path="/authorization/spotify" element={<SpotifyAuth />} />
-							<Route path="/authorization/google" element={<GoogleAuth />} />
-							<Route path="/authorization/twitter" element={<TwitterAuth />} />
-							<Route path="/authorization/discord" element={<DiscordAuth />} />
-							<Route path="/authorization/anilist" element={<AnilistAuth />} />
+							{possibleServices.map((elem, index) => {
+								return (<Route path={`/authorization/${elem.uid}`} element={<ServiceAuth service={elem.uid} navigate_to="/pipelines" redirect_uri={`authorization/${elem.uid}`}/>} />);
+							})}
+							{/*{possibleServices.map((elem, index) => {*/}
+							{/*	return (<Route path={`/signin/${elem.uid}`} element={<ServiceAuth service={elem.uid} navigate_to="/pipelines" redirect_uri={`singin/${elem.uid}`}/>} />);*/}
+							{/*})}*/}
 						</Routes>
 					</BrowserRouter>
 				</header>

web-app/src/pages/Login/LoginPage.tsx

@@ -4,9 +4,9 @@ import { makeStyles, Theme } from "@material-ui/core/styles";
 import { useNavigate, Link as RouterLink } from "react-router-dom";
 
 import { AccountCircle, Cookie, Lock } from "@mui/icons-material";
-import { InputAdornment } from "@mui/material";
+import {CardMedia, Divider, InputAdornment, Typography} from "@mui/material";
 
-import { API_ROUTE } from "../../utils/globals";
+import {API_ROUTE, AppServices} from "../../utils/globals";
 
 import CardContent from "@material-ui/core/CardContent";
 import CardActions from "@material-ui/core/CardActions";
@@ -20,6 +20,7 @@ import { setCookie, getCookie } from "../../utils/utils";
 
 import { useTranslation } from "react-i18next";
 import '../../i18n/config';
+import {AppServiceType} from "../../utils/types";
 
 const useStyles = makeStyles((theme: Theme) => ({
 	container: {
@@ -91,6 +92,7 @@ export default function AuthComponent() {
 	const { t } = useTranslation();
 	const classes = useStyles();
 	const navigate = useNavigate();
+	const [servicesData, setServicesData] = useState<Array<AppServiceType>>(AppServices);
 	const [authData, setAuthData] = useState<AuthCompProps>({
 		username: "",
 		password: "",
@@ -253,6 +255,25 @@ export default function AuthComponent() {
 							{authData.authMode === "login" ? t('signUp') : t('connectToAeris')}
 						</Button>
 					</CardActions>
+					<Divider variant="middle" sx={{ m: 1 }}/>
+					<Typography variant="body2" sx={{ mb: 1}}>
+						Or you can sign up with this services:
+					</Typography>
+					<CardActions>
+						{servicesData.map((elem, index) => {
+							if (elem.uid === "utils")
+								return (<div/>);
+							return (
+								<Button
+									onClick={() => (window.location.href = elem.urlAuth)}
+									variant="text"
+									style={{ borderRadius: "20px", width: "20px", height: "20px" }}
+								>
+									<img loading="lazy" width="20px" height="20px" src={elem.logo.imageSrc} alt={elem.logo.altText} />
+								</Button>
+							);
+						})}
+					</CardActions>
 				</Card>
 			</form>
 		</div>