HyperNet/Passport
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

✨ Sign up & Sign in

Browse Source
This commit is contained in:
LittleSheep
2024-04-20 22:50:09 +08:00
parent 87cccefddb
commit e79441dbc5
26 changed files with 706 additions and 463 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
pkg/views/layouts/auth.gohtml
View File

@ -5,8 +5,16 @@
<body>
<div class="wrapper-container">
<div class="wrapper-card">
{{embed}}
<div class="wrapper-middleware">
{{if ne .info nil}}
<div class="animate__animated animate__fadeInDown alert">
<div class="content">{{.info}}</div>
</div>
{{end}}
<div class="wrapper-card">
{{embed}}
</div>
</div>
</div>
</body>
@ -20,9 +28,19 @@
align-items: center;
}
.wrapper-card {
.wrapper-middleware {
width: 100%;
max-width: 720px;
min-width: 0;
max-width: min(800px, 100dvw);
margin: 1rem;
display: flex;
flex-direction: column;
gap: 1rem;
}
.wrapper-card {
transition: all .3s;
height: auto;
overflow: auto;
@ -31,9 +49,25 @@
justify-content: center;
border-radius: 28px;
padding: 56px;
margin: 2rem;
gap: 0 2rem;
background-color: #ebf1fa;
background-color: var(--md-sys-color-surface);
color: var(--md-sys-color-on-surface)
}
.alert {
width: 100%;
max-width: 800px;
padding: 16px;
border-radius: 16px;
background-color: var(--md-sys-color-secondary-container);
color: var(--md-sys-color-on-secondary-container);
display: flex;
gap: 8px;
}
.alert .content {
flex-grow: 1;
text-transform: capitalize;
}
.logo {

46
pkg/views/partials/header.gohtml
View File

@ -10,6 +10,11 @@
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
<script type="importmap">
{
"imports": {
@ -28,10 +33,49 @@
<title>Solarpass</title>
<style>
:root, :host {
--md-sys-color-background: #fbf8ff;
--md-sys-color-on-background: #1b1b20;
--md-sys-color-surface: #fbf8ff;
--md-sys-color-surface-dim: #dcd9df;
--md-sys-color-surface-bright: #fbf8ff;
--md-sys-color-surface-container-lowest: #ffffff;
--md-sys-color-surface-container-low: #f6f2f9;
--md-sys-color-surface-container: #f0edf3;
--md-sys-color-surface-container-high: #eae7ed;
--md-sys-color-surface-container-highest: #e4e1e8;
--md-sys-color-on-surface: #1b1b20;
--md-sys-color-surface-variant: #e3e1ee;
--md-sys-color-on-surface-variant: #464650;
--md-sys-color-inverse-surface: #303035;
--md-sys-color-inverse-on-surface: #f3eff6;
--md-sys-color-outline: #777681;
--md-sys-color-outline-variant: #c7c5d2;
--md-sys-color-shadow: #000000;
--md-sys-color-scrim: #000000;
--md-sys-color-surface-tint: #53589d;
--md-sys-color-primary: #373c7e;
--md-sys-color-on-primary: #ffffff;
--md-sys-color-primary-container: #5b60a5;
--md-sys-color-on-primary-container: #ffffff;
--md-sys-color-inverse-primary: #bec2ff;
--md-sys-color-secondary: #5b5c79;
--md-sys-color-on-secondary: #ffffff;
--md-sys-color-secondary-container: #e2e1ff;
--md-sys-color-on-secondary-container: #454662;
--md-sys-color-tertiary: #662d5e;
--md-sys-color-on-tertiary: #ffffff;
--md-sys-color-tertiary-container: #8e5084;
--md-sys-color-on-tertiary-container: #ffffff;
--md-sys-color-error: #ba1a1a;
--md-sys-color-on-error: #ffffff;
--md-sys-color-error-container: #ffdad6;
--md-sys-color-on-error-container: #410002;
}
html, body {
padding: 0;
margin: 0;
font-family: Roboto Mono, monospace;
}
</style>
</head>

3
pkg/views/signin.gohtml
View File

@ -8,7 +8,7 @@
<div class="right-part">
<div class="responsive-title-gap"></div>
<form class="action-form">
<form class="action-form" action="/sign-in" method="POST">
<md-outlined-text-field
class="block-field"
name="username"
@ -28,6 +28,7 @@
</md-outlined-text-field>
<div class="action-form-buttons">
<md-text-button type="button" href="/sign-up">{{.i18n.signup}}</md-text-button>
<md-filled-button type="submit">{{.i18n.next}}</md-filled-button>
</div>
</form>

75
pkg/views/signup.gohtml Normal file
View File

@ -0,0 +1,75 @@
<div class="left-part">
<img class="logo" src="/favicon.png" width="64" height="64"/>
<h1 class="title">{{.i18n.title}}</h1>
<p class="caption">{{.i18n.caption}}</p>
</div>
<div class="right-part">
<div class="responsive-title-gap"></div>
<form class="action-form" action="/sign-up" method="POST">
<div class="columns-two">
<md-outlined-text-field
class="block-field"
name="name"
type="text"
autocomplete="username"
label={{.i18n.username}}
>
</md-outlined-text-field>
<md-outlined-text-field
class="block-field"
name="nick"
type="text"
autocomplete="nickname"
label={{.i18n.nickname}}
>
</md-outlined-text-field>
</div>
<md-outlined-text-field
class="block-field"
name="email"
type="email"
autocomplete="email"
label={{.i18n.email}}
>
</md-outlined-text-field>
<md-outlined-text-field
class="block-field"
name="password"
type="password"
autocomplete="new-password"
label={{.i18n.password}}
>
</md-outlined-text-field>
{{if eq .use_magic_token true}}
<md-outlined-text-field
class="block-field"
name="magic_token"
type="password"
autocomplete="off"
label={{.i18n.magic_token}}
>
</md-outlined-text-field>
{{end}}
<div class="action-form-buttons">
<md-text-button type="button" href="/sign-in">{{.i18n.signin}}</md-text-button>
<md-filled-button type="submit">{{.i18n.next}}</md-filled-button>
</div>
</form>
</div>
<style>
.columns-two {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
</style>