♻️ Migrate account flows

💄 Optimize container width

src/pages/auth/login.tsx

@@ -86,8 +86,9 @@ export default function Login() {
         height: 'calc(100vh - 64px)',
         textAlign: 'center',
       }}
+      maxWidth="xs"
     >
-      <Box>
+      <Box sx={{ width: '100%' }}>
         <Typography variant="h5" component="h1">
           Login
         </Typography>

src/pages/flow/accounts/confirm.tsx

@@ -0,0 +1,71 @@
+import { sni } from '@/services/network'
+import { Container, Box, Typography, CircularProgress, Alert, Collapse } from '@mui/material'
+import { useRouter } from 'next/router'
+import { useEffect, useState } from 'react'
+
+import ErrorIcon from '@mui/icons-material/Error'
+
+import 'animate.css'
+
+export default function AccountConfirm() {
+  const router = useRouter()
+
+  const [error, setError] = useState<string | null>(null)
+
+  async function confirm() {
+    try {
+      await sni.post('/cgi/id/users/me/confirm', {
+        code: router.query['code'] as string,
+      })
+      router.push('/')
+    } catch (err: any) {
+      setError(err.toString())
+    }
+  }
+
+  useEffect(() => {
+    confirm()
+  }, [])
+
+  return (
+    <Container
+      sx={{
+        display: 'grid',
+        placeItems: 'center',
+        height: 'calc(100vh - 64px)',
+        textAlign: 'center',
+      }}
+      maxWidth="xs"
+    >
+      <Box sx={{ width: '100%' }}>
+        <Typography variant="h5" component="h1">
+          Confirm Account
+        </Typography>
+        <Typography variant="subtitle2" component="h2">
+          Confirm your registeration on Solar Network
+        </Typography>
+
+        <Collapse in={!!error} sx={{ width: '100%' }}>
+          <Alert sx={{ mt: 4 }} icon={<ErrorIcon fontSize="inherit" />} severity="error">
+            {error}
+          </Alert>
+        </Collapse>
+
+        {!error && (
+          <Box sx={{ mt: 3 }}>
+            <CircularProgress />
+
+            <Typography
+              variant="body2"
+              sx={{ mt: 3 }}
+              className="animate__animated animate__flash animate__infinite"
+              style={{ '--animate-duration': '3s' } as any}
+            >
+              Hold on a moment, we're working on it...
+            </Typography>
+          </Box>
+        )}
+      </Box>
+    </Container>
+  )
+}

src/pages/flow/accounts/deletion.tsx

@@ -0,0 +1,71 @@
+import { sni } from '@/services/network'
+import { Container, Box, Typography, Alert, Collapse, Button } from '@mui/material'
+import { useRouter } from 'next/router'
+import { useState } from 'react'
+
+import ErrorIcon from '@mui/icons-material/Error'
+
+import 'animate.css'
+
+export default function AccountConfirm() {
+  const router = useRouter()
+
+  const [error, setError] = useState<string | null>(null)
+  const [busy, setBusy] = useState(false)
+
+  async function confirm() {
+    try {
+      setBusy(true)
+      await sni.patch('/cgi/id/users/me/deletion', {
+        code: router.query['code'] as string,
+      })
+      router.push('/')
+    } catch (err: any) {
+      setError(err.toString())
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  return (
+    <Container
+      sx={{
+        display: 'grid',
+        placeItems: 'center',
+        height: 'calc(100vh - 64px)',
+        textAlign: 'center',
+      }}
+      maxWidth="xs"
+    >
+      <Box sx={{ width: '100%' }}>
+        <Typography variant="h5" component="h1">
+          Delete Account
+        </Typography>
+        <Typography variant="subtitle2" component="h2">
+          Confirm delete your account from Solar Network
+        </Typography>
+
+        <Collapse in={!!error} sx={{ width: '100%' }}>
+          <Alert sx={{ mt: 4 }} icon={<ErrorIcon fontSize="inherit" />} severity="error">
+            {error}
+          </Alert>
+        </Collapse>
+
+        <Box sx={{ mt: 3 }}>
+          <Typography variant="body2" gutterBottom>
+            Are you sure you want to delete your account? This action is irreversible. All the resources created by you
+            or related to your account will be deleted.
+          </Typography>
+
+          <Typography variant="body2">
+            If you have changed your mind, you can close this tab at any time, nothing will be affected.
+          </Typography>
+
+          <Button sx={{ mt: 3 }} onClick={() => confirm()} disabled={busy}>
+            Confirm
+          </Button>
+        </Box>
+      </Box>
+    </Container>
+  )
+}

src/pages/flow/accounts/password-reset.tsx

@@ -0,0 +1,79 @@
+import { sni } from '@/services/network'
+import { Container, Box, Typography, Alert, Collapse, Button, TextField } from '@mui/material'
+import { useRouter } from 'next/router'
+import { useState } from 'react'
+import { useForm } from 'react-hook-form'
+
+import ErrorIcon from '@mui/icons-material/Error'
+
+import 'animate.css'
+
+export type SnResetPasswordForm = {
+  password: string
+}
+
+export default function AccountConfirm() {
+  const router = useRouter()
+
+  const { handleSubmit, register } = useForm<SnResetPasswordForm>()
+
+  const [error, setError] = useState<string | null>(null)
+  const [busy, setBusy] = useState(false)
+
+  async function confirm(data: any) {
+    try {
+      setBusy(true)
+      await sni.patch('/cgi/id/users/me/password-reset', {
+        code: router.query['code'] as string,
+        new_password: data.password,
+      })
+      router.push('/')
+    } catch (err: any) {
+      setError(err.toString())
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  return (
+    <Container
+      sx={{
+        display: 'grid',
+        placeItems: 'center',
+        height: 'calc(100vh - 64px)',
+        textAlign: 'center',
+      }}
+      maxWidth="xs"
+    >
+      <Box sx={{ width: '100%' }}>
+        <Typography variant="h5" component="h1">
+          Reset Password
+        </Typography>
+        <Typography variant="subtitle2" component="h2">
+          Reset your password on Solar Network
+        </Typography>
+
+        <Collapse in={!!error} sx={{ width: '100%' }}>
+          <Alert sx={{ mt: 4 }} icon={<ErrorIcon fontSize="inherit" />} severity="error">
+            {error}
+          </Alert>
+        </Collapse>
+
+        <form onSubmit={handleSubmit(confirm)}>
+          <Box sx={{ mt: 3, display: 'flex', flexDirection: 'column', width: '100%', gap: 2, textAlign: 'center' }}>
+            <TextField
+              label="New Password"
+              type="password"
+              autoComplete="new-password"
+              {...register('password', { required: true })}
+            />
+
+            <Button type="submit" disabled={busy}>
+              Next
+            </Button>
+          </Box>
+        </form>
+      </Box>
+    </Container>
+  )
+}