Theme both the sign-in and sign-up pages
This commit is contained in:
Korbs
parent
ce3bdbb6fb
commit
1836729e9f
3 changed files with 193 additions and 160 deletions
155
src/layouts/SignInUp.astro
Normal file
155
src/layouts/SignInUp.astro
Normal file
|
|
@ -0,0 +1,155 @@
|
|||
---
|
||||
// Properties
|
||||
const {Title, Type} = Astro.props
|
||||
|
||||
// Check if user is already logged in, redirect if so
|
||||
const { user } = Astro.locals;
|
||||
if (user) {
|
||||
return Astro.redirect("/account");
|
||||
}
|
||||
---
|
||||
|
||||
<img id="bg" src="/login-dark-mode.png"/>
|
||||
<div class="login-dialog">
|
||||
<div>
|
||||
<img src="/login-dark-mode.png"/>
|
||||
</div>
|
||||
<div class="ld-main">
|
||||
<h2>{Title}</h2>
|
||||
<form method="POST">
|
||||
{
|
||||
()=> {
|
||||
if (Type === "SignUp") {
|
||||
return <input id="name" name="name" placeholder="Your name" autocomplete="off" type="text"/>
|
||||
} else {
|
||||
return null
|
||||
}
|
||||
}
|
||||
}
|
||||
<input id="email" name="email" type="email" placeholder="Email" autocomplete="off"/>
|
||||
<input id="password" name="password" type="password" placeholder="Password" minlength="8" maxlength="512"/>
|
||||
<div style="display: flex; align-items: center; justify-content: space-between;">
|
||||
{
|
||||
()=> {
|
||||
if (Type === "SignIn") {
|
||||
return <p>Don't have an account? <a href="/signup/">Sign Up</a></p>
|
||||
<button style="height: max-content;" type="submit">Login</button>
|
||||
} else if (Type === "SignUp") {
|
||||
return <p>Already have an account? <a href="/signin/">Sign In</a></p>
|
||||
<button style="height: max-content;" type="submit">Sign Up</button>
|
||||
}
|
||||
}
|
||||
}
|
||||
</div>
|
||||
<!-- <center><p>or</p></center> -->
|
||||
</form>
|
||||
<!-- <form method="POST" action="/api/discord">
|
||||
<center><button style="background: #5865F2"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 127.14 96.36"><path fill="#fff" d="M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z"/></svg> Login with Discord</button></center>
|
||||
</form> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
body {
|
||||
color: white;
|
||||
background: black;
|
||||
font-family: arial;
|
||||
overflow: hidden;
|
||||
*:focus {
|
||||
outline: none;
|
||||
}
|
||||
a {
|
||||
color: #fb4e72;
|
||||
}
|
||||
}
|
||||
|
||||
body::before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
z-index: 0;
|
||||
backdrop-filter: blur(24px) contrast(0.8) brightness(0.4);
|
||||
}
|
||||
#bg {
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.login-dialog {
|
||||
position: fixed;
|
||||
top: 6%;
|
||||
left: 50%;
|
||||
transform: translate(-50%);
|
||||
max-width: 800px;
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: 50% 50%;
|
||||
background: #070707;
|
||||
border: 2px #262626 solid;
|
||||
transition: 0.3s border-color;
|
||||
border-radius: 12px;
|
||||
font-size: 14px;
|
||||
&:hover {
|
||||
border-color: #fb4e72;
|
||||
transition: 1s border-color;
|
||||
}
|
||||
img {
|
||||
border-radius: 10px 0px 0px 10px;
|
||||
width: 100%;
|
||||
margin-bottom: -3px;
|
||||
}
|
||||
.ld-main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 0px 48px;
|
||||
form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
input {
|
||||
background: transparent;
|
||||
color: white;
|
||||
border: none;
|
||||
border-bottom: 2px #371f25 solid;
|
||||
padding: 6px 12px;
|
||||
&:hover {
|
||||
border-color: #551c28;
|
||||
}
|
||||
&:focus {
|
||||
border-color: #fb4e72;
|
||||
}
|
||||
}
|
||||
button {
|
||||
background: #fb4e72;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 6px 12px;
|
||||
border-radius: 3rem;
|
||||
display: flex;
|
||||
max-width: max-content;
|
||||
cursor: pointer;
|
||||
svg {
|
||||
width: 15px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
&:hover {
|
||||
filter: brightness(0.7)
|
||||
}
|
||||
&:focus {
|
||||
filter: brightness(1.1)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,11 +1,8 @@
|
|||
---
|
||||
import Layout from "../layouts/Layout.astro";
|
||||
import { SESSION_COOKIE, createAdminClient } from "../server/appwrite";
|
||||
import SignInUp from "../layouts/SignInUp.astro";
|
||||
|
||||
const { user } = Astro.locals;
|
||||
if (user) {
|
||||
return Astro.redirect("/account");
|
||||
}
|
||||
import { ID } from "node-appwrite";
|
||||
import { SESSION_COOKIE, createAdminClient } from "../server/appwrite";
|
||||
|
||||
if (Astro.request.method === "POST") {
|
||||
const data = await Astro.request.formData();
|
||||
|
|
@ -28,78 +25,4 @@ if (Astro.request.method === "POST") {
|
|||
}
|
||||
---
|
||||
|
||||
<Layout title="Sign in | Server side rendering with Appwrite and Astro">
|
||||
<div class="u-max-width-500 u-width-full-line">
|
||||
<h1 class="heading-level-2 u-margin-block-start-auto">Demo sign in</h1>
|
||||
<div class="u-margin-block-start-24">
|
||||
<form class="form common-section" method="POST">
|
||||
<ul class="form-list" style="--form-list-gap: 1.5rem;">
|
||||
<li class="form-item">
|
||||
<p>
|
||||
This is a demo project for <a href="https://appwrite.io"
|
||||
>Appwrite</a
|
||||
> server side rendering. View the source code on the
|
||||
<a
|
||||
class="link"
|
||||
href="https://github.com/appwrite/demos-for-svelte"
|
||||
>GitHub repository</a
|
||||
>.
|
||||
</p>
|
||||
</li>
|
||||
<li class="form-item">
|
||||
<label class="label is-required" for="email">Email</label>
|
||||
<div class="input-text-wrapper">
|
||||
<input
|
||||
id="email"
|
||||
name="email"
|
||||
placeholder="Email"
|
||||
type="email"
|
||||
class="input-text"
|
||||
autocomplete="off"
|
||||
/>
|
||||
</div>
|
||||
</li>
|
||||
<li class="form-item">
|
||||
<label class="label is-required" for="password">Password</label>
|
||||
<div class="input-text-wrapper" style="--amount-of-buttons: 1">
|
||||
<input
|
||||
id="password"
|
||||
name="password"
|
||||
placeholder="Password"
|
||||
minlength="8"
|
||||
type="password"
|
||||
class="input-text"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
class="show-password-button"
|
||||
aria-label="show password"
|
||||
><span aria-hidden="true" class="icon-eye"></span></button
|
||||
>
|
||||
</div>
|
||||
</li>
|
||||
<li class="form-item">
|
||||
<button class="button is-full-width" type="submit"> Sign in</button>
|
||||
</li>
|
||||
<span class="with-separators eyebrow-heading-3">or</span>
|
||||
<li class="form-item"></li>
|
||||
</ul>
|
||||
</form>
|
||||
<form method="POST" action="/api/oauth/discord">
|
||||
<button class="button is-discord is-full-width" type="submit">
|
||||
<span class="icon-discord" aria-hidden="true"></span>
|
||||
<span class="text">Sign in with discord</span></button
|
||||
>
|
||||
</form>
|
||||
</div>
|
||||
<ul class="inline-links is-center is-with-sep u-margin-block-start-32">
|
||||
<li class="inline-links-item">
|
||||
<span class="text"
|
||||
>Don't have an account? <a class="link" href="/signup">Sign up</a
|
||||
></span
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</Layout>
|
||||
<SignInUp Title="Demo Login" Type="SignIn"/>
|
||||
|
|
@ -1,11 +1,10 @@
|
|||
---
|
||||
import SignInUp from "../layouts/SignInUp.astro";
|
||||
|
||||
import { ID } from "node-appwrite";
|
||||
import { SESSION_COOKIE, createAdminClient } from "../server/appwrite";
|
||||
|
||||
const { user } = Astro.locals;
|
||||
if (user) {
|
||||
return Astro.redirect("/account");
|
||||
}
|
||||
|
||||
|
||||
if (Astro.request.method === "POST") {
|
||||
const data = await Astro.request.formData();
|
||||
|
|
@ -41,48 +40,4 @@ if (Astro.request.method === "POST") {
|
|||
}
|
||||
---
|
||||
|
||||
<form method="POST">
|
||||
<label for="name">Name</label>
|
||||
<input
|
||||
id="name"
|
||||
name="name"
|
||||
placeholder="Your name"
|
||||
autocomplete="off"
|
||||
type="text"
|
||||
/>
|
||||
|
||||
<label class="label is-required" for="email">Email</label>
|
||||
<input
|
||||
id="email"
|
||||
name="email"
|
||||
placeholder="Your email"
|
||||
type="email"
|
||||
autocomplete="off"
|
||||
/>
|
||||
|
||||
<label for="password">Password</label>
|
||||
<input
|
||||
id="password"
|
||||
name="password"
|
||||
placeholder="Your password"
|
||||
minlength="8"
|
||||
type="password"
|
||||
autocomplete="off"
|
||||
/>
|
||||
|
||||
<button type="submit">Create Account</button>
|
||||
|
||||
<hr/>
|
||||
|
||||
|
||||
<form method="POST" action="/api/oauth">
|
||||
<button class="button is-discord is-full-width" type="submit">
|
||||
<span class="icon-discord" aria-hidden="true"></span>
|
||||
<span class="text">Sign in with discord</span></button
|
||||
>
|
||||
</form>
|
||||
</form>
|
||||
|
||||
<br/>
|
||||
|
||||
<a href="/api/an">Create Anonymous Session</a>
|
||||
<SignInUp Title="Demo Registeration" Type="SignUp"/>
|
||||
Loading…
Reference in a new issue