Login form

archiva-modules/archiva-web/archiva-webapp/src/main/archiva-web/src/app/app.component.html

@@ -16,8 +16,7 @@
   ~ specific language governing permissions and limitations
   ~ under the License.
 -->
-<div class="app">
-
+<div class="app d-flex flex-column" >
   <header>
     <nav class="navbar navbar-expand-md fixed-top navbar-light " style="background-color: #c6cbd2;">
       <a class="navbar-brand" routerLink="/">
@@ -59,14 +58,14 @@
     </nav>
   </header>
 
-  <main>
-    <div class="container-fluid">
+  <main class="container-fluid flex-fill">
+    <div >
         <router-outlet></router-outlet>
     </div>
   </main>
 
-  <hr>
-  <div class="footer">
+  <hr />
+  <footer class="container-fluid">
     <div class="container">
       <div class="row">
         <div class="col-12">
@@ -74,6 +73,6 @@
         </div>
       </div>
     </div>
-  </div>
+  </footer>
 
-</div>
+</div>

archiva-modules/archiva-web/archiva-webapp/src/main/archiva-web/src/app/app.module.ts

@@ -27,6 +27,7 @@ import { AboutComponent } from './modules/general/about/about.component';
 import { LoginComponent } from './modules/general/login/login.component';
 import { NotFoundComponent } from './modules/general/not-found/not-found.component';
 import { SidemenuComponent } from './modules/general/sidemenu/sidemenu.component';
+import {FormsModule} from "@angular/forms";
 
 @NgModule({
   declarations: [
@@ -41,6 +42,7 @@ import { SidemenuComponent } from './modules/general/sidemenu/sidemenu.component
   imports: [
     BrowserModule,
     AppRoutingModule,
+    FormsModule,
   ],
   providers: [],
   bootstrap: [AppComponent]

archiva-modules/archiva-web/archiva-webapp/src/main/archiva-web/src/app/logindata.ts

@@ -0,0 +1,26 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export class Logindata {
+
+    constructor(
+        public username: string,
+        public password: string
+    ) {  }
+
+}

archiva-modules/archiva-web/archiva-webapp/src/main/archiva-web/src/app/modules/general/login/login.component.html

@@ -16,4 +16,36 @@
   ~ specific language governing permissions and limitations
   ~ under the License.
 -->
-<p>Login</p>
+<div class="container-md" >
+<div class="row">
+    <div class="col-6">
+        <form (ngSubmit)="onSubmit()" #loginForm="ngForm">
+            <div class="form-group">
+                <label for="username" i18n="loginform|">Username</label>
+                <input type="text" class="form-control" id="username" aria-describedby="usernameHelp"
+                       required name="username"
+                       [(ngModel)]="model.username" #username="ngModel"
+                >
+                <small id="usernameHelp" class="form-text text-muted" i18n="inputhelp|">Enter your username.</small>
+
+                <div [hidden]="username.valid || username.pristine"
+                     class="alert alert-danger" i18n>
+                    Username is required
+                </div>
+            </div>
+            <div class="form-group">
+                <label for="password" i18n="loginform|">Password</label>
+                <input type="password" class="form-control" id="password" name="password"
+                    required="required"  [(ngModel)]="model.password" #password="ngModel"
+                >
+                <small id="passwordHelp" class="form-text text-muted" i18n="inputhelp|">Enter your password.</small>
+                <div [hidden]="password.valid || password.pristine"
+                     class="alert alert-danger" i18n>
+                    Password is required
+                </div>
+            </div>
+            <button type="submit" class="btn btn-primary">Submit</button>
+        </form>
+    </div>
+</div>
+</div>

archiva-modules/archiva-web/archiva-webapp/src/main/archiva-web/src/app/modules/general/login/login.component.ts

@@ -17,6 +17,9 @@
  * under the License.
  */
 import { Component, OnInit } from '@angular/core';
+// noinspection ES6UnusedImports
+import { FormsModule } from "@angular/forms";
+import { Logindata } from "../../../logindata";
 
 @Component({
   selector: 'app-login',
@@ -25,7 +28,15 @@ import { Component, OnInit } from '@angular/core';
 })
 export class LoginComponent implements OnInit {
 
-  constructor() { }
+  model = new Logindata('', '');
+
+  submitted = false;
+
+  onSubmit() { this.submitted = true; }
+
+  get diagnostic() { return JSON.stringify(this.submitted); }
+
+  constructor() {  }
 
   ngOnInit(): void {
   }

archiva-modules/archiva-web/archiva-webapp/src/main/archiva-web/src/index.html

@@ -25,7 +25,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>
-<body>
+<body >
   <app-root></app-root>
 </body>
 </html>

archiva-modules/archiva-web/archiva-webapp/src/main/archiva-web/src/styles.scss

@@ -21,10 +21,25 @@
 $archiva-orange: #f46e1b;
 $primary: $archiva-orange;
 
+
+html {
+  height: 100%;
+}
+.app {
+  height: 100%;
+}
+
+
 body {
   color: black;
   font-weight: 400;
   padding-top: 5rem;
+  min-height:100%;
+  height: 100%;
+}
+
+.flex-fill {
+  flex:1 1 auto;
 }
 
 @import "~bootstrap/scss/bootstrap";