DeforaNetworks/corteza
3
0
Fork 0
Code Activity

Apply theming to auth screens

Browse Source
This commit is contained in:
Mumbi Francis
2024-02-06 14:48:52 +03:00
committed by Mumbi Francis
parent 16edc28809
commit 004b5740da
27 changed files with 97 additions and 150 deletions
Download Patch File Download Diff File Expand all files Collapse all files
server/assets/src/api-404.html
+1 -1
View File
@@ -56,7 +56,7 @@
</main>
<footer class="p-5 text-white">
Access source code on<a href="https://github.com/cortezaproject/" target="_blank" class="text-white ml-2">GitHub</a>
Access source code on<a href="https://github.com/cortezaproject/" target="_blank" class="text-white ml-1">GitHub</a>
</footer>
</body>
</html>
server/assets/src/api-landing.html
+1 -1
View File
@@ -57,7 +57,7 @@
</main>
<footer class="p-5 text-white">
Access source code on<a href="https://github.com/cortezaproject/" target="_blank" class="text-white ml-2">GitHub</a>
Access source code on<a href="https://github.com/cortezaproject/" target="_blank" class="text-white ml-1">GitHub</a>
</footer>
</body>
</html>
server/auth/assets/public/fonts.css
+39
View File
@@ -0,0 +1,39 @@
@font-face {
font-family: 'Poppins-Bold';
src: url('./fonts/poppins/Poppins-Bold.ttf') format('truetype');
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Poppins-Medium';
src: url('./fonts/poppins/Poppins-Medium.ttf') format('truetype');
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Poppins-Regular';
src: url('./fonts/poppins/Poppins-Regular.ttf') format('truetype');
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Poppins-SemiBold';
src: url('./fonts/poppins/Poppins-SemiBold.ttf') format('truetype');
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Poppins-Italic';
src: url('./fonts/poppins/Poppins-Italic.ttf') format('truetype');
font-weight: 100 900;
font-style: italic;
font-display: swap;
}
server/auth/assets/public/fonts/poppins/Poppins-Italic.ttf
BIN
View File
Binary file not shown.
server/auth/assets/public/style.css
+6 -108
View File
@@ -1,20 +1,16 @@
:root {
--primary: #0B344E;
--primary-hover: #061E2C;
--light: #F3F5F7;
--danger: #E54122;
}
html {
height: 100%;
}
body {
font-family: 'Poppins', sans-serif;
min-height: 100%;
display: grid;
grid-template-rows: auto;
overflow: auto;
}
label {
color: var(--primary);
}
.logo {
@@ -27,75 +23,8 @@ body {
right: 0;
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
font-family: 'Poppins';
font-weight: 600;
}
thead th,
legend,
label,
a,
.btn {
font-family: 'Poppins';
}
strong,
b,
.font-weight-bold {
font-family: 'Poppins';
font-weight: 600;
}
/* over-ride default variables colors */
a, label, .text-primary {
color: var(--primary) !important;
}
a:hover {
color: var(--primary-hover);
}
.text-danger {
color: var(--danger) !important;
}
.card,
.card-header {
border-radius: 1rem;
}
.header {
background-color: #F4F7FA;
border-radius: 10px 10px 0 0 !important;
}
.btn-primary,
.bg-primary {
background-color: var(--primary)!important;
border-color: var(--primary);
}
.btn-primary:hover {
background-color: var(--primary-hover)!important;
border-color: var(--primary-hover);
}
.btn-light,
.bg-light,
.badge-light {
background-color: var(--light)!important;
border-color: var(--light);
}
.btn-danger,
.bg-danger {
background-color: var(--danger)!important;
border-color: var(--danger);
}
.btn-lg {
font-size: 1rem;
background-color: var(--light) !important;
}
/* Navigation */
@@ -107,25 +36,6 @@ a:hover {
font-size: 25px;
}
/* form styling*/
.form-control {
border: 2px solid var(--light);
padding: 1.25rem 0.75rem;
}
.input-color {
padding: 0.125rem 0.25rem;
}
select.form-control {
padding: 0 0.5rem;
}
.form-control:focus {
box-shadow: none;
border-color: var(--primary);
}
.auth {
width: 100%;
max-width: 650px;
@@ -136,15 +46,3 @@ select.form-control {
.footer {
margin-top: auto;
}
input:-webkit-autofill::first-line {
font-family: 'Poppins';
font-size: 1rem;
color: #495057;
}
/* position bootstrap icons on buttons centrally */
[class^="bi-"]::before, [class*=" bi-"]::before {
vertical-align: middle;
line-height: 1.6;
}
server/auth/assets/templates/authorized-clients.html.tpl
-1
View File
@@ -1,6 +1,5 @@
{{ template "inc_header.html.tpl" set . "activeNav" "clients" }}
<div class="card-body p-0">
<h4 class="card-title p-3 border-bottom">{{ tr "authorized-clients.template.title" }}</h4>
<form
method="POST"
class="clearfix"
server/auth/assets/templates/change-password.html.tpl
+1 -1
View File
@@ -1,6 +1,6 @@
{{ template "inc_header.html.tpl" set . "activeNav" "security" }}
<div class="card-body p-0">
<h4 class="card-title p-3 border-bottom">{{ tr "change-password.template.title" }}</h4>
<h4 class="mb-0 p-3 border-bottom">{{ tr "change-password.template.title" }}</h4>
<form
method="POST"
action="{{ links.ChangePassword }}"
server/auth/assets/templates/create-password.html.tpl
+1 -1
View File
@@ -1,6 +1,6 @@
{{ template "inc_header.html.tpl" set . "activeNav" "security" }}
<div class="card-body p-0">
<h4 class="card-title p-3 border-bottom">{{ tr "create-password.template.title" }}</h4>
<h4 class="mb-0 p-3 border-bottom">{{ tr "create-password.template.title" }}</h4>
<form
method="POST"
action="{{ links.CreatePassword }}"
server/auth/assets/templates/error-internal.html.tpl
+1 -1
View File
@@ -1,6 +1,6 @@
{{ template "inc_header.html.tpl" . }}
<div class="card-body p-0">
<h4 class="card-title p-3 border-bottom">{{ tr "error-internal.template.title" }}</h4>
<h4 class="mb-0 p-3 border-bottom">{{ tr "error-internal.template.title" }}</h4>
<div class="text-danger mb-4 font-weight-bold p-3" role="alert">
{{ .error }}
</div>
server/auth/assets/templates/inc_footer.html.tpl
+2 -1
View File
@@ -1,7 +1,8 @@
</main>
{{ template "inc_toasts.html.tpl" .alerts }}
<footer class="d-flex align-items-end justify-content-center text-white py-4">
{{ tr "inc_footer.code-link" }}<a data-test-id="link-github" href="https://github.com/cortezaproject/" target="_blank" class="text-white ml-2">GitHub</a>
{{ tr "inc_footer.code-link" }}
<a data-test-id="link-github" href="https://github.com/cortezaproject/" target="_blank" class="text-white ml-1">GitHub</a>
</footer>
</body>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
server/auth/assets/templates/inc_header.html.tpl
+18 -13
View File
@@ -1,21 +1,23 @@
<!doctype html>
<html lang="{{ language }}">
<html data-color-mode="{{ .theme }}" lang="{{ language }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap core CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@500;700&display=swap" rel="stylesheet">
<!-- Fonts -->
<link href="{{ links.AuthAssets }}/fonts.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="/custom.css" rel="stylesheet">
<link href="{{ links.AuthAssets }}/style.css?{{ buildtime }}" rel="stylesheet">
<title>Corteza</title>
<style>
body {
font-size: 1rem !important;
{{ safeCSS .authBg }}
background-size: cover;
background-attachment: fixed;
@@ -26,19 +28,22 @@
<body>
<header>
{{ if .user }}
<div class="float-right text-white m-2">
<a class="font-weight-bold text-white" href="{{ links.Base }}"><i
class="bi bi-grid-3x2-gap-fill text-white mr-1 align-middle" style="font-size: 1.4rem;"></i></a>
<div class="d-flex justify-content-end align-items-center text-white m-2">
<a class="text-white mt-n2" href="{{ links.Base }}">
<i class="bi bi-grid-3x2-gap-fill mr-2" style="font-size: 1.4rem;"></i>
</a>
{{ tr "inc_header.logged-in-as" }}
<a data-test-id="link-redirect-to-profile" class="font-weight-bold text-white"
href="{{ links.Profile }}">{{ coalesce .user.Name .user.Handle .user.Email }}</a>
<a data-test-id="link-redirect-to-profile" class="font-weight-bold text-white mx-2"
href="{{ links.Profile }}">{{ coalesce .user.Name .user.Handle .user.Email }}
</a>
|
<a data-test-id="link-logout" class="font-weight-bold text-white"
href="{{ links.Logout }}">{{ tr "inc_header.logout" }}</a>
<a data-test-id="link-logout" class="font-weight-bold text-white ml-2" href="{{ links.Logout }}">
{{ tr "inc_header.logout" }}
</a>
</div>
{{ end }}
</header>
<main class="auth mt-sm-5">
<div class="card">
{{ template "inc_nav.html.tpl" . }}
<div class="tabs card">
{{ template "inc_nav.html.tpl" . }}
server/auth/assets/templates/inc_nav.html.tpl
+1 -1
View File
@@ -13,7 +13,7 @@
{{ if not .hideNav }}
{{ if .user }}
<ul class="nav ml-1 d-flex justify-content-around">
<ul class="nav d-flex justify-content-around">
<li class="nav-item {{ if eq $activeNav "profile" }}active{{ end }}">
<a
data-test-id="link-tab-profile"
server/auth/assets/templates/invite.html.tpl
+1 -1
View File
@@ -1,6 +1,6 @@
{{ template "inc_header.html.tpl" . }}
<div class="card-body p-0">
<h4 class="card-title p-3 border-bottom">{{ tr "invite.template.title" }}</h4>
<h4 class="mb-0 p-3 border-bottom">{{ tr "invite.template.title" }}</h4>
<form
method="POST"
action="{{ links.AcceptInvite }}"
server/auth/assets/templates/login.html.tpl
+3 -3
View File
@@ -1,6 +1,6 @@
{{ template "inc_header.html.tpl" . }}
<div class="card-body p-0">
<h4 class="login-title card-title p-3 border-bottom">{{ tr "login.template.title" }}</h4>
<h4 class="login-title mb-0 p-3 border-bottom">{{ tr "login.template.title" }}</h4>
{{ if .settings.LocalEnabled }}
<form
method="POST"
@@ -62,7 +62,7 @@
{{ end }}
<button
data-test-id="button-login"
class="btn btn-light btn-block"
class="btn btn-light btn-block btn-lg"
type="submit"
>
{{ tr "login.template.form.button.login" }}
@@ -109,7 +109,7 @@
</div>
{{ end }}
{{ if .settings.ExternalEnabled }}
{{ if and .settings.ExternalEnabled .providers}}
<div class="px-3 pb-3">
{{ range .providers }}
<a href="{{ links.External }}/{{ .Handle }}" class="btn btn-light btn-block btn-lg mb-2 mt-1 text-dark">
server/auth/assets/templates/mfa-totp-disable.html.tpl
+1 -1
View File
@@ -1,6 +1,6 @@
{{ template "inc_header.html.tpl" set . "hideNav" true }}
<div class="card-body p-0">
<h4 class="card-title p-3 border-bottom">{{ tr "mfa-totp-disable.template.title" }}</h4>
<h4 class="mb-0 p-3 border-bottom">{{ tr "mfa-totp-disable.template.title" }}</h4>
<form
class="p-3"
server/auth/assets/templates/mfa-totp.html.tpl
+1 -1
View File
@@ -1,6 +1,6 @@
{{ template "inc_header.html.tpl" set . "hideNav" true }}
<div class="card-body p-0">
<h4 class="card-title p-3 border-bottom">{{ tr "mfa-totp.template.title" }}</h4>
<h4 class="mb-0 p-3 border-bottom">{{ tr "mfa-totp.template.title" }}</h4>
{{ if .enforced }}
<p
server/auth/assets/templates/mfa.html.tpl
+1 -1
View File
@@ -1,6 +1,6 @@
{{ template "inc_header.html.tpl" set . "hideNav" true }}
<div class="card-body p-0 mb-2">
<h4 class="card-title p-3 border-bottom">{{ tr "mfa.template.title" }}</h4>
<h4 class="mb-0 p-3 border-bottom">{{ tr "mfa.template.title" }}</h4>
{{ if .emailOtpPending }}
<form
server/auth/assets/templates/oauth2-authorize-client.html.tpl
+1 -1
View File
@@ -7,7 +7,7 @@
</div>
{{ end }}
<h4 class="card-title p-3 border-bottom">{{ tr "oauth2-authorize-client.template.title" }} "{{ coalesce .client.Name }}"</h1>
<h4 class="mb-0 p-3 border-bottom">{{ tr "oauth2-authorize-client.template.title" }} "{{ coalesce .client.Name }}"</h1>
<form
action="{{ links.OAuth2AuthorizeClient }}"
server/auth/assets/templates/password-reset-requested.html.tpl
+1 -1
View File
@@ -1,6 +1,6 @@
{{ template "inc_header.html.tpl" . }}
<div class="card-body p-0">
<h4 class="card-title p-3 border-bottom">{{ tr "password-reset-requested.template.title" }}</h4>
<h4 class="mb-0 p-3 border-bottom">{{ tr "password-reset-requested.template.title" }}</h4>
<div
data-test-id="div-reset-instructions"
class="p-3"
server/auth/assets/templates/pending-email-confirmation.html.tpl
+1 -1
View File
@@ -1,6 +1,6 @@
{{ template "inc_header.html.tpl" . }}
<div class="card-body p-0">
<h4 class="card-title p-3 border-bottom">{{ tr "pending-email-confirmation.template.title" }}</h4>
<h4 class="mb-0 p-3 border-bottom">{{ tr "pending-email-confirmation.template.title" }}</h4>
<div class="p-3" role="alert">
{{ tr "pending-email-confirmation.template.instructions" }}
</div>
server/auth/assets/templates/profile.html.tpl
-2
View File
@@ -1,7 +1,5 @@
{{ template "inc_header.html.tpl" set . "activeNav" "profile" }}
<div class="card-body p-0">
<h4 class="card-title p-3 border-bottom">{{ tr "profile.template.title" }}</h4>
<form
method="POST"
action="{{ links.Profile }}"
server/auth/assets/templates/request-password-reset.html.tpl
+1 -1
View File
@@ -1,6 +1,6 @@
{{ template "inc_header.html.tpl" . }}
<div class="card-body p-0">
<h4 class="card-title p-3 border-bottom">{{ tr "request-password-reset.template.title" }}</h4>
<h4 class="mb-0 p-3 border-bottom">{{ tr "request-password-reset.template.title" }}</h4>
<form
method="POST"
action="{{ links.RequestPasswordReset }}"
server/auth/assets/templates/reset-password.html.tpl
+1 -1
View File
@@ -1,6 +1,6 @@
{{ template "inc_header.html.tpl" . }}
<div class="card-body p-0">
<h4 class="card-title p-3 border-bottom">{{ tr "reset-password.template.title" }}</h4>
<h4 class="mb-0 p-3 border-bottom">{{ tr "reset-password.template.title" }}</h4>
<form
method="POST"
action="{{ links.ResetPassword }}"
server/auth/assets/templates/security.html.tpl
-1
View File
@@ -1,6 +1,5 @@
{{ template "inc_header.html.tpl" set . "activeNav" "security" }}
<div class="card-body p-0">
<h4 class="card-title p-3 border-bottom">{{ tr "security.template.title" }}</h4>
<form
method="POST"
action="{{ links.Security }}"
server/auth/assets/templates/sessions.html.tpl
+3 -3
View File
@@ -5,9 +5,9 @@
action="{{ links.Sessions }}"
>
{{ .csrfField }}
<div class="card-title p-3 border-bottom">
{{- if and .sessions (gt (len .sessions) 1) }}
<div class="mb-0 p-3 border-bottom">
<h4 class="card-title d-inline">{{ tr "sessions.template.title" }}</h4>
{{- if and .sessions (gt (len .sessions) 1) }}
<button
data-test-id="button-logout-from-everywhere"
type="submit"
@@ -17,8 +17,8 @@
>
{{ tr "sessions.template.delete-all" }}
</button>
{{ end }}
</div>
{{ end }}
</form>
<form
method="POST"
server/auth/assets/templates/signup.html.tpl
+1 -1
View File
@@ -1,6 +1,6 @@
{{ template "inc_header.html.tpl" . }}
<div class="card-body p-0">
<h4 class="card-title p-3 border-bottom">{{ tr "signup.template.title" }}</h4>
<h4 class="mb-0 p-3 border-bottom">{{ tr "signup.template.title" }}</h4>
<form
method="POST"
action="{{ links.Signup }}"
server/auth/handlers/handler.go
+10 -2
View File
@@ -333,8 +333,16 @@ func (h *AuthHandlers) handle(fn handlerFn) http.HandlerFunc {
// Add alerts, settings, providers, csrf token, Bg
func (h *AuthHandlers) enrichTmplData(req *request.AuthReq) interface{} {
d := req.Data
d["theme"] = "light"
if req.AuthUser != nil {
req.Data["user"] = req.AuthUser.User
// fetch current user with updated fields
user, err := h.UserService.FindByAny(req.Context(), req.AuthUser.User.ID)
if err != nil {
return nil
}
d["user"] = user
d["theme"] = user.Meta.Theme
}
if req.Client != nil {
@@ -348,7 +356,7 @@ func (h *AuthHandlers) enrichTmplData(req *request.AuthReq) interface{} {
c.Description = req.Client.Meta.Description
}
req.Data["client"] = c
d["client"] = c
}
d[csrf.TemplateTag] = csrf.TemplateField(req.Request)