diff --git a/assets/img/unnamed_14.jpg b/assets/img/unnamed_14.jpg new file mode 100644 index 0000000..fe69095 Binary files /dev/null and b/assets/img/unnamed_14.jpg differ diff --git a/frontend/main/src/app/app-routing.module.ts b/frontend/main/src/app/app-routing.module.ts index 9f061d9..af8981c 100644 --- a/frontend/main/src/app/app-routing.module.ts +++ b/frontend/main/src/app/app-routing.module.ts @@ -6,6 +6,7 @@ import { CarriersComponent } from './carriers/carriers.component'; import { CostComponent } from './cost/cost.component'; import { EditComponent } from './edit/edit.component'; import { FinanceComponent } from './finance/finance.component'; +import { ForgetPasswordComponent } from './forget-password/forget-password.component'; import { HomeComponent } from './home/home.component'; import { InsightComponent } from './insight/insight.component'; import { LoginComponent } from './login/login.component'; @@ -32,7 +33,8 @@ const routes: Routes = [ { path: 'ship-quote', component:ShipQtComponent, canActivate:[LoginserviceService]}, { path: 'recent-quote', component:RctQtComponent, canActivate:[LoginserviceService]}, { path: 'edit', component:EditComponent, canActivate:[LoginserviceService]}, - { path: 'about', component:AboutComponent, canActivate:[LoginserviceService]} + { path: 'about', component:AboutComponent, canActivate:[LoginserviceService]}, + { path: 'forgetPassword', component:ForgetPasswordComponent} ]; @NgModule({ diff --git a/frontend/main/src/app/app.component.html b/frontend/main/src/app/app.component.html index 9674227..c84d43a 100644 --- a/frontend/main/src/app/app.component.html +++ b/frontend/main/src/app/app.component.html @@ -1,20 +1,22 @@ - -
+ +
-
+
- +
+ +
- + - +
diff --git a/frontend/main/src/app/app.module.ts b/frontend/main/src/app/app.module.ts index de4ebf4..b2c0a74 100644 --- a/frontend/main/src/app/app.module.ts +++ b/frontend/main/src/app/app.module.ts @@ -22,6 +22,7 @@ import { RctQtComponent } from './rct-qt/rct-qt.component'; import { EditComponent } from './edit/edit.component'; import { AboutComponent } from './about/about.component'; import { HttpClientModule } from "@angular/common/http"; +import { ForgetPasswordComponent } from './forget-password/forget-password.component'; @NgModule({ declarations: [ @@ -42,7 +43,8 @@ import { HttpClientModule } from "@angular/common/http"; ShipQtComponent, RctQtComponent, EditComponent, - AboutComponent + AboutComponent, + ForgetPasswordComponent ], imports: [ BrowserModule, diff --git a/frontend/main/src/app/forget-password/forget-password.component.css b/frontend/main/src/app/forget-password/forget-password.component.css new file mode 100644 index 0000000..e69de29 diff --git a/frontend/main/src/app/forget-password/forget-password.component.html b/frontend/main/src/app/forget-password/forget-password.component.html new file mode 100644 index 0000000..7a8de22 --- /dev/null +++ b/frontend/main/src/app/forget-password/forget-password.component.html @@ -0,0 +1 @@ +

forget-password works!

diff --git a/frontend/main/src/app/forget-password/forget-password.component.spec.ts b/frontend/main/src/app/forget-password/forget-password.component.spec.ts new file mode 100644 index 0000000..1de1e2b --- /dev/null +++ b/frontend/main/src/app/forget-password/forget-password.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ForgetPasswordComponent } from './forget-password.component'; + +describe('ForgetPasswordComponent', () => { + let component: ForgetPasswordComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ ForgetPasswordComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(ForgetPasswordComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/frontend/main/src/app/forget-password/forget-password.component.ts b/frontend/main/src/app/forget-password/forget-password.component.ts new file mode 100644 index 0000000..3a98106 --- /dev/null +++ b/frontend/main/src/app/forget-password/forget-password.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-forget-password', + templateUrl: './forget-password.component.html', + styleUrls: ['./forget-password.component.css'] +}) +export class ForgetPasswordComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/frontend/main/src/app/login/login.component.css b/frontend/main/src/app/login/login.component.css index e69de29..eb3d0e7 100644 --- a/frontend/main/src/app/login/login.component.css +++ b/frontend/main/src/app/login/login.component.css @@ -0,0 +1,290 @@ +@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700,800,900'); + +body{ + font-family: 'Poppins', sans-serif; + font-weight: 300; + font-size: 15px; + line-height: 1.7; + color: #c4c3ca; + background-color: #1f2029; + overflow-x: hidden; +} +a { + cursor: pointer; + transition: all 200ms linear; +} +a:hover { + text-decoration: none; +} +.link { + color: #000000; +} +.link:hover { + color: #ffeba7; +} +p { + font-weight: 500; + font-size: 14px; + line-height: 1.7; +} +h4 { + font-weight: 600; +} +h6 span{ + padding: 0 20px; + text-transform: uppercase; + font-weight: 700; +} +.section{ + position: relative; + width: 100%; + display: block; + background-repeat: no-repeat; + background-size: cover; +} +.full-height{ + min-height: 100vh; +} +[type="checkbox"]:checked, +[type="checkbox"]:not(:checked){ + position: absolute; + left: -9999px; +} +.checkbox:checked + label, +.checkbox:not(:checked) + label{ + position: relative; + display: block; + text-align: center; + width: 60px; + height: 16px; + border-radius: 8px; + padding: 0; + margin: 10px auto; + cursor: pointer; + background-color: #ffeba7; +} +.checkbox:checked + label:before, +.checkbox:not(:checked) + label:before{ + position: absolute; + display: block; + width: 36px; + height: 36px; + border-radius: 50%; + color: #ffeba7; + background-color: #102770; + font-family: 'unicons'; + content: ''; + z-index: 20; + top: -10px; + left: -10px; + line-height: 36px; + text-align: center; + font-size: 24px; + transition: all 0.5s ease; +} +.checkbox:checked + label:before { + transform: translateX(44px) rotate(-270deg); +} + + +.card-3d-wrap { + position: relative; + width: 440px; + max-width: 100%; + height: 400px; + -webkit-transform-style: preserve-3d; + transform-style: preserve-3d; + perspective: 800px; + margin-top: 60px; +} +.card-3d-wrapper { + width: 100%; + height: 100%; + position:absolute; + top: 0; + left: 0; + -webkit-transform-style: preserve-3d; + transform-style: preserve-3d; + transition: all 600ms ease-out; +} +.card-front, .card-back { + width: 100%; + height: 100%; + background-color: #d9c19e; + background-position: bottom center; + background-repeat: no-repeat; + background-size: 300%; + position: absolute; + border-radius: 6px; + left: 0; + top: 0; + box-shadow: 10px 10px 5px #1f2029; + -webkit-transform-style: preserve-3d; + transform-style: preserve-3d; + -webkit-backface-visibility: hidden; + -moz-backface-visibility: hidden; + -o-backface-visibility: hidden; + backface-visibility: hidden; +} +.card-back { + transform: rotateY(180deg); +} +.checkbox:checked ~ .card-3d-wrap .card-3d-wrapper { + transform: rotateY(180deg); +} +.center-wrap{ + position: absolute; + width: 100%; + padding: 0 35px; + top: 50%; + left: 0; + transform: translate3d(0, -50%, 35px) perspective(100px); + z-index: 20; + display: block; +} + + +.form-group{ + position: relative; + display: block; + margin: 0; + padding: 0; +} +.form-style { + padding: 13px 20px; + padding-left: 55px; + height: 48px; + width: 100%; + font-weight: 500; + border-radius: 4px; + font-size: 14px; + line-height: 22px; + letter-spacing: 0.5px; + outline: none; + color: #c4c3ca; + background-color: #1f2029; + border: none; + -webkit-transition: all 200ms linear; + transition: all 200ms linear; + box-shadow: 0 4px 8px 0 rgba(21,21,21,.2); +} +.form-style:focus, +.form-style:active { + border: none; + outline: none; + box-shadow: 0 4px 8px 0 rgba(21,21,21,.2); +} +.input-icon { + position: absolute; + top: 0; + left: 18px; + height: 48px; + font-size: 24px; + line-height: 48px; + text-align: left; + color: #ffeba7; + -webkit-transition: all 200ms linear; + transition: all 200ms linear; +} + +.form-group input:-ms-input-placeholder { + color: #c4c3ca; + opacity: 0.7; + -webkit-transition: all 200ms linear; + transition: all 200ms linear; +} +.form-group input::-moz-placeholder { + color: #c4c3ca; + opacity: 0.7; + -webkit-transition: all 200ms linear; + transition: all 200ms linear; +} +.form-group input:-moz-placeholder { + color: #c4c3ca; + opacity: 0.7; + -webkit-transition: all 200ms linear; + transition: all 200ms linear; +} +.form-group input::-webkit-input-placeholder { + color: #c4c3ca; + opacity: 0.7; + -webkit-transition: all 200ms linear; + transition: all 200ms linear; +} +.form-group input:focus:-ms-input-placeholder { + opacity: 0; + -webkit-transition: all 200ms linear; + transition: all 200ms linear; +} +.form-group input:focus::-moz-placeholder { + opacity: 0; + -webkit-transition: all 200ms linear; + transition: all 200ms linear; +} +.form-group input:focus:-moz-placeholder { + opacity: 0; + -webkit-transition: all 200ms linear; + transition: all 200ms linear; +} +.form-group input:focus::-webkit-input-placeholder { + opacity: 0; + -webkit-transition: all 200ms linear; + transition: all 200ms linear; +} + +.btn{ + border-radius: 4px; + height: 44px; + font-size: 13px; + font-weight: 600; + text-transform: uppercase; + -webkit-transition : all 200ms linear; + transition: all 200ms linear; + padding: 0 30px; + letter-spacing: 1px; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-align-items: center; + -moz-align-items: center; + -ms-align-items: center; + align-items: center; + -webkit-justify-content: center; + -moz-justify-content: center; + -ms-justify-content: center; + justify-content: center; + -ms-flex-pack: center; + text-align: center; + border: none; + background-color: #ffeba7; + color: #102770; + box-shadow: 0 8px 24px 0 rgba(255,235,167,.2); +} +.btn:active, +.btn:focus{ + background-color: #102770; + color: #ffeba7; + box-shadow: 0 8px 24px 0 rgba(16,39,112,.2); +} +.btn:hover{ + background-color: #102770; + color: #ffeba7; + box-shadow: 0 8px 24px 0 rgba(16,39,112,.2); +} + + + + +.logo { + position: absolute; + top: 30px; + right: 30px; + display: block; + z-index: 100; + transition: all 250ms linear; +} +.logo img { + height: 26px; + width: auto; + display: block; +} diff --git a/frontend/main/src/app/login/login.component.html b/frontend/main/src/app/login/login.component.html index af459e7..7f20a19 100644 --- a/frontend/main/src/app/login/login.component.html +++ b/frontend/main/src/app/login/login.component.html @@ -1,3 +1,59 @@ -
-
- +
+
+
+
+
+
Log In Sign Up
+ + +
+
+
+
+
+

Log In

+
+ + +
+
+ + +
+ submit +

Forgot your password?

+
+
+
+
+
+
+

Sign Up

+
+ + +
+
+ + +
+
+ + +
+ submit +
+
+
+
+
+
+
+
+
+
diff --git a/frontend/main/src/app/login/login.component.ts b/frontend/main/src/app/login/login.component.ts index d961b1e..b5bcf16 100644 --- a/frontend/main/src/app/login/login.component.ts +++ b/frontend/main/src/app/login/login.component.ts @@ -10,6 +10,10 @@ import { LoginserviceService } from '../loginservice.service'; }) export class LoginComponent implements OnInit { + emailReg!:string + nameReg!:string + passwordReg!:string + user!:string password!:string @@ -20,17 +24,32 @@ export class LoginComponent implements OnInit { } submit():void{ - this.loginService.succeed = true - this.router.navigateByUrl('home'); - this.loginService.logging(this.user, this.password) - .pipe( - catchError((error)=>{ - return of(['Deu erro parcero é isso', 'tu não vai encontrar detalhe aqui','pode sair já...', error, 'só pq sou teu amigo vou deixar esse error ai']) - }) - ) - .subscribe((response)=>{ - console.log('Running...', response); - }); + if(this.user != null && this.password != null){ + this.loginService.succeed = true + this.router.navigateByUrl('home') + this.loginService.logging(this.user, this.password) + .pipe( + catchError((error)=>{ + return of(['Deu erro parcero é isso', 'tu não vai encontrar detalhe aqui','pode sair já...', error, 'só pq sou teu amigo vou deixar esse error ai']) + }) + ) + .subscribe((response)=>{ + console.log('Running...', response); + }); + }else{ + alert('DIGITE TODOS OS CAMPOS OBRIGATÓRIOS!') + } + } + + register(){ + if(this.nameReg != null && this.passwordReg != null && this.emailReg != null){ + this.loginService.succeed = true + this.router.navigateByUrl('home') + this.loginService.registering(this.nameReg, this.nameReg, this.passwordReg) + }else{ + alert('DIGITE TODOS OS CAMPOS OBRIGATÓRIOS!') + } + } } diff --git a/frontend/main/src/app/loginservice.service.ts b/frontend/main/src/app/loginservice.service.ts index b93f7bb..d638c50 100644 --- a/frontend/main/src/app/loginservice.service.ts +++ b/frontend/main/src/app/loginservice.service.ts @@ -16,7 +16,11 @@ export class LoginserviceService implements CanActivate { logging(user:string, password:string){ this.user = user - return this.http.get(this.TMSLoginAPI+user+password) + return this.http.get(this.TMSLoginAPI+'/'+user+'/'+password) + } + + registering(user:string, password:string, email:string){ + this.user = user } canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean | UrlTree | Observable | Promise {