diff --git a/app/assets/auth/forms.css b/app/assets/auth/forms.css index fd4f1d5..aa10681 100644 --- a/app/assets/auth/forms.css +++ b/app/assets/auth/forms.css @@ -2,27 +2,40 @@ --input-padding-x: 1.5rem; --input-padding-y: 0.75rem; } - +body { + background-image: url('https://images.unsplash.com/photo-1501618669935-18b6ecb13d6d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1464&q=80'); + background-position: 60% 20%; +} +@media all and (max-width: 768px) { + body { + background-image: none; + background-color: #F1EFE7; + } +} .login, .image { min-height: 100vh; } - -.bg-image { - background-image: url('https://source.unsplash.com/4812YdII6W0/2592x1728'); - background-size: cover; - background-position: center; +.name-banner{ + font-family: 'Merienda', cursive; } - .login-heading { font-weight: 300; } .btn-login { - font-size: 0.9rem; - letter-spacing: 0.05rem; - padding: 0.75rem 1rem; - border-radius: 2rem; + border: solid 7px #41403E; + align-self: center; + background: transparent; + padding: 1rem 1rem; + -webkit-transition: all .5s ease; + transition: all .5s ease; + color: #41403E; + font-size: 2rem; + letter-spacing: 1px; + outline: none; + box-shadow: 20px 38px 34px -26px rgba(0, 0, 0, 0.2); + border-radius: 255px 15px 225px 15px/15px 225px 15px 255px; } .form-label-group { @@ -92,7 +105,7 @@ } .form-submit-button { - margin-top: 50px; + margin-top: 30px; margin-bottom: 50px; } diff --git a/app/controllers/Home.controller.js b/app/controllers/Home.controller.js index 8ea2788..fca15cd 100644 --- a/app/controllers/Home.controller.js +++ b/app/controllers/Home.controller.js @@ -7,12 +7,15 @@ const Controller = require('libflitter/controller/Controller') * are used as handlers for routes specified in the route files. */ class Home extends Controller { + static get services(){ + return [...super.services, 'configs'] + } /* * Serve the main welcome page. */ welcome(req, res){ - + /* * Return the welcome view. * The page() method is added by Flitter and passes some @@ -20,6 +23,10 @@ class Home extends Controller { */ return res.page('welcome', {user: req.user}) } + async get_login(req, res){ + const app_name = this.configs.get('app.name') + return res.page('login', {app_name}) + } } module.exports = Home diff --git a/app/routing/routers/index.routes.js b/app/routing/routers/index.routes.js index ce66ba8..1ca5348 100644 --- a/app/routing/routers/index.routes.js +++ b/app/routing/routers/index.routes.js @@ -26,7 +26,6 @@ const index = { * handler's exec() method. */ middleware: [ - ['HomeLogger', {note: 'arguments can be specified as the second element in this array'}], // 'MiddlewareName', // Or without arguments ], @@ -46,6 +45,7 @@ const index = { // Placeholder for auth dashboard. You'd replace this with // your own route protected by 'middleware::auth:UserOnly' '/dash': [ 'controller::Home.welcome' ], + '/login': [ 'middleware::auth:GuestOnly', 'controller::Home.get_login' ], }, /* diff --git a/app/views/auth/auth_page.pug b/app/views/auth/auth_page.pug index dcfe053..fc4bfc8 100644 --- a/app/views/auth/auth_page.pug +++ b/app/views/auth/auth_page.pug @@ -4,14 +4,16 @@ html meta(name='viewport' content='width=device-width initial-scale=1') link(rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css') link(rel='stylesheet' href='/assets/auth/forms.css') + link(href="https://fonts.googleapis.com/css?family=Merienda:700&display=swap" rel="stylesheet") body .container-fluid .row.no-gutter - .d-none.d-md-flex.col-md-6.col-lg-8.bg-image - .col-md-6.col-lg-4 + .d-none.d-md-flex.col-md-5 + .col-md-5 .login.d-flex.align-items-center.py-5 .container .row .col-md-9.col-lg-8.mx-auto + h2.name-banner #{_app.name} block content script(src='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css') diff --git a/app/views/login.pug b/app/views/login.pug new file mode 100644 index 0000000..8084458 --- /dev/null +++ b/app/views/login.pug @@ -0,0 +1,87 @@ +html + head + title Flitter + meta(name="viewport" content="width=device-width, initial-scale=1") + link(rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous") + script(src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous") + script(src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous") + script(src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous") + script(src="https://kit.fontawesome.com/5043ba9cc5.js" crossorigin="anonymous") + link(href="https://fonts.googleapis.com/css?family=Merienda:700&display=swap" rel="stylesheet") + + style(type="text/css"). + @import url('https://fonts.googleapis.com/css?family=Rajdhani'); + html, + body { + background-color:#343a40; + } + #intro { + margin-top: 10px; + color: #cccccc; + text-align: center; + } + #name { + font-family: 'Merienda', cursive; + } + #login { + width: 50em; + } + .login-container { + display: grid; + color: #cccccc; + border: solid 7px #cccccc; + align-self: center; + background: transparent; + -webkit-transition: all .5s ease; + transition: all .5s ease; + outline: none; + box-shadow: 20px 38px 34px -26px rgba(0, 0, 0, 0.2); + border-radius: 82px 65px 185px 1085px/72px 225px 58px 15px; + } + .btn-login { + color: #cccccc; + border: solid 7px #cccccc; + align-self: center; + background: transparent; + -webkit-transition: all .5s ease; + transition: all .5s ease; + outline: none; + box-shadow: 20px 38px 34px -26px rgba(0, 0, 0, 0.2); + border-radius: 255px 15px 225px 15px/15px 225px 15px 255px; + } + .login-container div a { + width: 100%; + } + .icons { + font-size: 1.8em; + padding: 1em 1em 1em 1em; + } + + body + .container#intro + h1 Hi, Welcome to + span#name #{app_name}. + h2 Choose your login method. + + .container#login + .login-container + div + a.btn.btn-login.btn-light(href="/auth/flitter/login") + i.icons.fas.fa-sign-in-alt + span Local Login + div + a.btn.btn-login.btn-light(href="/auth/github_oauth/login") + i.icons.fab.fa-github + span Login with GitHub + div + a.btn.btn-login.btn-light.disabled(href="google.com") + i.icons.fab.fa-google + span Login with Google + div + a.btn.btn-login.btn-light.disabled(href="microsoft.com") + i.icons.fab.fa-microsoft + span Login with Microsoft + div + a.btn.btn-login.btn-light.disabled(href="apple.com") + i.icons.fab.fa-apple + span Login with Apple diff --git a/app/views/welcome.pug b/app/views/welcome.pug index 8a515c6..dff42a1 100644 --- a/app/views/welcome.pug +++ b/app/views/welcome.pug @@ -34,7 +34,7 @@ html font-size: 24pt; color: #00323d; } -body + body .flitter-container img.flitter-image(src="/assets/flitter.png") a.flitter-name(href="https://flitter.garrettmills.dev/" target="_blank") powered by flitter diff --git a/azure-pipelines.yml b/azure-pipelines.yml new file mode 100644 index 0000000..8bd9c0e --- /dev/null +++ b/azure-pipelines.yml @@ -0,0 +1,22 @@ +# Starter pipeline +# Start with a minimal pipeline that you can customize to build and deploy your code. +# Add steps that build, run tests, deploy, and more: +# https://aka.ms/yaml + +trigger: +- master + +pool: + vmImage: 'ubuntu-latest' + +steps: +- script: echo Hello, world! + displayName: 'Run a one-line script' + +- task: InstallSSHKey@0 + inputs: + knownHostsEntry: 'hack20.glmdev.tech,34.70.10.162 ecdsa-sha2-nistp256 AAAAE2VjZHNhLXNoYTItbmlzdHAyNTYAAAAIbmlzdHAyNTYAAABBBA6VTjCHRkj4WMQG8yoSL/RfJDtQ0QtYvRVjIVpXPn2d2e0Z1NyLutenudSFxRauKz91x4CUhCpSj75569wbTIk=' + sshPublicKey: 'ssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAABAQCjtWm3P9STR4T04pYAd4scEQZs/4/6hRlt9TUttfieyAqycSbsI2cvz+dO0GOxE1WvqD2jCSJvrShRoPxyy2pTPRZbc8HUDO6x4Eb2zWNrbP/9UbTruoUD/lPCNZa5odVwL/zx7Ifp2qz9Aub+yErN30dD6nnQ2eW3KntLoTvKh9Ple0Pz9xu1EeQL8JC5LtfdMqtt7cZQavLoAYZrnfn1Dn4I/ooaJShWIGNvB9jzyVbSaP7wPre/3kbODhOIlj8XBIOfVKli0AyPZx9D18Qd0c5zDcbNwYQqOVPlrBGtaOpkiGzzhdoz4aJoZ7HMNrLzh/+jg2RA35+D7txYw1+F thomas@SpecterX360' + sshPassphrase: 'HackKu' + sshKeySecureFile: '-----BEGIN RSA PRIVATE KEY----- Proc-Type: 4,ENCRYPTED DEK-Info: AES-128-CBC,BCDB4EC62C5F3D9299C134ACB8DBAB02 TxiHyTSegk5jOfxjmVL6jUI+wR7N2kqjJac/rS9nT0guZRpOTxl8+7FKPV3feqev Mcc5FWQZO2UnAuU8TYxY0z6R8l+qha1eotrc72ISn4J2j+hUNfYf9kr/OM8wDsnp 6T0+QOOdRjvevjwldS/5jIl2mFdOuYD4b8FHVwB1Gx3BNk6kteQOd50fzhgUX1fj wSGZ4DazAUBLIqc6JyIOwSLVXVpCh0F9uszu2uu0snkCQJTkQdiaUPJz0GDhuk9I D0p7/yC6Yb5rBUGAee7xZq1HsyUZxfdlAM7PHVj0V5wHHWZaw80cwpNEzZFLwVVJ M8Ytrcoi+D+iJPQoznh23pzbgLFtAXZtEIpVbAYnvf0r4TEntF41m61ZGx0xIMwO m+6eEn5hOrNhnLtzXM9IIRhIlJx0Y5UsqAJc3CzrjNyjnD/ADGRkBDOxRHf90/2O yMcujaK2tUYKKKtYLbdZEeJD00u9DUf81n5oum9HfcqXF+7vtsAOv1bUSnveoNnL V7ym+rnMHh5fc8RYZVglgFiB4vZF+DH1cYMCLHemmOo64CPboqW0H0Jv4gYGYROf NHsCwyz5T849OT2oiU4ze9LCyCr0trTqAbPZVBGJDD7mZLoH84O4IjNYwB9jEpET LdJ6OhpDCd15VKzPwWIbPKB8hhOd22dI4t258ggRSQoRekEg/Z+a7uq1OJldJkYM 9fpNxnj8blrPKDNMLFoKZgO8M4Rk5o2yTkOxA78e3zyjSKc3OPnV+EY0wNmHt418 sM42XoNW3jdS9ivJBCE/57KuTYtQprz3dF7ydFB1tv09qVIialT7Y0gdlF3UCrhM 1XosTBJGKzpY4nHvPdGc9NPpiO8UVmX8rCH90yO/ZlleWNmLbGl2McPs0otVZ0Hk KD8e3/bCTUd/iamM35TSaFkpRfSf/1iIUH5RXBypQJmxsqWk6d7YbHHadTQSiXsl qTOzuGA5Rf0JLrsX1vQxmE83fdKvLPbBFkkzUqGsrpYpLyzSjIMa+7Pcr1jD8kID wC2eG04YNESlZ0mzBe3H1FeePPOtHDG3bUWL97gT2bwUx91FXFTvH/dZ2mcV+/A8 5fvw5U38R3ejw/uvRhX7sL2qqDn6uZAEI3aL/W0CfQNnhR9fm8swBhsNIrm9jmMA 9K9SezCOwKO9a2BZ5f9UOE00dZyoG4YC3bEsNFnjQ9EkO/ucOXqd4/BwC5prc6FF bKcS/2WVdDUFxoMIsPcuqqDb38bcufiFwvsW6DeRfJsZ9M63DIYkr/Qb1t30kQ4x dG8jx3Rcc9eIX9ddZATW8+xocHZL9yDk8Ly7Q0i29MgTbyDkzPkJqbd4VnRpT4/8 Kh/SRkd2XBDUA3wdO+P1VU5QwpBkja4IUfYSpZk3pCd3FHi+jP6EczRgaayc5zRW MKqhzhg+W+7yh8CFw9eHTJ1zl+E92LoUI90o7UQ1qacGQz2i8dG25o3JVDN9fLCc dp/AidqD+zbT5VU1SPdeFBpRJHmA6rWVD/UHJ/itOV9MQk0PAAsB5hRvNXmuin6m rTIjC8qM0Zw+rnqi1snKnnvnBhK/0DHbzwonEP16YmTwhMlGP7LnOBNqtcpEBWPn -----END RSA PRIVATE KEY-----' + diff --git a/config/app.config.js b/config/app.config.js index ea4fac6..0328836 100644 --- a/config/app.config.js +++ b/config/app.config.js @@ -4,7 +4,7 @@ const app_config = { * The name of the application. * Used through-out the application as the proper display name. */ - name: env("APP_NAME", "Flitter"), + name: env("APP_NAME", "unknown"), /* * URL of the application. diff --git a/config/auth.config.js b/config/auth.config.js index 4f535a1..86d4776 100644 --- a/config/auth.config.js +++ b/config/auth.config.js @@ -97,7 +97,7 @@ const auth_config = { }, }, - example_oauth: { + github_oauth: { type: 'Oauth2Provider', enable: env('AUTH_OAUTH2_ENABLE', true), diff --git a/example.env b/example.env index 60b04fe..94b491b 100644 --- a/example.env +++ b/example.env @@ -17,4 +17,8 @@ SSL_CERT_FILE=cert.pem SSL_CERT_KEY=cert.key #for development, AUTH_FLITTER_ENABLE should be true -#AUTH_FLITTER_ENABLE=true \ No newline at end of file +AUTH_FLITTER_ENABLE=true + +#insert client ID for oauth +AUTH_OAUTH2_CLIENT_ID= +AUTH_OAUTH2_CLIENT_SECRET= \ No newline at end of file