chg: usr: make fancy og tags - and create a special one for battle sharing #4

templates/Security/2fa.html.twig

@@ -2,6 +2,17 @@
 
 {% block title %} - Two-Factor Authentication{% endblock %}
 
+{% block metas %}
+  <meta name="robots" content="noindex,nofollow"/>
+  <meta property="og:url" content="{{ app.request.uri }}"/>
+  <meta property="og:type" content="website"/>
+  <meta property="og:site_name" content="MineSeeker"/>
+  <meta property="og:title" content="Two-Factor Authentication · MineSeeker"/>
+  <meta property="og:description" content="Verify your identity to access your MineSeeker account."/>
+  <meta name="twitter:card" content="summary"/>
+  <meta name="twitter:title" content="Two-Factor Authentication · MineSeeker"/>
+{% endblock %}
+
 {% block body %}
   <div class="auth-page">
     <div class="auth-card">
@@ -51,4 +62,4 @@
       </form>
     </div>
   </div>
-{% endblock %}
+{% endblock %}

templates/Security/2fa_setup.html.twig

@@ -2,6 +2,17 @@
 
 {% block title %} - Enable Two-Factor Authentication{% endblock %}
 
+{% block metas %}
+  <meta name="robots" content="noindex,nofollow"/>
+  <meta property="og:url" content="{{ app.request.uri }}"/>
+  <meta property="og:type" content="website"/>
+  <meta property="og:site_name" content="MineSeeker"/>
+  <meta property="og:title" content="Enable 2FA · MineSeeker"/>
+  <meta property="og:description" content="Set up two-factor authentication to secure your MineSeeker account."/>
+  <meta name="twitter:card" content="summary"/>
+  <meta name="twitter:title" content="Enable 2FA · MineSeeker"/>
+{% endblock %}
+
 {% block body %}
   <div class="auth-page">
     <div class="auth-card auth-card--wide">

templates/Security/forgot_password.html.twig

@@ -2,6 +2,19 @@
 
 {% block title %} - Forgot Password{% endblock %}
 
+{% block metas %}
+  {%- set _ogImage = app.request.getSchemeAndHttpHost() ~ asset('images/mine-1600x627.png') -%}
+  <meta name="robots" content="noindex,nofollow"/>
+  <meta property="og:url" content="{{ app.request.uri }}"/>
+  <meta property="og:type" content="website"/>
+  <meta property="og:site_name" content="MineSeeker"/>
+  <meta property="og:title" content="Reset Password · MineSeeker"/>
+  <meta property="og:description" content="Reset your MineSeeker account password."/>
+  <meta property="og:image" content="{{ _ogImage }}"/>
+  <meta name="twitter:card" content="summary"/>
+  <meta name="twitter:title" content="Reset Password · MineSeeker"/>
+{% endblock %}
+
 {% block body %}
   <div class="auth-page">
     {% for email in app.flashes('reset_sent') %}
@@ -26,28 +39,28 @@
 
         {{ form_start(form, {attr: {class: 'auth-form'}}) }}
 
-          <div class="auth-field">
-            <label for="{{ form.email.vars.id }}" class="auth-label">Email</label>
-            <div class="auth-input-wrap">
-              <i class="fas fa-envelope auth-input-icon"></i>
-              {{ form_widget(form.email, {
-                attr: {
-                  class: 'auth-input' ~ (not form.email.vars.valid ? ' auth-input--error' : ''),
-                  autocomplete: 'email',
-                  autofocus: true,
-                }
-              }) }}
-            </div>
-            {% if not form.email.vars.valid %}
-              {% for error in form.email.vars.errors %}
-                <p class="auth-field-error"><i class="fas fa-circle-exclamation"></i> {{ error.message }}</p>
-              {% endfor %}
-            {% endif %}
+        <div class="auth-field">
+          <label for="{{ form.email.vars.id }}" class="auth-label">Email</label>
+          <div class="auth-input-wrap">
+            <i class="fas fa-envelope auth-input-icon"></i>
+            {{ form_widget(form.email, {
+              attr: {
+                class: 'auth-input' ~ (not form.email.vars.valid ? ' auth-input--error' : ''),
+                autocomplete: 'email',
+                autofocus: true,
+              }
+            }) }}
           </div>
+          {% if not form.email.vars.valid %}
+            {% for error in form.email.vars.errors %}
+              <p class="auth-field-error"><i class="fas fa-circle-exclamation"></i> {{ error.message }}</p>
+            {% endfor %}
+          {% endif %}
+        </div>
 
-          <button type="submit" class="auth-submit">
-            <i class="fas fa-paper-plane"></i> Send Reset Link
-          </button>
+        <button type="submit" class="auth-submit">
+          <i class="fas fa-paper-plane"></i> Send Reset Link
+        </button>
 
         {{ form_end(form) }}
 

templates/Security/login.html.twig

@@ -2,6 +2,25 @@
 
 {% block title %} - Sign In{% endblock %}
 
