Rework login page to be AJAX/Vue.js based
This commit is contained in:
garrettmills
@@ -1,17 +1,7 @@
|
||||
extends ./form
|
||||
extends ../theme/public/base
|
||||
|
||||
block form
|
||||
.form-label-group
|
||||
input#inputUsername.form-control(type='text' name='username' value=(form_data ? form_data.username : '') required placeholder='Username' autofocus)
|
||||
label(for='inputUsername') Username
|
||||
.form-label-group
|
||||
input#inputPassword.form-control(type='password' name='password' required placeholder='Password')
|
||||
label(for='inputPassword') Password
|
||||
button.btn.btn-lg.btn-primary.btn-block.btn-login.text-uppercase.font-weight-bold.mb-2.form-submit-button(type='submit') Login
|
||||
|
||||
if registration_enabled
|
||||
.text-center
|
||||
span.small Need an account?
|
||||
a(href='./register') Register here.
|
||||
.text-center
|
||||
span.small(style="color: #999999;") Provider: #{provider_name}
|
||||
block append style
|
||||
link(rel='stylesheet' href='/style-asset/form.css')
|
||||
|
||||
block vue
|
||||
coreid-login-form(v-bind:app_name="app_name" v-bind:login_message="login_message")
|
||||
|
||||
23
app/views/theme/base.pug
Normal file
23
app/views/theme/base.pug
Normal file
@@ -0,0 +1,23 @@
|
||||
doctype html
|
||||
html(lang='en')
|
||||
head
|
||||
title #{title || (_app && _app.name) || 'CoreID'}
|
||||
|
||||
block meta
|
||||
meta(charset='utf-8')
|
||||
meta(name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no')
|
||||
meta(name='description' content=(description || 'CoreID is a self-hosted, next-generation identity server.'))
|
||||
meta(name='author' content='Garrett Mills (garrett@glmdev.tech)')
|
||||
|
||||
block style
|
||||
link(rel='stylesheet' href='/assets/lib/bootstrap/bootstrap-4.4.1.min.css')
|
||||
body
|
||||
.app-container
|
||||
block app
|
||||
block script
|
||||
script(src='/assets/lib/axios/axios.min.js')
|
||||
script(src='/assets/lib/jquery/jquery-3.4.1.slim.min.js')
|
||||
script(src='/assets/lib/popper/popper-1.16.0.min.js')
|
||||
script(src='/assets/lib/bootstrap/bootstrap-4.4.1.min.js')
|
||||
script(src='/assets/lib/vue/vue-2.6.11.js')
|
||||
script(src='/assets/lib/vues6/vues6.js')
|
||||
27
app/views/theme/public/base.pug
Normal file
27
app/views/theme/public/base.pug
Normal file
@@ -0,0 +1,27 @@
|
||||
extends ../base
|
||||
|
||||
block append style
|
||||
link(rel='stylesheet' href='/style-asset/public.css')
|
||||
|
||||
block append script
|
||||
script(type='module').
|
||||
import { components } from '/assets/app/components.js'
|
||||
import VuES6Loader from '/assets/lib/vues6/vues6.js'
|
||||
|
||||
const loader = new VuES6Loader(components)
|
||||
loader.load()
|
||||
|
||||
const app = new Vue({
|
||||
el: '#vue-app-base',
|
||||
data: !{JSON.stringify(vue_state) || '\{\}'}
|
||||
})
|
||||
|
||||
block app
|
||||
block content
|
||||
header.masthead
|
||||
.container.h-100
|
||||
.row.h-100.align-items-center
|
||||
.col-12.text-center
|
||||
block masthead
|
||||
#vue-app-base
|
||||
block vue
|
||||
7
app/views/tmpl.pug
Normal file
7
app/views/tmpl.pug
Normal file
@@ -0,0 +1,7 @@
|
||||
extends ./theme/public/base
|
||||
|
||||
block append style
|
||||
link(rel='stylesheet' href='/style-asset/form.css')
|
||||
|
||||
block vue
|
||||
coreid-login-form(v-bind:app_name="app_name" v-bind:login_message="login_message")
|
||||
@@ -1,46 +1,19 @@
|
||||
html
|
||||
head
|
||||
title Flitter
|
||||
style(type="text/css").
|
||||
@import url('https://fonts.googleapis.com/css?family=Rajdhani');
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
overflow-y: hidden;
|
||||
background-color: #c7dbdf;
|
||||
}
|
||||
extends ./theme/public/base
|
||||
|
||||
.flitter-container {
|
||||
height: 60%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
block append style
|
||||
link(rel='stylesheet' href='/style-asset/welcome.css')
|
||||
|
||||
.flitter-image {
|
||||
height: 150px;
|
||||
}
|
||||
block masthead
|
||||
h1.font-weight-light #{_app && _app.name || 'Starship CoreID'}
|
||||
p.lead Centralized, self-hosted, modern identity services.
|
||||
|
||||
.flitter-name {
|
||||
font-family: "Rajdhani";
|
||||
font-size: 50pt;
|
||||
margin-left: 35px;
|
||||
color: #00323d;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.flitter-text {
|
||||
font-family: "Rajdhani";
|
||||
font-size: 24pt;
|
||||
color: #00323d;
|
||||
}
|
||||
body
|
||||
.flitter-container
|
||||
img.flitter-image(src="/assets/flitter.png")
|
||||
a.flitter-name(href="https://flitter.garrettmills.dev/" target="_blank") powered by flitter
|
||||
if user
|
||||
.flitter-container
|
||||
p.flitter-text Welcome, #{user.uid}! <a href="/auth/logout">Log out.</a>
|
||||
else
|
||||
.flitter-container
|
||||
p.flitter-text New to Flitter? <a href="https://flitter.garrettmills.dev/" target="_blank">Start here.</a>
|
||||
block append content
|
||||
section.py-5#about
|
||||
.container
|
||||
h2.font-weight-light What is #{_app && _app.name || 'Starship CoreID'}?
|
||||
p
|
||||
| #{_app && _app.name || 'CoreID'} is a self-hosted, open-source identity server designed for
|
||||
| people who self-host various applications. With its built-in OAuth2, LDAP, and SAML servers
|
||||
| and self-service password & admin panel, #{_app && _app.name || 'CoreID'} gives you the ability
|
||||
| to easily integrate a single-sign-on solution into your self-hosting infrastructure without
|
||||
| jumping through hoops to make it work. You can learn more <a href="#">here.</a>
|
||||
|
||||
Reference in New Issue
Block a user