refactor: login page

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 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 = (

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>

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',

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}
             >

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'

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

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">

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 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>
+  )
+}

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>
+  )
+}