PowderCoatingLogix/src/PowderCoating.Web/Views/Help/UserProfile.cshtml

@{
    ViewData["Title"] = "Your Profile";
}

<div class="d-flex align-items-center gap-2 mb-3">
    <a asp-controller="Help" asp-action="Index" class="btn btn-sm btn-outline-secondary"><i class="bi bi-arrow-left"></i></a>
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb mb-0">
            <li class="breadcrumb-item"><a asp-controller="Help" asp-action="Index">Help</a></li>
            <li class="breadcrumb-item active">Your Profile</li>
        </ol>
    </nav>
</div>

<div class="row g-4">
    <div class="col-lg-9">

        <section id="overview" class="mb-5">
            <h2 class="h4 fw-bold border-bottom pb-2 mb-3">
                <i class="bi bi-info-circle text-primary me-2"></i>Overview
            </h2>
            <p>
                Your profile page is where you manage your personal account settings — the information that
                identifies you in the system, your login credentials, your profile photo, and how the
                application looks on your screen.
            </p>
            <p>
                To open your profile, click your avatar or name in the top-right corner of any page and select
                <strong>My Profile</strong> from the dropdown menu. You can also navigate directly to
                <strong>/Profile</strong>.
            </p>
            <p>
                Profile changes only affect your own account. To change another user's details, an
                Administrator must do so from the User Management section.
            </p>
        </section>

        <section id="updating-profile" class="mb-5">
            <h2 class="h4 fw-bold border-bottom pb-2 mb-3">
                <i class="bi bi-pencil-square text-primary me-2"></i>Updating Your Profile
            </h2>
            <p>
                The <strong>Profile</strong> tab on your profile page lets you update your contact information.
                This is the name and email address other users see when your account is mentioned in the
                system (for example, in audit logs and job assignments).
            </p>
            <p>To update your profile:</p>
            <ol class="mb-3">
                <li class="mb-1">Go to your profile page.</li>
                <li class="mb-1">Click the <strong>Profile</strong> tab (it may be open by default).</li>
                <li class="mb-1">
                    Update any of the following fields:
                    <ul class="mt-1">
                        <li><strong>First Name</strong> and <strong>Last Name</strong> — your display name across the system.</li>
                        <li><strong>Email Address</strong> — used for login and system notifications. Must be a valid email format and unique in the system.</li>
                        <li><strong>Phone Number</strong> — optional; your direct contact number.</li>
                        <li><strong>Job Title</strong> — optional; displayed on your profile card.</li>
                    </ul>
                </li>
                <li class="mb-1">Click <strong>Save Changes</strong>.</li>
            </ol>
            <div class="alert alert-permanent alert-warning d-flex gap-2 mb-0" role="alert">
                <i class="bi bi-exclamation-triangle-fill flex-shrink-0 mt-1"></i>
                <div>
                    <strong>Important:</strong> If you change your email address, you will need to use the new
                    address to log in next time. Make sure you type it correctly before saving.
                </div>
            </div>
        </section>

        <section id="changing-password" class="mb-5">
            <h2 class="h4 fw-bold border-bottom pb-2 mb-3">
                <i class="bi bi-key text-primary me-2"></i>Changing Your Password
            </h2>
            <p>
                You can change your password at any time from the <strong>Security</strong> tab on your profile page.
                It is good practice to use a strong, unique password that you do not use on other websites.
            </p>
            <p>To change your password:</p>
            <ol class="mb-3">
                <li class="mb-1">Go to your profile page and click the <strong>Security</strong> tab.</li>
                <li class="mb-1">Enter your <strong>Current Password</strong> to confirm it is you.</li>
                <li class="mb-1">Enter your <strong>New Password</strong>.</li>
                <li class="mb-1">Enter the new password again in the <strong>Confirm New Password</strong> field.</li>
                <li class="mb-1">Click <strong>Change Password</strong>.</li>
            </ol>

            <h5 class="fw-semibold mt-4 mb-2">Password Requirements</h5>
            <p>Your new password must meet all of the following requirements:</p>
            <ul class="list-unstyled mb-3">
                <li class="mb-1"><i class="bi bi-check-circle-fill text-success me-2"></i>At least <strong>8 characters</strong> long</li>
                <li class="mb-1"><i class="bi bi-check-circle-fill text-success me-2"></i>At least one <strong>uppercase letter</strong> (A–Z)</li>
                <li class="mb-1"><i class="bi bi-check-circle-fill text-success me-2"></i>At least one <strong>lowercase letter</strong> (a–z)</li>
                <li class="mb-1"><i class="bi bi-check-circle-fill text-success me-2"></i>At least one <strong>digit</strong> (0–9)</li>
            </ul>
            <p>
                Example of a strong password: <code>ShopFloor2025!</code> — long, mixed case, has a number,
                and easy for you to remember but hard to guess.
            </p>
            <div class="alert alert-permanent alert-info d-flex gap-2 mb-0" role="alert">
                <i class="bi bi-lightbulb-fill flex-shrink-0 mt-1"></i>
                <div>
                    If you have forgotten your current password and cannot log in, use the
                    <strong>Forgot your password?</strong> link on the login page, or ask an Administrator to
                    reset it for you from User Management.
                </div>
            </div>
        </section>

        <section id="profile-photo" class="mb-5">
            <h2 class="h4 fw-bold border-bottom pb-2 mb-3">
                <i class="bi bi-camera text-primary me-2"></i>Profile Photo
            </h2>
            <p>
                Your profile photo appears in the top navigation bar, on your profile page, and anywhere
                your account is displayed in the system. Adding a photo makes it easier for your colleagues
                to identify who is responsible for a job or record.
            </p>

            <h5 class="fw-semibold mt-3 mb-2">Uploading a Photo</h5>
            <ol class="mb-3">
                <li class="mb-1">Go to your profile page and click the <strong>Photo</strong> tab.</li>
                <li class="mb-1">Click <strong>Choose Photo</strong> or drag and drop an image file onto the upload area.</li>
                <li class="mb-1">
                    Accepted formats: <strong>JPG, JPEG, PNG, GIF</strong>. Maximum file size: <strong>10 MB</strong>.
                </li>
                <li class="mb-1">Once the image is selected, click <strong>Upload Photo</strong>.</li>
                <li class="mb-1">The new photo appears immediately in the navigation bar.</li>
            </ol>

            <h5 class="fw-semibold mt-3 mb-2">Removing Your Photo</h5>
            <p>
                To remove your current photo and go back to the default avatar, click the
                <strong>Remove Photo</strong> button on the Photo tab and confirm.
            </p>

            <div class="alert alert-permanent alert-info d-flex gap-2 mb-0" role="alert">
                <i class="bi bi-lightbulb-fill flex-shrink-0 mt-1"></i>
                <div>
                    For best results, use a square or near-square image cropped to your face. A photo that
                    is roughly 200&times;200 pixels or larger will look sharp at all display sizes.
                </div>
            </div>
        </section>

        <section id="two-factor-auth" class="mb-5">
            <h2 class="h4 fw-bold border-bottom pb-2 mb-3">
                <i class="bi bi-shield-lock text-primary me-2"></i>Two-Factor Authentication
            </h2>
            <p>
                Two-factor authentication (2FA) adds an extra layer of security to your account. When enabled,
                you must provide a one-time code from an authenticator app (such as Google Authenticator or
                Microsoft Authenticator) in addition to your password when logging in.
            </p>
            <h5 class="fw-semibold mt-3 mb-2">Setting Up 2FA</h5>
            <ol class="mb-3">
                <li class="mb-1">Go to <a href="/TwoFactorSetup">/TwoFactorSetup</a> or open it from the user menu (top-right) → <strong>Two-Factor Setup</strong>.</li>
                <li class="mb-1">Install an authenticator app on your phone if you do not have one already.</li>
                <li class="mb-1">Scan the QR code shown on the setup page with your authenticator app.</li>
                <li class="mb-1">Enter the 6-digit code from the app to confirm setup.</li>
                <li class="mb-1">Save your <strong>recovery codes</strong> in a safe place — you will need them if you lose access to your phone.</li>
            </ol>
            <div class="alert alert-permanent alert-warning d-flex gap-2 mb-0" role="alert">
                <i class="bi bi-exclamation-triangle-fill flex-shrink-0 mt-1"></i>
                <div>
                    Store your recovery codes somewhere safe and offline. If you lose your phone and do not
                    have recovery codes, your administrator will need to reset 2FA on your account.
                </div>
            </div>
        </section>

        <section id="passkeys" class="mb-5">
            <h2 class="h4 fw-bold border-bottom pb-2 mb-3">
                <i class="bi bi-fingerprint text-primary me-2"></i>Passkeys &amp; Biometric Login
            </h2>
            <p>
                Passkeys let you sign in using your device's built-in biometrics — Face ID or Touch ID on iPhone and Mac,
                fingerprint or face unlock on Android, or Windows Hello on a PC — without ever typing your password.
                This is especially useful for shop floor workers who may have dirty or gloved hands.
            </p>

            <h5 class="fw-semibold mt-3 mb-2">Setting Up a Passkey</h5>
            <ol class="mb-3">
                <li class="mb-1">Log in with your password as normal.</li>
                <li class="mb-1">
                    A prompt appears in the bottom-right corner of the screen after login. Click
                    <strong>Enable</strong> and follow the device prompt (Face ID, fingerprint, Windows Hello PIN, etc.).
                </li>
                <li class="mb-1">The passkey is saved to that device. Repeat on each device you want to use biometrics on.</li>
            </ol>
            <p>
                Alternatively, go to <a href="/Passkey/Manage">Passkeys &amp; Biometrics</a> from the user
                menu (top-right) at any time to add a new passkey for the current device.
            </p>

            <h5 class="fw-semibold mt-3 mb-2">Signing In with a Passkey</h5>
            <ol class="mb-3">
                <li class="mb-1">Open the login page.</li>
                <li class="mb-1">
                    Click the <strong>Use Face ID / Biometric</strong> button (the label matches your device —
                    "Use Windows Hello", "Use Touch ID", etc.).
                </li>
                <li class="mb-1">Follow the device prompt. You are signed in immediately — no password required.</li>
            </ol>
            <div class="alert alert-permanent alert-info d-flex gap-2 mb-3" role="alert">
                <i class="bi bi-lightbulb-fill flex-shrink-0 mt-1"></i>
                <div>
                    The biometric button only appears if your browser and device support passkeys
                    (Safari 16+, Chrome 108+, Edge 108+, or any modern Android browser over HTTPS).
                    On unsupported browsers it is hidden automatically.
                </div>
            </div>

            <h5 class="fw-semibold mt-3 mb-2">Managing Passkeys</h5>
            <p>
                Go to <a href="/Passkey/Manage">Passkeys &amp; Biometrics</a> (user menu → Passkeys &amp; Biometrics)
                to see all devices you have enrolled. Each entry shows the device name, the date it was added,
                and when it was last used. Click <strong>Remove</strong> to revoke a passkey from a specific device —
                useful if you lose a phone or change devices.
            </p>
            <div class="alert alert-permanent alert-warning d-flex gap-2 mb-0" role="alert">
                <i class="bi bi-exclamation-triangle-fill flex-shrink-0 mt-1"></i>
                <div>
                    Removing a passkey does not log you out — it just means that device will require a password
                    on the next login. If you lose a device, remove its passkey here as soon as possible.
                </div>
            </div>
        </section>

        <section id="appearance" class="mb-5">
            <h2 class="h4 fw-bold border-bottom pb-2 mb-3">
                <i class="bi bi-palette text-primary me-2"></i>Appearance
            </h2>
            <p>
                The <strong>Appearance</strong> tab lets you customize how the application looks on your screen.
                Your choices are saved to your account and follow you across devices when you log in.
            </p>

            <h5 class="fw-semibold mt-3 mb-2">Theme — Light or Dark Mode</h5>
            <p>
                Choose between <strong>Light</strong> mode (white backgrounds, dark text) and
                <strong>Dark</strong> mode (dark backgrounds, light text).
            </p>
            <ul class="mb-3">
                <li><strong>Light</strong> — easier to read in bright environments like a well-lit office.</li>
                <li><strong>Dark</strong> — easier on the eyes in low-light conditions, such as a dimly lit shop floor or late-night work.</li>
            </ul>
            <p>
                To change the theme, open the Appearance tab, select your preferred option, and click
                <strong>Save Preferences</strong>. The page updates instantly.
            </p>

            <h5 class="fw-semibold mt-3 mb-2">Sidebar Color</h5>
            <p>
                You can also choose the color scheme for the left navigation sidebar. A range of color
                options is available — from a clean white sidebar to darker branded colors. Pick whichever
                suits your taste or matches your shop's brand.
            </p>
            <p>
                To change the sidebar color, select a color swatch on the Appearance tab and click
                <strong>Save Preferences</strong>.
            </p>
            <div class="alert alert-permanent alert-secondary d-flex gap-2 mb-0" role="alert">
                <i class="bi bi-info-circle flex-shrink-0 mt-1"></i>
                <div>
                    Appearance settings are personal and do not affect how the application looks for other
                    users. Each person on your team can choose the theme and color they prefer.
                </div>
            </div>
        </section>

    </div>

    <div class="col-lg-3 d-none d-lg-block">
        @{ await Html.RenderPartialAsync("_HelpNav"); }
        <div class="card border-0 shadow-sm sticky-top" style="top:80px">
            <div class="card-header bg-transparent fw-semibold small text-muted text-uppercase" style="letter-spacing:.05em; font-size:.7rem;">On this page</div>
            <div class="card-body p-0">
                <nav class="nav flex-column">
                    <a class="nav-link py-1 px-3 small text-body" href="#overview">Overview</a>
                    <a class="nav-link py-1 px-3 small text-body" href="#updating-profile">Updating Your Profile</a>
                    <a class="nav-link py-1 px-3 small text-body" href="#changing-password">Changing Your Password</a>
                    <a class="nav-link py-1 px-3 small text-body" href="#profile-photo">Profile Photo</a>
                    <a class="nav-link py-1 px-3 small text-body" href="#two-factor-auth">Two-Factor Auth</a>
                    <a class="nav-link py-1 px-3 small text-body" href="#passkeys">Passkeys &amp; Biometrics</a>
                    <a class="nav-link py-1 px-3 small text-body" href="#appearance">Appearance</a>
                </nav>
            </div>
        </div>
    </div>
</div>