Skip to content

Commit 6ab2b34

Browse files
MaidaFarooqi9MaidaFarooqi9
authored
Add files via upload
0 parents  commit 6ab2b34

File tree

5 files changed

+296
-0
lines changed

5 files changed

+296
-0
lines changed

‎auth.component.css‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
.form{
2+
background-color: lime;
3+
margin:28 20 28 20;
4+
height:40%;
5+
6+
}
7+
.input-field{
8+
color:indigo;
9+
10+
}
11+
.input{
12+
text-align: center;
13+
background-color: beige;
14+
}

‎auth.component.html‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<ActionBar
2+
[title]="isLogin ? 'Login' : 'Signup'"
3+
[showBackButton]="false"
4+
[hasMenu]="false"
5+
></ActionBar>
6+
<StackLayout class="form" [formGroup]="form">
7+
<StackLayout class="input-field">
8+
<Label
9+
class="label"
10+
text="E-Mail"
11+
[ngClass]="{ invalid: !emailControlIsValid }"
12+
></Label>
13+
<TextField
14+
class="input"
15+
returnKeyType="next"
16+
keyboardType="email"
17+
[autocorrect]="false"
18+
autocapitalizationType="none"
19+
formControlName="email"
20+
#emailEl
21+
></TextField>
22+
<Label
23+
*ngIf="!emailControlIsValid"
24+
text="Please enter a valid email."
25+
></Label>
26+
</StackLayout>
27+
<StackLayout class="input-field">
28+
<Label
29+
class="label"
30+
text="Password"
31+
[ngClass]="{ invalid: !passwordControlIsValid }"
32+
></Label>
33+
<TextField
34+
class="input" #passwordEl
35+
returnKeyType="done"
36+
[autocorrect]="false"
37+
autocapitalizationType="none"
38+
[secure]="true"
39+
hint="Min 6 characters"
40+
formControlName="password"
41+
(returnPress)="onDone()"
42+
43+
></TextField>
44+
<Label
45+
*ngIf="!passwordControlIsValid"
46+
text="Must be 6+ characters long."
47+
></Label>
48+
</StackLayout>
49+
<Button
50+
class="btn btn-flat"
51+
[text]="isLogin ? 'Signup instead' : 'Login instead'"
52+
(tap)="onSwitch()"
53+
></Button>
54+
<Button
55+
[text]="isLogin ? 'Login' : 'Signup'"
56+
class="btn btn-primary btn-rounded-lg"
57+
(tap)="onSubmit()"
58+
[isEnabled]="form.valid"
59+
*ngIf="!isLoading";
60+
></Button>
61+
<ActivityIndicator [busy]="isLoading"></ActivityIndicator>
62+
</StackLayout>

‎auth.component.ts‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
2+
import { FormGroup, FormControl, Validators } from '@angular/forms';
3+
import { RouterExtensions } from 'nativescript-angular/router';
4+
import { TextField } from 'tns-core-modules/ui/text-field';
5+
6+
import { AuthService } from './auth.service';
7+
8+
@Component({
9+
selector: 'ns-auth',
10+
templateUrl: './auth.component.html',
11+
styleUrls: ['./auth.component.css'],
12+
moduleId: module.id
13+
})
14+
export class AuthComponent implements OnInit {
15+
form: FormGroup;
16+
emailControlIsValid = true;
17+
passwordControlIsValid = true;
18+
isLogin = true;
19+
isLoading=false;
20+
@ViewChild('passwordEl',{static:false})passwordEl: ElementRef<TextField>;
21+
@ViewChild('emailEl',{static:false})emailEl: ElementRef<TextField>;
22+
23+
constructor(private router: RouterExtensions, private authService: AuthService) {}
24+
25+
ngOnInit() {
26+
this.form = new FormGroup({
27+
email: new FormControl(null, {
28+
updateOn: 'blur',
29+
validators: [Validators.required, Validators.email]
30+
}),
31+
password: new FormControl(null, {
32+
updateOn: 'blur',
33+
validators: [Validators.required, Validators.minLength(6)]
34+
})
35+
});
36+
37+
this.form.get('email').statusChanges.subscribe(status => {
38+
this.emailControlIsValid = status === 'VALID';
39+
});
40+
41+
this.form.get('password').statusChanges.subscribe(status => {
42+
this.passwordControlIsValid = status === 'VALID';
43+
});
44+
}
45+
46+
onSubmit() {
47+
this.emailEl.nativeElement.focus();
48+
this.passwordEl.nativeElement.focus();
49+
this.passwordEl.nativeElement.dismissSoftInput();
50+
51+
if (!this.form.valid) {
52+
return;
53+
}
54+
55+
const email = this.form.get('email').value;
56+
const password = this.form.get('password').value;
57+
this.form.reset();
58+
this.emailControlIsValid = true;
59+
this.passwordControlIsValid = true;
60+
61+
this.isLoading=true;
62+
if (this.isLogin) {
63+
console.log('Logging in...');
64+
this.authService.login(email,password).subscribe(resData=>{ this.router.navigate(['/sidedrawer']);});
65+
this.isLoading=false;
66+
} else {
67+
this.authService.signUp(email, password).subscribe(resData=>{ this.router.navigate(['/sidedrawer']);
68+
},err =>{
69+
console.log(err);
70+
this.isLoading=false;
71+
}
72+
73+
74+
);
75+
this.isLoading=false;
76+
77+
}
78+
79+
}
80+
81+
onDone() {
82+
this.emailEl.nativeElement.focus();
83+
this.passwordEl.nativeElement.focus();
84+
this.passwordEl.nativeElement.dismissSoftInput();
85+
}
86+
87+
onSwitch() {
88+
this.isLogin = !this.isLogin;
89+
}
90+
}

