firebase otp and build routing issue fixed

This commit is contained in:
bitbucket 2023-04-04 14:02:17 +05:30
parent 275f1391c2
commit 20adaa2b24
12 changed files with 754 additions and 20014 deletions

20508
ng-seed/package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -18,6 +18,7 @@
"@angular/common": "^11.2.7",
"@angular/compiler": "^11.2.7",
"@angular/core": "^11.2.7",
"@angular/fire": "^6.1.5",
"@angular/flex-layout": "11.0.0-beta.33",
"@angular/forms": "^11.2.7",
"@angular/localize": "^11.2.7",
@ -30,6 +31,7 @@
"@ngx-translate/http-loader": "^6.0.0",
"@swimlane/ngx-charts": "^17.0.1",
"@swimlane/ngx-datatable": "19.0.0",
"@types/firebase": "^3.2.1",
"angular-calendar": "^0.28.22",
"angular-notifier": "^9.1.0",
"chart.js": "^2.9.4",
@ -37,6 +39,7 @@
"d3": "^6.6.1",
"date-fns": "^2.19.0",
"dragula": "^3.7.3",
"firebase": "^8.10.0",
"font-awesome": "4.7.0",
"hammerjs": "^2.0.8",
"jquery": "^3.6.0",

View File

@ -40,7 +40,14 @@ import { AppointmentService } from './appoinment/appointment.service';
import { RoleMenuItemsPipe } from './layouts/role-menu-items.pipe';
import { AuthGuard } from './_guard/auth.guard';
import { NotifierModule, NotifierOptions } from 'angular-notifier';
import { AngularFireModule } from '@angular/fire';
import { AngularFireAuthModule } from '@angular/fire/auth';
import { AngularFirestoreModule } from '@angular/fire/firestore';
import firebase from 'firebase';
import { environment } from 'environments/environment';
import { HashLocationStrategy, LocationStrategy } from '@angular/common';
firebase.initializeApp(environment.firebase);
const customNotifierOptions: NotifierOptions = {
position: {
horizontal: {
@ -107,7 +114,7 @@ const DEFAULT_PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
NotifierModule.withConfig(customNotifierOptions),
BrowserAnimationsModule,
SharedModule,
RouterModule.forRoot(AppRoutes, {scrollPositionRestoration: 'enabled'}),
RouterModule.forRoot(AppRoutes,{useHash: true}),
FormsModule,
MatSidenavModule,
MatInputModule,
@ -122,6 +129,9 @@ const DEFAULT_PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
HttpClientModule,
AppoinmentModule,
MatFormFieldModule,
AngularFireModule.initializeApp(environment.firebase),
AngularFireAuthModule,
AngularFirestoreModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
@ -144,7 +154,7 @@ const DEFAULT_PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
provide: HTTP_INTERCEPTORS,
useClass: TokenInterceptor,
multi: true
}
},{provide: LocationStrategy, useClass: HashLocationStrategy}
],
entryComponents: [],
bootstrap: [AppComponent],

View File

