From e2be93ec85938aba40fef3ca318cafcb11dfdead Mon Sep 17 00:00:00 2001 From: Leendert de Borst Date: Sun, 27 Oct 2024 20:45:30 +0100 Subject: [PATCH] Change welcome page to tutorial steps (#177) --- .../Main/Pages/Welcome.razor | 216 ++++++++++++++---- .../wwwroot/css/tailwind.css | 23 ++ 2 files changed, 198 insertions(+), 41 deletions(-) diff --git a/src/AliasVault.Client/Main/Pages/Welcome.razor b/src/AliasVault.Client/Main/Pages/Welcome.razor index 05eee94e8..1ca9ed14b 100644 --- a/src/AliasVault.Client/Main/Pages/Welcome.razor +++ b/src/AliasVault.Client/Main/Pages/Welcome.razor @@ -1,60 +1,194 @@ @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.

+
+
+
+
+
+
+

@GetStepTitle(_currentStep)

+
+
-
-
-

Getting Started

-
-
-

How do I use AliasVault?

-

Create a random identity with an associated email address. To get started, simply click the "+ New Alias" 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.

-
-
-
+ @if (GetProgressPercentage() > 0) + { +
+
+
+ } -
-

Get Started Now

-
-

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

+ + @switch (_currentStep) + { + case TutorialStep.Welcome: +
+

Welcome to AliasVault!

+

+ Protect your online identity by using unique aliases for each service you sign up for. Let's learn how AliasVault works and then create your first secure identity. +

+
    +
  • Create unique identities for different services
    • +
  • Use temporary email addresses to protect your privacy
    • +
  • Generate and store random personal information
    • +
  • Access confirmation emails securely
    • +
+
+ break; + + case TutorialStep.HowItWorks: +
+

How AliasVault Works

+

+ When you need to sign up for a new service: +

+
    +
  1. AliasVault generates a random identity with a secure email address
    2. +
  2. Use this information to sign up for the service
    3. +
  3. All emails are automatically forwarded to AliasVault
    4. +
  4. Your real email address stays private
    5. +
+
+

+ Pro tip: Create different identities for different types of services (social media, shopping, banking) to prevent cross-site tracking. +

+
+
+ break; + + case TutorialStep.EmailManagement: +
+

Managing Your Emails

+

+ AliasVault handles all your service-related emails: +

+
    +
  1. Emails appear automatically in your AliasVault inbox
    2. +
  2. All emails are encrypted and only visible to you
    3. +
  3. Confirmation links open in a new tab
    4. +
  4. Easily manage and delete emails when no longer needed
    5. +
+
+ break; + + case TutorialStep.SecurityTips: +
+

Privacy & Security Tips

+
+
+

Keep Your Master Password Safe

+

Your master password is the only way to access your vault. Store it securely and never share it.

+
+
+

Regular Backups

+

Your vault is automatically backed up, but you can also export your data manually from settings.

+
+
+

Use Different Identities

+

Create separate identities for different types of services to prevent tracking across websites.

+
+
+
+ break; + + case TutorialStep.CreateFirstIdentity: +
+

Ready to Start?

+

+ Now that you know how AliasVault works, let's create your first secure identity! +

+
+ +
+
+ break; + } +
-
- - - + +
+ @if (_currentStep != TutorialStep.SecurityTips) + { + + } + else + { + + }
-
@code { - private void CreateIdentity() + private TutorialStep _currentStep = TutorialStep.Welcome; + private readonly TutorialData _tutorialData = new(); + + private enum TutorialStep + { + Welcome, + HowItWorks, + EmailManagement, + SecurityTips, + CreateFirstIdentity + } + + private class TutorialData + { + // Add any properties needed for the tutorial + } + + private static string GetStepTitle(TutorialStep step) + { + return step switch + { + TutorialStep.Welcome => "Welcome to AliasVault", + TutorialStep.HowItWorks => "How It Works", + TutorialStep.EmailManagement => "Managing Emails", + TutorialStep.SecurityTips => "Security Tips", + TutorialStep.CreateFirstIdentity => "Get Started", + _ => "Tutorial" + }; + } + + private void HandleSubmit() + { + GoNext(); + } + + private void GoNext() + { + _currentStep = _currentStep switch + { + TutorialStep.Welcome => TutorialStep.HowItWorks, + TutorialStep.HowItWorks => TutorialStep.EmailManagement, + TutorialStep.EmailManagement => TutorialStep.SecurityTips, + TutorialStep.SecurityTips => TutorialStep.CreateFirstIdentity, + _ => _currentStep + }; + } + + private void CreateFirstIdentity() { NavigationManager.NavigateTo("credentials/create"); } - private void ShowSettings() + private void FinishTutorial() { - NavigationManager.NavigateTo("settings/general"); + NavigationManager.NavigateTo("credentials"); + } + + private int GetProgressPercentage() + { + return (int)_currentStep * 100 / (Enum.GetValues(typeof(TutorialStep)).Length - 1); } } diff --git a/src/AliasVault.Client/wwwroot/css/tailwind.css b/src/AliasVault.Client/wwwroot/css/tailwind.css index c837db892..56506c9cb 100644 --- a/src/AliasVault.Client/wwwroot/css/tailwind.css +++ b/src/AliasVault.Client/wwwroot/css/tailwind.css @@ -868,6 +868,10 @@ video { display: grid; } +.contents { + display: contents; +} + .hidden { display: none; } @@ -1068,6 +1072,10 @@ video { list-style-type: none; } +.list-decimal { + list-style-type: decimal; +} + .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } @@ -1180,6 +1188,12 @@ video { margin-bottom: calc(1.5rem * var(--tw-space-y-reverse)); } +.space-y-3 > :not([hidden]) ~ :not([hidden]) { + --tw-space-y-reverse: 0; + margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(0.75rem * 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))); @@ -2399,6 +2413,11 @@ video { color: rgb(250 204 21 / var(--tw-text-opacity)); } +.dark\:text-blue-200:is(.dark *) { + --tw-text-opacity: 1; + color: rgb(191 219 254 / var(--tw-text-opacity)); +} + .dark\:placeholder-gray-400:is(.dark *)::-moz-placeholder { --tw-placeholder-opacity: 1; color: rgb(156 163 175 / var(--tw-placeholder-opacity)); @@ -2749,6 +2768,10 @@ video { max-width: 36rem; } + .lg\:max-w-4xl { + max-width: 56rem; + } + .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }