From 81b1c16c0303bd96630c2532c4e86dcfe73775f0 Mon Sep 17 00:00:00 2001
From: Derick M <58572875+TurtIeSocks@users.noreply.github.com>
Date: Fri, 1 Mar 2024 13:07:30 -0500
Subject: [PATCH 1/3] refactor: login page

---
 src/components/ReactRouter.jsx                |   2 +-
 src/components/layout/auth/Blocked.jsx        |   6 +-
 src/components/layout/auth/Discord.jsx        |   2 +-
 src/components/layout/auth/Local.jsx          |  14 +-
 src/components/layout/auth/Login.jsx          | 140 ------------------
 src/components/layout/auth/Telegram.jsx       |  14 +-
 src/components/layout/custom/Generator.jsx    |   4 +-
 .../layout/dialogs/profile/LinkAccounts.jsx   |   6 +-
 src/features/login/CustomPage.jsx             |  42 ++++++
 src/features/login/DefaultPage.jsx            |  65 ++++++++
 src/features/login/Methods.jsx                |  69 +++++++++
 src/features/login/index.jsx                  |  27 ++++
 src/hooks/useMemory.js                        |   2 +-
 13 files changed, 233 insertions(+), 160 deletions(-)
 delete mode 100644 src/components/layout/auth/Login.jsx
 create mode 100644 src/features/login/CustomPage.jsx
 create mode 100644 src/features/login/DefaultPage.jsx
 create mode 100644 src/features/login/Methods.jsx
 create mode 100644 src/features/login/index.jsx

diff --git a/src/components/ReactRouter.jsx b/src/components/ReactRouter.jsx
index 071aaa80a..a0f08ca56 100644
--- a/src/components/ReactRouter.jsx
+++ b/src/components/ReactRouter.jsx
@@ -3,7 +3,7 @@ import * as React from 'react'
 import { Route, Routes } from 'react-router-dom'
 
 import Auth from './layout/auth/Auth'
-import Login from './layout/auth/Login'
+import Login from '../features/login'
 import Blocked from './layout/auth/Blocked'
 import Errors from './Errors'
 import DataManagement from '../features/data'
diff --git a/src/components/layout/auth/Blocked.jsx b/src/components/layout/auth/Blocked.jsx
index b30ceb83c..548b26f1f 100644
--- a/src/components/layout/auth/Blocked.jsx
+++ b/src/components/layout/auth/Blocked.jsx
@@ -17,7 +17,7 @@ import ListItemText from '@mui/material/ListItemText'
 
 import { useMemory } from '@hooks/useMemory'
 
-import DiscordLogin from './Discord'
+import DiscordButton from './Discord'
 import ThemeToggle from '../general/ThemeToggle'
 import { I } from '../general/I'
 
