Improvements to the login page

CHANGELOG.md

@@ -1,6 +1,11 @@
 # Changelog
 All notable changes to this project will be documented in this file.
 
+## [0.3.8] - 2020-06-17
+##### Added
+- Added the support button to the login page
+- Added an in app modal which explains how to find your session Id, instead of redirecting to the Discord
+
 ## [0.3.7] - 2020-06-16
 ##### Added
 - Added a setting for selecting the cutoff for stacks of items, similar to the price treshold but for the total item count

ExilenceNextApp/package.json

@@ -1,6 +1,6 @@
 {
   "name": "exilence-next-app",
-  "version": "0.3.7",
+  "version": "0.3.8",
   "private": true,
   "dependencies": {
     "@material-ui/core": "^4.5.2",

ExilenceNextApp/public/i18n/en/common.json

@@ -38,7 +38,8 @@
     "snapshot_settings": "Snapshot settings",
     "snapshot_history_chart": "Snapshot history",
     "ui_settings": "Interface",
-    "general": "General"
+    "general": "General",
+    "session_id_dialog": "How to find your session Id"
   },
   "label": {
     "stash_tabs": "Stash tabs",
@@ -113,7 +114,10 @@
     "auto_snapshotting": "Activate auto snapshotting",
     "auto_snapshot_interval": "Set auto snapshot interval",
     "ui_scale": "Interface scale (%)",
-    "filter_total": "Filter Total:"
+    "filter_total": "Filter Total:",
+    "google_chrome": "Google Chrome",
+    "mozilla_firefox": "Mozilla Firefox",
+    "microsoft_edge": "Microsoft Edge"
   },
   "value": {
     "none": "None",
@@ -140,7 +144,9 @@
     "leave_group": "Are you sure you want to leave your current group?",
     "ga_consent_main_text": "We use Google Analytics in Exilence Next. This means we track how you interact with the app, in order to improve it further.",
     "ga_consent_sub_text": "To clarify, we don't track anything related to your Path of Exile account in Google Analytics, and can't identify you as a user.",
-    "ga_consent_short_text": "By proceeding below, you agree to "
+    "ga_consent_short_text": "By proceeding below, you agree to ",
+    "session_id_dialog_prefix": "The session Id is located in a cookie from the",
+    "session_id_dialog_suffix": "website under the name POESESSID. Use the appropriate link below to find how you inspect cookies using your browser."
   },
   "unit":{
     "chaos": "c",

ExilenceNextApp/src/components/consent-dialog/ConsentDialog.styles.ts

@@ -3,9 +3,6 @@ import { makeStyles } from '@material-ui/core';
 const useStyles = makeStyles(theme => ({
   dialogActions: {
     padding: theme.spacing(2)
-  },
-  consent: {
-    color: theme.palette.text.hint
   }
 }));
 

ExilenceNextApp/src/components/consent-dialog/ConsentDialog.tsx

@@ -25,12 +25,12 @@ const ConsentDialog: React.FC<Props> = ({ show, onClose }: Props) => {
       <DialogTitle>{t('title.ga_consent_dialog_title')}</DialogTitle>
       <DialogContent>
         <Box width={1} mb={1}>
-          <Typography className={classes.consent} variant="subtitle2">
+          <Typography variant="body2">
             {t('body.ga_consent_main_text')}
           </Typography>
         </Box>
         <Box width={1} mb={2}>
-          <Typography className={classes.consent} variant="subtitle2">
+          <Typography variant="body2">
             {t('body.ga_consent_sub_text')}
           </Typography>
         </Box>

ExilenceNextApp/src/components/info-dialog/InfoDialog.styles.ts

@@ -0,0 +1,9 @@
+import { makeStyles } from '@material-ui/core';
+
+const useStyles = makeStyles(theme => ({
+  dialogActions: {
+    padding: theme.spacing(2)
+  }
+}));
+
+export default useStyles;

ExilenceNextApp/src/components/info-dialog/InfoDialog.tsx

@@ -0,0 +1,38 @@
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle
+} from '@material-ui/core';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import useStyles from './InfoDialog.styles';
+
+interface Props {
+  show: boolean;
+  title: string;
+  content: JSX.Element;
+  onClose: () => void;
+}
+
+const InfoDialog: React.FC<Props> = ({ show, title, content, onClose }: Props) => {
+  const classes = useStyles();
+  const { t } = useTranslation();
+
+  return (
+    <Dialog open={show} onClose={onClose}>
+      <DialogTitle>{title}</DialogTitle>
+      <DialogContent>
+        {content}
+      </DialogContent>
+      <DialogActions className={classes.dialogActions}>
+        <Button onClick={onClose} color="primary" variant="contained">
+          {t('action.close')}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export default InfoDialog;

ExilenceNextApp/src/components/login-content/LoginContent.tsx

@@ -10,6 +10,7 @@ import { IAccount } from '../../interfaces/account.interface';
 import { Account } from '../../store/domains/account';
 import AccountValidationForm from './account-validation-form/AccountValidationForm';
 import useStyles from './LoginContent.styles';
+import SupportButton from '../support-button/SupportButton';
 
 interface LoginContentProps {
   handleValidate: (account: IAccount) => void;
@@ -73,6 +74,7 @@ const LoginContent: React.FC<LoginContentProps> = ({
           </Paper>
         </Grid>
       </Grid>
+      <SupportButton noMargin />
     </>
   );
 };

ExilenceNextApp/src/components/login-content/account-validation-form/AccountValidationForm.styles.ts

@@ -1,14 +1,22 @@
 import { makeStyles } from '@material-ui/core';
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles((theme) => ({
   helperIcon: {
     color: theme.palette.primary.light,
-    marginRight: theme.spacing(-0.5)
+    marginRight: theme.spacing(-0.5),
   },
   inlineLink: {
     color: theme.palette.primary.light,
-    verticalAlign: 'baseline'
-  }
+    verticalAlign: 'baseline',
+  },
+  modalBody: {
+    color: theme.palette.text.hint,
+  },
+  linkBlock: {
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+  },
 }));
 
 export default useStyles;

ExilenceNextApp/src/components/login-content/account-validation-form/AccountValidationForm.tsx

@@ -3,7 +3,8 @@ import {
   IconButton,
   Link,
   TextField,
-  Typography
+  Typography,
+  Box,
 } from '@material-ui/core';
 import ExitToApp from '@material-ui/icons/ExitToApp';
 import HelpIcon from '@material-ui/icons/Help';
@@ -18,6 +19,7 @@ import { openLink } from '../../../utils/window.utils';
 import ConsentDialog from '../../consent-dialog/ConsentDialog';
 import RequestButton from '../../request-button/RequestButton';
 import useStyles from './AccountValidationForm.styles';
+import InfoDialog from '../../info-dialog/InfoDialog';
 
 interface AccountFormValues {
   sessionId: string;
@@ -36,26 +38,27 @@ const AccountValidationForm: React.FC<AccountValidationFormProps> = ({
   styles,
   isSubmitting,
   isInitiating,
-  account
+  account,
 }: AccountValidationFormProps) => {
   const { t } = useTranslation();
   const classes = useStyles();
 
   const [showConsent, setShowConsent] = useState(false);
+  const [showSessionIdInfo, setShowSessionIdInfo] = useState(false);
 
   return (
     <>
       <Formik
         initialValues={{
-          sessionId: account.sessionId
+          sessionId: account.sessionId,
         }}
         onSubmit={(values: AccountFormValues) => {
           handleValidate({
-            sessionId: values.sessionId
+            sessionId: values.sessionId,
           });
         }}
         validationSchema={Yup.object().shape({
-          sessionId: Yup.string().required('Required')
+          sessionId: Yup.string().required('Required'),
         })}
       >
         {/* todo: refactor and use new formik */}
@@ -68,51 +71,50 @@ const AccountValidationForm: React.FC<AccountValidationFormProps> = ({
             handleChange,
             handleBlur,
             handleSubmit,
-            isValid
+            isValid,
           } = formProps;
           return (
             <form onSubmit={handleSubmit}>
               <div>
                 <TextField
                   label={t('label.session_id')}
-                  name="sessionId"
-                  type="password"
-                  variant="outlined"
+                  name='sessionId'
+                  type='password'
+                  variant='outlined'
                   value={values.sessionId}
                   onChange={handleChange}
                   onBlur={handleBlur}
                   helperText={
                     errors.sessionId && touched.sessionId && errors.sessionId
                   }
                   error={touched.sessionId && errors.sessionId !== undefined}
-                  margin="normal"
+                  margin='normal'
                   fullWidth
                   InputProps={{
                     endAdornment: (
                       <IconButton
-                        aria-label="help"
+                        aria-label='help'
                         title={t('label.session_id_icon_title')}
                         className={classes.helperIcon}
-                        edge="start"
-                        size="small"
-                        onClick={e => openLink(e)}
-                        href="https://discord.gg/yxuBrPY"
+                        edge='start'
+                        size='small'
+                        onClick={() => setShowSessionIdInfo(true)}
                       >
                         <HelpIcon />
                       </IconButton>
-                    )
+                    ),
                   }}
                 ></TextField>
               </div>
               <div className={styles.loginFooter}>
                 <Grid container spacing={2}>
                   <Grid item xs={12}>
-                    <Typography variant="subtitle2">
+                    <Typography variant='subtitle2'>
                       {t('body.ga_consent_short_text')}
                       <Link
-                        component="button"
-                        variant="subtitle2"
-                        type="button"
+                        component='button'
+                        variant='subtitle2'
+                        type='button'
                         className={classes.inlineLink}
                         onClick={() => setShowConsent(true)}
                       >
@@ -122,10 +124,10 @@ const AccountValidationForm: React.FC<AccountValidationFormProps> = ({
                   </Grid>
                   <Grid item xs={12}>
                     <RequestButton
-                      variant="contained"
-                      color="primary"
+                      variant='contained'
+                      color='primary'
                       fullWidth
-                      type="submit"
+                      type='submit'
                       loading={isSubmitting || isInitiating}
                       disabled={
                         !touched ||
@@ -145,6 +147,65 @@ const AccountValidationForm: React.FC<AccountValidationFormProps> = ({
         }}
       </Formik>
       <ConsentDialog show={showConsent} onClose={() => setShowConsent(false)} />
+      <InfoDialog
+        show={showSessionIdInfo}
+        onClose={() => setShowSessionIdInfo(false)}
+        title={t('title.session_id_dialog')}
+        content={
+          <>
+            <Box width={1} mb={2}>
+              <Typography variant='body2'>
+                {t('body.session_id_dialog_prefix')}&nbsp;
+                <a
+                  className={classes.inlineLink}
+                  href='https://www.pathofexile.com'
+                  onClick={(e) => openLink(e)}
+                >
+                  https://www.pathofexile.com
+                </a>
+                &nbsp;
+                {t('body.session_id_dialog_suffix')}
+              </Typography>
+            </Box>
+            <Box width={1} mb={2} className={classes.linkBlock}>
+              <Typography variant='subtitle2'>
+                {t('label.google_chrome')}
+              </Typography>
+              <a
+                className={classes.inlineLink}
+                href='https://developers.google.com/web/tools/chrome-devtools/storage/cookies'
+                onClick={(e) => openLink(e)}
+              >
+                https://developers.google.com/web/tools/chrome-devtools/storage/cookies
+              </a>
+            </Box>
+            <Box width={1} mb={2} className={classes.linkBlock}>
+              <Typography variant='subtitle2'>
+                {t('label.mozilla_firefox')}
+              </Typography>
+              <a
+                className={classes.inlineLink}
+                href='https://developer.mozilla.org/en-US/docs/Tools/Storage_Inspector'
+                onClick={(e) => openLink(e)}
+              >
+                https://developer.mozilla.org/en-US/docs/Tools/Storage_Inspector
+              </a>
+            </Box>
+            <Box width={1} mb={2} className={classes.linkBlock}>
+              <Typography variant='subtitle2'>
+                {t('label.microsoft_edge')}
+              </Typography>
+              <a
+                className={classes.inlineLink}
+                href='https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/storage/cookies'
+                onClick={(e) => openLink(e)}
+              >
+                https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/storage/cookies
+              </a>
+            </Box>
+          </>
+        }
+      />
     </>
   );
 };

ExilenceNextApp/src/components/support-button/SupportButton.styles.ts

@@ -23,6 +23,9 @@ export const useStyles = makeStyles(theme =>
       '&:hover': {
         background: theme.palette.primary.light
       }
+    },
+    noMargin: {
+      right: -16
     }
   })
 );