@ -11,7 +11,7 @@ export const AppRoutes: Routes = [{
}, {
path: '',
component: AdminLayoutComponent,
canActivateChild:[AuthGuard],
canActivateChild:[AuthGuard],
children: [{
path: 'home',
loadChildren: () => import('./dashboard/dashboard.module').then(m => m.DashboardModule)
@ -48,10 +48,17 @@ export const AppRoutes: Routes = [{
]
}, {
path: 'customer',
loadChildren: () => import('./end-user/end-user.module').then(m => m.EndUserModule)
},
{
path: '',
//component: AuthLayoutComponent,
children: [
{
path: 'customer',
loadChildren: () => import('./end-user/end-user.module').then(m => m.EndUserModule)
}
]
},{
path: '',
component: AuthLayoutComponent,

View File

@ -173,7 +173,7 @@ export class BusinessListComponent implements OnInit {
// formData.append('email', JSON.stringify(formValue[0].email));
// formData.append('contactNo', JSON.stringify(formValue[0].contactNo));
console.log(formData)
this._bus.addFormDetails(formData).subscribe(res => {
this._bus.addFormDetails(formValue[0]).subscribe(res => {
if (res.status == 200) {
// this.customersList = res.data;
this.getBusinessList()

View File

@ -1,4 +1,4 @@
<ng-scrollbar class="scrollHV">
<mat-toolbar>
<span style="text-align: center;">Appointment</span>
@ -32,9 +32,12 @@
<mat-error *ngIf="myError('phoneNo', 'required')">Phone No is required</mat-error>
<mat-error *ngIf="myError('phoneNo', 'maxlength')">Limit exceed</mat-error>
</mat-form-field>
<div id="sign-in-button"></div>
</div>
<div id="sign-in-button"></div>
<div *ngIf="verifyOTP != '1'" fxFlex.xs="20" fxFlex.sm="20" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
<button mat-raised-button (click)="getOPT(1)" color="primary" class="mr-1 mb-1">Get OTP</button>
<button mat-raised-button (click)="getOTP(1)" [disabled]="myError('phoneNo', 'minlength') || myError('phoneNo', 'required')" color="primary" class="mr-1 mb-1">Get OTP</button>
</div>
<span *ngIf="verifyOTP == '1'"><mat-icon style="color: #4CAF50;">verified</mat-icon></span>
</div>
@ -42,7 +45,7 @@
<div fxLayout="row" *ngIf="verifyOTP != '1'">
<div fxFlex.xs="80" fxFlex.sm="80" fxFlex.md="80" fxFlex.lg="80" fxFlex.xl="80">
<mat-form-field style="width: 100%">
<input matInput placeholder="Enter OTP" #otp type="text" maxlength="6">
<input matInput placeholder="Enter OTP" formControlName="otp" type="text" maxlength="6">
</mat-form-field>
</div>
<div fxFlex.xs="20" fxFlex.sm="20" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
@ -80,10 +83,22 @@
</form>
</mat-card>
</div>
<!-- <div fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="50" fxFlex.lg="50" fxFlex.xl="50" class="m-gap p-gap flx" fxLayoutAlign="end center">
<app-summary></app-summary>
</div> -->
</div>
</div>
</ng-scrollbar>
<!-- <div class="contain">
<div class="row d-flex align-items-center justify-content-center">
<form class="col-md-6">
<div class="card px-5 py-5">
<div class="form-input">
<input type="text" name="phoneNumber" placeholder="Phone Number" class="form-control"
placeholder="Enter Phone Number" [(ngModel)]="phoneNumber" min="10" max="15">
</div>
<button class="btn btn-success mt-4 signup" (click)="getOTP()">Get OTP</button> -->
<!-- </div>
</form>
</div>
-->

View File

@ -33,4 +33,41 @@ mat-toolbar{
::ng-deep body{
background-color: #f7f8f5 !important;
}
}
.card {
border: none;
padding: 20px;
background-color: #1c1e21;
color: #fff
}
.contain{
margin: 10rem 0 3rem 0;
}
.form-input {
position: relative;
margin-bottom: 10px;
margin-top: 10px
}
.form-control {
height: 50px;
background-color: #dfe7f3;
text-indent: 24px;
font-size: 15px
}
.form-control:focus {
background-color: #25272a;
box-shadow: none;
color: #fff;
border-color: #4f63e7
}
.signup {
height: 50px;
font-size: 14px
}

View File

@ -1,9 +1,21 @@
import { Component, OnInit } from '@angular/core';
import { Component, NgZone, OnInit } from '@angular/core';
import { FormBuilder, FormControl, FormGroup, RequiredValidator, Validators } from '@angular/forms';
import { Router } from '@angular/router';
import { EndUserService } from '../end-user.service';
import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore';
var config = {
apiKey: "AIzaSyBVPQ6C7cg5l8I-o7WSmmXdioMa4C0ZKNM",
authDomain: "phone-otp-5d22e.firebaseapp.com",
projectId: "phone-otp-5d22e",
storageBucket: "phone-otp-5d22e.appspot.com",
messagingSenderId: "207025211598",
appId: "1:207025211598:web:f2e4ebfb2e4ca5d5d8a89f",
measurementId: "G-LJFTVZSP38"
}
@Component({
selector: 'app-customer-info',
templateUrl: './customer-info.component.html',
@ -15,9 +27,17 @@ export class CustomerInfoComponent implements OnInit {
timeLeft: number = 0;
interval;
verifyOTP: any = 0;
constructor(private router: Router,private formBuilder: FormBuilder,public _cus:EndUserService) {}
phoneNumber: any;
reCaptchaVerifier!: any;
otp!: string;
verifykey: any;
constructor(private router: Router,private formBuilder: FormBuilder,public _cus:EndUserService, private ngZone: NgZone) {
// firebase.initializeApp(config)
}
ngOnInit() {
ngOnInit(): void {
this.form = new FormGroup({
cusName: new FormControl('', [Validators.required]),
email: new FormControl('', [Validators.required, Validators.email,Validators.pattern(
@ -26,8 +46,9 @@ export class CustomerInfoComponent implements OnInit {
address_1: new FormControl('', [Validators.maxLength(50)]),
city: new FormControl('', [Validators.maxLength(10)]),
state: new FormControl('', [Validators.maxLength(10)]),
otp: new FormControl('', [Validators.maxLength(10)]),
pincode: new FormControl('',[Validators.maxLength(6)]),
phoneNo: new FormControl('', [Validators.required, Validators.maxLength(10)]),
phoneNo: new FormControl('', [Validators.required, Validators.maxLength(10),Validators.minLength(10)]),
});
}
@ -50,15 +71,15 @@ export class CustomerInfoComponent implements OnInit {
city: row_obj.city,
};
this._cus.addCusDetails(addFormData).subscribe(res => {
if (res.status == 200) {
console.log(res)
// this._cus.addCusDetails(addFormData).subscribe(res => {
// if (res.status == 200) {
// console.log(res)
let URL = this.router.url;
console.log(URL)
this.router.navigate([URL+"/"+res['data'].id+"/pt"])
}
});
// let URL = this.router.url;
// console.log(URL)
// this.router.navigate([URL+"/"+res['data'].id+"/pt"])
// }
// });
}
@ -86,7 +107,79 @@ export class CustomerInfoComponent implements OnInit {
}
verify(event){
this.verifyOTP = event
this.verifykey = JSON.parse(localStorage.getItem('verificationId') || '{}');
console.log(this.verifykey);
this.otp = this.form.value.otp
console.log(this.otp);
var credential = firebase.auth.PhoneAuthProvider.credential(
this.verifykey,
this.otp
);
console.log(credential);
firebase
.auth()
.signInWithCredential(credential)
.then((response) => {
console.log(response);
localStorage.setItem('user_data', JSON.stringify(response));
this.ngZone.run(() => {
// this.router.navigate(['/dashboard']);
this.verifyOTP = event
});
})
.catch((error) => {
console.log(error);
alert(error.message);
});
}
getOTP(event) {
this.phoneNumber = this.form.value.phoneNo
if( this.phoneNumber.length!=10){
alert("invalid Phone No...!")
}else{
this.otpData = event
this.timeLeft = 60;
this.interval = setInterval(() => {
if(this.timeLeft > 0) {
this.timeLeft--;
} else {
clearInterval(this.interval);
}
},1000)
this.reCaptchaVerifier = new firebase.auth.RecaptchaVerifier(
'sign-in-button',
{
size: 'invisible',
}
);
console.log(this.reCaptchaVerifier);
this.phoneNumber = "+91"+this.phoneNumber;
console.log(this.phoneNumber);
firebase
.auth()
.signInWithPhoneNumber(this.phoneNumber, this.reCaptchaVerifier)
.then((confirmationResult) => {
localStorage.setItem(
'verificationId',
JSON.stringify(confirmationResult.verificationId)
);
this.ngZone.run(() => {
//this.router.navigate(['/code']);
});
})
.catch((error) => {
console.log(error.message);
alert(error.message);
setTimeout(() => {
window.location.reload();
}, 5000);
});
}
}
}

View File

@ -9,8 +9,13 @@ import { PaymentComponent } from './payment/payment.component';
import { SearchCategoryComponent } from './search-category/search-category.component';
import { ServiceListComponent } from './service-list-details/service-list.component';
import { SlotBookingDetailsComponent } from './slot-booking/slot-booking-details.component';
import { ErrorOneComponent } from 'app/error/404/error-404.component';
const routes: Routes = [
const routes: Routes = [{
path: '',
redirectTo: 'error',
pathMatch: 'full',
},
{
path: 'slot-booking',
component: SlotBookingDetailsComponent
@ -68,6 +73,10 @@ const routes: Routes = [
path: 'business/:randstr/:randstrs/practitioner/details',
component: DoctorProfileComponent
},
{
path: 'error',
component: ErrorOneComponent
},
// {
// path: 'calendar-list',

View File

@ -16,7 +16,7 @@ $main-color: #f44336;
}
.mat-card{
margin: 0px !important;
box-shadow: 0 2px 4px 0 rgb(0 0 0 / 20%) !important;
box-shadow: 0 2px 4px 0 #00000033 !important;
}
.consultant-card-cover {
// padding: 0rem 6rem;

View File

@ -2,4 +2,13 @@ export const environment = {
production: true,
environmentName: 'Production Environment',//Localhost Environment.
apiEndpoint:'http://venbainfotech.com:5000/',
firebase : {
apiKey: "AIzaSyBVPQ6C7cg5l8I-o7WSmmXdioMa4C0ZKNM",
authDomain: "phone-otp-5d22e.firebaseapp.com",
projectId: "phone-otp-5d22e",
storageBucket: "phone-otp-5d22e.appspot.com",
messagingSenderId: "207025211598",
appId: "1:207025211598:web:f2e4ebfb2e4ca5d5d8a89f",
measurementId: "G-LJFTVZSP38"
}
};

View File

@ -7,7 +7,16 @@ export const environment = {
production: false,
environmentName: 'Testing Environment',//Localhost Environment.
// apiEndpoint:'http://venbainfotech.com:5000/api/',
//apiEndpoint:'http://venbainfotech.com:5000/api/',
apiEndpoint:'http://192.168.1.20:8080/api/',
apiEndpoint:'https://api.venbait.in/api/',
// apiEndpoint:'http://192.168.1.20:8080/api/',
firebase: {
apiKey: 'AIzaSyBAJICL9s0BadjIYE0f6OCuKjJKCFRLInc',
authDomain: 'phone-auth-9c3e3.firebaseapp.com',
projectId: 'phone-auth-9c3e3',
storageBucket: 'phone-auth-9c3e3.appspot.com',
messagingSenderId: '255150664883',
appId: '1:255150664883:web:ef8f193e6a3262ab92d4c6',
},
};