Merge pull request #39 from CadenBPurdue/8-develop-login-page-ui

8 develop login page UI
CadenBPurdue · Feb 20, 2025 · 2300898 · 2300898
2 parents 1baa7de + d6f84b3
commit 2300898
Show file tree

Hide file tree

Showing 7 changed files with 118 additions and 60 deletions.
diff --git a/src/main/main.js b/src/main/main.js
@@ -1,8 +1,9 @@
 // src/main/main.js
+import fs from "fs";
 import path from "path";
 import { fileURLToPath } from "url";
 import dotenv from "dotenv";
-import { app, BrowserWindow, protocol, session } from "electron";
+import { app, BrowserWindow, protocol, session, ipcMain } from "electron";
 import { registerIpcHandlers } from "./utils/registerIpcHandlers.js";
 
 // Load environment variables
@@ -14,7 +15,21 @@ const __dirname = path.dirname(__filename);
 let mainWindow = null;
 
 function createWindow() {
-  // Set CSP headers for main window
+  // Set initial size and properties
+  const window = new BrowserWindow({
+    width: 500,
+    height: 680,
+    resizable: false,
+    maximizable: false,
+    webPreferences: {
+      nodeIntegration: false,
+      contextIsolation: true,
+      preload: path.join(__dirname, "preload.cjs"),
+      webSecurity: true,
+    },
+  });
+
+  // Apply CSP headers
   session.defaultSession.webRequest.onHeadersReceived((details, callback) => {
     callback({
       responseHeaders: {
@@ -33,32 +48,38 @@ function createWindow() {
     });
   });
 
-  const mainWindow = new BrowserWindow({
-    width: 800,
-    height: 600,
-    webPreferences: {
-      nodeIntegration: false,
-      contextIsolation: true,
-      preload: path.join(__dirname, "preload.cjs"),
-      webSecurity: true,
-    },
-  });
-
-  mainWindow.webContents.on("did-finish-load", () => {
-    console.log("Window loaded");
-  });
-
-  mainWindow.webContents.on("console-message", (event, level, message) => {
-    console.log("Renderer Console:", message);
-  });
-
+  // Load the URL
   if (process.env.NODE_ENV === "development") {
-    mainWindow.loadURL("http://localhost:5173");
+    window.loadURL("http://localhost:5173").catch((err) => {
+      console.error("[Window] Error loading development URL:", err);
+    });
   } else {
-    mainWindow.loadFile(path.join(__dirname, "../../dist/index.html"));
+    const indexPath = path.join(__dirname, "../../dist/index.html");
+    if (fs.existsSync(indexPath)) {
+      window.loadFile(indexPath).catch((err) => {
+        console.error("[Window] Error loading index file:", err);
+      });
+    } else {
+      console.error("[Window] Index file does not exist at path:", indexPath);
+    }
   }
 
-  return mainWindow;
+  // Add IPC handler for route changes
+  ipcMain.handle("window:setAppMode", async (event, isLoginPage) => {
+    if (isLoginPage) {
+      window.setResizable(false);
+      window.setMaximizable(false);
+      window.setSize(500, 680);
+    } else {
+      window.setResizable(true);
+      window.setMaximizable(true);
+      window.setSize(800, 600);
+    }
+
+    return { success: true, mode: isLoginPage ? "login" : "app" };
+  });
+
+  return window;
 }
 
 app.whenReady().then(() => {

diff --git a/src/main/preload.cjs b/src/main/preload.cjs
@@ -37,6 +37,10 @@ contextBridge.exposeInMainWorld("electronAPI", {
     console.log("Opening external URL:", url);
     shell.openExternal(url);
   },
+
+  setWindowMode: (isLoginPage) => {
+    return ipcRenderer.invoke("window:setAppMode", isLoginPage);
+  },
 });
 
 console.log("Preload script loaded and APIs exposed.");
diff --git a/src/main/utils/auth_manager.js b/src/main/utils/auth_manager.js
@@ -252,15 +252,27 @@ function initiateSpotifyAuth() {
 // Apple Music Auth Functions
 function generateAppleMusicToken() {
   try {
-    const teamId = base64decode(process.env.APPLE_TEAM_ID);
-    const keyId = base64decode(process.env.APPLE_KEY_ID);
-    const privateKey = base64decode(process.env.APPLE_PRIVATE_KEY);
+    const teamId = process.env.APPLE_TEAM_ID;
+    const keyId = process.env.APPLE_KEY_ID;
+    const privateKeyString = process.env.APPLE_PRIVATE_KEY;
 
-    if (!teamId || !keyId || !privateKey) {
+    if (!teamId || !keyId || !privateKeyString) {
       throw new Error("Missing required environment variables");
     }
 
-    const token = jwt.sign({}, privateKey, {
+    // Ensure the private key is in the correct format with headers
+    let formattedKey = privateKeyString;
+    if (!privateKeyString.includes("-----BEGIN PRIVATE KEY-----")) {
+      formattedKey =
+        "-----BEGIN PRIVATE KEY-----\n" +
+        privateKeyString
+          .replace(/\s+/g, "")
+          .match(/.{1,64}/g)
+          .join("\n") +
+        "\n-----END PRIVATE KEY-----";
+    }
+
+    const token = jwt.sign({}, formattedKey, {
       algorithm: "ES256",
       expiresIn: "180d",
       issuer: teamId,

diff --git a/src/renderer/CreateAccount.jsx b/src/renderer/CreateAccount.jsx
@@ -9,6 +9,7 @@ import {
   CircularProgress,
   Divider,
   ThemeProvider,
+  CssBaseline,
 } from "@mui/material";
 import { Music2Icon, AppleIcon, ArrowRightIcon } from "lucide-react";
 import React, { useState, useEffect } from "react";
@@ -144,8 +145,25 @@ const CreateAccount = () => {
 
   return (
     <ThemeProvider theme={theme}>
-      <Box sx={styles.pageContainer}>
-        <Box sx={styles.contentContainer}>
+      <CssBaseline />
+      <Box
+        sx={{
+          width: "100vw",
+          height: "100vh",
+          overflow: "hidden", // This prevents scrolling
+          ...styles.pageContainer,
+          padding: 0, // Override any padding from pageContainer
+        }}
+      >
+        <Box
+          sx={{
+            ...styles.contentContainer,
+            overflowY: "auto", // Allow scrolling only within the content if needed
+            height: "100%",
+            maxHeight: "680px", // Match your window height
+            paddingTop: "40px",
+          }}
+        >
           <Box sx={styles.headerContainer}>
             <Typography variant="h3" sx={{ color: "primary.main", mb: 1 }}>
               Welcome to Harmony

diff --git a/src/renderer/index.html b/src/renderer/index.html
@@ -4,9 +4,23 @@
   <head>
     <meta charset="UTF-8" />
     <title>Project Harmony</title>
+    <style>
+      html, body {
+        margin: 0;
+        padding: 0;
+        overflow: hidden;
+        height: 100%;
+        width: 100%;
+      }
+      #root {
+        height: 100%;
+        width: 100%;
+        overflow: hidden;
+      }
+    </style>
   </head>
   <body>
     <div id="root"></div>
     <script type="module" src="main.jsx"></script>
   </body>
-</html>
+</html>
diff --git a/src/renderer/main.jsx b/src/renderer/main.jsx
@@ -18,21 +18,15 @@ const Router = () => {
   }, []);
 
   const checkAuthStatus = async () => {
-    console.log("[Router] Checking auth status...");
     try {
       const status = await window.electronAPI.getAuthStatus();
-      console.log(
-        "[Router] Auth status details:",
-        JSON.stringify(status, null, 2),
-      );
-
       setIsAuthenticated(status.isGoogleAuthenticated);
       setIsLoading(false);
 
-      console.log(
-        "[Router] Updated authentication state to:",
-        status.isGoogleAuthenticated,
-      );
+      // Set window mode based on authentication
+      if (window.electronAPI.setWindowMode) {
+        window.electronAPI.setWindowMode(!status.isGoogleAuthenticated);
+      }
     } catch (err) {
       console.error("[Router] Failed to check auth status:", err);
       setIsLoading(false);
@@ -58,7 +52,6 @@ const Router = () => {
     },
   ];
 
-  console.log("[Router] Creating routes with auth state:", isAuthenticated);
   return <RouterProvider router={createBrowserRouter(routes)} />;
 };
 

diff --git a/src/renderer/styles/theme.js b/src/renderer/styles/theme.js
@@ -86,16 +86,20 @@ const styles = {
     minHeight: "100vh",
     backgroundColor: colors.magnolia,
     display: "flex",
-    flexDirection: "column",
-    padding: { xs: 2, sm: 4 },
+    justifyContent: "center",
+    alignItems: "center",
+    padding: { xs: 2, sm: 3 },
   },
   contentContainer: {
-    maxWidth: "1200px",
-    width: "100%",
-    marginLeft: "auto",
-    marginRight: "auto",
+    width: "450px",
+    maxWidth: "100%",
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
   },
   headerContainer: {
+    width: "100%",
+    textAlign: "center",
     marginBottom: 4,
   },
   paper: {
@@ -119,21 +123,13 @@ const styles = {
       backgroundColor: "rgba(134, 97, 193, 0.5)",
     },
   }),
-  musicServiceButton: (isConnected, darkColor, service) => ({
+  musicServiceButton: (isConnected, darkColor) => ({
     flex: 1,
     py: 1.5,
     maxWidth: "100%",
-    backgroundColor: isConnected
-      ? service === "spotify"
-        ? colors.amethyst
-        : colors.lavenderFloral
-      : darkColor,
+    backgroundColor: isConnected ? colors.amethyst : darkColor,
     "&:hover": {
-      backgroundColor: isConnected
-        ? service === "spotify"
-          ? colors.lavenderFloral
-          : colors.lavenderFloral
-        : "#333333",
+      backgroundColor: isConnected ? "#7252b2" : "#333333",
     },
     "&:disabled": {
       backgroundColor: `rgba(${darkColor === "#000000" ? "0, 0, 0" : "25, 20, 20"}, 0.5)`,