diff options
Diffstat (limited to 'src/DevHive.Angular')
11 files changed, 115 insertions, 171 deletions
diff --git a/src/DevHive.Angular/src/app/app.component.css b/src/DevHive.Angular/src/app/app.component.css index e69de29..acac3cf 100644 --- a/src/DevHive.Angular/src/app/app.component.css +++ b/src/DevHive.Angular/src/app/app.component.css @@ -0,0 +1,4 @@ +div { + width: 100%; + height: 100%; +} diff --git a/src/DevHive.Angular/src/app/app.module.ts b/src/DevHive.Angular/src/app/app.module.ts index 20d9173..667ae12 100644 --- a/src/DevHive.Angular/src/app/app.module.ts +++ b/src/DevHive.Angular/src/app/app.module.ts @@ -4,7 +4,7 @@ import { ReactiveFormsModule } from '@angular/forms'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; -import { LoginComponent } from './login/login.component'; +import { LoginComponent } from './components/login/login.component'; import { RegisterComponent } from './components/register/register.component'; @NgModule({ diff --git a/src/DevHive.Angular/src/app/components/login/login.component.css b/src/DevHive.Angular/src/app/components/login/login.component.css index e69de29..f8b6963 100644 --- a/src/DevHive.Angular/src/app/components/login/login.component.css +++ b/src/DevHive.Angular/src/app/components/login/login.component.css @@ -0,0 +1,56 @@ +#content { + height: 100%; + max-width: 20em; + margin-left: auto; + margin-right: auto; + + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; +} + +#title { + font-size: 2em; + font-weight: bold; +} + +#content input[type=text], #content #submit-btn { + border: 2px solid black; + border-radius: 0.4em; + box-sizing: border-box; + width: 100%; + margin-top: 0.5em; + font-size: 0.8em; + padding: 0.3em; +} + +#content input[type=text]:nth-last-of-type(1) { + margin-bottom: 0.5em; +} + +input[type=text]:focus, button[type=submit]:focus { + outline: 0; +} + +#content hr { + width: 100%; + border: 1px solid black; + box-sizing: border-box; +} + +#submit-btn { + background-color: black; + color: white; + text-align: center; +} + +#submit-btn:hover { + cursor: pointer; + border-color: darkgrey !important; + background-color: darkgrey; +} + +#submit-btn:active { + transform: scale(0.9); +} diff --git a/src/DevHive.Angular/src/app/components/login/login.component.html b/src/DevHive.Angular/src/app/components/login/login.component.html index 5fd3c3c..29cd27e 100644 --- a/src/DevHive.Angular/src/app/components/login/login.component.html +++ b/src/DevHive.Angular/src/app/components/login/login.component.html @@ -3,13 +3,10 @@ Login </div> <hr> - <form action="" method="get"> - <input type="text" placeholder="Username"> - <input type="text" placeholder="Password"> + <form [formGroup]="loginForm" (ngSubmit)="onSubmit()"> + <input type="text" placeholder="Username" name="username" formControlName="userName"> + <input type="text" placeholder="Password" name="password" formControlName="password"> + <hr> + <button type="submit" value="Submit" id="submit-btn">Submit</button> </form> - <hr> - <div id="submit-btn"> - Continue - <input type="submit"> - </div> -</div>
\ No newline at end of file +</div> diff --git a/src/DevHive.Angular/src/app/components/login/login.component.ts b/src/DevHive.Angular/src/app/components/login/login.component.ts index 4f58421..140a852 100644 --- a/src/DevHive.Angular/src/app/components/login/login.component.ts +++ b/src/DevHive.Angular/src/app/components/login/login.component.ts @@ -1,4 +1,6 @@ import { Component, OnInit } from '@angular/core'; +import { FormGroup, FormControl, FormBuilder } from '@angular/forms'; +import { Title } from '@angular/platform-browser'; @Component({ selector: 'app-login', @@ -6,10 +8,29 @@ import { Component, OnInit } from '@angular/core'; styleUrls: ['./login.component.css'] }) export class LoginComponent implements OnInit { + loginForm: FormGroup; - constructor() { } + private _title = 'Login'; + + constructor(private titleService: Title, private fb: FormBuilder) { + titleService.setTitle(this._title); + } ngOnInit(): void { + this.loginForm = this.fb.group({ + userName: '', + password: '' + }); } + async onSubmit(): Promise<void> { + const response = await fetch('http://localhost:5000/api/User/login', { + method: 'POST', + body: `{"UserName": "${this.loginForm.get('userName')?.value}", "Password": "${this.loginForm.get('password')?.value}"}`, + headers: { + 'Content-Type': 'application/json' + } + }); + console.log(response); + } } diff --git a/src/DevHive.Angular/src/app/components/register/register.component.css b/src/DevHive.Angular/src/app/components/register/register.component.css index a01992c..f8b6963 100644 --- a/src/DevHive.Angular/src/app/components/register/register.component.css +++ b/src/DevHive.Angular/src/app/components/register/register.component.css @@ -1,6 +1,6 @@ #content { height: 100%; - max-width: 80%; + max-width: 20em; margin-left: auto; margin-right: auto; @@ -15,50 +15,42 @@ font-weight: bold; } -#content input { +#content input[type=text], #content #submit-btn { border: 2px solid black; border-radius: 0.4em; box-sizing: border-box; width: 100%; margin-top: 0.5em; - font-size: 0.8em; - padding: 0.3em; + font-size: 0.8em; + padding: 0.3em; } -#content > input[type=text]:nth-last-of-type(1) { - margin-bottom: 0.5em; +#content input[type=text]:nth-last-of-type(1) { + margin-bottom: 0.5em; } -input[type=text]:focus { - outline: 0; +input[type=text]:focus, button[type=submit]:focus { + outline: 0; } -#content > hr { +#content hr { width: 100%; border: 1px solid black; box-sizing: border-box; } #submit-btn { - border: 2px solid black; - border-radius: 0.4em; - box-sizing: border-box; - width: 100%; - - background-color: black; - color: white; - text-align: center; - padding: 0.2em; - margin-top: 0.5em; + background-color: black; + color: white; + text-align: center; } #submit-btn:hover { - border-color: darkgrey; - background-color: darkgrey; + cursor: pointer; + border-color: darkgrey !important; + background-color: darkgrey; } -#submit-btn > input[type=submit] { - width: 100%; - height: 100%; - display: none; +#submit-btn:active { + transform: scale(0.9); } diff --git a/src/DevHive.Angular/src/app/login/login.component.css b/src/DevHive.Angular/src/app/login/login.component.css deleted file mode 100644 index 572083c..0000000 --- a/src/DevHive.Angular/src/app/login/login.component.css +++ /dev/null @@ -1,62 +0,0 @@ -html, body { - height: 100%; - margin: 0; -} - -body { - font: 21px sans-serif; -} - -#content { - height: 100%; - max-width: 20em; - margin-left: auto; - margin-right: auto; - - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; -} - -#title { - font-size: 2em; - font-weight: bold; -} - -#content input[type=text], #content #submit-btn { - border: 2px solid black; - border-radius: 0.4em; - box-sizing: border-box; - width: 100%; - margin-top: 0.5em; - font-size: 0.8em; - padding: 0.3em; -} - -#content input[type=text]:nth-last-of-type(1) { - margin-bottom: 0.5em; -} - -input[type=text]:focus, button[type=submit]:focus { - outline: 0; -} - -#content hr { - width: 100%; - border: 1px solid black; - box-sizing: border-box; -} - -#submit-btn { - background-color: black; - color: white; - text-align: center; -} - -#submit-btn:hover { - border-color: darkgrey; - background-color: darkgrey; -} - - diff --git a/src/DevHive.Angular/src/app/login/login.component.html b/src/DevHive.Angular/src/app/login/login.component.html deleted file mode 100644 index 29cd27e..0000000 --- a/src/DevHive.Angular/src/app/login/login.component.html +++ /dev/null @@ -1,12 +0,0 @@ -<div id="content"> - <div id="title"> - Login - </div> - <hr> - <form [formGroup]="loginForm" (ngSubmit)="onSubmit()"> - <input type="text" placeholder="Username" name="username" formControlName="userName"> - <input type="text" placeholder="Password" name="password" formControlName="password"> - <hr> - <button type="submit" value="Submit" id="submit-btn">Submit</button> - </form> -</div> diff --git a/src/DevHive.Angular/src/app/login/login.component.spec.ts b/src/DevHive.Angular/src/app/login/login.component.spec.ts deleted file mode 100644 index d2c0e6c..0000000 --- a/src/DevHive.Angular/src/app/login/login.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { LoginComponent } from './login.component'; - -describe('LoginComponent', () => { - let component: LoginComponent; - let fixture: ComponentFixture<LoginComponent>; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ LoginComponent ] - }) - .compileComponents(); - }); - - beforeEach(() => { - fixture = TestBed.createComponent(LoginComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/DevHive.Angular/src/app/login/login.component.ts b/src/DevHive.Angular/src/app/login/login.component.ts deleted file mode 100644 index 140a852..0000000 --- a/src/DevHive.Angular/src/app/login/login.component.ts +++ /dev/null @@ -1,36 +0,0 @@ -import { Component, OnInit } from '@angular/core'; -import { FormGroup, FormControl, FormBuilder } from '@angular/forms'; -import { Title } from '@angular/platform-browser'; - -@Component({ - selector: 'app-login', - templateUrl: './login.component.html', - styleUrls: ['./login.component.css'] -}) -export class LoginComponent implements OnInit { - loginForm: FormGroup; - - private _title = 'Login'; - - constructor(private titleService: Title, private fb: FormBuilder) { - titleService.setTitle(this._title); - } - - ngOnInit(): void { - this.loginForm = this.fb.group({ - userName: '', - password: '' - }); - } - - async onSubmit(): Promise<void> { - const response = await fetch('http://localhost:5000/api/User/login', { - method: 'POST', - body: `{"UserName": "${this.loginForm.get('userName')?.value}", "Password": "${this.loginForm.get('password')?.value}"}`, - headers: { - 'Content-Type': 'application/json' - } - }); - console.log(response); - } -} diff --git a/src/DevHive.Angular/src/styles.css b/src/DevHive.Angular/src/styles.css index 90d4ee0..7dd6a23 100644 --- a/src/DevHive.Angular/src/styles.css +++ b/src/DevHive.Angular/src/styles.css @@ -1 +1,10 @@ /* You can add global styles to this file, and also import other style files */ + +html, body { + height: 100%; + margin: 0; +} + +body { + font: 21px sans-serif; +} |