04/27 Updated customer invitation allow customer to create username & password 3

This commit is contained in:
2026-04-27 14:56:41 -04:00
parent 19fe1d8328
commit c31f08dbcc
4 changed files with 78 additions and 143 deletions
+10 -37
View File
@@ -14,8 +14,9 @@
<div class="card-body">
<p class="text-muted mb-4" style="font-size:.9rem;">
Enter the customer's details and set their login credentials.
The account will be active immediately.
Enter the customer's name and email address. An invitation email will be
sent automatically with a secure link where they can choose their own
username and password. The account will be activated once they complete that step.
</p>
<form method="POST">
@@ -30,50 +31,22 @@
{% endfor %}
</div>
<div class="mb-3">
<div class="mb-4">
{{ form.email.label(class="form-label fw-semibold") }}
{{ form.email(class="form-control" + (" is-invalid" if form.email.errors else ""),
placeholder="jane@example.com") }}
{% for error in form.email.errors %}
<div class="invalid-feedback">{{ error }}</div>
{% endfor %}
</div>
<div class="mb-3">
{{ form.username.label(class="form-label fw-semibold") }}
{{ form.username(class="form-control" + (" is-invalid" if form.username.errors else ""),
placeholder="e.g. jsmith") }}
{% for error in form.username.errors %}
<div class="invalid-feedback">{{ error }}</div>
{% endfor %}
<div class="form-text">
<i class="bi bi-person me-1"></i>
Used to log in. Lowercase letters, numbers, dots, hyphens, and underscores only.
<i class="bi bi-envelope me-1"></i>
An invitation email with an account setup link will be sent to this address.
</div>
</div>
<div class="mb-3">
{{ form.password.label(class="form-label fw-semibold") }}
{{ form.password(class="form-control" + (" is-invalid" if form.password.errors else ""),
autocomplete="new-password") }}
{% for error in form.password.errors %}
<div class="invalid-feedback">{{ error }}</div>
{% endfor %}
<div class="form-text">Minimum 8 characters.</div>
</div>
<div class="mb-4">
{{ form.confirm_password.label(class="form-label fw-semibold") }}
{{ form.confirm_password(class="form-control" + (" is-invalid" if form.confirm_password.errors else ""),
autocomplete="new-password") }}
{% for error in form.confirm_password.errors %}
<div class="invalid-feedback">{{ error }}</div>
{% endfor %}
</div>
<div class="d-flex gap-2">
<button type="submit" class="btn btn-primary">
<i class="bi bi-person-check me-1"></i>Create Account
<i class="bi bi-send me-1"></i>Create &amp; Send Invitation
</button>
<a href="{{ url_for('customers.index') }}" class="btn btn-outline-secondary">
<i class="bi bi-x-circle me-1"></i>Cancel
@@ -90,9 +63,9 @@
<strong>What happens next:</strong>
</p>
<ol class="mb-0 ps-3" style="font-size:.8rem; color:#555;">
<li>The account is created immediately and the customer can log in right away.</li>
<li>A welcome email is sent to the customer with a link to the login page.</li>
<li>Assign the customer to Contracts or Facilities from their profile page.</li>
<li>An invitation email is sent to the customer with a secure 72-hour link.</li>
<li>The customer clicks the link and chooses their own username and password.</li>
<li>The account becomes fully active and they can log in immediately.</li>
</ol>
</div>
</div>
+21 -5
View File
@@ -32,7 +32,7 @@
<div class="setup-card">
<div class="setup-header">
<h4><i class="bi bi-shield-lock me-2"></i>Set Your Password</h4>
<p>Welcome, {{ user.display_name }}. Choose a secure password to activate your account.</p>
<p>Welcome, {{ user.display_name }}. Choose your username and a secure password to activate your account.</p>
</div>
<div class="setup-body">
@@ -49,14 +49,30 @@
<form method="POST" id="setPasswordForm" novalidate>
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
<div class="mb-3">
<label for="username" class="form-label fw-semibold">Choose a Username</label>
<input type="text"
id="username"
name="username"
class="form-control {{ 'is-invalid' if form.username.errors else '' }}"
autocomplete="username"
autofocus
maxlength="100">
{% for error in form.username.errors %}
<div class="invalid-feedback">{{ error }}</div>
{% endfor %}
<div class="form-text" style="font-size:.78rem;">
3100 characters. You will use this to log in.
</div>
</div>
<div class="mb-3">
<label for="password" class="form-label fw-semibold">New Password</label>
<input type="password"
id="password"
name="password"
class="form-control {{ 'is-invalid' if form.password.errors else '' }}"
autocomplete="new-password"
autofocus>
autocomplete="new-password">
{% for error in form.password.errors %}
<div class="invalid-feedback">{{ error }}</div>
{% endfor %}
@@ -96,7 +112,7 @@
</div>
<button type="submit" class="btn btn-primary w-100" id="submitBtn">
<i class="bi bi-check2-circle me-1"></i>Set Password &amp; Log In
<i class="bi bi-check2-circle me-1"></i>Activate Account &amp; Log In
</button>
</form>
</div>
@@ -160,4 +176,4 @@
})();
</script>
</body>
</html>
</html>