Make authenticated get endpoint

Wordle.Api/Wordle.Api/Controllers/WordController.cs

@@ -1,4 +1,5 @@
-using Microsoft.AspNetCore.Mvc;
+using Microsoft.AspNetCore.Authorization;
+using Microsoft.AspNetCore.Mvc;
 using Wordle.Api.Services;
 
 namespace Wordle.Api.Controllers;
@@ -24,4 +25,14 @@ public async Task<string> GetWordOfDay(double offsetInHours = -7.0)
         DateOnly today = DateOnly.FromDateTime(DateTime.UtcNow.AddHours(offsetInHours));
         return await wordOfTheDayService.GetWordOfTheDay(today);
     }
+
+    [Authorize]
+    [HttpGet("WordOfTheDayHint")]
+    public async Task<string> GetWordOfDayHint(double offsetInHours = -7.0)
+    {
+        DateOnly today = DateOnly.FromDateTime(DateTime.UtcNow.AddHours(offsetInHours));
+        var wordOfTheDay = await wordOfTheDayService.GetWordOfTheDay(today);
+
+        return wordOfTheDay.Substring(0, 1) + "___" + wordOfTheDay.Substring(4,1);
+    }
 }

wordle-web/pages/index.vue

@@ -25,22 +25,21 @@
               {{ game.stats.winPercentage }} %
             </v-progress-circular>
             <br />
-            <i class="text-caption">
-              Success Rate
-            </i>
+            <i class="text-caption"> Success Rate </i>
           </v-col>
           <v-col cols="auto">
             <v-progress-circular
               size="75"
               width="10"
               :model-value="game.stats.averageGuessesPercent(game.maxAttempts)"
             >
-              {{ game.stats.averageGuessesPercent(game.maxAttempts).toFixed(0) }} %
+              {{
+                game.stats.averageGuessesPercent(game.maxAttempts).toFixed(0)
+              }}
+              %
             </v-progress-circular>
             <br />
-            <i class="text-caption">
-              Average Guesses
-            </i>
+            <i class="text-caption"> Average Guesses </i>
           </v-col>
         </v-row>
         <v-btn variant="outlined" @click="game.startNewGame()">
@@ -59,21 +58,28 @@
         <Keyboard />
       </div>
 
-      <v-btn @click="game.submitGuess()" class="mb-5" color="primary">
-        Guess!
-      </v-btn>
+      <div class="mb-5">
+        <v-btn @click="game.submitGuess()" class="mb-5" color="primary">
+          Guess!
+        </v-btn>
+        <br />
+        <v-btn @click="hint" color="primary"> Hint! 👀 </v-btn>
+      </div>
     </v-card>
   </v-container>
 </template>
 
 <script setup lang="ts">
+import axios from "axios";
+import TokenService from "~/scripts/TokenService";
 import { Game, GameState } from "../scripts/game";
 
 const game = reactive(new Game());
 game.startNewGame();
 provide("GAME", game);
 
 const myGuess = ref("");
+const tokenService = new TokenService();
 
 onMounted(() => {
   window.addEventListener("keyup", onKeyup);
@@ -92,4 +98,12 @@ function onKeyup(event: KeyboardEvent) {
     game.addLetter(event.key.toUpperCase());
   }
 }
+
+function hint() {
+  const headers = tokenService.generateTokenHeader();
+  console.log(headers);
+  axios.get("Word/WordOfTheDayHint", { headers }).then((response) => {
+    alert(`Hint: ${response.data}`);
+  });
+}
 </script>

wordle-web/scripts/tokenService.ts

@@ -22,4 +22,8 @@ export default class TokenService {
     console.log(JSON.parse(atob(token.split(".")[1])));
     return JSON.parse(atob(token.split(".")[1])).userName;
   }
+
+  public generateTokenHeader(){
+    return { 'Authorization': `Bearer ${this.getToken()}`}
+  }
 }