diff options
Diffstat (limited to 'examples/middleware/src/pages')
| -rw-r--r-- | examples/middleware/src/pages/admin.astro | 55 | ||||
| -rw-r--r-- | examples/middleware/src/pages/api/login.ts | 18 | ||||
| -rw-r--r-- | examples/middleware/src/pages/index.astro | 63 | ||||
| -rw-r--r-- | examples/middleware/src/pages/login.astro | 75 |
4 files changed, 211 insertions, 0 deletions
diff --git a/examples/middleware/src/pages/admin.astro b/examples/middleware/src/pages/admin.astro new file mode 100644 index 000000000..028fd6b08 --- /dev/null +++ b/examples/middleware/src/pages/admin.astro @@ -0,0 +1,55 @@ +--- +import Layout from '../layouts/Layout.astro'; +const user = Astro.locals.user; +--- + +<Layout title="Welcome back!!"> + <main> + <h1>Welcome back <span class="text-gradient">{user.name} {user.surname}</span></h1> + </main> +</Layout> + +<style> + main { + margin: auto; + padding: 1.5rem; + max-width: 60ch; + } + h1 { + font-size: 3rem; + font-weight: 800; + margin: 0; + } + .text-gradient { + background-image: var(--accent-gradient); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-size: 400%; + background-position: 0%; + } + .instructions { + line-height: 1.6; + margin: 1rem 0; + border: 1px solid rgba(var(--accent), 25%); + background-color: white; + padding: 1rem; + border-radius: 0.4rem; + } + .instructions code { + font-size: 0.875em; + font-weight: bold; + background: rgba(var(--accent), 12%); + color: rgb(var(--accent)); + border-radius: 4px; + padding: 0.3em 0.45em; + } + .instructions strong { + color: rgb(var(--accent)); + } + .link-card-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr)); + gap: 1rem; + padding: 0; + } +</style> diff --git a/examples/middleware/src/pages/api/login.ts b/examples/middleware/src/pages/api/login.ts new file mode 100644 index 000000000..fa3f7b59b --- /dev/null +++ b/examples/middleware/src/pages/api/login.ts @@ -0,0 +1,18 @@ +import { APIRoute } from 'astro'; + +export const post: APIRoute = async ({ request }) => { + const data = await request.formData(); + const username = data.get('username'); + const password = data.get('password'); + return new Response( + JSON.stringify({ + username, + password, + }), + { + headers: { + 'content-type': 'application/json', + }, + } + ); +}; diff --git a/examples/middleware/src/pages/index.astro b/examples/middleware/src/pages/index.astro new file mode 100644 index 000000000..ff77d4a15 --- /dev/null +++ b/examples/middleware/src/pages/index.astro @@ -0,0 +1,63 @@ +--- +import Layout from '../layouts/Layout.astro'; +import Card from '../components/Card.astro'; +--- + +<Layout title="Welcome to Astro."> + <main> + <h1>Welcome to <span class="text-gradient">Astro</span></h1> + <p class="instructions"> + To get started, open the directory <code>src/pages</code> in your project.<br /> + <strong>Code Challenge:</strong> Tweak the "Welcome to Astro" message above. + </p> + {} + <ul role="list" class="link-card-grid"> + <Card href="/login" title="Login" body="Try the login" /> + </ul> + </main> +</Layout> + +<style> + main { + margin: auto; + padding: 1.5rem; + max-width: 60ch; + } + h1 { + font-size: 3rem; + font-weight: 800; + margin: 0; + } + .text-gradient { + background-image: var(--accent-gradient); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-size: 400%; + background-position: 0%; + } + .instructions { + line-height: 1.6; + margin: 1rem 0; + border: 1px solid rgba(var(--accent), 25%); + background-color: white; + padding: 1rem; + border-radius: 0.4rem; + } + .instructions code { + font-size: 0.875em; + font-weight: bold; + background: rgba(var(--accent), 12%); + color: rgb(var(--accent)); + border-radius: 4px; + padding: 0.3em 0.45em; + } + .instructions strong { + color: rgb(var(--accent)); + } + .link-card-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr)); + gap: 1rem; + padding: 0; + } +</style> diff --git a/examples/middleware/src/pages/login.astro b/examples/middleware/src/pages/login.astro new file mode 100644 index 000000000..99cf4cc94 --- /dev/null +++ b/examples/middleware/src/pages/login.astro @@ -0,0 +1,75 @@ +--- +import Layout from '../layouts/Layout.astro'; + +const status = Astro.response.status; +let redirectMessage; +if (status === 301) { + redirectMessage = 'Your session is finished, please login again'; +} +--- + +<Layout title="Welcome to Astro."> + <main> + <h1>Welcome to <span class="text-gradient">Astro</span></h1> + <p class="instructions"> + To get started, open the directory <code>src/pages</code> in your project.<br /> + <strong>Code Challenge:</strong> Tweak the "Welcome to Astro" message above. + </p> + {redirectMessage} + <form action="/api/login" method="POST"> + <label> + Username: <input type="text" minlength="1" id="username" name="username" /> + </label> + <label> + Password: <input type="password" minlength="1" id="password" name="password" /> + </label> + + <button>Submit</button> + </form> + </main> +</Layout> + +<style> + main { + margin: auto; + padding: 1.5rem; + max-width: 60ch; + } + h1 { + font-size: 3rem; + font-weight: 800; + margin: 0; + } + .text-gradient { + background-image: var(--accent-gradient); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-size: 400%; + background-position: 0%; + } + .instructions { + line-height: 1.6; + margin: 1rem 0; + border: 1px solid rgba(var(--accent), 25%); + background-color: white; + padding: 1rem; + border-radius: 0.4rem; + } + .instructions code { + font-size: 0.875em; + font-weight: bold; + background: rgba(var(--accent), 12%); + color: rgb(var(--accent)); + border-radius: 4px; + padding: 0.3em 0.45em; + } + .instructions strong { + color: rgb(var(--accent)); + } + .link-card-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr)); + gap: 1rem; + padding: 0; + } +</style> |