Fixes bugs in beta

Author: YashVerma-code

lib/authentication/utils/auth0angular.js

@@ -272,6 +272,7 @@ export async function setupAuth0Angular(state) {
   const angMat = "angular-material" === state.uiLibrary;
   const daisy = "daisyui" === state.uiLibrary;
   const primeng = "primeng" === state.uiLibrary;
+  const useTailwind = state.styling === "tailwind"
   console.log(chalk.blue(`Setting up Auth0 for Angular project: ${projectName}`));
 
   const rootDir = path.isAbsolute(projectName) ? projectName : process.cwd();
@@ -325,7 +326,7 @@ export async function setupAuth0Angular(state) {
     // Update app.html
     const appHtmlPath = path.join(appDir, 'app.html');
     if (fs.existsSync(appHtmlPath)) {
-      const appHtml = `<main class="relative flex min-h-screen flex-col items-center justify-center p-8 sm:p-24 overflow-hidden
+      const appHtml = (useTailwind) ? `<main class="relative flex min-h-screen flex-col items-center justify-center p-8 sm:p-24 overflow-hidden
 bg-[#0f0f0f]
 bg-[radial-gradient(#ff4d5c22_1px,transparent_1px)]
 bg-[length:20px_20px] z-0">
@@ -337,7 +338,7 @@ bg-[length:20px_20px] z-0">
 
 <!-- Content: only show when authenticated -->
 <ng-container *ngIf="auth.isAuthenticated$ | async; else showSignIn">
-    <auth-button style="position: absolute; top:15px;left:15px"></auth-button>
+    <auth-button style="position: absolute; top:15px;right:15px"></auth-button>
     <div class="z-10 max-w-6xl w-full text-center">
       <h1 class="text-5xl sm:text-6xl font-extrabold mb-6 text-white drop-shadow-xl typewriter-text p-2">
         Welcome to <span class="text-[#dd0031]">HackPack</span>
@@ -459,13 +460,51 @@ bg-[length:20px_20px] z-0">
   
 </main>
 
+<ngx-sonner-toaster position="bottom-right" />`: `
+<main class="main-container">
+
+  <!-- Angular Glow Orbs -->
+  <div class="glow-orb orb1"></div>
+  <div class="glow-orb orb2"></div>
+  <div class="glow-orb orb3"></div>
+  <div class="content">
+    <h1 class="heading typewriter-text ">
+      Welcome to <span class="brand-name">HackPack</span>
+    </h1>
+
+    <p class="subtext">
+      Harness the power of Angular, styled with class. 💫<br />
+      This project is wired with Angular, CSS & automation.
+    </p>
+
+    <button class="toast-button"
+      (click)="toast('🎉 Welcome aboard! HackPack is ready to accelerate your development journey.')">
+      Launch a toast notification
+    </button>
+
+    <ng-container *ngIf="auth.isAuthenticated$ | async; else showSignIn">
+      <div class="auth-wrapper">
+        <auth-button></auth-button>
+      </div>
+    </ng-container>
+
+    <ng-template #showSignIn>
+      <router-outlet></router-outlet>
+    </ng-template>
+    <p class="start-hint">
+      Start building from <code class="code-snippet">src/app/app.component.ts or src/app/app.ts</code>
+    </p>
+
+  </div>
+
+</main>
 <ngx-sonner-toaster position="bottom-right" />`;
       fs.writeFileSync(appHtmlPath, appHtml);
     }
 
     const appCssPath = path.join(appDir, 'app.css');
     if (fs.existsSync(appCssPath)) {
-      const appCss = `@keyframes typing {
+      const appCss = (useTailwind)?`@keyframes typing {
   from {
     width: 0;
   }
@@ -484,8 +523,214 @@ bg-[length:20px_20px] z-0">
   overflow: hidden;
   border-right: 0.15em solid white;
   white-space: nowrap;
+  margin:0 auto;
+  margin-bottom:1.5rem;
   animation: typing 3.5s steps(30, end), blink 0.75s step-end infinite;
 }
+`:`
+
+@keyframes blink {
+  50% {
+    border-color: transparent;
+  }
+}
+
+.typewriter-text {
+  overflow: hidden;
+  border-right: 0.15em solid white;
+  white-space: nowrap;
+  animation: typing 3.5s steps(30, end), blink 0.75s step-end infinite;
+}
+
+
+body, html {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  background-color: #0f0f0f;
+  font-family: sans-serif;
+}
+
+.main-container {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  overflow: hidden;
+  background-color: #0f0f0f;
+  background-image: radial-gradient(#ff4d5c22 1px, transparent 1px);
+  background-size: 20px 20px;
+  z-index: 0;
+}
+
+/* Angular Glow Orbs */
+.glow-orb {
+  position: absolute;
+  background-color: #dd0031;
+  border-radius: 9999px;
+  pointer-events: none;
+  animation-name: float;
+  animation-timing-function: ease-in-out;
+  animation-iteration-count: infinite;
+}
+
+.orb1 {
+  width: 24rem;
+  height: 24rem;
+  top: 33%;
+  left: 20%;
+  opacity: 0.25;
+  filter: blur(48px);
+  animation-duration: 8s;
+}
+
+.orb2 {
+  width: 20rem;
+  height: 20rem;
+  top: 25%;
+  right: 25%;
+  opacity: 0.20;
+  filter: blur(32px);
+  animation-duration: 10s;
+  animation-delay: 0.2s;
+}
+
+.orb3 {
+  width: 18rem;
+  height: 18rem;
+  bottom: 25%;
+  left: 50%;
+  opacity: 0.15;
+  filter: blur(32px);
+  animation-duration: 12s;
+  animation-delay: 0.5s;
+}
+
+@keyframes float {
+  0% {
+    transform: translate(0px, 0px);
+  }
+  50% {
+    transform: translate(20px, -30px);
+  }
+  100% {
+    transform: translate(0px, 0px);
+  }
+}
+
+
+.content {
+  max-width: 64rem;
+  width: 100%;
+  text-align: center;
+  z-index: 10;
+}
+
+.heading {
+  font-size: 3.5rem;
+  font-weight: 800;
+  margin-bottom: 1.5rem;
+  color: white;
+  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
+  margin: 0 auto;
+}
+
+.brand-name {
+  color: #dd0031;
+}
+
+.subtext {
+  font-size: 1.25rem;
+  color: #e9d5ff;
+  margin-bottom: 2rem;
+}
+
+.toast-button {
+  background-color: #dd0031;
+  color: white;
+  font-weight: 600;
+  padding: 0.75rem 1.5rem;
+  border: none;
+  border-radius: 0.5rem;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+}
+
+.toast-button:hover {
+  background-color: #c3002f;
+}
+
+.start-hint {
+  margin-top: 3rem;
+  font-size: 0.9rem;
+  color: #ddd6fe;
+}
+
+.code-snippet {
+  font-family: monospace;
+  background-color: #6b21a8;
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.375rem;
+}
+
+@keyframes typing {
+  from {
+    width: 0;
+  }
+  to {
+    width: 100%;
+  }
+}
+
+@keyframes blink {
+  50% {
+    border-color: transparent;
+  }
+}
+
+.typewriter-text {
+  overflow: hidden;
+  border-right: 0.15em solid white;
+  white-space: nowrap;
+  animation: typing 3.5s steps(30, end), blink 0.75s step-end infinite;
+}
+.auth-wrapper {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  padding: 6px 10px;
+
+  background: rgba(255, 255, 255, 0.12);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+
+  border-radius: 999px;
+  box-shadow:
+    0 8px 30px rgba(0, 0, 0, 0.25),
+    inset 0 0 0 1px rgba(255, 255, 255, 0.15);
+
+  transition: transform 0.25s ease, box-shadow 0.25s ease;
+  z-index: 50;
+}
+
+.auth-wrapper:hover {
+  transform: translateY(-2px);
+  box-shadow:
+    0 12px 40px rgba(0, 0, 0, 0.35),
+    inset 0 0 0 1px rgba(255, 255, 255, 0.25);
+}
+
+/* If auth-button renders a button internally */
+.auth-wrapper button {
+  background: transparent;
+  color: #fff;
+  border: none;
+  font-weight: 500;
+  cursor: pointer;
+}
 `;
       fs.writeFileSync(appCssPath, appCss);
     }