+{% block metas %}
+  {%- set _ogImage = app.request.getSchemeAndHttpHost() ~ asset('images/mine-1600x627.png') -%}
+  <meta name="robots" content="noindex,nofollow"/>
+  <meta property="og:url" content="{{ app.request.uri }}"/>
+  <meta property="og:type" content="website"/>
+  <meta property="og:site_name" content="MineSeeker"/>
+  <meta property="og:title" content="Sign In · MineSeeker"/>
+  <meta property="og:description"
+        content="Sign in to MineSeeker and keep track of your wins, stats and battle history."/>
+  <meta property="og:image" content="{{ _ogImage }}"/>
+  <meta property="og:image:width" content="1600"/>
+  <meta property="og:image:height" content="627"/>
+  <meta name="twitter:card" content="summary_large_image"/>
+  <meta name="twitter:title" content="Sign In · MineSeeker"/>
+  <meta name="twitter:description"
+        content="Sign in to MineSeeker and keep track of your wins, stats and battle history."/>
+  <meta name="twitter:image" content="{{ _ogImage }}"/>
+{% endblock %}
+
 {% block body %}
   <div class="auth-page">
     {% for message in app.flashes('success') %}

templates/Security/profile.html.twig

@@ -2,6 +2,25 @@
 
 {% block title %} - Profile{% endblock %}
 
+{% block metas %}
+  {%- set _ogImage = app.request.getSchemeAndHttpHost() ~ asset('images/mine-1600x627.png') -%}
+  <meta name="robots" content="noindex,nofollow"/>
+  <meta property="og:url" content="{{ url('MineSeekerBundle_profile') }}"/>
+  <meta property="og:type" content="profile"/>
+  <meta property="og:site_name" content="MineSeeker"/>
+  <meta property="og:title" content="{{ app.user.username }} · MineSeeker"/>
+  <meta property="og:description"
+        content="View {{ app.user.username }}'s battle stats, win rate and recent games on MineSeeker."/>
+  <meta property="og:image" content="{{ _ogImage }}"/>
+  <meta property="og:image:width" content="1600"/>
+  <meta property="og:image:height" content="627"/>
+  <meta name="twitter:card" content="summary_large_image"/>
+  <meta name="twitter:title" content="{{ app.user.username }} · MineSeeker"/>
+  <meta name="twitter:description"
+        content="View {{ app.user.username }}'s battle stats, win rate and recent games on MineSeeker."/>
+  <meta name="twitter:image" content="{{ _ogImage }}"/>
+{% endblock %}
+
 {% block body %}
   <div class="profile-page">
     <div class="profile-header">

templates/Security/profile_security.html.twig

@@ -2,6 +2,25 @@
 
 {% block title %} - Security Settings{% endblock %}
 
+{% block metas %}
+  {%- set _ogImage = app.request.getSchemeAndHttpHost() ~ asset('images/mine-1600x627.png') -%}
+  <meta name="robots" content="noindex,nofollow"/>
+  <meta property="og:url" content="{{ url('MineSeekerBundle_profile_security') }}"/>
+  <meta property="og:type" content="website"/>
+  <meta property="og:site_name" content="MineSeeker"/>
+  <meta property="og:title" content="Security Settings · MineSeeker"/>
+  <meta property="og:description"
+        content="Manage your MineSeeker account security — passkeys, two-factor authentication and more."/>
+  <meta property="og:image" content="{{ _ogImage }}"/>
+  <meta property="og:image:width" content="1600"/>
+  <meta property="og:image:height" content="627"/>
+  <meta name="twitter:card" content="summary_large_image"/>
+  <meta name="twitter:title" content="Security Settings · MineSeeker"/>
+  <meta name="twitter:description"
+        content="Manage your MineSeeker account security — passkeys, two-factor authentication and more."/>
+  <meta name="twitter:image" content="{{ _ogImage }}"/>
+{% endblock %}
+
 {% block body %}
   <div class="profile-page">
     <div class="profile-actions">

templates/Security/register.html.twig

@@ -2,6 +2,24 @@
 
 {% block title %} - Register{% endblock %}
 
+{% block metas %}
+  {%- set _ogImage = app.request.getSchemeAndHttpHost() ~ asset('images/mine-1600x627.png') -%}
+  <meta property="og:url" content="{{ app.request.uri }}"/>
+  <meta property="og:type" content="website"/>
+  <meta property="og:site_name" content="MineSeeker"/>
+  <meta property="og:title" content="Create Account · MineSeeker"/>
+  <meta property="og:description"
+        content="Join MineSeeker for free. Track your wins, relive your best battles and prove you're the better minesweeper."/>
+  <meta property="og:image" content="{{ _ogImage }}"/>
+  <meta property="og:image:width" content="1600"/>
+  <meta property="og:image:height" content="627"/>
+  <meta name="twitter:card" content="summary_large_image"/>
+  <meta name="twitter:title" content="Create Account · MineSeeker"/>
+  <meta name="twitter:description"
+        content="Join MineSeeker for free. Track your wins, relive your best battles and prove you're the better minesweeper."/>
+  <meta name="twitter:image" content="{{ _ogImage }}"/>
+{% endblock %}
+
 {% block body %}
   <div class="auth-page">
     {% for email in app.flashes('verify_email') %}

templates/Security/reset_password.html.twig

@@ -2,6 +2,17 @@
 
 {% block title %} - Reset Password{% endblock %}
 
+{% block metas %}
+  <meta name="robots" content="noindex,nofollow"/>
+  <meta property="og:url" content="{{ app.request.uri }}"/>
+  <meta property="og:type" content="website"/>
+  <meta property="og:site_name" content="MineSeeker"/>
+  <meta property="og:title" content="Set New Password · MineSeeker"/>
+  <meta property="og:description" content="Set a new password for your MineSeeker account."/>
+  <meta name="twitter:card" content="summary"/>
+  <meta name="twitter:title" content="Set New Password · MineSeeker"/>
+{% endblock %}
+
 {% block body %}
   <div class="auth-page">
     <div class="auth-card">