Merge pull request #1556 from qmonmert/feature/1464-v2

[Angular] Add Angular Material

src/main/java/tech/jhipster/lite/generator/client/angular/core/domain/Angular.java

@@ -32,9 +32,11 @@ public static List<String> devDependencies() {
   public static List<String> dependencies() {
     return List.of(
       "@angular/animations",
+      "@angular/cdk",
       "@angular/common",
       "@angular/compiler",
       "@angular/core",
+      "@angular/material",
       "@angular/forms",
       "@angular/platform-browser",
       "@angular/platform-browser-dynamic",

src/main/java/tech/jhipster/lite/generator/client/angular/core/domain/AngularDomainService.java

@@ -81,31 +81,30 @@ public void addJwtDependencies(Project project) {
   }
 
   public void updateAngularFilesForJwt(Project project) {
-    String oldHtml = "<router-outlet></router-outlet>";
+    String oldHtml = "<!-- jhipster-needle-angular-jwt-login-form -->";
     String newHtml =
       """
-        <div [ngSwitch]="account !== null">
-
-          <form role="form" (ngSubmit)="login()" [formGroup]="loginForm" *ngSwitchCase="false">
-            <div>
-              <label class="username-label" for="username">Login</label>
-              <input type="text" name="username" id="username" formControlName="username" #username />
-            </div>
-            <div>
-              <label for="password">Password</label>
-              <input type="password" name="password" id="password" formControlName="password" />
+      <mat-card>
+        <mat-card-content>
+          <div [ngSwitch]="account !== null">
+            <form class="login-form" (ngSubmit)="login()" [formGroup]="loginForm" *ngSwitchCase="false">
+              <mat-form-field class="form-field-full-width" appearance="fill">
+                <mat-label>Login</mat-label>
+                <input type="text" name="username" id="username" formControlName="username" #username matInput placeholder="Login" value="">
+              </mat-form-field>
+              <mat-form-field class="form-field-full-width" appearance="fill">
+                <mat-label>Password</mat-label>
+                <input type="password" name="password" id="password" formControlName="password" #password matInput placeholder="Password" value="">
+              </mat-form-field>
+              <button type="submit" mat-flat-button color="primary">Sign in</button>
+            </form>
+            <div *ngSwitchCase="true">
+              <div>You are logged in as user "{{ account?.login }}".</div>
+              <button (click)="logout()" mat-flat-button color="primary">Logout</button>
             </div>
-            <button type="submit">Sign in</button>
-          </form>
-
-          <div *ngSwitchCase="true">
-            <div>You are logged in as user "{{ account?.login }}".</div>
-            <button (click)="logout()">Logout</button>
           </div>
-
-        </div>
-
-        <router-outlet></router-outlet>""";
+        </mat-card-content>
+      </mat-card>""";
     projectRepository.replaceText(project, APP, APP_COMPONENT_HTML, oldHtml, newHtml);
 
     oldHtml = "import \\{ Component, OnInit \\} from '@angular/core';";
@@ -194,8 +193,10 @@ public void updateAngularFilesForJwt(Project project) {
         """;
     projectRepository.replaceText(project, APP, APP_MODULE, oldHtml, newHtml);
 
-    oldHtml = "imports: \\[BrowserModule, AppRoutingModule\\],";
-    newHtml = "imports: [BrowserModule, AppRoutingModule, HttpClientModule, ReactiveFormsModule, NgxWebstorageModule.forRoot()],";
+    oldHtml =
+      "imports: \\[BrowserAnimationsModule, MatToolbarModule, MatIconModule, MatButtonModule, MatButtonToggleModule, MatFormFieldModule, MatInputModule, MatCardModule, MatDividerModule, BrowserModule, AppRoutingModule\\],";
+    newHtml =
+      "imports: [BrowserAnimationsModule, MatToolbarModule, MatIconModule, MatButtonModule, MatButtonToggleModule, MatFormFieldModule, MatInputModule, MatCardModule, MatDividerModule, BrowserModule, AppRoutingModule, HttpClientModule, ReactiveFormsModule, NgxWebstorageModule.forRoot()],";
     projectRepository.replaceText(project, APP, APP_MODULE, oldHtml, newHtml);
 
     oldHtml = "bootstrap: \\[AppComponent\\],";

src/main/resources/generator/client/angular/src/main/webapp/app/common/primary/app/app.component.css.mustache

@@ -1,29 +1,40 @@
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
+.angular-logo {
+  width: 50px;
+  height: 50px;
 }
 
-.angular-logo {
-  width: 200px;
-  height: 200px;
+.jhipster-logo {
+  display: block;
+  margin-left:auto;
+  margin-right:auto;
+  margin-top: 20px;
+  width: 250px;
+}
+
+.login-form {
+  min-width: 150px;
+  max-width: 500px;
+  width: 100%;
+}
+
+.form-field-full-width {
+  width: 100%;
 }
 
-a {
-  color: #dd0031;
+.toolbar-spacer {
+  flex: 1 1 auto;
 }
 
-label {
-  margin: 0 0.5em;
-  font-weight: bold;
+mat-card{
+  width: 350px;
+  display: block;
+  margin-left:auto;
+  margin-right:auto;
+  margin-top: 20px;
 }
 
-code {
-  background-color: #eee;
-  padding: 2px 4px;
-  border-radius: 4px;
-  color: #304455;
+#footer {
+  width: 100%;
+  text-align: center;
+  margin-top: 70px;
 }

src/main/resources/generator/client/angular/src/main/webapp/app/common/primary/app/app.component.html.mustache

@@ -1,22 +1,30 @@
-<div id="app">
+<mat-toolbar color="primary">
+  <button mat-icon-button class="example-icon" aria-label="Example icon-button with menu icon">
+    <mat-icon>menu</mat-icon>
+  </button>
+  <span>{{=<% %>=}}{{ appName }}<%={{ }}=%></span>
+  <span class="toolbar-spacer"></span>
   <img alt="Angular logo" class="angular-logo" src="content/images/AngularLogo.svg" />
-  <br />
-  <img alt="JHipster logo" src="../../../../content/images/JHipster-Lite-neon-red.png" />
+</mat-toolbar>
+
+<img alt="JHipster logo" class="jhipster-logo" src="../../../../content/images/JHipster-Lite-neon-red.png" />
+
+<!-- jhipster-needle-angular-jwt-login-form -->
+
+<div id="footer">
   <h1>{{=<% %>=}}{{ appName }}<%={{ }}=%>: Angular + TypeScript</h1>
   <p>
     Recommended IDE setup:
     <a href="https://code.visualstudio.com/" target="_blank" rel="noopener">VSCode</a>
   </p>
-
   <p>
     <a href="https://angular.io/tutorial" target="_blank" rel="noopener">Angular Documentation</a>
     |
     <a href="https://angular.io/cli" target="_blank" rel="noopener">Angular CLI Documentation</a>
   </p>
-
   <p>
     Edit
-    <code>src/main/webapp/app/common/primary/app/app.component.ts</code> to test hot module replacement.
+    <code>app.component.ts</code> to test hot module replacement.
   </p>
 </div>
 

src/main/resources/generator/client/angular/src/main/webapp/app/common/primary/app/app.module.ts.mustache

@@ -4,9 +4,19 @@ import { BrowserModule } from '@angular/platform-browser';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatIconModule } from '@angular/material/icon';
+import { MatButtonModule } from '@angular/material/button';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatCardModule } from '@angular/material/card';
+import { MatDividerModule } from '@angular/material/divider';
+
 @NgModule({
   declarations: [AppComponent],
-  imports: [BrowserModule, AppRoutingModule],
+  imports: [BrowserAnimationsModule, MatToolbarModule, MatIconModule, MatButtonModule, MatButtonToggleModule, MatFormFieldModule, MatInputModule, MatCardModule, MatDividerModule, BrowserModule, AppRoutingModule],
   bootstrap: [AppComponent],
 })
 export class AppModule {}

src/main/resources/generator/client/angular/src/main/webapp/index.html.mustache

@@ -5,8 +5,11 @@
     <title>JHipster Lite</title>
     <base href="/" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-  </head>
-  <body>
+      <link rel="preconnect" href="https://fonts.gstatic.com">
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+</head>
+  <body class="mat-typography">
     <app-root></app-root>
   </body>
 </html>

src/main/resources/generator/client/angular/src/main/webapp/styles.css.mustache

@@ -1 +1,6 @@
 /* You can add global styles to this file, and also import other style files */
+
+@import "~@angular/material/prebuilt-themes/indigo-pink.css";
+
+html, body { height: 100%; }
+body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }

src/main/resources/generator/dependencies/angular/package.json

@@ -1,10 +1,12 @@
 {
   "dependencies": {
     "@angular/animations": "13.2.2",
+    "@angular/cdk": "13.3.5",
     "@angular/common": "13.2.2",
     "@angular/compiler": "13.2.2",
     "@angular/core": "13.2.2",
     "@angular/forms": "13.2.2",
+    "@angular/material": "13.3.5",
     "@angular/platform-browser": "13.2.2",
     "@angular/platform-browser-dynamic": "13.2.2",
     "@angular/router": "13.2.2",

src/test/java/tech/jhipster/lite/generator/client/angular/core/domain/AngularDomainServiceTest.java

@@ -71,7 +71,7 @@ void shouldAddDependencies() {
 
     angularDomainService.addDependencies(project);
 
-    verify(npmService, times(11)).addDependency(any(Project.class), anyString(), anyString());
+    verify(npmService, times(13)).addDependency(any(Project.class), anyString(), anyString());
   }
 
   @Test