Tta 174 create pop up message for redirecting users from legacy to production

src/app/app-routing.module.ts

@@ -11,25 +11,42 @@ import { HomeComponent } from './modules/home/home.component';
 import { LoginComponent } from './modules/login/login.component';
 import { CustomerComponent } from './modules/customer-management/pages/customer.component';
 import { UsersComponent } from './modules/users/pages/users.component';
+import { V2RedirectComponent } from './modules/v2-redirect/v2-redirect.component';
+import { EnvironmentType } from 'src/environments/enum';
+import { environment } from 'src/environments/environment';
 
-const routes: Routes = [
-  {
-    path: '',
-    component: HomeComponent,
-    canActivate: [LoginGuard],
-    children: [
-      { path: 'reports', canActivate: [AdminGuard], component: ReportsComponent },
-      { path: 'time-clock', component: TimeClockComponent },
-      { path: 'time-entries', component: TimeEntriesComponent },
-      { path: 'activities-management', component: ActivitiesManagementComponent },
-      { path: 'customers-management', canActivate: [AdminGuard], component: CustomerComponent },
-      { path: 'users', canActivate: [AdminGuard], component: UsersComponent },
-      { path: '', pathMatch: 'full', redirectTo: 'time-clock' },
-    ],
-  },
-  { path: 'login', component: LoginComponent },
-];
+const isLegacyProd: boolean = environment.production === EnvironmentType.TT_DEV;
+let routes: Routes;
 
+if (isLegacyProd) {
+  routes = [
+    {
+      path: '',
+      children: [
+        { path: '**', component: V2RedirectComponent },
+      ],
+    },
+  ];
+
+} else {
+  routes = [
+    {
+      path: '',
+      component: HomeComponent,
+      canActivate: [LoginGuard],
+      children: [
+        { path: 'reports', canActivate: [AdminGuard], component: ReportsComponent },
+        { path: 'time-clock', component: TimeClockComponent },
+        { path: 'time-entries', component: TimeEntriesComponent },
+        { path: 'activities-management', component: ActivitiesManagementComponent },
+        { path: 'customers-management', canActivate: [AdminGuard], component: CustomerComponent },
+        { path: 'users', canActivate: [AdminGuard], component: UsersComponent },
+        { path: '', pathMatch: 'full', redirectTo: 'time-clock' },
+      ],
+    },
+    { path: 'login', component: LoginComponent }
+  ];
+}
 @NgModule({
   imports: [RouterModule.forRoot(routes)],
   exports: [RouterModule],

src/app/app.module.ts

@@ -95,6 +95,7 @@ import { SearchUserComponent } from './modules/shared/components/search-user/sea
 import { TimeRangeCustomComponent } from './modules/reports/components/time-range-custom/time-range-custom.component';
 import { TimeRangeHeaderComponent } from './modules/reports/components/time-range-custom/time-range-header/time-range-header.component';
 import { TimeRangeOptionsComponent } from './modules/reports/components/time-range-custom/time-range-options/time-range-options.component';
+import { V2RedirectComponent } from './modules/v2-redirect/v2-redirect.component';
 
 const maskConfig: Partial<IConfig> = {
   validation: false,
@@ -154,6 +155,7 @@ const maskConfig: Partial<IConfig> = {
     TimeRangeCustomComponent,
     TimeRangeHeaderComponent,
     TimeRangeOptionsComponent,
+    V2RedirectComponent,
   ],
   imports: [
     NgxMaskModule.forRoot(maskConfig),

src/app/modules/v2-redirect/style.css

@@ -0,0 +1,163 @@
+.btn-primary {
+    background-color: #F85221;
+    border-radius: 30px;
+    border: none;
+}
+
+.btn-primary:hover {
+    background-color: #bf3816;
+}
+
+h2 {
+    font-weight: 600;
+    color: #5B4F62;
+}
+
+h1 {
+    font-weight: 800;
+    font-size:4em;
+    color: #5B4F62;
+
+}
+
+h3 {
+    font-weight: 500;
+    font-size: 2em;
+    color: #831C86;
+}
+
+#main-image {
+    padding-top: 20%;
+    max-width: 100%;
+}
+
+.grid {
+    display: grid;
+    grid-template-columns: [x0] 2fr [x1] 1fr [x2];
+    justify-items: center;
+}
+
+
+#logo {
+    padding-top: 20px;
+    padding-left: 25px;
+    position:absolute;
+    max-width: 18rem;
+    left: 0;
+    top: 0;
+    z-index: 10;
+}
+
+.decoration{
+    z-index: 0;
+    position: absolute;
+    bottom:0;
+    right:0;
+}
+
+.text{
+    padding-top: 50%;
+    padding-right: 30%;
+}
+
+
+.redirection {
+    padding-top:1rem;
+    text-align: center;
+}
+
+body {
+    text-align: center;
+    }
+
+@media screen and (max-width: 1307px) {
+
+    #main-image {
+        padding-top: 6%;
+    }
+    h1 {
+        color:#831C86;
+    }
+
+    .grid {
+        display: grid;
+        grid-template-columns: 1fr;
+        position: relative;
+        width:auto;
+    }
+
+    .text{
+        padding-top: 2rem;
+        padding-right: 0px;
+        text-align: center;
+
+    }
+
+    .redirection {
+        padding-top: 0px;
+        padding-right: 0px;
+        margin-bottom: 30px;
+        text-align: center;
+    }
+
+    #quote {
+        display: none;
+    }
+
+}
+
+
+@media screen and (max-width: 430px) {
+    .btn-primary {
+        font-size:small;
+
+    }
+    body{
+        text-align: center;
+    }
+    h1 {
+        font-size: 2rem;
+        color:#831C86;
+    }
+    h2 {
+        font-size: 1rem;
+    }
+    .grid {
+        display: grid;
+        grid-template-columns: 1fr;
+        position: relative;
+        width:auto;
+    }
+
+    .text{
+        padding-top: 2rem;
+        padding-right: 0px;
+        text-align: center;
+
+    }
+
+    .redirection {
+        padding-top: 0px;
+        padding-right: 0px;
+        margin-bottom: 30px;
+        text-align: center;
+    }
+
+    #quote {
+        display: none;
+    }
+
+    .decoration {
+        display: none;
+    }
+    #logo {
+        padding-right: auto;
+        padding-left: auto;
+        padding-top: 20px;
+        position:absolute;
+        max-width: 80%;
+        left: 0;
+        top: 0;
+        z-index: 10;
+    }
+}

