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

[Bijit-Mondal]

Summary of change

call /sessioninfo api from frontend in Non React framework

Checklist for important updates

• Had run npm run build-pretty
• Had installed and ran the pre-commit hook

[graphite-app]

The Angular imports need to be properly capitalized to match the actual class names in the framework. Please update:

import { afterviewinit, component } from "@angular/core";
import { httpclient } from "@angular/common/http";

to:

import { AfterViewInit, Component } from "@angular/core";
import { HttpClient } from "@angular/common/http";

Angular's TypeScript imports are case-sensitive, and using incorrect casing will cause compilation errors.

Suggested change

	import { afterviewinit, component } from "@angular/core";
	import { httpclient } from "@angular/common/http";
	import { AfterViewInit, Component } from "@angular/core";
	import { HttpClient } from "@angular/common/http";

Spotted by Diamond

Is this helpful? React 👍 or 👎 to let us know.

[graphite-app]

The Angular decorator properties should maintain proper camelCase naming convention. Please update templateurl to templateUrl and styleurls to styleUrls to ensure the component works correctly. There appear to be several other instances of incorrect casing in this file as well (like component instead of Component, afterviewinit instead of AfterViewInit), which should also be fixed to prevent runtime errors.

Suggested change

	templateurl: "./home.component.html",
	styleurls: ["./home.component.css"],
	templateUrl: "./home.component.html",
	styleUrls: ["./home.component.css"],

Spotted by Diamond

Is this helpful? React 👍 or 👎 to let us know.

[graphite-app]

The class name and interface should maintain proper casing to match Angular conventions. Please update homecomponent to HomeComponent and afterviewinit to AfterViewInit to align with the import statement and standard Angular naming practices.

Suggested change

	export class homecomponent implements afterviewinit {
	export class HomeComponent implements AfterViewInit {

Spotted by Diamond

Is this helpful? React 👍 or 👎 to let us know.

[graphite-app]

The property names rootid and userid need to maintain their original camel case format (rootId and userId) to match the template bindings in the HTML file. The current lowercase naming will cause Angular template binding errors since the HTML template references the camel-cased versions.

Suggested change

	public rootid = "rootid";
	public userid = "";
	public rootId = "rootid";
	public userId = "";

Spotted by Diamond

Is this helpful? React 👍 or 👎 to let us know.

[graphite-app]

The method names should follow Angular's naming conventions: ngAfterViewInit() with proper camelCase capitalization to match the Angular lifecycle hook interface, and getUserInfo() to maintain consistency with the original implementation. Angular is case-sensitive for lifecycle hooks, and incorrect casing will prevent the hook from being properly recognized.

Suggested change

	ngafterviewinit() {
	this.getuserinfo();
	ngafterviewinit() {
	this.getuserinfo();

Spotted by Diamond

Is this helpful? React 👍 or 👎 to let us know.

[graphite-app]

The JavaScript global object name should be capitalized as JSON.stringify() rather than json.stringify(). This is a case-sensitivity issue that would cause a runtime error.

Suggested change

	alert(json.stringify(data, null, 2));
	alert(JSON.stringify(data, null, 2));

Spotted by Diamond

Is this helpful? React 👍 or 👎 to let us know.

[graphite-app]

There's a case mismatch in the method name and Session import usage. The method should be `onLogout()` (capital L) and use `Session.signOut()` to match both the template binding in the HTML (`(click)="onLogout()"`) and the import statement. Currently, Angular won't be able to find the method when the button is clicked.

Suggested change

	async onlogout() {
	await session.signout();
	async onLogout() {
	await Session.signOut();

Spotted by Diamond

Is this helpful? React 👍 or 👎 to let us know.

[graphite-app]

The method name redirecttologin() doesn't match the HTML template binding in home.component.html which uses camelCase (redirectToLogin). This naming inconsistency will cause the button click handler to fail. Please update either the method name or the template binding to ensure they match using proper camelCase convention.

Suggested change

	redirecttologin() {
	redirectToLogin() {

Spotted by Diamond

Is this helpful? React 👍 or 👎 to let us know.