✨ User login

src/pages/_app.tsx

@@ -1,26 +1,26 @@
-import "@/styles/globals.css";
-import type { AppProps } from "next/app";
-import { createTheme, CssBaseline, ThemeProvider } from "@mui/material";
-import { Roboto } from "next/font/google";
-import { CapAppBar } from "@/components/CapAppBar";
+import '@/styles/globals.css'
+import type { AppProps } from 'next/app'
+import { Box, createTheme, CssBaseline, ThemeProvider } from '@mui/material'
+import { Roboto } from 'next/font/google'
+import { CapAppBar } from '@/components/CapAppBar'
 
 const fontRoboto = Roboto({
-  subsets: ["latin"],
-  weight: ["400", "500", "700"],
-  display: "swap",
-});
+  subsets: ['latin'],
+  weight: ['400', '500', '700'],
+  display: 'swap',
+})
 
 const siteTheme = createTheme({
   palette: {
-    mode: "light",
+    mode: 'light',
     primary: {
-      main: "#3949ab",
+      main: '#3949ab',
     },
     secondary: {
-      main: "#1e88e5",
+      main: '#1e88e5',
     },
   },
-});
+})
 
 export default function App({ Component, pageProps }: AppProps) {
   return (
@@ -35,8 +35,10 @@ export default function App({ Component, pageProps }: AppProps) {
         <CssBaseline />
 
         <CapAppBar />
-        <Component {...pageProps} />
+        <Box sx={{ height: 'calc(100vh - 64px)' }}>
+          <Component {...pageProps} />
+        </Box>
       </ThemeProvider>
     </>
-  );
+  )
 }

src/pages/_document.tsx

@@ -1,4 +1,4 @@
-import { Html, Head, Main, NextScript } from "next/document";
+import { Html, Head, Main, NextScript } from 'next/document'
 
 export default function Document() {
   return (
@@ -9,5 +9,5 @@ export default function Document() {
         <NextScript />
       </body>
     </Html>
-  );
+  )
 }

src/pages/auth/login.tsx

@@ -0,0 +1,79 @@
+import { SnLoginCheckpoint } from '@/components/auth/SnLoginCheckpoint'
+import { SnLoginRouter } from '@/components/auth/SnLoginRouter'
+import { SnLoginStart } from '@/components/auth/SnLoginStart'
+import { SnAuthFactor, SnAuthTicket } from '@/services/auth'
+import { Box, Container, Typography } from '@mui/material'
+import { useRouter } from 'next/router'
+import { useState } from 'react'
+
+export default function Login() {
+  const [period, setPeriod] = useState<number>(0)
+  const [ticket, setTicket] = useState<SnAuthTicket | null>(null)
+  const [factorList, setFactorList] = useState<SnAuthFactor[]>([])
+  const [factor, setFactor] = useState<SnAuthFactor | null>(null)
+
+  const router = useRouter()
+
+  function renderForm() {
+    switch (period) {
+      case 1:
+        return (
+          <SnLoginRouter
+            ticket={ticket!}
+            factorList={factorList}
+            onNext={(val) => {
+              setPeriod(period + 1)
+              setFactor(val)
+            }}
+          />
+        )
+      case 2:
+        return (
+          <SnLoginCheckpoint
+            ticket={ticket!}
+            factor={factor!}
+            onNext={(val, done) => {
+              if (!done) {
+                setTicket(val)
+                setPeriod(1)
+                return
+              }
+              router.push('/')
+            }}
+          />
+        )
+      default:
+        return (
+          <SnLoginStart
+            onNext={(val, fcs) => {
+              setPeriod(period + 1)
+              setTicket(val)
+              setFactorList(fcs)
+            }}
+          />
+        )
+    }
+  }
+
+  return (
+    <Container
+      sx={{
+        display: 'grid',
+        placeItems: 'center',
+        height: '100%',
+        textAlign: 'center',
+      }}
+    >
+      <Box>
+        <Typography variant="h5" component="h1">
+          Login
+        </Typography>
+        <Typography variant="subtitle2" component="h2">
+          Login via Solarpass
+        </Typography>
+
+        <Box sx={{ mt: 3 }}>{renderForm()}</Box>
+      </Box>
+    </Container>
+  )
+}

src/pages/index.tsx

@@ -1,4 +1,4 @@
-import { Container, Typography } from "@mui/material";
+import { Container, Typography } from '@mui/material'
 
 export default function Home() {
   return (
@@ -10,5 +10,5 @@ export default function Home() {
         </Typography>
       </Container>
     </main>
-  );
+  )
 }