Adminor - Angular Admin & Dashboard Template

Note:-

Please refer Faq's page in documentation itself for queries of customization like colors,rtl ,dark,transparent styles,etc..

Firebase SetUp

step-1: Now run below commands inside our angular 15 project to install firebase.

npm install firebase @angular/fire --save 
							
step-2: Now we need to add firebase configuration details(create database on firebase) and we need to add that details in  ( Adminor/src/environments/environment.ts ) file:
export const environment = {
production: false,
firebaseConfig : {
  apiKey: "***",
  authDomain: "***",
  databaseURL: "***",
  projectId: "***",
  storageBucket: "***",
  messagingSenderId: "***",
  appId: "***",
  measurementId: "***"
}
};
							
And also include them in ( Adminor/src/environments/environment-prod.ts ) file:
export const environment = {
production: true,
firebaseConfig : {
	apiKey: "***",
	authDomain: "***",
	databaseURL: "***",
	projectId: "***",
	storageBucket: "***",
	messagingSenderId: "***",
	appId: "***",
	measurementId: "***"
}
};
							
step-3: . Now we nee to add or replace below code into our ( Adminor/src/app/app.module.ts) file:

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { environment } from 'src/environments/environment';
import { AngularFireModule } from '@angular/fire/compat';
import { AngularFirestoreModule } from '@angular/fire/compat/firestore';
import { AngularFireAuthModule } from '@angular/fire/compat/auth';

imports:[
...
BrowserAnimationsModule, // required animations module
AngularFireModule.initializeApp(environment.firebase),
AngularFirestoreModule,
AngularFireAuthModule
]

							

Process to remove firebase from project:
-------------------------------

To remove firebase from the project make sure that you have to remove the auth.service.ts file in src/app/shared/service/firebase/ and make below changes in login.component.ts in src/app/auth/.

In login.component.ts replace login function with 
login(){
if (this.loginForm.controls['email'].value === "spruko@template.com" && this.loginForm.controls['password'].value === "spruko")
{
  this.router.navigate(['/dashboard/sales-dashboard']);
}
}
or else you can use any other authentication as per your requirement.

And make sure to remove canActivate: [AdminGuard] from app-routing.module.ts.
Remove the firebase-related content in app.module.ts, environment.

Note: make sure to remove all AuthService from the project which can be found in the switcher, header, authentication, ect..

Important License Terms
  • You cannot charge from your end product end users with a Regular License.
  • If you want to collect payments from end product end users then you must buy an Extended License for each of the end product.
  • You must buy one license for one domain only.(i.e Either Regular or Extended)
  • You cannot use Multi Domain,Multi Client, Multiple end Products with any of the licenses (i.e Either Regular or Extended).

for more details please click the link

Firebase SetUp

step-1: Now run below commands inside our React project to install firebase latest.

npm install firebase --save 
									

step-2: Now we need to add firebase configuration details(create database on firebase) and we need to add that details in sash/src/firebase/firebase.tsx file:

 const firebaseConfig = {
apiKey: "***",
authDomain: "***",
projectId: "***",
storageBucket: "***",
messagingSenderId: "***",
appId: "***",
measurementId: "***",
};
const firebaseApp = firebase.initializeApp(firebaseConfig);

const db = firebaseApp.firestore();
const auth = firebase.auth();

export { db, auth }
Firebase SetUp Remove

step-1: we have to remove firebase flie src/Firebase/firebase.tsx

 const firebaseConfig = {
apiKey: "***",
authDomain: "***",
projectId: "***",
storageBucket: "***",
messagingSenderId: "***",
appId: "***",
measurementId: "***",
};
const firebaseApp = firebase.initializeApp(firebaseConfig);

const db = firebaseApp.firestore();
const auth = firebase.auth();

export { db, auth }

step-2: Remove from the Routing file src/index.tsx


<Route path={`${process.env.PUBLIC_URL}/`} element={<Auth />}>
<Route index element={<AuthLogin />} />
<Route path={`${process.env.PUBLIC_URL}/Authentication/firebaseAuth/login`} element={<AuthLogin />} />
<Route path={`${process.env.PUBLIC_URL}/Authentication/firebaseAuth/SignUp`} element={<SignUp />} />
</Route>

step-3: Remove the path from the Header section src/Layouts/Header/Header.tsx


<Dropdown.Item className="dropdown-item" href={`${process.env.PUBLIC_URL}/Authentication/firebaseAuth/login`}>
<i className="dropdown-icon fe fe-alert-circle"></i> Sign out
</Dropdown.Item>