src/app/modules/v2-redirect/v2-redirect.component.html

@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@800&display=swap" rel="stylesheet" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,800;1,500&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,800;0,900;1,500&display=swap"
+      rel="stylesheet"
+    />
+
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
+      integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
+      crossorigin="anonymous"
+    />
+    <link rel="stylesheet" href="./style.css" />
+  </head>
+
+  <body style="font-family: 'Montserrat';">
+    <div>
+      <img id="logo" src="../../../assets/img/time-tracker-logo.png" alt="Time Tracker logo"/>
+    </div>
+    <div class="decoration">
+      <img src="../../../assets/img/decoration.png" alt="decoration blue splash" />
+    </div>
+    <div class="grid">
+      <div>
+        <img id="main-image" src="../../../assets/img/main-image.png" alt="person moving boxes" />
+      </div>
+      <div class="text">
+        <h1>WE HAVE MOVED</h1>
+        <h3 id="quote">The world is in<br />constant evolution,<br /><strong>SO ARE WE.</strong></h3>
+      </div>
+      <div class="redirection">
+        <div id="goto">
+          <h2>GO TO TIME TRACKER V2</h2>
+        </div>
+        <div id="link">
+          <a class="btn btn-primary btn-lg" href="https://ui.timetrackerapp.ioet.com/" role="button"
+            >ui.timetrackerapp.ioet.com</a
+          >
+        </div>
+      </div>
+    </div>
+  </body>
+</html>

src/app/modules/v2-redirect/v2-redirect.component.scss

@@ -0,0 +1,6 @@
+* {
+    font-family: 'Inter', sans-serif;
+    font-weight: bold;
+    display: flexbox;
+    flex:auto;
+}

src/app/modules/v2-redirect/v2-redirect.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { V2RedirectComponent } from './v2-redirect.component';
+
+describe('V2RedirectComponent', () => {
+  let component: V2RedirectComponent;
+  let fixture: ComponentFixture<V2RedirectComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ V2RedirectComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(V2RedirectComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/modules/v2-redirect/v2-redirect.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-v2-redirect',
+  templateUrl: './v2-redirect.component.html',
+  styleUrls: ['./v2-redirect.component.css']
+})
+export class V2RedirectComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}