chore: update example

example/src/pages/_app.tsx

@@ -68,15 +68,19 @@ function MyApp({ Component, pageProps }: AppProps) {
                 </Grid>
                 <Grid>
                   <Text font="32px" marginTop={1.3} paddingRight={2}>
-                    <Link href="https://github.com/aiji42/next-fortress">
-                      <Github size={36} />
+                    <Link
+                      href="https://github.com/aiji42/next-fortress"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      <Github size={32} />
                     </Link>
                   </Text>
                 </Grid>
               </Grid.Container>
             </Page.Header>
 
-            <Page.Content padding={1}>
+            <Page.Content padding={1} paddingTop={0}>
               <Component {...pageProps} />
             </Page.Content>
 

example/src/pages/auth0/authed.tsx

@@ -25,7 +25,6 @@ const Authed: VFC = () => {
       <div className={styles.grid}>
         <a href="/api/auth/logout" className={styles.card}>
           <h2>Logout</h2>
-          <p>You will be redirected to the page you were on.</p>
         </a>
       </div>
     </>

example/src/pages/auth0/index.tsx

@@ -18,7 +18,7 @@ const IndexPage: VFC = () => {
       </Text>
 
       <p>This page can be accessed by anyone, with or without a login.</p>
-      <p>My Page can be accessed only when you are logged in.</p>
+      <p>You can access My Page only when you are logged in.</p>
 
       <div className={styles.grid}>
         {!user ? (
@@ -36,7 +36,7 @@ const IndexPage: VFC = () => {
         <Link href="/auth0/authed">
           <div className={styles.card}>
             <h2>Go My Page &rarr;</h2>
-            <p>Try it!</p>
+            {!user && <p>(Not Allowed)</p>}
           </div>
         </Link>
       </div>

example/src/pages/cognito/authed.tsx

@@ -29,7 +29,6 @@ const Authed: VFC = () => {
       <div className={styles.grid}>
         <button className={styles.card} onClick={() => Auth.signOut()}>
           <h2>Logout</h2>
-          <p>You will be redirected to the page you were on.</p>
         </button>
       </div>
     </>

example/src/pages/cognito/index.tsx

@@ -23,7 +23,7 @@ const IndexPage: VFC = () => {
       </Text>
 
       <p>This page can be accessed by anyone, with or without a login.</p>
-      <p>My Page can be accessed only when you are logged in.</p>
+      <p>You can access My Page only when you are logged in.</p>
 
       <div className={styles.grid}>
         {!login ? (
@@ -44,7 +44,7 @@ const IndexPage: VFC = () => {
         <Link href="/cognito/authed">
           <div className={styles.card}>
             <h2>Go My Page &rarr;</h2>
-            <p>Try it!</p>
+            {!login && <p>(Not Allowed)</p>}
           </div>
         </Link>
       </div>

example/src/pages/firebase/authed.tsx

@@ -21,9 +21,8 @@ const Authed: VFC = () => {
       <p>This page is accessible only to logged-in users.</p>
 
       <div className={styles.grid}>
-        <button className={styles.card} onClick={() => Logout()}>
+        <button className={styles.card} onClick={Logout}>
           <h2>Logout</h2>
-          <p>You will be redirected to the page you were on.</p>
         </button>
       </div>
     </>

example/src/pages/firebase/index.tsx

@@ -17,7 +17,7 @@ const IndexPage: VFC = () => {
       </Text>
 
       <p>This page can be accessed by anyone, with or without a login.</p>
-      <p>My Page can be accessed only when you are logged in.</p>
+      <p>You can access My Page only when you are logged in.</p>
 
       <div className={styles.grid}>
         {!auth.currentUser ? (
@@ -35,7 +35,7 @@ const IndexPage: VFC = () => {
         <Link href="/firebase/authed">
           <div className={styles.card}>
             <h2>Go My Page &rarr;</h2>
-            <p>Try it!</p>
+            {!auth.currentUser && <p>(Not Allowed)</p>}
           </div>
         </Link>
       </div>

example/src/pages/index.tsx

@@ -12,7 +12,7 @@ export default function Home() {
       <div className={styles.grid}>
         <Link href="/ip">
           <div className={styles.card}>
-            <h2>IP Protection &rarr;</h2>
+            <h2>IP Protect &rarr;</h2>
           </div>
         </Link>
 

example/src/pages/ip/_middleware.ts

@@ -2,7 +2,7 @@ import { makeIPInspector } from 'next-fortress'
 import { NextRequest, NextResponse } from 'next/server'
 
 export const middleware = (req: NextRequest) => {
-  if (req.nextUrl.pathname === '/ip') return
+  if (!req.nextUrl.pathname.includes('admin')) return
   const ips = req.cookies['__allowed_ips']
   if (!ips) return NextResponse.redirect('/ip')
 

example/src/pages/ip/admin.tsx

@@ -0,0 +1,36 @@
+import Head from 'next/head'
+import { VFC } from 'react'
+import { Button, Spacer, Text } from '@geist-ui/react'
+import Cookies from 'js-cookie'
+import { useRouter } from 'next/router'
+
+const Page: VFC = () => {
+  const router = useRouter()
+  const resetIPToCookie = () => {
+    Cookies.remove('__allowed_ips')
+    router.reload()
+  }
+
+  return (
+    <>
+      <Head>
+        <title>Admin | IP Protect Example | Next Fortress</title>
+      </Head>
+
+      <Text h2 font="24px">
+        Admin | IP protect example
+      </Text>
+
+      <p>Your IP address is allowed to access.</p>
+
+      <strong>Allowed IPs: {Cookies.get('__allowed_ips')}</strong>
+
+      <Spacer h={0.5} />
+      <Button auto ml="20px" onClick={resetIPToCookie}>
+        reset allowed IP
+      </Button>
+    </>
+  )
+}
+
+export default Page

example/src/pages/ip/index.tsx

@@ -3,27 +3,33 @@ import { useEffect, VFC } from 'react'
 import Cookies from 'js-cookie'
 import { Button, Text, Spacer, Input, useInput, Link } from '@geist-ui/react'
 import NextLink from 'next/link'
+import { useRouter } from 'next/router'
 
 const IndexPage: VFC = () => {
+  const router = useRouter()
   const { state: ips, setState: setIps, reset, bindings } = useInput('')
   useEffect(() => {
     const cookie = Cookies.get('__allowed_ips')
     cookie && setIps(cookie)
   }, [])
-  const setIPToCookie = () => Cookies.set('__allowed_ips', ips, { path: '/' })
+  const setIPToCookie = () => {
+    Cookies.set('__allowed_ips', ips, { path: '/' })
+    router.reload()
+  }
   const resetIPToCookie = () => {
     Cookies.remove('__allowed_ips')
+    router.reload()
     reset()
   }
 
   return (
     <>
       <Head>
-        <title>IP Control Example | Next Fortress</title>
+        <title>IP Protect Example | Next Fortress</title>
       </Head>
 
       <Text h2 font="24px">
-        IP control example
+        IP protect example
       </Text>
 
       <p>
@@ -33,7 +39,7 @@ const IndexPage: VFC = () => {
       <p>
         First, try to go to the Admin page without entering anything (access
         will be denied because you do not have an allowed IP). After that, enter
-        the IP you want to allow (yours) and go to the admin page.
+        the IP you want to allow and go to the admin page again.
       </p>
 
       <Spacer h={1} />
@@ -44,7 +50,7 @@ const IndexPage: VFC = () => {
       </NextLink>
       <Spacer h={2} />
 
-      <Input {...bindings} scale={5 / 3} placeholder="123.123.123.123/24" />
+      <Input {...bindings} scale={5 / 3} placeholder="123.123.123.123/32" />
       <Spacer h={0.5} />
       <Button auto type="secondary" onClick={setIPToCookie}>
         set allowed IP

example/src/styles/Home.module.css

@@ -116,4 +116,7 @@
     width: 100%;
     flex-direction: column;
   }
+  .card {
+    width: 90%;
+  }
 }