Login with Firebase or Social Providers
diff --git a/src/app/login/login.scss b/src/app/login/login.component.scss
similarity index 55%
rename from src/app/login/login.scss
rename to src/app/login/login.component.scss
index d1cffff..a06c645 100644
--- a/src/app/login/login.scss
+++ b/src/app/login/login.component.scss
@@ -11,3 +11,11 @@
.error{
color: red;
}
+
+.button-container {
+ display: flex;
+ flex-direction: column;
+ button, p {
+ margin: 5px 0;
+ }
+}
diff --git a/src/app/login/login.component.spec.ts b/src/app/login/login.component.spec.ts
new file mode 100644
index 0000000..758ecd0
--- /dev/null
+++ b/src/app/login/login.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LoginComponent } from './login.component';
+
+describe('LoginComponent', () => {
+ let component: LoginComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({
+ imports: [LoginComponent]
+ });
+ fixture = TestBed.createComponent(LoginComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/login/login.component.ts b/src/app/login/login.component.ts
index d35beea..60f2da8 100644
--- a/src/app/login/login.component.ts
+++ b/src/app/login/login.component.ts
@@ -1,16 +1,25 @@
import { Component } from '@angular/core';
-import { AuthService } from '../core/auth.service'
-import { Router, Params } from '@angular/router';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { CommonModule } from '@angular/common';
+import { FormGroup, FormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
+import { Router, RouterModule } from '@angular/router';
+import { AuthService } from '../core/auth.service';
+import { AngularFireAuthModule } from "@angular/fire/compat/auth";
@Component({
- selector: 'page-login',
- templateUrl: 'login.component.html',
- styleUrls: ['login.scss']
+ selector: 'app-login',
+ standalone: true,
+ imports: [
+ CommonModule,
+ ReactiveFormsModule,
+ AngularFireAuthModule,
+ RouterModule
+ ],
+ providers: [AuthService],
+ templateUrl: './login.component.html',
+ styleUrls: ['./login.component.scss']
})
export class LoginComponent {
-
- loginForm: FormGroup;
+ loginForm!: FormGroup;
errorMessage: string = '';
constructor(
@@ -23,39 +32,41 @@ export class LoginComponent {
createForm() {
this.loginForm = this.fb.group({
- email: ['', Validators.required ],
- password: ['',Validators.required]
+ email: ['', Validators.required],
+ password: ['', Validators.required]
});
}
- tryFacebookLogin(){
+ tryFacebookLogin() {
this.authService.doFacebookLogin()
- .then(res => {
- this.router.navigate(['/user']);
- })
+ .then(res => {
+ this.router.navigate(['/user']);
+ })
}
- tryTwitterLogin(){
+ tryTwitterLogin() {
this.authService.doTwitterLogin()
- .then(res => {
- this.router.navigate(['/user']);
- })
+ .then(res => {
+ this.router.navigate(['/user']);
+ })
}
- tryGoogleLogin(){
+ tryGoogleLogin() {
this.authService.doGoogleLogin()
- .then(res => {
- this.router.navigate(['/user']);
- })
+ .then(res => {
+ this.router.navigate(['/user']);
+ })
}
- tryLogin(value){
- this.authService.doLogin(value)
- .then(res => {
- this.router.navigate(['/user']);
- }, err => {
- console.log(err);
- this.errorMessage = err.message;
- })
+ get f() { return this.loginForm.controls; }
+
+ tryLogin() {
+ this.authService.doLogin(this.f['email'].value, this.f['password'].value)
+ .then(res => {
+ this.router.navigate(['/user']);
+ }, err => {
+ console.log(err);
+ this.errorMessage = err.message;
+ })
}
}
diff --git a/src/app/register/register.component.html b/src/app/register/register.component.html
index 0ceea30..7dd45a3 100644
--- a/src/app/register/register.component.html
+++ b/src/app/register/register.component.html
@@ -1,40 +1,26 @@
diff --git a/src/app/user/user.component.scss b/src/app/user/user.component.scss
new file mode 100644
index 0000000..98e2968
--- /dev/null
+++ b/src/app/user/user.component.scss
@@ -0,0 +1,3 @@
+.image {
+ width: 70%
+}
\ No newline at end of file
diff --git a/src/app/user/user.component.spec.ts b/src/app/user/user.component.spec.ts
new file mode 100644
index 0000000..5492fa2
--- /dev/null
+++ b/src/app/user/user.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { UserComponent } from './user.component';
+
+describe('UserComponent', () => {
+ let component: UserComponent;
+ let fixture: ComponentFixtureCreate an account with Firebase or Social Providers
- ;
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({
+ imports: [RegisterComponent]
+ });
+ fixture = TestBed.createComponent(RegisterComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/register/register.component.ts b/src/app/register/register.component.ts
index 0d359b6..42a71da 100644
--- a/src/app/register/register.component.ts
+++ b/src/app/register/register.component.ts
@@ -1,18 +1,27 @@
import { Component } from '@angular/core';
-import { AuthService } from '../core/auth.service'
-import { Router, Params } from '@angular/router';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { CommonModule } from '@angular/common';
+import { FormGroup, FormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
+import { Router, RouterModule } from '@angular/router';
+import { AuthService } from '../core/auth.service';
+import { AngularFireAuthModule } from '@angular/fire/compat/auth';
@Component({
selector: 'app-register',
+ standalone: true,
+ imports: [
+ CommonModule,
+ ReactiveFormsModule,
+ AngularFireAuthModule,
+ RouterModule
+ ],
+ providers: [AuthService],
templateUrl: './register.component.html',
styleUrls: ['./register.component.scss']
})
export class RegisterComponent {
-
- registerForm: FormGroup;
- errorMessage: string = '';
- successMessage: string = '';
+ registerForm!: FormGroup;
+ errorMessage = '';
+ successMessage = '';
constructor(
public authService: AuthService,
@@ -20,50 +29,51 @@ export class RegisterComponent {
private fb: FormBuilder
) {
this.createForm();
- }
+ }
- createForm() {
- this.registerForm = this.fb.group({
- email: ['', Validators.required ],
- password: ['',Validators.required]
- });
- }
+ createForm() {
+ this.registerForm = this.fb.group({
+ email: ['', Validators.required],
+ password: ['', Validators.required]
+ });
+ }
- tryFacebookLogin(){
- this.authService.doFacebookLogin()
- .then(res =>{
- this.router.navigate(['/user']);
- }, err => console.log(err)
- )
- }
+ tryFacebookLogin() {
+ this.authService.doFacebookLogin()
+ .then(res => {
+ this.router.navigate(['/user']);
+ }, err => console.log(err)
+ );
+ }
- tryTwitterLogin(){
- this.authService.doTwitterLogin()
- .then(res =>{
- this.router.navigate(['/user']);
- }, err => console.log(err)
- )
- }
+ tryTwitterLogin() {
+ this.authService.doTwitterLogin()
+ .then(res => {
+ this.router.navigate(['/user']);
+ }, err => console.log(err)
+ );
+ }
- tryGoogleLogin(){
- this.authService.doGoogleLogin()
- .then(res =>{
- this.router.navigate(['/user']);
- }, err => console.log(err)
- )
- }
+ tryGoogleLogin() {
+ this.authService.doGoogleLogin()
+ .then(res => {
+ this.router.navigate(['/user']);
+ }, err => console.log(err)
+ );
+ }
- tryRegister(value){
- this.authService.doRegister(value)
- .then(res => {
- console.log(res);
- this.errorMessage = "";
- this.successMessage = "Your account has been created";
- }, err => {
- console.log(err);
- this.errorMessage = err.message;
- this.successMessage = "";
- })
- }
+ get f() { return this.registerForm.controls; }
+ tryRegister() {
+
+ this.authService.doRegister(this.f['email'].value, this.f['password'].value)
+ .then(res => {
+ this.errorMessage = '';
+ this.successMessage = 'Your account has been created';
+ this.authService.doLogout();
+ }, err => {
+ this.errorMessage = err.message;
+ this.successMessage = '';
+ });
+ }
}
diff --git a/src/app/user/user.component.html b/src/app/user/user.component.html
index 8c07538..5d3e829 100644
--- a/src/app/user/user.component.html
+++ b/src/app/user/user.component.html
@@ -11,16 +11,16 @@ 
-
\ No newline at end of file
diff --git a/src/app/register/register.component.scss b/src/app/register/register.component.scss
index e3d0685..f6144eb 100644
--- a/src/app/register/register.component.scss
+++ b/src/app/register/register.component.scss
@@ -1,17 +1,27 @@
-.header{
- text-align: center;
- font-size: 30px;
- margin-bottom: 40px;
+.header {
+ text-align: center;
+ font-size: 30px;
+ margin-bottom: 40px;
}
-.row{
- margin-top: 10px;
+.row {
+ margin-top: 10px;
}
-.error{
- color: red;
+.error {
+ color: red;
}
-.success{
- color: green;
+.success {
+ color: green;
}
+
+.button-container {
+ display: flex;
+ flex-direction: column;
+
+ button,
+ p {
+ margin: 5px 0;
+ }
+}
\ No newline at end of file
diff --git a/src/app/register/register.component.spec.ts b/src/app/register/register.component.spec.ts
new file mode 100644
index 0000000..8944bb3
--- /dev/null
+++ b/src/app/register/register.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RegisterComponent } from './register.component';
+
+describe('RegisterComponent', () => {
+ let component: RegisterComponent;
+ let fixture: ComponentFixture
-
+Logged User Page
{{user.name}}
-This is an example of Social Authentication using Firebase in an Angular 7 web app.
+This is an example of Social Authentication using Firebase in an Angular 16 web app.
-
- Save