From 80bc7cd2231e234bd24b67ff110204d39cc8d43b Mon Sep 17 00:00:00 2001 From: Leendert de Borst Date: Fri, 16 Aug 2024 12:25:52 +0200 Subject: [PATCH] Add welcome page for new users for OOBE (#164) --- .../Main/Pages/Credentials/Home.razor | 6 + .../Main/Pages/Welcome.razor | 66 +++++ src/AliasVault.Client/wwwroot/css/app.css | 4 + .../wwwroot/css/tailwind.css | 260 ++++++++++++++++++ 4 files changed, 336 insertions(+) create mode 100644 src/AliasVault.Client/Main/Pages/Welcome.razor diff --git a/src/AliasVault.Client/Main/Pages/Credentials/Home.razor b/src/AliasVault.Client/Main/Pages/Credentials/Home.razor index 0d30a4037..53e0e9c50 100644 --- a/src/AliasVault.Client/Main/Pages/Credentials/Home.razor +++ b/src/AliasVault.Client/Main/Pages/Credentials/Home.razor @@ -9,6 +9,7 @@

Credentials

+

Find all of your credentials below.

@@ -75,6 +76,11 @@ else GlobalNotificationService.AddErrorMessage("Failed to load credentials.", true); return; } + if (credentialListEntries.Count == 0) + { + // Redirect to welcome page. + NavigationManager.NavigateTo("/welcome"); + } Credentials = credentialListEntries; IsLoading = false; diff --git a/src/AliasVault.Client/Main/Pages/Welcome.razor b/src/AliasVault.Client/Main/Pages/Welcome.razor new file mode 100644 index 000000000..4b42e5422 --- /dev/null +++ b/src/AliasVault.Client/Main/Pages/Welcome.razor @@ -0,0 +1,66 @@ +@page "/welcome" +@inherits MainBase + +
+

Welcome to AliasVault

+

It looks like you are new here. The instructions on this page will help to get you started.

+ +
+
+

Getting Started

+
+
+

How do I use AliasVault?

+

Create a random identity with an associated email address. To get started, simply click the "+ New Identity" button in the top right corner.

+
+
+

What is the purpose of AliasVault?

+

AliasVault keeps you safe online by providing unique passwords and email addresses for every service you use. This prevents your actual email from being used to link your accounts on different websites together.

+
+
+

Is my data secure?

+

Yes, AliasVault uses a zero-knowledge architecture. This means that your data is end-to-end encrypted on your device before being stored on the server. No one can see your login information, identities and even emails but you. Not even us.

+
+
+
+ +
+

Get Started Now

+
+

+ Go ahead and create a new login by clicking "+ New Identity" in the top right. Or explore these options: +

+
+
+ + + +
+
+
+ +
+ +@code { + /// + protected override async Task OnInitializedAsync() + { + await base.OnInitializedAsync(); + } + + private void CreateIdentity() + { + NavigationManager.NavigateTo("credentials/create"); + } + + private void ShowSettings() + { + NavigationManager.NavigateTo("settings/general"); + } +} diff --git a/src/AliasVault.Client/wwwroot/css/app.css b/src/AliasVault.Client/wwwroot/css/app.css index cc9be1fe9..390cfc2cc 100644 --- a/src/AliasVault.Client/wwwroot/css/app.css +++ b/src/AliasVault.Client/wwwroot/css/app.css @@ -30,3 +30,7 @@ .loading-progress-text:after { content: var(--blazor-load-percentage-text, "Loading"); } + +.validation-message { + color: red; +} diff --git a/src/AliasVault.Client/wwwroot/css/tailwind.css b/src/AliasVault.Client/wwwroot/css/tailwind.css index 8707fa3dc..f7461b6da 100644 --- a/src/AliasVault.Client/wwwroot/css/tailwind.css +++ b/src/AliasVault.Client/wwwroot/css/tailwind.css @@ -554,6 +554,40 @@ video { --tw-contain-style: ; } +.container { + width: 100%; +} + +@media (min-width: 640px) { + .container { + max-width: 640px; + } +} + +@media (min-width: 768px) { + .container { + max-width: 768px; + } +} + +@media (min-width: 1024px) { + .container { + max-width: 1024px; + } +} + +@media (min-width: 1280px) { + .container { + max-width: 1280px; + } +} + +@media (min-width: 1536px) { + .container { + max-width: 1536px; + } +} + .sr-only { position: absolute; width: 1px; @@ -667,6 +701,16 @@ video { margin-bottom: 1rem; } +.my-6 { + margin-top: 1.5rem; + margin-bottom: 1.5rem; +} + +.my-8 { + margin-top: 2rem; + margin-bottom: 2rem; +} + .-ml-1 { margin-left: -0.25rem; } @@ -767,6 +811,14 @@ video { margin-top: 2rem; } +.mb-10 { + margin-bottom: 2.5rem; +} + +.mb-6 { + margin-bottom: 1.5rem; +} + .line-clamp-2 { overflow: hidden; display: -webkit-box; @@ -926,6 +978,10 @@ video { width: 4rem; } +.w-11 { + width: 2.75rem; +} + .min-w-full { min-width: 100%; } @@ -942,6 +998,10 @@ video { max-width: 36rem; } +.max-w-lg { + max-width: 32rem; +} + .flex-shrink-0 { flex-shrink: 0; } @@ -1034,6 +1094,10 @@ video { align-items: center; } +.items-baseline { + align-items: baseline; +} + .justify-start { justify-content: flex-start; } @@ -1058,6 +1122,10 @@ video { gap: 1.5rem; } +.gap-8 { + gap: 2rem; +} + .space-x-1 > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 0; margin-right: calc(0.25rem * var(--tw-space-x-reverse)); @@ -1100,6 +1168,18 @@ video { margin-bottom: calc(1.5rem * var(--tw-space-y-reverse)); } +.space-x-3 > :not([hidden]) ~ :not([hidden]) { + --tw-space-x-reverse: 0; + margin-right: calc(0.75rem * var(--tw-space-x-reverse)); + margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse))); +} + +.space-y-12 > :not([hidden]) ~ :not([hidden]) { + --tw-space-y-reverse: 0; + margin-top: calc(3rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(3rem * var(--tw-space-y-reverse)); +} + .divide-y > :not([hidden]) ~ :not([hidden]) { --tw-divide-y-reverse: 0; border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse))); @@ -1331,6 +1411,16 @@ video { background-color: rgb(244 149 65 / var(--tw-bg-opacity)); } +.bg-blue-600 { + --tw-bg-opacity: 1; + background-color: rgb(37 99 235 / var(--tw-bg-opacity)); +} + +.bg-purple-600 { + --tw-bg-opacity: 1; + background-color: rgb(147 51 234 / var(--tw-bg-opacity)); +} + .bg-opacity-50 { --tw-bg-opacity: 0.5; } @@ -1477,6 +1567,26 @@ video { padding-top: 2rem; } +.pl-4 { + padding-left: 1rem; +} + +.pt-10 { + padding-top: 2.5rem; +} + +.pt-20 { + padding-top: 5rem; +} + +.pt-24 { + padding-top: 6rem; +} + +.pt-9 { + padding-top: 2.25rem; +} + .text-left { text-align: left; } @@ -1485,6 +1595,10 @@ video { text-align: center; } +.text-right { + text-align: right; +} + .text-start { text-align: start; } @@ -1523,6 +1637,16 @@ video { line-height: 1rem; } +.text-3xl { + font-size: 1.875rem; + line-height: 2.25rem; +} + +.text-5xl { + font-size: 3rem; + line-height: 1; +} + .font-bold { font-weight: 700; } @@ -1543,6 +1667,10 @@ video { font-weight: 600; } +.font-extrabold { + font-weight: 800; +} + .uppercase { text-transform: uppercase; } @@ -1658,6 +1786,15 @@ video { color: rgb(214 131 56 / var(--tw-text-opacity)); } +.text-green-400 { + --tw-text-opacity: 1; + color: rgb(74 222 128 / var(--tw-text-opacity)); +} + +.underline { + text-decoration-line: underline; +} + .opacity-25 { opacity: 0.25; } @@ -1694,6 +1831,12 @@ video { box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } +.shadow-md { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + .outline-0 { outline-width: 0px; } @@ -1804,6 +1947,16 @@ video { background-color: rgb(153 27 27 / var(--tw-bg-opacity)); } +.hover\:bg-purple-700:hover { + --tw-bg-opacity: 1; + background-color: rgb(126 34 206 / var(--tw-bg-opacity)); +} + +.hover\:bg-gray-500:hover { + --tw-bg-opacity: 1; + background-color: rgb(107 114 128 / var(--tw-bg-opacity)); +} + .hover\:from-primary-600:hover { --tw-gradient-from: #d68338 var(--tw-gradient-from-position); --tw-gradient-to: rgb(214 131 56 / 0) var(--tw-gradient-to-position); @@ -1858,6 +2011,10 @@ video { text-decoration-line: underline; } +.hover\:no-underline:hover { + text-decoration-line: none; +} + .focus\:border-blue-500:focus { --tw-border-opacity: 1; border-color: rgb(59 130 246 / var(--tw-border-opacity)); @@ -1925,6 +2082,11 @@ video { --tw-ring-color: rgb(252 165 165 / var(--tw-ring-opacity)); } +.focus\:ring-primary-200:focus { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(251 203 116 / var(--tw-ring-opacity)); +} + .focus\:ring-offset-2:focus { --tw-ring-offset-width: 2px; } @@ -1955,6 +2117,11 @@ video { border-color: rgb(55 65 81 / var(--tw-border-opacity)); } +.dark\:border-gray-800:is(.dark *) { + --tw-border-opacity: 1; + border-color: rgb(31 41 55 / var(--tw-border-opacity)); +} + .dark\:bg-gray-600:is(.dark *) { --tw-bg-opacity: 1; background-color: rgb(75 85 99 / var(--tw-bg-opacity)); @@ -2208,6 +2375,11 @@ video { --tw-ring-color: rgb(127 29 29 / var(--tw-ring-opacity)); } +.dark\:focus\:ring-primary-900:focus:is(.dark *) { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(123 74 30 / var(--tw-ring-opacity)); +} + @media (min-width: 640px) { .sm\:col-span-3 { grid-column: span 3 / span 3; @@ -2252,9 +2424,37 @@ video { font-size: 0.875rem; line-height: 1.25rem; } + + .sm\:text-4xl { + font-size: 2.25rem; + line-height: 2.5rem; + } + + .sm\:text-lg { + font-size: 1.125rem; + line-height: 1.75rem; + } + + .sm\:text-xl { + font-size: 1.25rem; + line-height: 1.75rem; + } + + .sm\:leading-none { + line-height: 1; + } + + .sm\:tracking-tight { + letter-spacing: -0.025em; + } } @media (min-width: 768px) { + .md\:my-12 { + margin-top: 3rem; + margin-bottom: 3rem; + } + .md\:mb-0 { margin-bottom: 0px; } @@ -2271,6 +2471,22 @@ video { margin-right: 1.5rem; } + .md\:mr-3 { + margin-right: 0.75rem; + } + + .md\:mr-14 { + margin-right: 3.5rem; + } + + .md\:mr-10 { + margin-right: 2.5rem; + } + + .md\:inline { + display: inline; + } + .md\:flex { display: flex; } @@ -2287,6 +2503,10 @@ video { grid-template-columns: repeat(4, minmax(0, 1fr)); } + .md\:grid-cols-2 { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + .md\:items-center { align-items: center; } @@ -2295,16 +2515,44 @@ video { justify-content: space-between; } + .md\:gap-6 { + gap: 1.5rem; + } + + .md\:gap-x-6 { + -moz-column-gap: 1.5rem; + column-gap: 1.5rem; + } + .md\:space-x-2 > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 0; margin-right: calc(0.5rem * var(--tw-space-x-reverse)); margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse))); } + .md\:space-y-0 > :not([hidden]) ~ :not([hidden]) { + --tw-space-y-reverse: 0; + margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(0px * var(--tw-space-y-reverse)); + } + .md\:py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; } + + .md\:pt-20 { + padding-top: 5rem; + } + + .md\:pt-32 { + padding-top: 8rem; + } + + .md\:text-base { + font-size: 1rem; + line-height: 1.5rem; + } } @media (min-width: 1024px) { @@ -2340,6 +2588,14 @@ video { width: auto; } + .lg\:grid-cols-3 { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } + + .lg\:grid-cols-2 { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + .lg\:flex-row { flex-direction: row; } @@ -2399,6 +2655,10 @@ video { margin-right: calc(2rem * var(--tw-space-x-reverse)); margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse))); } + + .xl\:p-8 { + padding: 2rem; + } } @media (min-width: 1536px) {