Merge pull request #1109 from linea-it/subscription-fixes-04

Subscription fixes 04
linea-it · Nov 29, 2024 · 6476b26 · 6476b26
2 parents 45193ab + f7d60d2
commit 6476b26
Show file tree

Hide file tree

Showing 3 changed files with 97 additions and 36 deletions.
diff --git a/backend/newsletter/templates/base.tpl b/backend/newsletter/templates/base.tpl
@@ -57,9 +57,8 @@
     .header-container {
       background-color: #0076BC;
       color: #ffffff;
-      padding: 20px;
+      padding: 5px;
       font-family: Helvetica, sans-serif;
-      display: flex;
       align-items: center;
       justify-content: center;
     }
@@ -70,24 +69,26 @@
 
     .header-title {
       margin: 0;
-      font-size: 20px;
+      font-size: 22px;
       line-height: 1.5;
       font-weight: normal;
       text-align: center;
     }
 
-  .token {
+    .token {
       font-size: 32px;
       font-weight: bold;
       color: #0076BC;
       text-align: center;
       margin: 20px 0;
+      letter-spacing: 8px; /* Adjust the value as needed */
     }
 
   </style>
 </head>
 
 <body>
+    <br>
     <table style="background-color: #F8F8F8; margin: 0 auto; max-width: 600px; padding: 0px;">
         {% include 'header.html' %}
         {% block content %} {% endblock %}

diff --git a/backend/newsletter/templates/header.html b/backend/newsletter/templates/header.html
@@ -3,7 +3,20 @@
 <tr>
   <td>
     <div class="header-container">
-      <h1 class="header-title">LIneA Occultation Prediction Database</h1>
+      <table style="width: 100%; border-collapse: collapse;">
+        <tr>
+          <td style="vertical-align: middle; width: 60px;">
+            <img src="https://solarsystem.linea.org.br/img/linea-logo.png" alt="LIneA Logo"
+              style="width: 60px; margin: 0px; margin-left: 40px; display: inline-block;"
+              onerror="this.style.display='none'; this.parentElement.style.width='0'; this.parentElement.nextElementSibling.style.width='100%';">
+          </td>
+          <td style="vertical-align: middle; padding-left: 50px; padding-right:50px; width: auto;">
+            <h1 class="header-title">
+              LIneA Occultation Prediction Database
+            </h1>
+          </td>
+        </tr>
+      </table>
     </div>
   </td>
 </tr>

diff --git a/frontend/src/pages/PublicPortal/Login/index.js b/frontend/src/pages/PublicPortal/Login/index.js
@@ -6,6 +6,9 @@ import Stack from '@mui/material/Stack'
 import TextField from '@mui/material/TextField'
 import Button from '@mui/material/Button'
 import Alert from '@mui/material/Alert'
+import Divider from '@mui/material/Divider'
+import Link from '@mui/material/Link'
+import SettingsIcon from '@mui/icons-material/Settings'
 
 import { sendPasswordLessCode, passwordLessSignIn, loggedUser } from '../../../services/api/Auth'
 
@@ -21,12 +24,11 @@ function PublicLogin() {
   useEffect(() => {
     loggedUser()
       .then((res) => {
-        console.log('Logged')
         if (res) {
           window.location.replace('/newsletter_settings/')
         }
       })
-      .catch((res) => {
+      .catch(() => {
         console.log('Not logged')
       })
   }, [])
@@ -42,85 +44,130 @@ function PublicLogin() {
   const handleChangeEmail = (e) => {
     setEmail(e.target.value)
     resetForm()
-    if (e.target.validity.valid) {
-      setEmailIsValid(true)
-    } else {
-      setEmailIsValid(false)
-    }
+    setEmailIsValid(e.target.validity.valid)
   }
 
   const handleSendCode = () => {
     sendPasswordLessCode(email)
-      .then((res) => {
+      .then(() => {
         setCodeSended(true)
       })
-      .catch((res) => {
+      .catch(() => {
         setSendCodeError(true)
       })
   }
 
   const handleChangeCode = (e) => {
     setCode(e.target.value)
-    if (e.target.value.length === 6) {
-      setCodeIsValid(true)
-    } else {
-      setCodeIsValid(false)
-    }
+    setCodeIsValid(e.target.value.length === 6)
   }
 
   const handleSignin = () => {
-    passwordLessSignIn(email, token).catch((res) => {
-      console.log('Autehntication failed')
+    passwordLessSignIn(email, token).catch(() => {
       setSigninError(true)
     })
   }
 
   return (
-    <Container maxWidth='sm'>
-      <Box>
-        <Stack mb={2}>
-          <Typography variant='h5' color='textPrimary'>
+    <Box
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        minHeight: '100vh',
+        bgcolor: '#f0f0f0'
+      }}
+    >
+      <Container
+        maxWidth='sm'
+        sx={{
+          bgcolor: '#F8F8F8',
+          p: 3,
+          borderRadius: 2,
+          boxShadow: 1
+        }}
+      >
+        {/* Header */}
+        <Box
+          sx={{
+            bgcolor: '#0076BC',
+            color: '#fff',
+            py: 2,
+            textAlign: 'center',
+            borderRadius: 1,
+            mb: 3
+          }}
+        >
+          <Typography
+            variant='h4'
+            sx={{
+              fontFamily: 'Oxanium, sans-serif',
+              fontWeight: 400,
+              fontSize: '1.5rem'
+            }}
+          >
+            LIneA Occultation Prediction Database
+          </Typography>
+        </Box>
+        {/* Body */}
+        <Stack spacing={2} mb={2}>
+          <Typography variant='body1' color='textPrimary' textAlign='center'>
             Sign in to your account
           </Typography>
-          <Typography variant='body2' color='textPrimary'>
-            Don't have an account? Get started
+          <Typography variant='body2' color='textSecondary' textAlign='center'>
+            Don't have an account?{' '}
+            <Link href='/' underline='hover' color='primary'>
+              Subscribe now.
+            </Link>
           </Typography>
+          <Typography variant='body2' color='textPrimary' textAlign='center'>
+            Once you've signed in, click on the{' '}
+            <SettingsIcon
+              fontSize='small'
+              sx={{
+                verticalAlign: 'bottom'
+              }}
+            />{' '}
+            icon to customize your filter settings.
+          </Typography>
+          <Divider />
         </Stack>
+        {/* Form */}
         <Box component='form' noValidate autoComplete='off'>
           <Stack spacing={2}>
-            <Stack direction='row'>
+            <Stack direction='row' spacing={1}>
               <TextField fullWidth label='Email address' type='email' value={email} onChange={handleChangeEmail} error={sendCodeError} />
               <Button sx={{ width: 150 }} variant='contained' disabled={!emailIsValid} onClick={handleSendCode}>
                 Send Code
               </Button>
             </Stack>
             {tokenSended && (
-              <Alert icon={false} severity='success'>
+              <Alert icon={false} severity='success' sx={{ fontSize: '0.875rem' }}>
                 We’ve sent a 6-character code to {email}. The code expires shortly, so please enter it soon.
               </Alert>
             )}
             {sendCodeError && (
-              <Alert severity='error'>
+              <Alert severity='error' sx={{ fontSize: '0.875rem' }}>
                 The authentication code could not be sent to this email. Please check your email address and try again.
               </Alert>
             )}
             <TextField label='Code' value={token} onChange={handleChangeCode} disabled={!tokenSended} inputProps={{ maxLength: 6 }} />
-            <Typography variant='caption' color='textPrimary'>
+            <Typography variant='caption' color='textSecondary' textAlign='center' sx={{ fontStyle: 'italic' }}>
               Can’t find your code? Check your spam folder!
             </Typography>
-
             {signinError && (
-              <Alert severity='error' onClose={resetForm}>
+              <Alert severity='error' onClose={resetForm} sx={{ fontSize: '0.875rem', textAlign: 'center' }}>
                 Authentication failed, please check your email and code and try again.
               </Alert>
             )}
-            <Button variant='contained' disabled={!tokenIsValid || !emailIsValid} onClick={handleSignin}>
+            <Button variant='contained' fullWidth disabled={!tokenIsValid || !emailIsValid} onClick={handleSignin}>
               Sign in
             </Button>
           </Stack>
         </Box>
-      </Box>
-    </Container>
+      </Container>
+    </Box>
   )
 }
+
 export default PublicLogin