UI Update

4 years ago · 69efc22a50
3 changed files with 66 additions and 69 deletions
--- a/Angular-UrbanBazaar/src/app/auth/login/login.component.css
+++ b/Angular-UrbanBazaar/src/app/auth/login/login.component.css
@ -3,10 +3,19 @@ body {
    padding: 10px 10px 10px 10px;
 }
 .login-main{
 .login-main {
    margin-top: 10%;
 }
 mat-card{
 mat-card {
    min-width: 30%;
    max-width: 50%;
 }
 .main-div {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
 }
--- a/Angular-UrbanBazaar/src/app/auth/login/login.component.html
+++ b/Angular-UrbanBazaar/src/app/auth/login/login.component.html
@ -1,43 +1,34 @@
 <body>
  <div fxLayout="column" fxLayoutAlign="space-around center"     class="login-main">
      <mat-card >   
        &nbsp;&nbsp;   &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; 
  <h2  style="color:darkblue;">
  &nbsp; &nbsp;&nbsp;  &nbsp;&nbsp;  &nbsp;&nbsp;  Welcome to  Urban Bazaar !!!
    </h2>
    <div style="text-align:center;"><img src="/assets/Images/Logo.png" alt="Logo"></div>
    <mat-card-header>
      <mat-card-title>Login Page</mat-card-title>
    </mat-card-header>
    <mat-card-content fxLayout="column">
      <mat-form-field>
        <input matInput placeholder="Username" 
        [formControl]="username">
      </mat-form-field>
      <mat-form-field>
        <input type="password" matInput placeholder="password"
        [formControl]="password">
      </mat-form-field>
    </mat-card-content>
    <!-- <div style="text-align:left;">
      <a  [routerLink]="['signup']">SignUp</a> 
     </div> -->
    <mat-card-actions align="end">
      <button mat-raised-button color="primary" (click)="signup()">Signup</button>
       <p style="color: darkblue;" >OR &nbsp;</p>
      <button mat-raised-button color="primary" (click)="userLogin()">Login</button>
    </mat-card-actions>
    </mat-card>
 <!-- </div>
 <div style="text-align:center;">
  <a  [routerLink]="['signup']">SignUp</a> 
 </div> -->
 <!-- <div style="text-align:center;">
  <a  [routerLink]="['user-profile-details']">user details</a> 
 </div>
    <div class="main-div">
        <mat-card>
            <mat-card-header>
                <mat-card-title>Welcome to Urban Bazaar !!!</mat-card-title>
            </mat-card-header>
 <div style="text-align:center;">
  <a  [routerLink]="['memberlist']">memberlist</a> 
 </div>
 </body>  --> 
            <div style="text-align: center">
                <img src="/assets/Images/Logo.png" alt="Logo" />
            </div>
            <mat-card-content fxLayout="column">
                <mat-form-field>
                    <input matInput placeholder="Username" [formControl]="username" />
                </mat-form-field>
                <mat-form-field>
                    <input type="password" matInput placeholder="Password" [formControl]="password" />
                </mat-form-field>
                <span style="color: red;">{{errorMessage}}</span>
                <button mat-raised-button color="primary" (click)="userLogin()">
                    Login
                </button>
                <a href="#" style="text-align: center; padding-top: 8px;">Forgotten password?</a>
            </mat-card-content>
            <mat-divider></mat-divider>
            <mat-card-actions>
                <button mat-raised-button color="primary" (click)="signup()">
                    Create a new Account
                </button>
            </mat-card-actions>
        </mat-card>
    </div>
 </body>
--- a/Angular-UrbanBazaar/src/app/auth/login/login.component.ts
+++ b/Angular-UrbanBazaar/src/app/auth/login/login.component.ts
@ -10,41 +10,38 @@ import { UserService } from 'src/app/services/user.service';
@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
  styleUrls: ['./login.component.css'],
 })
 export class LoginComponent implements OnInit {
  username = new FormControl();
  password = new FormControl();
  responseMessage : string = "";
  temp : Observable<User>;
  // temp : User;
  // temps : Observable<string>;
  // userList : Observable<User[]>;
 signup(){
  this.router.navigateByUrl('/signup')
 }
  constructor(private _userService : UserService, private router : Router) {}
  responseMessage: string = '';
  temp: Observable<User>;
  errorMessage: string = '';
  constructor(private _userService: UserService, private router: Router) {}
  signup() {
    this.router.navigateByUrl('/signup');
  }
  userLogin() {
    // alert(this.username.value+" | "+this.password.value);
    let user : Login = {
    let user: Login = {
      userfirstname: this.username.value,
      userpassword: this.password.value
    }
      userpassword: this.password.value,
    };
    this.temp = this._userService.findUserByUsername(this.username.value);
    this.temp.subscribe(v => {
      if(v.userpassword == this.password.value)
     { this.temp.subscribe(v => this._userService.currentUser = v);
      this.router.navigateByUrl('/home');
      alert("Login Successfull !!")}
      else
      alert("Login falied !!");
    this.temp.subscribe((v) => {
      if (v.userpassword == this.password.value) {
        this.temp.subscribe((v) => (this._userService.currentUser = v));
        this.router.navigateByUrl('/home');
        alert('Login Successfull !!');
      } else {
        this.errorMessage = 'Wrong Password.';
        alert('Login falied !!');
      }
    });
  }
  ngOnInit(): void {
  }
  ngOnInit(): void {}
 }