From b15e5d0570d77b3b904389c30c254c54eae144ea Mon Sep 17 00:00:00 2001
From: Michal Kawka <michal.kawka@gmx.com>
Date: Fri, 15 Nov 2024 21:11:50 +0100
Subject: [PATCH 1/3] add login page

---
 frontend/src/App.tsx                 |   4 +-
 frontend/src/components/ui/login.tsx | 127 +++++++++++++++++++++++++++
 2 files changed, 130 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/components/ui/login.tsx

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 5079eb2..e67d65c 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
-import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
+import {BrowserRouter as Router, Route, Routes} from 'react-router-dom';
 import Home from './components/ui/home';
+import Login from './components/ui/login';
 import NotFound from './components/ui/not-found';
 import SeedDetails from './components/ui/seed-details';
 import SettingsPage from './components/ui/settings';
@@ -11,6 +12,7 @@ function App() {
   return (
     <Router>
       <Routes>
+        <Route path="/login" element={<Login />}></Route>
         <Route path="/" element={<Home />} />
         <Route
           path="/graphs/:graphId/variants"
diff --git a/frontend/src/components/ui/login.tsx b/frontend/src/components/ui/login.tsx
new file mode 100644
index 0000000..3ea63c6
--- /dev/null
+++ b/frontend/src/components/ui/login.tsx
@@ -0,0 +1,127 @@
+'use client';
+
+import {Github, Globe} from 'lucide-react';
+import * as React from 'react';
+import logo from '../../assets/xolvio_logo.png';
+import {Button} from './button';
+import {Card, CardContent} from './card';
+import {Input} from './input';
+
+export default function Login() {
+  const [showPassword, setShowPassword] = React.useState(false);
+
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-gray-50 p-4">
+      <Card className="w-full max-w-[400px] p-6">
+        <CardContent className="space-y-6">
+          <div className="flex justify-center">
+            <img
+              src={logo}
+              alt="Logo"
+              className=" object-cover cursor-pointer"
+            />
+          </div>
+          <div className="space-y-2 text-center">
+            <h1 className="text-2xl font-semibold tracking-tight">Welcome</h1>
+            <p className="text-sm text-muted-foreground">
+              Log in to Narrative to continue to Narrative.
+            </p>
+          </div>
+          <div className="space-y-4">
+            <Button
+              variant="outline"
+              className="relative w-full justify-center gap-2"
+              type="button"
+            >
+              <Globe className="h-4 w-4" />
+              Continue with Google
+            </Button>
+            <Button
+              variant="outline"
+              className="relative w-full justify-center gap-2"
+              type="button"
+            >
+              <Github className="h-4 w-4" />
+              Continue with GitHub
+            </Button>
+          </div>
+          <div className="relative">
+            <div className="absolute inset-0 flex items-center">
+              <span className="w-full border-t" />
+            </div>
+            <div className="relative flex justify-center text-xs uppercase">
+              <span className="bg-background px-2 text-muted-foreground">
+                OR
+              </span>
+            </div>
+          </div>
+          <div className="space-y-4">
+            <div className="space-y-2">
+              <Input
+                id="email"
+                placeholder="Email address*"
+                type="email"
+                required
+              />
+            </div>
+            <div className="space-y-2">
+              <div className="relative">
+                <Input
+                  id="password"
+                  placeholder="Password*"
+                  type={showPassword ? 'text' : 'password'}
+                  required
+                />
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="sm"
+                  className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
+                  onClick={() => setShowPassword(!showPassword)}
+                >
+                  {showPassword ? (
+                    <span className="sr-only">Hide password</span>
+                  ) : (
+                    <span className="sr-only">Show password</span>
+                  )}
+                  <svg
+                    viewBox="0 0 24 24"
+                    strokeWidth="2"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    className="h-4 w-4 fill-none stroke-current"
+                  >
+                    {showPassword ? (
+                      <>
+                        <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24" />
+                        <line x1="1" y1="1" x2="23" y2="23" />
+                      </>
+                    ) : (
+                      <>
+                        <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
+                        <circle cx="12" cy="12" r="3" />
+                      </>
+                    )}
+                  </svg>
+                </Button>
+              </div>
+            </div>
+            <a
+              className="inline-block text-sm text-[#74BE9B] hover:underline"
+              href="#"
+            >
+              Forgot password?
+            </a>
+            <Button className="w-full">Continue</Button>
+          </div>
+          <div className="text-center text-sm">
+            Don&apos;t have an account?{' '}
+            <a className="text-[#74BE9B] hover:underline" href="#">
+              Sign up
+            </a>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

From d3f8fc151c617aa2cfe48cf0daecda554d076793 Mon Sep 17 00:00:00 2001
From: Michal Kawka <michal.kawka@gmx.com>
Date: Fri, 15 Nov 2024 21:12:45 +0100
Subject: [PATCH 2/3] change description

---
 frontend/src/components/ui/login.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/ui/login.tsx b/frontend/src/components/ui/login.tsx
index 3ea63c6..de9df19 100644
--- a/frontend/src/components/ui/login.tsx
+++ b/frontend/src/components/ui/login.tsx
@@ -24,7 +24,7 @@ export default function Login() {
           <div className="space-y-2 text-center">
             <h1 className="text-2xl font-semibold tracking-tight">Welcome</h1>
             <p className="text-sm text-muted-foreground">
-              Log in to Narrative to continue to Narrative.
+              Log in to InstantMock to start mocking.
             </p>
           </div>
           <div className="space-y-4">

From f9dbb06de5584fbf4cee0b66f8b1ea5a9e0218c6 Mon Sep 17 00:00:00 2001
From: Michal Kawka <michal.kawka@gmx.com>
Date: Fri, 15 Nov 2024 21:24:01 +0100
Subject: [PATCH 3/3] remove google login

---
 frontend/src/components/ui/login.tsx | 12 ++----------
 1 file changed, 2 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/ui/login.tsx b/frontend/src/components/ui/login.tsx
index de9df19..986874a 100644
--- a/frontend/src/components/ui/login.tsx
+++ b/frontend/src/components/ui/login.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import {Github, Globe} from 'lucide-react';
+import {MarkGithubIcon} from '@primer/octicons-react';
 import * as React from 'react';
 import logo from '../../assets/xolvio_logo.png';
 import {Button} from './button';
@@ -33,15 +33,7 @@ export default function Login() {
               className="relative w-full justify-center gap-2"
               type="button"
             >
-              <Globe className="h-4 w-4" />
-              Continue with Google
-            </Button>
-            <Button
-              variant="outline"
-              className="relative w-full justify-center gap-2"
-              type="button"
-            >
-              <Github className="h-4 w-4" />
+              <MarkGithubIcon size={16} />
               Continue with GitHub
             </Button>
           </div>