Add snackbar component, notification toasts dont auto hide, add windo… (#112)

* Add snackbar component to show botton page alerts
* Show a nudge for users to verify their email address. The alert can be dismissed for the current browser session. 
* Notification toasts will no longer auto hide
* Add `window.init.userVerified` for JavaScript to access the verification state of the user
* Requires CTFd/CTFd#2791

Author: ColdHeat

templates/base.html

@@ -24,6 +24,7 @@
           'userId': {{ Session.id }},
           'userName': {{ User.name | tojson }},
           'userEmail': {{ User.email | tojson }},
+          'userVerified': {{ User.verified | tojson }},
           'teamId': {{ Team.id | tojson }},
           'teamName': {{ Team.name | tojson }},
           'start': {{ Configs.start | tojson }},
@@ -46,6 +47,8 @@
   {% endblock %}
 </main>
 
+{% include "components/snackbar.html" %}
+
 <footer class="footer">
   <div class="container text-center">
     <a href="https://ctfd.io" class="text-secondary">

templates/components/notifications.html

@@ -1,6 +1,6 @@
 <div x-data>
   <div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
-    <div x-ref="toast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true">
+    <div x-ref="toast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="false">
       <div class="toast-header">
         <strong class="me-auto" x-text="$store.toast.title"></strong>
         <small>just now</small>

templates/components/snackbar.html

@@ -0,0 +1,15 @@
+{% if can_send_mail() %}
+<div 
+    x-data 
+    x-show="window.init.userId && !window.init.userVerified && localStorage.getItem('remind_email_verify') != window.init.userId && (!['/team', '/teams/join', '/teams/new'].includes(window.location.pathname) || window.init.teamId != null)"
+    class="alert alert-info alert-dismissible col-md-4 col-10 position-fixed text-center m-0" 
+    style="bottom: 45px; left: 50%; transform: translateX(-50%); z-index: 1040; display: none;" 
+    role="alert"
+>
+  <small>
+    <strong>Email Unconfirmed</strong><br>
+    <span>To confirm your email address please <a href="{{ url_for('auth.confirm', flow='init') }}">click here</a>.</span>
+  </small>
+  <button type="button" class="btn-close" @click="localStorage.setItem('remind_email_verify', window.init.userId); $el.parentElement.style.display = 'none';" aria-label="Close"></button>
+</div>
+{% endif %}

templates/confirm.html

@@ -14,32 +14,40 @@ <h1>
       <div class="col-md-10 col-lg-8 col-xl-6 offset-md-1 offset-lg-2 offset-xl-3">
         {% include "components/errors.html" %}
 
-        <h5 class="text-center">
-          {% trans %}We've sent a confirmation email to your email address.{% endtrans %}
-        </h5>
-
-        <br>
-
-        <h5 class="text-center">
-          {% trans %}Please click the link in that email to confirm your account.{% endtrans %}
-        </h5>
-
-        <br>
-
-        <h5 class="text-center">
-          {% trans %}If the email doesn’t arrive, check your spam folder or contact an administrator to manually verify your account.{% endtrans %}
-        </h5>
+        {% if request.args.get('flow') == "init" %}
+          <h5 class="text-center">
+            {% trans %}To send a confirmation email to your email address, please click the button below.{% endtrans %}
+          </h5>
+          <br>
+          <h5 class="text-center">
+            {% trans %}Please click the link in that email to confirm your account.{% endtrans %}
+          </h5>
+          <h5 class="text-center">
+            {% trans %}If the email doesn’t arrive, check your spam folder or contact an administrator to manually verify your account.{% endtrans %}
+          </h5>
+        {% else%}
+          <h5 class="text-center">
+            {% trans %}We've sent a confirmation email to your email address.{% endtrans %}
+          </h5>
+          <br>
+          <h5 class="text-center">
+            {% trans %}Please click the link in that email to confirm your account.{% endtrans %}
+          </h5>
+          <h5 class="text-center">
+            {% trans %}If the email doesn’t arrive, check your spam folder or contact an administrator to manually verify your account.{% endtrans %}
+          </h5>
+        {% endif %}
 
         <hr>
 
         {% with form = Forms.auth.ConfirmForm() %}
           <form method="POST" action="{{ url_for('auth.confirm') }}">
             <div class="row">
               <div class="mb-3 col-md-6">
-                {{ form.submit(class="btn btn-primary w-100") }}
+                {{ form.submit(class="btn btn-primary w-100 p-2") }}
               </div>
               <div class="mb-3 col-md-6">
-                <a href="{{ url_for('views.settings') }}" class="btn btn-secondary w-100">
+                <a href="{{ url_for('views.settings') }}" class="btn btn-secondary w-100 p-2">
                   {% trans %}Change Email Address{% endtrans %}
                 </a>
               </div>