✏️ Improve code readability by reformatting and rewrapping text and attributes for better alignment and consistency

code/websites/pokedex.online/src/views/ClientCredentialsManager.vue

@@ -20,7 +20,11 @@
               Token expires in: {{ tokenInfo?.expiresIn || 0 }} seconds
             </p>
             <div class="button-group">
-              <button @click="handleRefresh" class="btn btn-primary" :disabled="loading">
+              <button
+                @click="handleRefresh"
+                class="btn btn-primary"
+                :disabled="loading"
+              >
                 {{ loading ? 'Refreshing...' : 'Refresh Token' }}
               </button>
               <button @click="handleLogout" class="btn btn-secondary">
@@ -119,8 +123,8 @@
             </option>
           </select>
           <p class="help-text">
-            <strong>application:manage</strong> is required for APPLICATION scope
+            <strong>application:manage</strong> is required for APPLICATION
-            tournament access
+            scope tournament access
           </p>
         </div>
 
@@ -152,44 +156,44 @@
         <h2>ℹ️ What are Client Credentials?</h2>
         <div class="info-content">
           <p>
-            <strong>Client Credentials Flow</strong> is an OAuth 2.0 authentication
+            <strong>Client Credentials Flow</strong> is an OAuth 2.0
-            method for server-to-server communication. It allows your application to
+            authentication method for server-to-server communication. It allows
-            access resources without user interaction.
+            your application to access resources without user interaction.
           </p>
 
           <h3>When to use this:</h3>
           <ul>
             <li>
-              <strong>APPLICATION Scope:</strong> Access all tournaments associated
+              <strong>APPLICATION Scope:</strong> Access all tournaments
-              with your OAuth application
+              associated with your OAuth application
             </li>
             <li>
-              <strong>Background tasks:</strong> Automated scripts that don't require
+              <strong>Background tasks:</strong> Automated scripts that don't
-              user login
+              require user login
             </li>
             <li>
-              <strong>Server operations:</strong> Backend services managing tournament
+              <strong>Server operations:</strong> Backend services managing
-              data
+              tournament data
             </li>
           </ul>
 
           <h3>Security Notes:</h3>
           <ul>
             <li>
-              🔒 <strong>Keep your client secret private</strong> - Never commit it
+              🔒 <strong>Keep your client secret private</strong> - Never commit
-              to version control
+              it to version control
             </li>
             <li>
-              🔐 Credentials are stored in your browser's localStorage (not sent to
+              🔐 Credentials are stored in your browser's localStorage (not sent
-              any server)
+              to any server)
             </li>
             <li>
-              ⚠️ Only use on <strong>trusted devices</strong> - Clear credentials
+              ⚠️ Only use on <strong>trusted devices</strong> - Clear
-              when done
+              credentials when done
             </li>
             <li>
-              🔄 Tokens expire automatically - Use the refresh button to get a new
+              🔄 Tokens expire automatically - Use the refresh button to get a
-              one
+              new one
             </li>
           </ul>
 
@@ -200,13 +204,16 @@
               automatically
             </li>
             <li>
-              <strong>Uses client secret:</strong> Requires both client ID and secret
+              <strong>Uses client secret:</strong> Requires both client ID and
+              secret
             </li>
             <li>
-              <strong>Limited scopes:</strong> Only works with application:* scopes
+              <strong>Limited scopes:</strong> Only works with application:*
+              scopes
             </li>
             <li>
-              <strong>Direct token:</strong> No authorization code exchange needed
+              <strong>Direct token:</strong> No authorization code exchange
+              needed
             </li>
           </ul>
         </div>
@@ -221,11 +228,15 @@
         <div class="modal" @click.stop>
           <h3>Delete Client Credentials?</h3>
           <p>
-            Are you sure you want to clear the stored client credentials and access
+            Are you sure you want to clear the stored client credentials and
-            token? You'll need to enter them again to use APPLICATION scope.
+            access token? You'll need to enter them again to use APPLICATION
+            scope.
           </p>
           <div class="modal-buttons">
-            <button @click="showDeleteConfirm = false" class="btn btn-secondary">
+            <button
+              @click="showDeleteConfirm = false"
+              class="btn btn-secondary"
+            >
               Cancel
             </button>
             <button @click="handleDeleteCredentials" class="btn btn-danger">
@@ -276,12 +287,13 @@
               <div class="step-content">
                 <h4>Copy Your Client ID and Client Secret</h4>
                 <p>
-                  Your application page will show both the <strong>Client ID</strong>
+                  Your application page will show both the
-                  and <strong>Client Secret</strong>. Copy both values.
+                  <strong>Client ID</strong> and <strong>Client Secret</strong>.
+                  Copy both values.
                 </p>
                 <p class="warning">
-                  ⚠️ <strong>Important:</strong> The client secret is only shown once.
+                  ⚠️ <strong>Important:</strong> The client secret is only shown
-                  If you lose it, you'll need to regenerate it.
+                  once. If you lose it, you'll need to regenerate it.
                 </p>
               </div>
             </div>
@@ -291,8 +303,8 @@
               <div class="step-content">
                 <h4>Paste Credentials Here</h4>
                 <p>
-                  Return to this page, paste both values, select your desired scope,
+                  Return to this page, paste both values, select your desired
-                  and click "Save & Authenticate".
+                  scope, and click "Save & Authenticate".
                 </p>
               </div>
             </div>
@@ -303,8 +315,8 @@
                 <h4>Start Using APPLICATION Scope</h4>
                 <p>
                   Once authenticated, you can use the APPLICATION scope in the
-                  Challonge Test page to access all tournaments associated with your
+                  Challonge Test page to access all tournaments associated with
-                  application.
+                  your application.
                 </p>
               </div>
             </div>