From 6f16b7ca72899e2ae81f4669cdf1b10a43c692e7 Mon Sep 17 00:00:00 2001 From: ivarlovlie Date: Thu, 30 Jun 2022 01:04:48 +0200 Subject: latest from desktop --- apps/projects/src/_assets/projects.png | Bin 0 -> 7951 bytes apps/projects/src/app/index.scss | 1 + apps/projects/src/app/pages/_layout.svelte | 200 +++++++++++++----- apps/web-shared/src/assets/logos/projects.png | Bin 0 -> 7951 bytes .../src/styles/components/side-navigation.scss | 233 +++++++++++++++++++++ .../components/vanilla-responsive-sidebar.scss | 146 +++++++++++++ server/src/Jobs/TokenCleanupJob.cs | 5 +- server/src/Jobs/VaultTokenRenewalJob.cs | 15 ++ server/src/Program.cs | 6 +- server/src/Services/VaultService.cs | 20 +- 10 files changed, 564 insertions(+), 62 deletions(-) create mode 100644 apps/projects/src/_assets/projects.png create mode 100644 apps/web-shared/src/assets/logos/projects.png create mode 100644 apps/web-shared/src/styles/components/side-navigation.scss create mode 100644 apps/web-shared/src/styles/components/vanilla-responsive-sidebar.scss create mode 100644 server/src/Jobs/VaultTokenRenewalJob.cs diff --git a/apps/projects/src/_assets/projects.png b/apps/projects/src/_assets/projects.png new file mode 100644 index 0000000..e49191f Binary files /dev/null and b/apps/projects/src/_assets/projects.png differ diff --git a/apps/projects/src/app/index.scss b/apps/projects/src/app/index.scss index 0892d63..b47151f 100644 --- a/apps/projects/src/app/index.scss +++ b/apps/projects/src/app/index.scss @@ -37,3 +37,4 @@ @use '../../web-shared/src/styles/components/menu'; @use '../../web-shared/src/styles/components/user-menu'; @use '../../web-shared/src/styles/components/light-dark-switch'; +@use '../../web-shared/src/styles/components/side-navigation'; diff --git a/apps/projects/src/app/pages/_layout.svelte b/apps/projects/src/app/pages/_layout.svelte index f725397..594fe9e 100644 --- a/apps/projects/src/app/pages/_layout.svelte +++ b/apps/projects/src/app/pages/_layout.svelte @@ -25,56 +25,158 @@ - + -
- -
+
+ +
+ diff --git a/apps/web-shared/src/assets/logos/projects.png b/apps/web-shared/src/assets/logos/projects.png new file mode 100644 index 0000000..e49191f Binary files /dev/null and b/apps/web-shared/src/assets/logos/projects.png differ diff --git a/apps/web-shared/src/styles/components/side-navigation.scss b/apps/web-shared/src/styles/components/side-navigation.scss new file mode 100644 index 0000000..0b30c7b --- /dev/null +++ b/apps/web-shared/src/styles/components/side-navigation.scss @@ -0,0 +1,233 @@ +@use '../base' as *; +@use 'vanilla-responsive-sidebar' as *; + +/* -------------------------------- + +File#: _2_side-navigation-v4 +Title: Side Navigation v4 +Descr: Main, side navigation +Usage: codyhouse.co/license + +-------------------------------- */ + +.sidenav-v4 { + --sidenav-v4-icon-size: 20px; + --sidenav-v4-icon-margin-right: var(--space-xxs); +} + +.sidenav-v4__item { + position: relative; +} + +.sidenav-v4__link, +.sidenav-v4__sub-link, +.sidenav-v4__separator { + padding: var(--space-sm); +} + +.sidenav-v4__link, .sidenav-v4__sub-link { + display: flex; + align-items: center; + + width: 100%; + border-radius: var(--radius-md); + + text-decoration: none; + color: inherit; + line-height: 1; + font-size: var(--text-md); + + transition: .2s; + + &:hover { + color: var(--color-primary); + background-color: alpha(var(--color-contrast-higher), 0.075); + } + + &[aria-current="page"] { + color: var(--color-primary); + } +} + +.sidenav-v4__sub-link { + position: relative; + color: var(--color-contrast-medium); + + /* dot indicator */ + &::before { + content: ''; + display: block; + --size: 6px; + width: var(--size); + height: var(--size); + background: currentColor; + border-radius: 50%; + margin-left: calc(var(--sidenav-v4-icon-size)/2 - var(--size)/2); + margin-right: calc(var(--sidenav-v4-icon-size)/2 - var(--size)/2 + var(--sidenav-v4-icon-margin-right)); + + opacity: 0; /* visible only if current */ + } + + &[aria-current="page"] { + &::before { /* show dot indicator */ + opacity: 1; + } + } +} + +.sidenav-v4__notification-marker { + margin-left: auto; + background-color: var(--color-accent); + border-radius: var(--radius-md); + + height: 16px; + line-height: 16px; + padding: 0 4px; + color: var(--color-white); + font-size: 12px; + + /* hide - visible only on desktop */ + display: none; +} + +/* label icon */ +.sidenav-v4__icon { + --size: var(--sidenav-v4-icon-size); + margin-right: var(--sidenav-v4-icon-margin-right); +} + +/* arrow icon - visible on mobile if item is expandable */ +.sidenav-v4__arrow-icon { + --size: 20px; + + .icon__group { + will-change: transform; + transform-origin: 50% 50%; + transform: rotate(-90deg); + transition: transform .3s var(--ease-out); + + > * { + transform-origin: 50% 50%; + stroke-dasharray: 20; + stroke-dashoffset: 0; + transform: translateY(0px); + transition: transform .3s, stroke-dashoffset .3s; + transition-timing-function: var(--ease-out); + } + + .sidenav-v4__item--collapsed & { + transform: rotate(0deg); + + > * { + transform: translateY(4px); + } + + > *:first-child { + stroke-dashoffset: 10.15; + } + + > *:last-child { + stroke-dashoffset: 10.15; + } + } + } + +} + +/* current item */ +.sidenav-v4__item--current { + .sidenav-v4__sub-list { + display: block; /* show sublist */ + } +} + +/* separator */ +.sidenav-v4__separator { + span { + display: block; + width: var(--sidenav-v4-icon-size); + height: 1px; + background-color: var(--color-contrast-lower); + } +} + +/* mobile only */ +@include breakpoint(md, "not all") { + .sidenav-v4__item--collapsed { + .sidenav-v4__sub-list { + display: none; + } + } + + .sidenav-v4__link--href { + display: none; /* hide link -> show button */ + } +} + +/* desktop */ +@include breakpoint(md) { + .sidenav-v4__sub-list { + display: none; + } + + .sidenav-v4__link, + .sidenav-v4__sub-link, + .sidenav-v4__separator { + padding: var(--space-xs); + } + + .sidenav-v4__link, + .sidenav-v4__sub-link { + font-size: var(--text-base); + } + + .sidenav-v4__link--btn { + display: none; /* hide button -> show link */ + } + + /* tooltip */ + .sidenav-v4__item:not(.sidenav-v4__item--current) { + .sidenav-v4__sub-list { + width: 220px; + position: absolute; + z-index: var(--z-index-overlay); + left: 100%; + top: 0; + + background-color: var(--color-bg-light); + box-shadow: var(--inner-glow), var(--shadow-md); + border-radius: var(--radius-md); + + overflow: hidden; + } + + .sidenav-v4__sub-link { + border-radius: 0; + color: var(--color-contrast-high); + + &::before { + display: none; /* remove dot indicator */ + } + + &:hover { + color: var(--color-primary); + } + } + + &.sidenav-v4__item--hover, &:focus-within { + .sidenav-v4__sub-list { + display: block; + } + } + + &:hover .sidenav-v4__link { /* highlight main link if tooltip is visible */ + color: var(--color-primary); + background-color: alpha(var(--color-contrast-higher), 0.075); + } + } + + /* notification marker */ + .sidenav-v4__notification-marker { + display: block; + } +} diff --git a/apps/web-shared/src/styles/components/vanilla-responsive-sidebar.scss b/apps/web-shared/src/styles/components/vanilla-responsive-sidebar.scss new file mode 100644 index 0000000..735cc1e --- /dev/null +++ b/apps/web-shared/src/styles/components/vanilla-responsive-sidebar.scss @@ -0,0 +1,146 @@ +@use '../base' as *; + +/* -------------------------------- + +File#: _1_responsive-sidebar +Title: Responsive Sidebar +Descr: Responsive sidebar container +Usage: codyhouse.co/license + +-------------------------------- */ + +/* mobile version only (--default) 👇 */ +.sidebar:not(.sidebar--static) { + position: fixed; + top: 0; + left: 0; + z-index: var(--z-index-fixed-element, 10); + width: 100%; + height: 100%; + visibility: hidden; + transition: visibility 0s 0.3s; + + &::after { /* overlay layer */ + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: alpha(var(--color-black), 0); + transition: background-color .3s; + z-index: 1; + } + + .sidebar__panel { /* content */ + position: absolute; + top: 0; + left: 0; + z-index: 2; + width: 100%; + max-width: 380px; + height: 100%; + overflow: auto; + -webkit-overflow-scrolling: touch; + background-color: var(--color-bg); + transform: translateX(-100%); + transition: box-shadow 0.3s, transform 0.3s; + } + + &.sidebar--right-on-mobile { + .sidebar__panel { + left: auto; + right: 0; + transform: translateX(100%); + } + } + + &.sidebar--is-visible { + visibility: visible; + transition: none; + + &::after { + background-color: alpha(var(--color-black), 0.85); + } + + .sidebar__panel { + transform: translateX(0); + box-shadow: var(--shadow-md); + } + } +} + +/* end mobile version */ + +.sidebar__header { + display: flex; + align-items: center; + justify-content: space-between; + position: sticky; + top: 0; +} + +.sidebar__close-btn { + --size: 32px; + width: var(--size); + height: var(--size); + display: flex; + border-radius: 50%; + background-color: var(--color-bg-light); + box-shadow: var(--inner-glow), var(--shadow-sm); + transition: .2s; + flex-shrink: 0; + + .icon { + display: block; + margin: auto; + } + + &:hover { + background-color: var(--color-bg-lighter); + box-shadow: var(--inner-glow), var(--shadow-md); + } +} + +.sidebar__footer { + background-color: var(--color-bg); +} + +/* desktop version only (--static) 👇 */ +.sidebar--static { + flex-shrink: 0; + flex-grow: 1; + width: 100%; + max-width: 320px; + + .sidebar__header { + display: none; + } + + .sidebar__footer { + background-color: var(--color-bg-dark); + } +} + +.sidebar--sticky-on-desktop { + position: sticky; + top: var(--space-sm); + max-height: calc(100vh - var(--space-sm)); + overflow: auto; + -webkit-overflow-scrolling: touch; +} + +/* end desktop version */ + +.sidebar--static::before { + content: 'static'; +} + +@each $breakpoint, $value in $breakpoints { + .sidebar--static\@#{$breakpoint}::before { + content: 'mobile'; + @include breakpoint(#{$breakpoint}) { + content: 'static'; + } + } +} diff --git a/server/src/Jobs/TokenCleanupJob.cs b/server/src/Jobs/TokenCleanupJob.cs index 3b042b3..fce40c9 100644 --- a/server/src/Jobs/TokenCleanupJob.cs +++ b/server/src/Jobs/TokenCleanupJob.cs @@ -13,9 +13,10 @@ public class TokenCleanupJob : IJob } public Task Execute(IJobExecutionContext context) { - var staleTokens = _context.AccessTokens.Where(c => c.ExpiryDate < AppDateTime.UtcNow); + var staleTokens = _context.AccessTokens.Where(c => c.ExpiryDate < AppDateTime.UtcNow).ToList(); + if (staleTokens.IsNullOrEmpty()) return Task.CompletedTask; _logger.LogInformation("Removing {0} stale tokens", staleTokens.Count()); - _context.AccessTokens.RemoveRange(); + _context.AccessTokens.RemoveRange(staleTokens); return Task.CompletedTask; } } diff --git a/server/src/Jobs/VaultTokenRenewalJob.cs b/server/src/Jobs/VaultTokenRenewalJob.cs new file mode 100644 index 0000000..fffbf7c --- /dev/null +++ b/server/src/Jobs/VaultTokenRenewalJob.cs @@ -0,0 +1,15 @@ +using Quartz; + +namespace IOL.GreatOffice.Api.Jobs; + +public class VaultTokenRenewalJob : IJob +{ + private readonly ILogger _logger; + public VaultTokenRenewalJob(ILogger logger) { + _logger = logger; + } + + public Task Execute(IJobExecutionContext context) { + return Task.CompletedTask; + } +} diff --git a/server/src/Program.cs b/server/src/Program.cs index b7e6ce6..d7bbf9f 100644 --- a/server/src/Program.cs +++ b/server/src/Program.cs @@ -38,6 +38,7 @@ global using IOL.GreatOffice.Api.Data.Static; global using IOL.GreatOffice.Api.Services; global using IOL.GreatOffice.Api.Utilities; using System.Reflection; +using System.Security.Cryptography.X509Certificates; using IOL.GreatOffice.Api.Endpoints.V1; using IOL.GreatOffice.Api.Jobs; using Microsoft.AspNetCore.HttpOverrides; @@ -89,7 +90,10 @@ public static class Program }); } - builder.Services.AddDataProtection().PersistKeysToDbContext(); + builder.Services + .AddDataProtection() + .PersistKeysToDbContext() + .ProtectKeysWithCertificate(vaultService.Get("")); builder.Services.Configure(JsonSettings.Default); builder.Services.AddQuartz(options => { options.UsePersistentStore(o => { diff --git a/server/src/Services/VaultService.cs b/server/src/Services/VaultService.cs index 6034586..f6d0ad8 100644 --- a/server/src/Services/VaultService.cs +++ b/server/src/Services/VaultService.cs @@ -15,7 +15,7 @@ public class VaultService CACHE_TTL = configuration.GetValue(AppEnvironmentVariables.VAULT_CACHE_TTL, 60 * 60 * 12); if (token.IsNullOrWhiteSpace()) throw new ApplicationException("VAULT_TOKEN is empty"); if (vaultUrl.IsNullOrWhiteSpace()) throw new ApplicationException("VAULT_URL is empty"); - client.DefaultRequestHeaders.Add(AppHeaders.VAULT_TOKEN, token); + client.DefaultRequestHeaders.Add("X-Vault-Token", token); client.BaseAddress = new Uri(vaultUrl); _client = client; _cache = cache; @@ -29,17 +29,17 @@ public class VaultService cacheEntry => { cacheEntry.AbsoluteExpirationRelativeToNow = TimeSpan.FromSeconds(CACHE_TTL); var getSecretResponse = _client.GetFromJsonAsync>("/v1/kv/data/" + path).Result; - if (getSecretResponse != null) { - Log.Debug("Setting new Vault cache, " - + new { - PATH = path, - CACHE_TTL, - Data = JsonSerializer.Serialize(getSecretResponse.Data.Data) - }); - return getSecretResponse.Data.Data ?? default; + if (getSecretResponse == null) { + return default; } - return default; + Log.Debug("Setting new Vault cache, " + + new { + PATH = path, + CACHE_TTL, + Data = JsonSerializer.Serialize(getSecretResponse.Data.Data) + }); + return getSecretResponse.Data.Data ?? default; }); } -- cgit v1.3