Merge pull request #23 from intellwe/feat/auth-provider

FEAT: Firebase Google Auth + Settings System (API Keys, Profile Management, Global Context) v3.2

Author: RianaAzad

.github/workflows/deploy.yml

@@ -0,0 +1,30 @@
+name: Deploy to cPanel
+on:
+  push:
+    branches: [master]
+
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: "18"
+
+      - name: Install Dependencies
+        run: npm install
+
+      - name: Build
+        run: npm run build
+
+      - name: Deploy to cPanel
+        uses: SamKirkland/FTP-Deploy-Action@v4.3.4
+        with:
+          server: ${{ secrets.FTP_SERVER }}
+          username: ${{ secrets.FTP_USERNAME }}
+          password: ${{ secrets.FTP_PASSWORD }}
+          local-dir: ./dist/
+          server-dir: /wedio.intellwe.com/

src/App.tsx

@@ -27,7 +27,9 @@ import StandaloneTextToSpeech from "./components/StandaloneTextToSpeech";
 import VoiceChanger from "./components/VoiceChanger";
 import DocumentToMedia from "./components/DocumentToMedia";
 import { AuthProvider, useAuth } from "./contexts/AuthContext";
+import { ApiKeyProvider } from "./contexts/ApiKeyContext";
 import AuthModal from "./components/AuthModal";
+import SettingsModal from "./components/SettingsModal";
 
 function AppContent() {
   const [transcript, setTranscript] = useState<TranscriptResponse | null>(null);
@@ -42,6 +44,7 @@ function AppContent() {
   >("dashboard");
   const [sidebarOpen, setSidebarOpen] = useState(true);
   const [showAuthModal, setShowAuthModal] = useState(false);
+  const [showSettingsModal, setShowSettingsModal] = useState(false);
 
   const { currentUser, userProfile, logout } = useAuth();
 
@@ -389,9 +392,14 @@ function AppContent() {
                   Sign In
                 </button>
               )}
-              <button className="p-2 rounded-lg hover:bg-gray-700 transition-colors">
-                <Settings className="h-5 w-5 text-gray-300" />
-              </button>
+              {currentUser && (
+                <button
+                  onClick={() => setShowSettingsModal(true)}
+                  className="p-2 rounded-lg hover:bg-gray-700 transition-colors"
+                >
+                  <Settings className="h-5 w-5 text-gray-300" />
+                </button>
+              )}
             </div>
           </div>
         </header>
@@ -484,7 +492,7 @@ function AppContent() {
                             : "0 min"}
                         </p>
                       </div>
-                      <Headphones className="h-8 w-8 text-green-500" />
+                      <Headphones className="h-8 w-8 text-cyan-500" />
                     </div>
                   </div>
 
@@ -547,7 +555,7 @@ function AppContent() {
 
                 {activeTab === "document-to-media" && (
                   <div className="p-4 lg:p-6">
-                    <DocumentToMedia apiKey={apiKey} />
+                    <DocumentToMedia />
                   </div>
                 )}
               </div>
@@ -577,7 +585,7 @@ function AppContent() {
               <span className="ml-1">© {currentYear}</span>
             </p>
             <div className="text-xs text-gray-500">
-              Professional AI Studio v3.1
+              Professional AI Studio v3.2
             </div>
           </div>
         </footer>
@@ -588,14 +596,21 @@ function AppContent() {
         onClose={() => setShowAuthModal(false)}
         defaultMode="login"
       />
+
+      <SettingsModal
+        isOpen={showSettingsModal}
+        onClose={() => setShowSettingsModal(false)}
+      />
     </div>
   );
 }
 
 function App() {
   return (
     <AuthProvider>
-      <AppContent />
+      <ApiKeyProvider>
+        <AppContent />
+      </ApiKeyProvider>
     </AuthProvider>
   );
 }