diff --git a/public/Obsidian-Logo.svg b/public/Obsidian-Logo.svg new file mode 100644 index 00000000..4d9b0cf2 --- /dev/null +++ b/public/Obsidian-Logo.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/auth-layout.css b/public/auth-layout.css index 5627f725..26ce9d0c 100644 --- a/public/auth-layout.css +++ b/public/auth-layout.css @@ -1,3 +1,7 @@ +@import url("https://fonts.googleapis.com/css2?family=Lexend:wght@100;200;300;400;500;600;700;800;900&display=swap"); +* { + font-family: "Lexend", sans-serif; +} .auth-container { display: flex; flex-direction: column; @@ -6,3 +10,357 @@ /* we need this padding since the footer will hide content at the bottom of the container */ padding-bottom: 5.5rem; } +.mh-100vh { + min-height: 100vh; +} +.d-flex { + display: flex; +} +.min-40 { + min-width: 40vw; +} +.text-center { + text-align: center; +} +.login-bg { + background: #0a6bc7 url(./login-bg.png) no-repeat center; + background-size: cover; + padding: 10px; + min-height: 100%; + width: 100%; + flex-grow: 1; + position: relative; +} +.login-bg::after { + content: ""; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + background-color: #0a6bc7; + opacity: 0.2; +} +.login-alignment-wrapper{ + height: 100%; + justify-content: center; +} +#login .ory_elements__card__1t5ly150, +#login .ory_elements__divider__1312gjt1 { + border: 0; +} +.ory_elements__card_size_default__1t5ly154 { + min-width: 500px; +} +.ory_elements__card_size_default__1t5ly154 { + margin: auto; +} +#login .ory_elements__input_field__1tgfa2l1 { + padding: 0.45rem 0.75rem; + border-radius: 8px; +} +#login .ory_elements__typography_size_small__vpyugz8 { + font-size: 0.75rem; + line-height: 1.75rem; +} +#login + button.ory_elements__button__xkj8ku0.ory_elements__button_size_medium__xkj8ku1.ory_elements__button_variant_semibold__xkj8ku5 { + padding: 0.5rem 0.75rem; + border-radius: 8px; + font-size: 15px; + font-weight: 400; + margin-top: 25px; + background: linear-gradient(102.6deg, #bc264b 0%, #e14c71 116.37%); +} +.ory_elements__card__1t5ly151 { + display: none; +} +.ory_elements__typography__vpyugz5.ory_elements__typography_type_regular__vpyugzm.ory_elements__typography_size_caption__vpyugz9.ory_elements__button_link__w27ftz1.ory_elements__button_link_position_inline__w27ftz2 { + display: none; +} +.ory_elements__message__1421i9r0.ory_elements__message_textPosition_center__1421i9r2.ory_elements__message_severity_default__1421i9r8.ory_elements__typography__vpyugz5.ory_elements__typography_type_regular__vpyugzm.ory_elements__typography_size_caption__vpyugz9.ory_elements__colors_color_foregroundMuted__13ke3e86 { + display: none; +} +.ory_elements__grid_gap_32__roeg5j7 { + gap: 0; +} +.ory_elements__card__1t5ly150 { + padding: 0.5rem 3rem; +} +.ory_elements__input_field__1tgfa2l1:not(:focus):not(:placeholder-shown):valid, +.ory_elements__input_field__1tgfa2l1:not(:focus):not(:placeholder-shown):invalid, +.ory_elements__input_field__1tgfa2l1:hover, +.ory_elements__input_field__1tgfa2l1:focus, +.ory_elements__input_field__1tgfa2l1:active { + border-color: #ebeff2; +} +.login-heading { + color: #1d1e24; + font-weight: 600; + font-size: 32px; + line-height: 52px; + text-align: center; +} + +.login-text { + color: #858585; + font-weight: 300; + font-size: 14px; + line-height: 18px; + text-align: center; +} +.copywrite-text { + color: #858585; + margin-top: 20px; + font-weight: 200; + font-size: 14px; + line-height: 18px; +} + +.m-0 { + margin: 0 !important; +} +.mt-0, +.my-0 { + margin-top: 0 !important; +} +.mr-0, +.mx-0 { + margin-right: 0 !important; +} +.mb-0, +.my-0 { + margin-bottom: 0 !important; +} +.ml-0, +.mx-0 { + margin-left: 0 !important; +} +.m-1 { + margin: 0.25rem !important; +} +.mt-1, +.my-1 { + margin-top: 0.25rem !important; +} +.mr-1, +.mx-1 { + margin-right: 0.25rem !important; +} +.mb-1, +.my-1 { + margin-bottom: 0.25rem !important; +} +.ml-1, +.mx-1 { + margin-left: 0.25rem !important; +} +.m-2 { + margin: 0.5rem !important; +} +.mt-2, +.my-2 { + margin-top: 0.5rem !important; +} +.mr-2, +.mx-2 { + margin-right: 0.5rem !important; +} +.mb-2, +.my-2 { + margin-bottom: 0.5rem !important; +} +.ml-2, +.mx-2 { + margin-left: 0.5rem !important; +} +.m-3 { + margin: 1rem !important; +} +.mt-3, +.my-3 { + margin-top: 1rem !important; +} +.mr-3, +.mx-3 { + margin-right: 1rem !important; +} +.mb-3, +.my-3 { + margin-bottom: 1rem !important; +} +.ml-3, +.mx-3 { + margin-left: 1rem !important; +} +.m-4 { + margin: 1.5rem !important; +} +.mt-4, +.my-4 { + margin-top: 1.5rem !important; +} +.mr-4, +.mx-4 { + margin-right: 1.5rem !important; +} +.mb-4, +.my-4 { + margin-bottom: 1.5rem !important; +} +.ml-4, +.mx-4 { + margin-left: 1.5rem !important; +} +.m-5 { + margin: 3rem !important; +} +.mt-5, +.my-5 { + margin-top: 3rem !important; +} +.mr-5, +.mx-5 { + margin-right: 3rem !important; +} +.mb-5, +.my-5 { + margin-bottom: 3rem !important; +} +.ml-5, +.mx-5 { + margin-left: 3rem !important; +} +.p-0 { + padding: 0 !important; +} +.pt-0, +.py-0 { + padding-top: 0 !important; +} +.pr-0, +.px-0 { + padding-right: 0 !important; +} +.pb-0, +.py-0 { + padding-bottom: 0 !important; +} +.pl-0, +.px-0 { + padding-left: 0 !important; +} +.p-1 { + padding: 0.25rem !important; +} +.pt-1, +.py-1 { + padding-top: 0.25rem !important; +} +.pr-1, +.px-1 { + padding-right: 0.25rem !important; +} +.pb-1, +.py-1 { + padding-bottom: 0.25rem !important; +} +.pl-1, +.px-1 { + padding-left: 0.25rem !important; +} +.p-2 { + padding: 0.5rem !important; +} +.pt-2, +.py-2 { + padding-top: 0.5rem !important; +} +.pr-2, +.px-2 { + padding-right: 0.5rem !important; +} +.pb-2, +.py-2 { + padding-bottom: 0.5rem !important; +} +.pl-2, +.px-2 { + padding-left: 0.5rem !important; +} +.p-3 { + padding: 1rem !important; +} +.pt-3, +.py-3 { + padding-top: 1rem !important; +} +.pr-3, +.px-3 { + padding-right: 1rem !important; +} +.pb-3, +.py-3 { + padding-bottom: 1rem !important; +} +.pl-3, +.px-3 { + padding-left: 1rem !important; +} +.p-4 { + padding: 1.5rem !important; +} +.pt-4, +.py-4 { + padding-top: 1.5rem !important; +} +.pr-4, +.px-4 { + padding-right: 1.5rem !important; +} +.pb-4, +.py-4 { + padding-bottom: 1.5rem !important; +} +.pl-4, +.px-4 { + padding-left: 1.5rem !important; +} +.p-5 { + padding: 3rem !important; +} +.pt-5, +.py-5 { + padding-top: 3rem !important; +} +.pr-5, +.px-5 { + padding-right: 3rem !important; +} +.pb-5, +.py-5 { + padding-bottom: 3rem !important; +} +.pl-5, +.px-5 { + padding-left: 3rem !important; +} +.m-auto { + margin: auto !important; +} +.mt-auto, +.my-auto { + margin-top: auto !important; +} +.mr-auto, +.mx-auto { + margin-right: auto !important; +} +.mb-auto, +.my-auto { + margin-bottom: auto !important; +} +.ml-auto, +.mx-auto { + margin-left: auto !important; +} diff --git a/public/login-bg.png b/public/login-bg.png new file mode 100644 index 00000000..343d8a9d Binary files /dev/null and b/public/login-bg.png differ diff --git a/src/pkg/index.ts b/src/pkg/index.ts index d7d99ec7..180f78c0 100644 --- a/src/pkg/index.ts +++ b/src/pkg/index.ts @@ -155,7 +155,7 @@ export const handlebarsHelpers: UnknownObject = { }, oryBranding: () => Typography({ - children: `Protected by `, + children: ``, type: "regular", size: "tiny", color: "foregroundSubtle", diff --git a/views/layouts/auth.hbs b/views/layouts/auth.hbs index 0f4f435c..0e351700 100644 --- a/views/layouts/auth.hbs +++ b/views/layouts/auth.hbs @@ -6,9 +6,8 @@
-
+
{{{body}}} - {{> ory_branding}}
{{> scripts }} diff --git a/views/login.hbs b/views/login.hbs index e0a962b9..1f0b4bc2 100644 --- a/views/login.hbs +++ b/views/login.hbs @@ -1,5 +1,16 @@
- {{{card}}} +
+
+ +
+ {{> webauthn_setup nodes=nodes webAuthnHandler=webAuthnHandler webauthnTriggerName="webauthn_login_trigger"}} {{> js_setup nodes=nodes}} diff --git a/views/partials/ory_branding.hbs b/views/partials/ory_branding.hbs index 6c73e354..a6ce3536 100644 --- a/views/partials/ory_branding.hbs +++ b/views/partials/ory_branding.hbs @@ -1,3 +1,3 @@ -
- {{{oryBranding}}} -
\ No newline at end of file + + {{{oryBranding}}} + \ No newline at end of file