@@ -98,9 +98,9 @@ export default function Blocked() {
             {t('go_back')}
           </Button>
           {discordInvite && (
-            <DiscordLogin href={discordInvite} size="small">
+            <DiscordButton href={discordInvite} size="small">
               {t('join')}
-            </DiscordLogin>
+            </DiscordButton>
           )}
         </CardActions>
       </Card>
diff --git a/src/components/layout/auth/Discord.jsx b/src/components/layout/auth/Discord.jsx
index 934d376e7..0e608b751 100644
--- a/src/components/layout/auth/Discord.jsx
+++ b/src/components/layout/auth/Discord.jsx
@@ -9,7 +9,7 @@ import { I } from '../general/I'
  * @param {{ children?: string, bgcolor?: string } & import('@mui/material/Button').ButtonProps} props
  * @returns {JSX.Element}
  */
-export default function DiscordLogin({
+export default function DiscordButton({
   href = '/auth/discord/callback',
   children = 'login',
   size = 'large',
diff --git a/src/components/layout/auth/Local.jsx b/src/components/layout/auth/Local.jsx
index e2e2a18ce..85d41a75b 100644
--- a/src/components/layout/auth/Local.jsx
+++ b/src/components/layout/auth/Local.jsx
@@ -59,9 +59,15 @@ export default function LocalLogin({ href, sx, style }) {
   return (
     <Box sx={sx} style={style}>
       <form onSubmit={handleSubmit}>
-        <Grid container justifyContent="center" alignItems="center" spacing={2}>
+        <Grid
+          container
+          justifyContent="center"
+          alignItems="center"
+          direction="column"
+          spacing={2}
+        >
           <Grid textAlign="center">
-            <FormControl variant="outlined" color="secondary">
+            <FormControl variant="outlined" color="secondary" size="small">
               <InputLabel htmlFor="username">{t('local_username')}</InputLabel>
               <OutlinedInput
                 id="username"
@@ -80,7 +86,7 @@ export default function LocalLogin({ href, sx, style }) {
             </FormControl>
           </Grid>
           <Grid textAlign="center">
-            <FormControl variant="outlined" color="secondary">
+            <FormControl variant="outlined" color="secondary" size="small">
               <InputLabel htmlFor="password">{t('local_password')}</InputLabel>
               <OutlinedInput
                 id="password"
@@ -103,7 +109,6 @@ export default function LocalLogin({ href, sx, style }) {
                         setUser({ ...user, showPassword: !user.showPassword })
                       }
                       onMouseDown={(e) => e.preventDefault()}
-                      size="large"
                     >
                       {user.showPassword ? <Visibility /> : <VisibilityOff />}
                     </IconButton>
@@ -116,7 +121,6 @@ export default function LocalLogin({ href, sx, style }) {
             <Button
               variant="contained"
               color="primary"
-              size="large"
               onClick={handleSubmit}
               disabled={!user.username || !user.password || submitted}
             >
diff --git a/src/components/layout/auth/Login.jsx b/src/components/layout/auth/Login.jsx
deleted file mode 100644
index 63de81002..000000000
--- a/src/components/layout/auth/Login.jsx
+++ /dev/null
@@ -1,140 +0,0 @@
-/* eslint-disable react/no-array-index-key */
-// @ts-check
-import * as React from 'react'
-import { Navigate } from 'react-router-dom'
-import { useTranslation } from 'react-i18next'
-import Box from '@mui/material/Box'
-import Typography from '@mui/material/Typography'
-import Grid from '@mui/material/Unstable_Grid2'
-import { useQuery } from '@apollo/client'
-
-import { CUSTOM_COMPONENT } from '@services/queries/config'
-
-import { useMemory } from '@hooks/useMemory'
-import LocalLogin from './Local'
-import LocaleSelection from '../general/LocaleSelection'
-import DiscordLogin from './Discord'
-import TelegramLogin from './Telegram'
-import CustomTile from '../custom/CustomTile'
-import ThemeToggle from '../general/ThemeToggle'
-import { Loading } from '../general/Loading'
-
-export default function Login() {
-  const loggedIn = useMemory((s) => s.auth.loggedIn)
-  const loginPage = useMemory((s) => !!s.config.loginPage)
-  const headerTitle = useMemory((s) => s.config.general.headerTitle)
-  const discordInvite = useMemory((s) => s.config.links.discordInvite)
-  const discordAuthUrl = useMemory((s) => s.config.customRoutes.discordAuthUrl)
-  const telegramBotName = useMemory(
-    (s) => s.config.customRoutes.telegramBotName,
-  )
-  const telegramAuthUrl = useMemory(
-    (s) => s.config.customRoutes.telegramAuthUrl,
-  )
-  const localAuthUrl = useMemory((s) => s.config.customRoutes.localAuthUrl)
-  const authMethods = useMemory((s) => s.auth.methods)
-
-  const { t, i18n } = useTranslation()
-  const { data, loading } = useQuery(CUSTOM_COMPONENT, {
-    fetchPolicy: 'cache-first',
-    variables: { component: 'loginPage' },
-    skip: !loginPage,
-  })
-
-  if (loading) {
-    return <Loading height="100vh">{t('loading', { category: '' })}</Loading>
-  }
-
-  if (loggedIn && process.env.NODE_ENV !== 'development') {
-    return <Navigate to="/" />
-  }
-
-  const { settings, components } = data?.customComponent || {
-    settings: {},
-    components: [],
-  }
-  return (
-    <>
-      <Box position="absolute" top={10} right={10}>
-        <ThemeToggle />
-      </Box>
-      {components?.length ? (
-        <Grid
-          container
-          key={i18n.language}
-          spacing={settings.parentSpacing || 0}
-          alignItems={settings.parentAlignItems || 'center'}
-          justifyContent={settings.parentJustifyContent || 'center'}
-          style={settings.parentStyle || {}}
-          sx={settings.parentSx || {}}
-        >
-          {components.map((block, i) => (
-            <CustomTile key={i} block={block} />
-          ))}
-        </Grid>
-      ) : (
-        <Grid
-          container
-          direction="column"
-          justifyContent="center"
-          alignItems="center"
-          height="100cqh"
-          width="100%"
-        >
-          <Grid pb={8} xs={12}>
-            <Typography variant="h3" align="center">
-              {t('welcome')} {headerTitle}
-            </Typography>
-          </Grid>
-          {authMethods.includes('discord') && (
-            <Grid
-              container
-              justifyContent="center"
-              alignItems="center"
-              direction="row"
-              xs={12}
-            >
-              <Grid
-                xs={discordInvite ? t('login_button') : 10}
-                sm={discordInvite ? 3 : 10}
-                textAlign="center"
-              >
-                <DiscordLogin href={discordAuthUrl} bgcolor="success.dark" />
-              </Grid>
-              {discordInvite && (
-                <Grid xs={t('join_button')} sm={3} textAlign="center">
-                  <DiscordLogin href={discordInvite}>join</DiscordLogin>
-                </Grid>
-              )}
-            </Grid>
-          )}
-          {authMethods?.includes('telegram') && (
-            <Grid>
-              <TelegramLogin
-                botName={telegramBotName}
-                authUrl={telegramAuthUrl}
-              />
-            </Grid>
-          )}
-          {authMethods?.includes('local') && (
-            <Grid>
-              <LocalLogin href={localAuthUrl} />
-            </Grid>
-          )}
-        </Grid>
-      )}
-      {!components?.length && (
-        <Box
-          position="absolute"
-          bottom={20}
-          left={0}
-          right={0}
-          mx="auto"
-          width={{ xs: '50%', sm: '33%', md: '25%', lg: '20%' }}
-        >
-          <LocaleSelection />
-        </Box>
-      )}
-    </>
-  )
-}
diff --git a/src/components/layout/auth/Telegram.jsx b/src/components/layout/auth/Telegram.jsx
index 585f13ef1..5e90f67f4 100644
--- a/src/components/layout/auth/Telegram.jsx
+++ b/src/components/layout/auth/Telegram.jsx
@@ -1,9 +1,15 @@
-import React, { useRef, useEffect } from 'react'
+// @ts-check
+import * as React from 'react'
 
-export default function Telegram({ botName, authUrl }) {
-  const ref = useRef(null)
+/**
+ *
+ * @param {{ botName: string, authUrl: string }} props
+ * @returns
+ */
+export default function TelegramWidget({ botName, authUrl }) {
+  const ref = React.useRef(null)
 
-  useEffect(() => {
+  React.useEffect(() => {
     if (ref.current) {
       const script = document.createElement('script')
       script.src = 'https://telegram.org/js/telegram-widget.js?4'
diff --git a/src/components/layout/custom/Generator.jsx b/src/components/layout/custom/Generator.jsx
index 1ed6f3b1b..28bae18f2 100644
--- a/src/components/layout/custom/Generator.jsx
+++ b/src/components/layout/custom/Generator.jsx
@@ -5,7 +5,7 @@ import Divider from '@mui/material/Divider'
 import Grid from '@mui/material/Unstable_Grid2'
 import Utility from '@services/Utility'
 
-import DiscordLogin from '../auth/Discord'
+import DiscordButton from '../auth/Discord'
 import LocalLogin from '../auth/Local'
 import Telegram from '../auth/Telegram'
 import CustomText from './CustomText'
@@ -47,7 +47,7 @@ export default function Generator({ block = {}, defaultReturn = null }) {
         />
       )
     case 'discord':
-      return <DiscordLogin href={block.link}>{children}</DiscordLogin>
+      return <DiscordButton href={block.link}>{children}</DiscordButton>
     case 'localLogin':
       return (
         <LocalLogin
diff --git a/src/components/layout/dialogs/profile/LinkAccounts.jsx b/src/components/layout/dialogs/profile/LinkAccounts.jsx
index 1555f5833..0265e8225 100644
--- a/src/components/layout/dialogs/profile/LinkAccounts.jsx
+++ b/src/components/layout/dialogs/profile/LinkAccounts.jsx
@@ -12,7 +12,7 @@ import Utility from '@services/Utility'
 import Query from '@services/Query'
 import { METHODS } from '@assets/constants'
 
-import DiscordLogin from '../../auth/Discord'
+import DiscordButton from '../../auth/Discord'
 import Telegram from '../../auth/Telegram'
 import Notification from '../../general/Notification'
 
@@ -39,9 +39,9 @@ export function LinkAccounts() {
           const Component = i ? (
             <Telegram authUrl={telegramAuthUrl} botName={telegramBotName} />
           ) : (
-            <DiscordLogin href={discordAuthUrl} size="medium">
+            <DiscordButton href={discordAuthUrl} size="medium">
               {t('link_discord')}
-            </DiscordLogin>
+            </DiscordButton>
           )
           return (
             <Grid2 key={method} xs={12} textAlign="center">
diff --git a/src/features/login/CustomPage.jsx b/src/features/login/CustomPage.jsx
new file mode 100644
index 000000000..fb5e76f9e
--- /dev/null
+++ b/src/features/login/CustomPage.jsx
@@ -0,0 +1,42 @@
+/* eslint-disable react/no-array-index-key */
+// @ts-check
+import * as React from 'react'
+import { useTranslation } from 'react-i18next'
+import Grid from '@mui/material/Unstable_Grid2'
+import { useQuery } from '@apollo/client'
+
+import { CUSTOM_COMPONENT } from '@services/queries/config'
+import CustomTile from '@components/layout/custom/CustomTile'
+import { Loading } from '@components/layout/general/Loading'
+
+export default function CustomLoginPage() {
+  const { t, i18n } = useTranslation()
+  const { data, loading } = useQuery(CUSTOM_COMPONENT, {
+    fetchPolicy: 'cache-first',
+    variables: { component: 'loginPage' },
+  })
+
+  if (loading) {
+    return <Loading height="100vh">{t('loading', { category: '' })}</Loading>
+  }
+
+  const { settings, components } = data?.customComponent || {
+    settings: {},
+    components: [],
+  }
+  return (
+    <Grid
+      container
+      key={i18n.language}
+      spacing={settings.parentSpacing || 0}
+      alignItems={settings.parentAlignItems || 'center'}
+      justifyContent={settings.parentJustifyContent || 'center'}
+      style={settings.parentStyle || {}}
+      sx={settings.parentSx || {}}
+    >
+      {components.map((block, i) => (
+        <CustomTile key={i} block={block} />
+      ))}
+    </Grid>
+  )
+}
diff --git a/src/features/login/DefaultPage.jsx b/src/features/login/DefaultPage.jsx
new file mode 100644
index 000000000..50d874383
--- /dev/null
+++ b/src/features/login/DefaultPage.jsx
@@ -0,0 +1,65 @@
+// @ts-check
+import * as React from 'react'
+import { useTranslation } from 'react-i18next'
+import Typography from '@mui/material/Typography'
+import Grid from '@mui/material/Unstable_Grid2'
+import Divider from '@mui/material/Divider'
+import { styled } from '@mui/material/styles'
+
+import { useMemory } from '@hooks/useMemory'
+import LocaleSelection from '@components/layout/general/LocaleSelection'
+
+import Methods from './Methods'
+
+const StyledDivider = styled(Divider)(({ theme }) => ({
+  margin: theme.spacing(3, 0),
+}))
+StyledDivider.defaultProps = { flexItem: true }
+
+export function DefaultLoginPage() {
+  const { t } = useTranslation()
+  const headerTitle = useMemory((s) => s.config.general.headerTitle)
+  const authMethods = useMemory((s) => s.auth.methods)
+  return (
+    <Grid
+      alignItems="center"
+      justifyContent="center"
+      height="100cqh"
+      width="100%"
+      container
+      direction="column"
+    >
+      <Grid
+        container
+        direction="column"
+        justifyContent="center"
+        alignItems="center"
+        my={4}
+        minWidth="min(90%, 400px)"
+        maxWidth={500}
+        flexGrow={1}
+      >
+        <Grid pb={8}>
+          <Typography variant="h3" align="center">
+            {t('welcome')} {headerTitle}
+          </Typography>
+        </Grid>
+        {authMethods.map((method, index, { length }) => {
+          const showDivider = !!(index && length)
+          const Component = Methods[method]
+          return (
+            Component && (
+              <>
+                {showDivider && <StyledDivider />}
+                <Component />
+              </>
+            )
+          )
+        })}
+      </Grid>
+      <Grid pb={2} width="min(50%, 300px)">
+        <LocaleSelection />
+      </Grid>
+    </Grid>
+  )
+}
diff --git a/src/features/login/Methods.jsx b/src/features/login/Methods.jsx
new file mode 100644
index 000000000..06c3a06df
--- /dev/null
+++ b/src/features/login/Methods.jsx
@@ -0,0 +1,69 @@
+// @ts-check
+import * as React from 'react'
+import Grid from '@mui/material/Unstable_Grid2'
+
+import DiscordButton from '@components/layout/auth/Discord'
+import { useMemory } from '@hooks/useMemory'
+import { useTranslation } from 'react-i18next'
+import TelegramWidget from '@components/layout/auth/Telegram'
+import LocalLogin from '@components/layout/auth/Local'
+
+function Discord() {
+  const { t } = useTranslation()
+  const discordInvite = useMemory((s) => s.config.links.discordInvite)
+  const discordAuthUrl = useMemory((s) => s.config.customRoutes.discordAuthUrl)
+
+  return (
+    <Grid
+      container
+      justifyContent="center"
+      alignItems="center"
+      direction="row"
+      xs={12}
+    >
+      <Grid
+        xs={discordInvite ? t('login_button') : 10}
+        sm={discordInvite ? 6 : 10}
+        textAlign="center"
+      >
+        <DiscordButton href={discordAuthUrl} bgcolor="success.dark" />
+      </Grid>
+      {discordInvite && (
+        <Grid xs={t('join_button')} sm={6} textAlign="center">
+          <DiscordButton href={discordInvite}>join</DiscordButton>
+        </Grid>
+      )}
+    </Grid>
+  )
+}
+
+function Telegram() {
+  const telegramBotName = useMemory(
+    (s) => s.config.customRoutes.telegramBotName,
+  )
+  const telegramAuthUrl = useMemory(
+    (s) => s.config.customRoutes.telegramAuthUrl,
+  )
+  return (
+    <Grid>
+      <TelegramWidget botName={telegramBotName} authUrl={telegramAuthUrl} />
+    </Grid>
+  )
+}
+
+function Local() {
+  const localAuthUrl = useMemory((s) => s.config.customRoutes.localAuthUrl)
+  return (
+    <Grid>
+      <LocalLogin href={localAuthUrl} />
+    </Grid>
+  )
+}
+
+const Methods = {
+  discord: Discord,
+  telegram: Telegram,
+  local: Local,
+}
+
+export default Methods
diff --git a/src/features/login/index.jsx b/src/features/login/index.jsx
new file mode 100644
index 000000000..7fd2d6450
--- /dev/null
+++ b/src/features/login/index.jsx
@@ -0,0 +1,27 @@
+/* eslint-disable react/no-array-index-key */
+// @ts-check
+import * as React from 'react'
+import { Navigate } from 'react-router-dom'
+import Box from '@mui/material/Box'
+
+import { useMemory } from '@hooks/useMemory'
+import ThemeToggle from '@components/layout/general/ThemeToggle'
+import CustomLoginPage from './CustomPage'
+import { DefaultLoginPage } from './DefaultPage'
+
+export default function Login() {
+  const loggedIn = useMemory((s) => s.auth.loggedIn)
+  const loginPage = useMemory((s) => s.config.loginPage)
+
+  if (loggedIn && process.env.NODE_ENV !== 'development') {
+    return <Navigate to="/" />
+  }
+  return (
+    <>
+      <Box position="absolute" top={10} right={10}>
+        <ThemeToggle />
+      </Box>
+      {loginPage ? <CustomLoginPage /> : <DefaultLoginPage />}
+    </>
+  )
+}
diff --git a/src/hooks/useMemory.js b/src/hooks/useMemory.js
index fa7786bed..d275f5f16 100644
--- a/src/hooks/useMemory.js
+++ b/src/hooks/useMemory.js
@@ -15,7 +15,7 @@ import { create } from 'zustand'
  *   auth: {
  *    perms: Partial<import('@rm/types').Permissions>,
  *    loggedIn: boolean,
- *    methods: string[],
+ *    methods: import('@rm/types').Strategy[],
  *    strategy: import('@rm/types').Strategy | '',
  *    userBackupLimits: number,
  *    excludeList: string[],

From 9ba40b8567ebd1f834eba35fc1724c59052b1748 Mon Sep 17 00:00:00 2001
From: Derick M <58572875+TurtIeSocks@users.noreply.github.com>
Date: Fri, 1 Mar 2024 13:08:57 -0500
Subject: [PATCH 2/3] refactor: import order

---
 src/features/login/Methods.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/features/login/Methods.jsx b/src/features/login/Methods.jsx
index 06c3a06df..06940cfae 100644
--- a/src/features/login/Methods.jsx
+++ b/src/features/login/Methods.jsx
@@ -1,12 +1,12 @@
 // @ts-check
 import * as React from 'react'
 import Grid from '@mui/material/Unstable_Grid2'
+import { useTranslation } from 'react-i18next'
 
 import DiscordButton from '@components/layout/auth/Discord'
-import { useMemory } from '@hooks/useMemory'
-import { useTranslation } from 'react-i18next'
 import TelegramWidget from '@components/layout/auth/Telegram'
 import LocalLogin from '@components/layout/auth/Local'
+import { useMemory } from '@hooks/useMemory'
 
 function Discord() {
   const { t } = useTranslation()

From 8c0ccf44b9f484797af8ac59f3edb0c1e2e03bc7 Mon Sep 17 00:00:00 2001
From: Derick M <58572875+TurtIeSocks@users.noreply.github.com>
Date: Fri, 1 Mar 2024 13:29:24 -0500
Subject: [PATCH 3/3] refactor: more consistent import/exports

---
 src/components/ReactRouter.jsx    | 4 ++--
 src/features/login/CustomPage.jsx | 2 +-
 src/features/login/index.jsx      | 5 +++--
 3 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/components/ReactRouter.jsx b/src/components/ReactRouter.jsx
index a0f08ca56..6981b81c6 100644
--- a/src/components/ReactRouter.jsx
+++ b/src/components/ReactRouter.jsx
@@ -3,7 +3,7 @@ import * as React from 'react'
 import { Route, Routes } from 'react-router-dom'
 
 import Auth from './layout/auth/Auth'
-import Login from '../features/login'
+import LoginPage from '../features/login'
 import Blocked from './layout/auth/Blocked'
 import Errors from './Errors'
 import DataManagement from '../features/data'
@@ -19,7 +19,7 @@ const authRoute = (
 )
 const loginRoute = (
   <Config>
-    <Login />
+    <LoginPage />
   </Config>
 )
 const dataRoute = (
diff --git a/src/features/login/CustomPage.jsx b/src/features/login/CustomPage.jsx
index fb5e76f9e..7e43e35ae 100644
--- a/src/features/login/CustomPage.jsx
+++ b/src/features/login/CustomPage.jsx
@@ -9,7 +9,7 @@ import { CUSTOM_COMPONENT } from '@services/queries/config'
 import CustomTile from '@components/layout/custom/CustomTile'
 import { Loading } from '@components/layout/general/Loading'
 
-export default function CustomLoginPage() {
+export function CustomLoginPage() {
   const { t, i18n } = useTranslation()
   const { data, loading } = useQuery(CUSTOM_COMPONENT, {
     fetchPolicy: 'cache-first',
diff --git a/src/features/login/index.jsx b/src/features/login/index.jsx
index 7fd2d6450..c89396437 100644
--- a/src/features/login/index.jsx
+++ b/src/features/login/index.jsx
@@ -6,10 +6,11 @@ import Box from '@mui/material/Box'
 
 import { useMemory } from '@hooks/useMemory'
 import ThemeToggle from '@components/layout/general/ThemeToggle'
-import CustomLoginPage from './CustomPage'
+
+import { CustomLoginPage } from './CustomPage'
 import { DefaultLoginPage } from './DefaultPage'
 
-export default function Login() {
+export default function LoginPage() {
   const loggedIn = useMemory((s) => s.auth.loggedIn)
   const loginPage = useMemory((s) => s.config.loginPage)