Initial commit
This commit is contained in:
@@ -0,0 +1,232 @@
|
||||
@{
|
||||
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×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="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="#appearance">Appearance</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user