diff --git a/pages/index.tsx b/pages/index.tsx index 6a01ac7..dc83ebd 100644 --- a/pages/index.tsx +++ b/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, '', '/'); diff --git a/pages/login.tsx b/pages/login.tsx index c3245ff..cde1085 100644 --- a/pages/login.tsx +++ b/pages/login.tsx @@ -127,7 +127,7 @@ function LoginPage(props: ILoginPageProps): JSX.Element {
validateRegister(e)} style={{ marginBottom: '2em' }} > @@ -158,6 +158,16 @@ function LoginPage(props: ILoginPageProps): JSX.Element { /> + + + + + {registerValidationMessage &&

{registerValidationMessage}

} diff --git a/pages/newest.tsx b/pages/newest.tsx index 53e1995..8176727 100644 --- a/pages/newest.tsx +++ b/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 ( diff --git a/pages/user.tsx b/pages/user.tsx index e5b8bee..56dec43 100644 --- a/pages/user.tsx +++ b/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}`); diff --git a/public/static/news.css b/public/static/news.css index 67c08e6..59493ff 100644 --- a/public/static/news.css +++ b/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; } diff --git a/public/static/notification.css b/public/static/notification.css new file mode 100644 index 0000000..964298f --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/server/server.ts b/server/server.ts index bddf05a..e988141 100644 --- a/server/server.ts +++ b/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}`; diff --git a/src/components/error-action.tsx b/src/components/error-action.tsx index 42fed7e..6628f10 100644 --- a/src/components/error-action.tsx +++ b/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 ( diff --git a/src/components/header.tsx b/src/components/header.tsx index dc2279a..2e31f94 100644 --- a/src/components/header.tsx +++ b/src/components/header.tsx @@ -47,8 +47,8 @@ export function Header(props: IHeaderProps): JSX.Element { - - +
+
diff --git a/src/components/news-title.tsx b/src/components/news-title.tsx index 12d6682..7fdf431 100644 --- a/src/components/news-title.tsx +++ b/src/components/news-title.tsx @@ -54,10 +54,10 @@ export function NewsTitle(props: INewsTitleProps): JSX.Element { )} -
{ notLoggedIn && () }
+
{ notLoggedIn && () }
 - + {title} {url && ( diff --git a/src/data/validation/user.ts b/src/data/validation/user.ts index df71cc9..932b19c 100644 --- a/src/data/validation/user.ts +++ b/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 + } + }, }); } diff --git a/src/layouts/login-layout.tsx b/src/layouts/login-layout.tsx index 3bc0ea2..1cd6435 100644 --- a/src/layouts/login-layout.tsx +++ b/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 diff --git a/src/layouts/main-layout.tsx b/src/layouts/main-layout.tsx index 16916a2..5eb4062 100644 --- a/src/layouts/main-layout.tsx +++ b/src/layouts/main-layout.tsx @@ -31,7 +31,14 @@ export function MainLayout(props: IMainLayoutProps): JSX.Element { return (
- + + + Hacker News Clone