UI redesign: improve readability and add candidate name display
- Add CandidateName property to VeracityReport and display on report page - Simplify employment verification layout with compact row-based design - Add UK employment history notice to Home and Check pages - Improve hero section text readability with text shadow - Update Login and Register page styling - Remove Companies House references from UI text Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -12,83 +12,154 @@
|
||||
|
||||
<PageTitle>Register - TrueCV</PageTitle>
|
||||
|
||||
<div class="container py-5">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-5">
|
||||
<div class="card border-0 shadow">
|
||||
<div class="card-body p-5">
|
||||
<div class="text-center mb-4">
|
||||
<img src="images/TrueCV_Logo.png" alt="TrueCV" class="mb-3" style="height: 60px;" />
|
||||
<h3 class="fw-bold">Create Account</h3>
|
||||
<p class="text-muted">Start verifying CVs with confidence</p>
|
||||
<div class="auth-container">
|
||||
<!-- Left side - Form -->
|
||||
<div class="auth-form-side">
|
||||
<div class="auth-form-wrapper">
|
||||
<div class="text-center mb-4">
|
||||
<a href="/">
|
||||
<img src="images/TrueCV_Logo.png" alt="TrueCV" class="auth-logo" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<h1 class="auth-title">Create account</h1>
|
||||
<p class="auth-subtitle">Start verifying UK-based CVs in minutes</p>
|
||||
|
||||
@if (!string.IsNullOrEmpty(_errorMessage))
|
||||
{
|
||||
<div class="alert alert-danger d-flex align-items-center" role="alert">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="me-2 flex-shrink-0" viewBox="0 0 16 16">
|
||||
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
|
||||
<path d="M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z"/>
|
||||
</svg>
|
||||
<span>@_errorMessage</span>
|
||||
</div>
|
||||
}
|
||||
|
||||
<EditForm Model="_model" OnValidSubmit="HandleRegister" FormName="register">
|
||||
<DataAnnotationsValidator />
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="email" class="form-label">Email address</label>
|
||||
<div class="input-group-icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16">
|
||||
<path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4Zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1H2Zm13 2.383-4.708 2.825L15 11.105V5.383Zm-.034 6.876-5.64-3.471L8 9.583l-1.326-.795-5.64 3.47A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.741ZM1 11.105l4.708-2.897L1 5.383v5.722Z"/>
|
||||
</svg>
|
||||
<InputText id="email" class="form-control form-control-lg" @bind-Value="_model.Email"
|
||||
placeholder="name@example.com" autocomplete="email" />
|
||||
</div>
|
||||
<ValidationMessage For="() => _model.Email" class="text-danger small mt-1" />
|
||||
</div>
|
||||
|
||||
@if (!string.IsNullOrEmpty(_errorMessage))
|
||||
{
|
||||
<div class="alert alert-danger alert-dismissible fade show" role="alert">
|
||||
@_errorMessage
|
||||
<button type="button" class="btn-close" @onclick="() => _errorMessage = null" aria-label="Close"></button>
|
||||
</div>
|
||||
}
|
||||
|
||||
<EditForm Model="_model" OnValidSubmit="HandleRegister" FormName="register">
|
||||
<DataAnnotationsValidator />
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="email" class="form-label">Email address</label>
|
||||
<InputText id="email" class="form-control form-control-lg" @bind-Value="_model.Email"
|
||||
placeholder="name@example.com" />
|
||||
<ValidationMessage For="() => _model.Email" class="text-danger" />
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="password" class="form-label">Password</label>
|
||||
<InputText id="password" type="password" class="form-control form-control-lg"
|
||||
@bind-Value="_model.Password" placeholder="Create a password" />
|
||||
<ValidationMessage For="() => _model.Password" class="text-danger" />
|
||||
<div class="form-text">Password must be at least 12 characters with uppercase, lowercase, number, and symbol.</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<label for="confirmPassword" class="form-label">Confirm Password</label>
|
||||
<InputText id="confirmPassword" type="password" class="form-control form-control-lg"
|
||||
@bind-Value="_model.ConfirmPassword" placeholder="Confirm your password" />
|
||||
<ValidationMessage For="() => _model.ConfirmPassword" class="text-danger" />
|
||||
</div>
|
||||
|
||||
<div class="d-grid">
|
||||
<button type="submit" class="btn btn-primary btn-lg" disabled="@_isLoading">
|
||||
@if (_isLoading)
|
||||
{
|
||||
<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
|
||||
<span>Creating account...</span>
|
||||
}
|
||||
else
|
||||
{
|
||||
<span>Create Account</span>
|
||||
}
|
||||
</button>
|
||||
</div>
|
||||
</EditForm>
|
||||
|
||||
<hr class="my-4" />
|
||||
|
||||
<div class="text-center">
|
||||
<p class="mb-0">
|
||||
Already have an account?
|
||||
<a href="/account/login" class="text-decoration-none fw-medium">Sign in</a>
|
||||
</p>
|
||||
<div class="mb-3">
|
||||
<label for="password" class="form-label">Password</label>
|
||||
<div class="input-group-icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16">
|
||||
<path d="M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2z"/>
|
||||
</svg>
|
||||
<InputText id="password" type="password" class="form-control form-control-lg"
|
||||
@bind-Value="_model.Password" placeholder="Create a password" autocomplete="new-password" />
|
||||
</div>
|
||||
<ValidationMessage For="() => _model.Password" class="text-danger small mt-1" />
|
||||
<div class="form-text">At least 12 characters with uppercase, lowercase, number, and symbol.</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<label for="confirmPassword" class="form-label">Confirm password</label>
|
||||
<div class="input-group-icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16">
|
||||
<path d="M10.854 7.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 9.793l2.646-2.647a.5.5 0 0 1 .708 0z"/>
|
||||
<path d="M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2z"/>
|
||||
</svg>
|
||||
<InputText id="confirmPassword" type="password" class="form-control form-control-lg"
|
||||
@bind-Value="_model.ConfirmPassword" placeholder="Confirm your password" autocomplete="new-password" />
|
||||
</div>
|
||||
<ValidationMessage For="() => _model.ConfirmPassword" class="text-danger small mt-1" />
|
||||
</div>
|
||||
|
||||
<div class="d-grid mb-4">
|
||||
<button type="submit" class="btn btn-primary btn-lg" disabled="@_isLoading">
|
||||
@if (_isLoading)
|
||||
{
|
||||
<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
|
||||
<span>Creating account...</span>
|
||||
}
|
||||
else
|
||||
{
|
||||
<span>Create Account</span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="ms-2" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"/>
|
||||
</svg>
|
||||
}
|
||||
</button>
|
||||
</div>
|
||||
</EditForm>
|
||||
|
||||
<p class="text-center text-muted small mb-4">
|
||||
By creating an account, you agree to our
|
||||
<a href="#" class="text-decoration-none">Terms of Service</a>
|
||||
and
|
||||
<a href="#" class="text-decoration-none">Privacy Policy</a>
|
||||
</p>
|
||||
|
||||
<div class="auth-divider">
|
||||
<span>Already have an account?</span>
|
||||
</div>
|
||||
|
||||
<div class="text-center">
|
||||
<a href="/account/login" class="btn btn-outline-secondary btn-lg w-100">
|
||||
Sign in
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right side - Branding -->
|
||||
<div class="auth-brand-side">
|
||||
<div class="auth-brand-content">
|
||||
<div class="auth-brand-icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="currentColor" viewBox="0 0 16 16">
|
||||
<path d="M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492zM5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0z"/>
|
||||
<path d="M9.796 1.343c-.527-1.79-3.065-1.79-3.592 0l-.094.319a.873.873 0 0 1-1.255.52l-.292-.16c-1.64-.892-3.433.902-2.54 2.541l.159.292a.873.873 0 0 1-.52 1.255l-.319.094c-1.79.527-1.79 3.065 0 3.592l.319.094a.873.873 0 0 1 .52 1.255l-.16.292c-.892 1.64.901 3.434 2.541 2.54l.292-.159a.873.873 0 0 1 1.255.52l.094.319c.527 1.79 3.065 1.79 3.592 0l.094-.319a.873.873 0 0 1 1.255-.52l.292.16c1.64.893 3.434-.902 2.54-2.541l-.159-.292a.873.873 0 0 1 .52-1.255l.319-.094c1.79-.527 1.79-3.065 0-3.592l-.319-.094a.873.873 0 0 1-.52-1.255l.16-.292c.893-1.64-.902-3.433-2.541-2.54l-.292.159a.873.873 0 0 1-1.255-.52l-.094-.319zm-2.633.283c.246-.835 1.428-.835 1.674 0l.094.319a1.873 1.873 0 0 0 2.693 1.115l.291-.16c.764-.415 1.6.42 1.184 1.185l-.159.292a1.873 1.873 0 0 0 1.116 2.692l.318.094c.835.246.835 1.428 0 1.674l-.319.094a1.873 1.873 0 0 0-1.115 2.693l.16.291c.415.764-.42 1.6-1.185 1.184l-.291-.159a1.873 1.873 0 0 0-2.693 1.116l-.094.318c-.246.835-1.428.835-1.674 0l-.094-.319a1.873 1.873 0 0 0-2.692-1.115l-.292.16c-.764.415-1.6-.42-1.184-1.185l.159-.291A1.873 1.873 0 0 0 1.945 8.93l-.319-.094c-.835-.246-.835-1.428 0-1.674l.319-.094A1.873 1.873 0 0 0 3.06 4.377l-.16-.292c-.415-.764.42-1.6 1.185-1.184l.292.159a1.873 1.873 0 0 0 2.692-1.115l.094-.319z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h2 class="auth-brand-title">Start Your Free Trial</h2>
|
||||
<p class="auth-brand-text">
|
||||
Get 3 free CV verifications to experience the power of AI-driven credential analysis.
|
||||
</p>
|
||||
|
||||
<div class="auth-features">
|
||||
<div class="auth-feature">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 16 16">
|
||||
<path d="M12.354 4.354a.5.5 0 0 0-.708-.708L5 10.293 1.854 7.146a.5.5 0 1 0-.708.708l3.5 3.5a.5.5 0 0 0 .708 0l7-7z"/>
|
||||
</svg>
|
||||
<span>AI-powered verification in seconds</span>
|
||||
</div>
|
||||
<div class="auth-feature">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 16 16">
|
||||
<path d="M12.354 4.354a.5.5 0 0 0-.708-.708L5 10.293 1.854 7.146a.5.5 0 1 0-.708.708l3.5 3.5a.5.5 0 0 0 .708 0l7-7z"/>
|
||||
</svg>
|
||||
<span>Company legitimacy checks</span>
|
||||
</div>
|
||||
<div class="auth-feature">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 16 16">
|
||||
<path d="M12.354 4.354a.5.5 0 0 0-.708-.708L5 10.293 1.854 7.146a.5.5 0 1 0-.708.708l3.5 3.5a.5.5 0 0 0 .708 0l7-7z"/>
|
||||
</svg>
|
||||
<span>Qualification & timeline analysis</span>
|
||||
</div>
|
||||
<div class="auth-feature">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 16 16">
|
||||
<path d="M12.354 4.354a.5.5 0 0 0-.708-.708L5 10.293 1.854 7.146a.5.5 0 1 0-.708.708l3.5 3.5a.5.5 0 0 0 .708 0l7-7z"/>
|
||||
</svg>
|
||||
<span>Detailed PDF reports</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center mt-4">
|
||||
<small class="text-muted">
|
||||
By creating an account, you agree to our
|
||||
<a href="#" class="text-decoration-none">Terms of Service</a>
|
||||
and
|
||||
<a href="#" class="text-decoration-none">Privacy Policy</a>
|
||||
</small>
|
||||
<div class="auth-testimonial">
|
||||
<blockquote>
|
||||
"We reduced bad hires by 40% in the first quarter using TrueCV."
|
||||
</blockquote>
|
||||
<cite>- Recruitment Manager, Financial Services</cite>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -134,9 +205,9 @@
|
||||
_errorMessage = string.Join(" ", errors);
|
||||
}
|
||||
}
|
||||
catch (Exception ex)
|
||||
catch (Exception)
|
||||
{
|
||||
_errorMessage = $"An error occurred: {ex.Message}";
|
||||
_errorMessage = "An unexpected error occurred. Please try again.";
|
||||
}
|
||||
finally
|
||||
{
|
||||
|
||||
Reference in New Issue
Block a user