Add Login Page

ParadoxZero · Aug 10, 2024 · 57bb5bb · 57bb5bb
1 parent 7d2f0cc
commit 57bb5bb
Show file tree

Hide file tree

Showing 5 changed files with 113 additions and 4 deletions.
diff --git a/Program.cs b/Program.cs
@@ -1,4 +1,5 @@
 using budgetbud.Services;
+using budgetbud.Middlewares;
 
 var builder = WebApplication.CreateBuilder(args);
 builder.Services.AddControllers();
@@ -19,12 +20,14 @@
     builder.Services.AddSingleton<IIdentityService, AzureIdentityService>();
 }
 
-
 builder.Services.AddSingleton<DbService>();
 builder.Services.AddSingleton<UserDataService>();
 
-
 var app = builder.Build();
+if (!app.Environment.IsDevelopment())
+{
+    app.UseMiddleware<RedirectToLoginMiddleware>();
+}
 
 app.UseDefaultFiles();
 app.UseStaticFiles();
@@ -35,7 +38,6 @@
     app.UseSwaggerUI();
 }
 
-app.MapGet("/hello-world", () => "Hello World!");
 app.MapControllers();
 
 app.Run();
diff --git a/api/middlewares/authentication_middleware.cs b/api/middlewares/authentication_middleware.cs
@@ -0,0 +1,40 @@
+using Microsoft.AspNetCore.Http;
+using System.Threading.Tasks;
+
+namespace budgetbud.Middlewares;
+
+public class RedirectToLoginMiddleware
+{
+    private readonly RequestDelegate _next;
+
+    private readonly string[] _allowedPaths = new string[] {
+        "/login.html",
+        "/favicon.ico",
+        "/css",
+        "/js",
+        "/img",
+        "/lib",
+        "/icons",
+        "/assets",
+        "vite.svg"
+    };
+
+    public RedirectToLoginMiddleware(RequestDelegate next)
+    {
+        _next = next;
+    }
+
+    public async Task InvokeAsync(HttpContext context)
+    {
+        if (context.Request.Path.HasValue && !_allowedPaths.Any(path => context.Request.Path.Value.StartsWith(path)))
+        {
+            if (!context.Request.Headers.ContainsKey("X-MS-CLIENT-PRINCIPAL"))
+            {
+                context.Response.Redirect("/login.html");
+                return;
+            }
+        }
+
+        await _next(context);
+    }
+}
diff --git a/login.html b/login.html
@@ -0,0 +1,20 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="default" />
+    <meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <title>Budgetbud | Login</title>
+</head>
+
+<body>
+    <div id="root">
+    </div>
+    <script type="module" src="/ui/login.tsx"></script>
+</body>
+
+</html>
diff --git a/ui/login.tsx b/ui/login.tsx
@@ -0,0 +1,41 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+
+import './main.css'
+import { Button, Card, Flex, Typography } from 'antd'
+import { GithubOutlined, GoogleOutlined } from '@ant-design/icons'
+
+
+class App extends React.Component {
+    render(): React.ReactNode {
+        return (
+            <>
+                <Flex vertical style={{ height: '100vh', width: '100vw', backgroundColor: '#fafafa' }} align='center' justify='center'>
+                    <Card bordered style={{ width: 300 }} hoverable>
+                        <Flex justify='center' align='center' vertical gap={20}>
+                            <Typography.Title level={1}>BudgetBud</Typography.Title>
+                            <Button type='primary'
+                                style={{ backgroundColor: '#f5222d' }}
+                                href='.auth/login/google'
+                                size='large' block icon={<GoogleOutlined />}>
+                                Login With Google
+                            </Button>
+                            <Button type='primary'
+                                style={{ backgroundColor: '#262626' }}
+                                href='.auth/login/github'
+                                size='large' block icon={<GithubOutlined />}>
+                                Login With Github
+                            </Button>
+                        </Flex>
+                    </Card >
+                </Flex>
+            </>
+        )
+    }
+}
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+    <React.StrictMode>
+        <App />
+    </React.StrictMode>,
+)
diff --git a/vite.config.ts b/vite.config.ts
@@ -5,6 +5,12 @@ import react from '@vitejs/plugin-react'
 export default defineConfig({
   plugins: [react()],
   build: {
-    outDir: 'wwwroot'
+    outDir: 'wwwroot',
+    rollupOptions: {
+      input: {
+        main: 'index.html',
+        login: 'login.html',
+      }
+    }
   }
 })