Login logout dialogue box

pages/index.tsx

@@ -10,7 +10,7 @@ import { POSTS_PER_PAGE } from '../src/config';
 
 
 import { BlankLayout } from '../src/layouts/blank-layout';
-import { loginSuccessMessage, logoutSuccessMessage } from './../src/data/validation/user';
+import { logoutSuccessMessage } from './../src/data/validation/user';
 
 const query = gql`
   query topNewsItems($type: FeedType!, $first: Int!, $skip: Int!) {
@@ -46,8 +46,6 @@ export function IndexPage(props): JSX.Element {
   useEffect(() => {
     if (router.query.logout) {
       logoutSuccessMessage();
-    } else if (router.query.login) {
-      loginSuccessMessage();
     }
 
     window.history.replaceState(null, '', '/');

pages/login.tsx

@@ -127,7 +127,7 @@ function LoginPage(props: ILoginPageProps): JSX.Element {
         <br />
         <form
           method="post"
-          action="/register"
+          action={`/register`}
           onSubmit={(e): void => validateRegister(e)}
           style={{ marginBottom: '2em' }}
         >
@@ -158,6 +158,16 @@ function LoginPage(props: ILoginPageProps): JSX.Element {
                   />
                 </td>
               </tr>
+              <tr>                
+                <td>
+                  <input
+                    type="text"
+                    name="goto"
+                    value={routerQuery.goto}  
+                    hidden                
+                  />
+                </td>
+              </tr>
             </tbody>
           </table>
           {registerValidationMessage && <p style={{ display: 'flex',  justifyContent:'center', alignItems:'center', color: '#f1080e' }}>{registerValidationMessage}</p>}

pages/newest.tsx

@@ -7,7 +7,6 @@ import { withDataAndRouter } from '../src/helpers/with-data';
 import { MainLayout } from '../src/layouts/main-layout';
 import { FeedType } from '../src/data/models';
 import { POSTS_PER_PAGE } from '../src/config';
-import { loginSuccessMessage } from '../src/data/validation/user';
 
 const query = gql`
   query NewestFeed($type: FeedType!, $first: Int!, $skip: Int!) {
@@ -36,8 +35,6 @@ export function NewestPage(props): JSX.Element {
 
   const { data } = useQuery(query, { variables: { first, skip, type: FeedType.NEW } });
 
-  // loginSuccessMessage();
-
   return (
     <MainLayout currentUrl={router.pathname}>
       <NewsFeed data={data} currentUrl={router.pathname} first={first} skip={skip} />

pages/user.tsx

@@ -9,7 +9,7 @@ import { convertNumberToTimeAgo } from '../src/helpers/convert-number-to-time-ag
 import { withDataAndRouter } from '../src/helpers/with-data';
 import { BlankLayout } from '../src/layouts/blank-layout';
 import { MainLayout } from '../src/layouts/main-layout';
-import { loginSuccessMessage } from './../src/data/validation/user';
+import { logoutSuccessMessage } from './../src/data/validation/user';
 
 const query = gql`
   query User($id: String!) {
@@ -66,8 +66,8 @@ function UserPage(props: IUserPageProps): JSX.Element {
   };
 
   useEffect(() => {
-    if (router.query.login) {
-      loginSuccessMessage();
+    if (router.query.logout) {
+      logoutSuccessMessage();
     }
 
     window.history.replaceState(null, '', `/user?id=${router.query.id}`);

public/static/news.css

@@ -1,6 +1,8 @@
 body  { font-family:Verdana, Geneva, sans-serif; font-size:10pt; color:#828282; }
 td    { font-family:Verdana, Geneva, sans-serif; font-size:10pt; color:#828282; }
 
+.header { font-family:Verdana, Geneva, sans-serif; font-size:50pt;}
+
 .admin td   { font-family:Verdana, Geneva, sans-serif; font-size:8.5pt; color:#000000; }
 .subtext td { font-family:Verdana, Geneva, sans-serif; font-size:  7pt; color:#828282; }
 

public/static/notification.css

@@ -0,0 +1,19 @@
+.notification-custom {
+  text-align: center;
+  background-color: #ef5d0f;
+  max-height: 30px;
+  max-width: 300px;
+}
+
+.notification__message {
+  color: #000;
+  max-width: calc(100% - 15px);
+  font-family: Verdana, Geneva, sans-serif;
+  font-weight: bolder;
+  font-size: 10pt;
+  text-transform: capitalize;
+  line-height: 100%;
+  word-wrap: break-word;
+  margin-bottom: 0;
+  margin-top: 0;
+}

server/server.ts

@@ -134,7 +134,8 @@ app
               password: req.body.password,
             });
             // @ts-ignore returnTo is an undocumented feature of passportjs
-            req.session!.returnTo = `/user?id=${req.body.id}&login=true`;
+            // req.session!.returnTo = `/user?id=${req.body.id}&login=true`;
+            req.session!.returnTo = `${req.body.goto}`;
           } catch (err) {
             // @ts-ignore returnTo is an undocumented feature of passportjs
             req.session!.returnTo = `/login?how=${err.code}`;

src/components/error-action.tsx

@@ -3,12 +3,7 @@ import { useRouter } from 'next/router';
 import Modal from 'react-bootstrap/Modal'
 import "bootstrap/dist/css/bootstrap.min.css";
 
-export interface IErrorActionProps {
-    currentUrl: string;
-}
-
-export function ErrorAction(props: IErrorActionProps): JSX.Element {
-    const { currentUrl } = props;
+export function ErrorAction(): JSX.Element {
 
     const [show, setShow] = React.useState(true);
 
@@ -17,7 +12,7 @@ export function ErrorAction(props: IErrorActionProps): JSX.Element {
     const handleClose = () => setShow(false);
 
     const handleLogin = () => {
-        router.push(`/login?goto=${currentUrl}`);       
+        router.push(`/login?goto=${router.pathname}`);       
     }
 
     return (

src/components/header.tsx

@@ -47,8 +47,8 @@ export function Header(props: IHeaderProps): JSX.Element {
       <td style={{ backgroundColor: '#ff6600', padding: '0px' }}>
         <table style={{ border: '0px', padding: '2px', borderSpacing: '0px', width: '100%' }}>
           <tbody>
-            <tr>
-              <td style={{ width: '18px', padding: '0px', paddingRight: '4px' }}>
+            <tr className="header" >
+              <td style={{width: '18px', padding: '0px', paddingRight: '4px'}}>
                 <Link href="/" >
                   <a>
                     <img
@@ -57,8 +57,8 @@ export function Header(props: IHeaderProps): JSX.Element {
                         border: '1px',
                         borderColor: 'white',
                         borderStyle: 'solid',
-                        height: '18px',
-                        width: '18px',
+                        height: '30px',
+                        width: '30px',
                       }}
                     />
                   </a>

src/components/news-title.tsx

@@ -54,10 +54,10 @@ export function NewsTitle(props: INewsTitleProps): JSX.Element {
             </a>
           )}
         </div>            
-        <div>{ notLoggedIn && (<ErrorAction currentUrl="news" />) }</div>
+        <div>{ notLoggedIn && (<ErrorAction />) }</div>
       </td>
       <td className="title">
-        <a className="storylink" href={url || `item?id=${id}`}>
+        <a className="storylink" target="_blank" href={url || `item?id=${id}`}>
           {title}
         </a>
         {url && (

src/data/validation/user.ts

@@ -30,35 +30,30 @@ export function validateNewUser({ id, password }): boolean {
   return true;
 }
 
-export function loginSuccessMessage(): void {
-  store.addNotification({
-    title: "Login Success",
-    message: "Successfully Logged in",
-    type: "success",
-    insert: "top",
-    container: "top-right",
-    animationIn: ["animate__animated", "animate__fadeIn"],
-    animationOut: ["animate__animated", "animate__fadeOut"],
-    dismiss: {
-      duration: 5000,
-      onScreen: true
-    }
-  });
-}
-
 export function logoutSuccessMessage(): void {
 
   store.addNotification({
-    title: "Logout Success",
-    message: "Successfully Logged Out",
-    type: "danger",
+    message: "You have successfully logged out",
+    type: "custom",
     insert: "top",
-    container: "top-right",
+    container: "bottom-right",
     animationIn: ["animate__animated", "animate__fadeIn"],
     animationOut: ["animate__animated", "animate__fadeOut"],
     dismiss: {
-      duration: 5000,
+      duration: 2000,
       onScreen: true
-    }
+    },
+    touchSlidingExit: {
+      swipe: {
+        duration: 400,
+        timingFunction: 'ease-out',
+        delay: 0,
+      },
+      fade: {
+        duration: 400,
+        timingFunction: 'ease-out',
+        delay: 0
+      }
+    },
   });
 }

src/layouts/login-layout.tsx

@@ -31,7 +31,7 @@ export function LoginLayout(props: IMainLayoutProps): JSX.Element {
   const options = {
     // you can also just use 'bottom center'
     position: positions.TOP_RIGHT,
-    timeout: 5000,
+    timeout: 2000,
     offset: '30px',
     // you can also just use 'scale'
     transition: transitions.SCALE

src/layouts/main-layout.tsx

@@ -31,7 +31,14 @@ export function MainLayout(props: IMainLayoutProps): JSX.Element {
 
   return (
     <div>
-      <ReactNotification />
+      <link rel="stylesheet" type="text/css" href="/static/notification.css" />
+      <ReactNotification 
+        types={[{
+          htmlClasses: ["notification-custom"],
+          name: "custom"
+        }]}
+      />
+
       <Head>
         <title>Hacker News Clone</title>
         <meta name="referrer" content="origin" />