‎auth.service.ts‎

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
import { Injectable } from '@angular/core';
2+
import { HttpClient } from '@angular/common/http';
3+
import { catchError ,tap} from 'rxjs/operators';
4+
import { throwError, BehaviorSubject } from 'rxjs';
5+
import {User} from './user.model';
6+
7+
const FIREBASE_API_KEY = 'AIzaSyATF_8gCXQ5VuUuMkRJRo7JI4_ySFFiexM';//settings->webAPI
8+
9+
10+
11+
12+
13+
interface AuthResponseData {
14+
kind: string;
15+
idToken: string;
16+
email: string;
17+
refreshToken: string;
18+
expiresIn: string;
19+
localId: string;
20+
registered?: boolean;
21+
}
22+
23+
@Injectable({ providedIn: 'root' })
24+
export class AuthService {
25+
26+
private _user=new BehaviorSubject<User>(null);
27+
constructor(private http: HttpClient) {}
28+
29+
signUp(email: string, password: string) {
30+
return this.http //add return so that you can subscribe in comp.ts file
31+
.post<AuthResponseData>(
32+
` https://identitytoolkit.googleapis.com/v1/accounts:signUp?key=${FIREBASE_API_KEY}`,
33+
{ email: email, password: password, returnSecureToken: true }
34+
).pipe(catchError(errRes=>{
35+
this.handleError(errRes.error.error.message);
36+
return throwError(errRes);
37+
}),tap(resData => {
38+
if (resData && resData.idToken) {
39+
40+
this.handleLogin(
41+
email,
42+
resData.idToken,
43+
resData.localId,
44+
parseInt(resData.expiresIn)
45+
);
46+
}
47+
48+
}) );
49+
/*.subscribe(resData => {
50+
console.log(resData);
51+
}); remove this bec we weill subscribe after successful llogin and signup in comp.ts */
52+
}
53+
get user(){
54+
return this._user.asObservable();
55+
}
56+
57+
58+
59+
login(email: string, password: string) {
60+
return this.http
61+
.post<AuthResponseData>(
62+
`https://identitytoolkit.googleapis.com/v1/accounts:signInWithPassword?key=${FIREBASE_API_KEY}`,
63+
{ email: email, password: password, returnSecureToken: true }
64+
).pipe(catchError(errRes=>{
65+
66+
this.handleError(errRes.error.error.message);
67+
return throwError(errRes);}),tap(resData => {
68+
if (resData && resData.idToken) {
69+
70+
this.handleLogin(
71+
email,
72+
resData.idToken,
73+
resData.localId,
74+
parseInt(resData.expiresIn)
75+
);
76+
77+
// paste in handleLogin const expirydate= new Date(new Date().getTime()+parseInt(resData.expiresIn)*(1000));
78+
//const user=new User(email,resData.localId,resData.idToken,expirydate);
79+
//this._user.next(user);//const user wala user
80+
}
81+
82+
}
83+
))
84+
/* .subscribe(resData => {
85+
console.log(resData);
86+
});*/
87+
}
88+
89+
90+
91+
92+
private handleLogin(
93+
email: string,
94+
token: string,
95+
userId: string,
96+
expiresIn: number
97+
) {
98+
const expirationDate = new Date(new Date().getTime() + expiresIn * 1000);
99+
const user = new User(email, userId, token, expirationDate);
100+
this._user.next(user);
101+
}
102+
103+
private handleError (errorMessage:string){
104+
105+
106+
switch(errorMessage){
107+
case 'EMAIL-EXISTS':
108+
alert('email already exists');
109+
break;
110+
case 'INVALID-PASSWORD':
111+
alert('Password is incorrect');
112+
default:
113+
alert('enter correct information');
114+
}
115+
116+
}
117+
118+
}

‎user.model.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
export class User {
2+
constructor(
3+
public email: string,
4+
public id: string,
5+
private _token: string,
6+
private _tokenExpirationDate: Date
7+
) {}
8+
9+
get token() {
10+
return this._token;
11+
}
12+
}

0 commit comments

Comments
 (0)