enhancement: added call to /sessioninfo api from frontend in Non React framework

boilerplate/frontend/angular-prebuilt/src/app/home/home.component.css

@@ -6,39 +6,45 @@
     align-items: center;
     height: 100vh;
 }
+
 .user {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     align-items: baseline;
     padding: 0.1rem;
 }
+
 span {
     margin-right: 0.3rem;
     font-size: large;
 }
+
 h3 {
-    color: #ff3e00;
+    color: #ff7547;
 }
+
 h1 {
-    color: #ff3e00;
+    color: #ff7547;
     text-transform: uppercase;
     font-size: 4em;
     font-weight: 100;
 }
-button {
-    cursor: pointer;
-    background-color: #ffb399;
+
+.btn {
     border: none;
-    color: rgb(82, 82, 82);
-    padding: 0.75rem;
-    margin: 2rem;
-    transition: all 0.5s ease-in-out;
-    border-radius: 2rem;
+    padding: 8px;
+    border-radius: 6px;
+    cursor: pointer;
+    color: #fff;
+    transition: all 0.2s ease-in;
+    background-color: #ff7547;
     font-size: large;
 }
-button:hover {
-    transform: scale(1.1);
-    background-color: #ff3e00;
-    color: white;
+.btn:hover {
+    box-shadow: 0 8px 25px -8px #ffb399;
+}
+.session__btn {
+    display: flex;
+    justify-content: space-around;
 }

boilerplate/frontend/angular-prebuilt/src/app/home/home.component.html

@@ -5,10 +5,13 @@ <h1>Hello</h1>
         <span>UserId:</span>
         <h3>{{ userId }}</h3>
 
-        <button (click)="onLogout()">Sign Out</button>
+        <div class="session__btn">
+            <button class="btn" (click)="callApi()">Call API</button>
+            <button class="btn" (click)="onLogout()">Sign Out</button>
+        </div>
     </div>
     <p>Visit the <a href="https://supertokens.com">SuperTokens tutorial</a> to learn how to build Auth under a day.</p>
     <ng-template #elseBlock>
-        <button (click)="redirectToLogin()">Sign in</button>
+        <button class="btn" (click)="redirectToLogin()">Sign in</button>
     </ng-template>
 </div>

boilerplate/frontend/angular-prebuilt/src/app/home/home.component.ts

@@ -1,36 +1,48 @@
-import { AfterViewInit, Component } from "@angular/core";
+import { afterviewinit, component } from "@angular/core";
+import { httpclient } from "@angular/common/http";
 
-import * as Session from "supertokens-web-js/recipe/session";
+import * as session from "supertokens-web-js/recipe/session";
 
-@Component({
+@component({
     selector: "app-home",
-    templateUrl: "./home.component.html",
-    styleUrls: ["./home.component.css"],
+    templateurl: "./home.component.html",
+    styleurls: ["./home.component.css"],
 })
-export class HomeComponent implements AfterViewInit {
+export class homecomponent implements afterviewinit {
     title = "angularapp";
 
-    public rootId = "rootId";
-    public userId = "";
+    public rootid = "rootid";
+    public userid = "";
     public session = false;
 
-    ngAfterViewInit() {
-        this.getUserInfo();
+    constructor(private http: httpclient) {}
+
+    ngafterviewinit() {
+        this.getuserinfo();
     }
 
-    async getUserInfo() {
-        this.session = await Session.doesSessionExist();
+    async getuserinfo() {
+        this.session = await session.doessessionexist();
         if (this.session) {
-            this.userId = await Session.getUserId();
+            this.userid = await session.getuserid();
         }
     }
-
-    async onLogout() {
-        await Session.signOut();
+    async callapi() {
+        this.http.get("http://localhost:3001/sessioninfo").subscribe(
+            (data: any) => {
+                alert(json.stringify(data, null, 2));
+            },
+            (error: any) => {
+                alert(`failed to fetch session info: ${error.message}`);
+            }
+        );
+    }
+    async onlogout() {
+        await session.signout();
         window.location.reload();
     }
 
-    redirectToLogin() {
+    redirecttologin() {
         window.location.href = "auth";
     }
 }

boilerplate/frontend/angular-prebuilt/src/app/home/home.module.ts

@@ -1,11 +1,12 @@
 import { NgModule } from "@angular/core";
 import { CommonModule } from "@angular/common";
+import { HttpClientModule } from "@angular/common/http";
 
 import { HomeRoutingModule } from "./home-routing.module";
 import { HomeComponent } from "./home.component";
 
 @NgModule({
     declarations: [HomeComponent],
-    imports: [CommonModule, HomeRoutingModule],
+    imports: [CommonModule, HomeRoutingModule, HttpClientModule],
 })
 export class HomeModule {}

boilerplate/frontend/vue-prebuilt/src/views/HomeView.vue

@@ -13,8 +13,24 @@ export default defineComponent({
     this.getUserInfo();
   },
   methods: {
-    redirectToLogin() {
-      window.location.href = "/auth";
+    async callApi() {
+      try {
+        const response = await fetch("http://localhost:3001/sessioninfo", {
+          method: "GET",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
+
+        if (!response.ok) {
+          throw new Error(`Error: ${response.status}`);
+        }
+
+        const data = await response.json();
+        alert(JSON.stringify(data, null, 2));
+      } catch (error) {
+        alert(`Failed to fetch session info: ${error}`);
+      }
     },
     async getUserInfo() {
       this.session = await Session.doesSessionExist();
@@ -39,15 +55,20 @@ export default defineComponent({
         <span>UserId:</span>
         <h3>{{ userId }}</h3>
 
-        <button @click="onLogout">Sign Out</button>
+        <div class="session__btn">
+          <button class="btn" @click="callApi">Call API</button>
+          <button class="btn" @click="onLogout">Sign Out</button>
+        </div>
       </div>
       <div v-else>
         <p>
           Visit the
           <a href="https://supertokens.com">SuperTokens tutorial</a> to learn
           how to build Auth under a day.
         </p>
-        <button @click="redirectToLogin">Sign in</button>
+        <router-link to="/auth">
+          <button class="btn">Sign in</button>
+        </router-link>
       </div>
     </div>
   </main>
@@ -76,31 +97,31 @@ span {
 }
 
 h3 {
-  color: #ff3e00;
+  color: #ff7547;
 }
 
 h1 {
-  color: #ff3e00;
+  color: #ff7547;
   text-transform: uppercase;
   font-size: 4em;
   font-weight: 100;
 }
 
-button {
-  cursor: pointer;
-  background-color: #ffb399;
+.btn {
   border: none;
-  color: rgb(82, 82, 82);
-  padding: 0.75rem;
-  margin: 2rem;
-  transition: all 0.5s ease-in-out;
-  border-radius: 2rem;
+  padding: 8px;
+  border-radius: 6px;
+  cursor: pointer;
+  color: #fff;
+  transition: all 0.2s ease-in;
+  background-color: #ff7547;
   font-size: large;
 }
-
-button:hover {
-  transform: scale(1.1);
-  background-color: #ff3e00;
-  color: white;
+.btn:hover {
+  box-shadow: 0 8px 25px -8px #ffb399;
+}
+.session__btn {
+  display: flex;
+  justify-content: space-around;
 }
 </style>