Updates components

Author: salif-04

src/app/dashboard/dashboard.component.css

@@ -63,4 +63,8 @@ form {
  font-size: 2.2em;
  font-family: 'Engagement', cursive;
  padding-right: 3%;
+}
+
+#new-reg-message {
+ margin-top: 2%;
 }

src/app/dashboard/dashboard.component.html

@@ -51,9 +51,16 @@ <h5 class="card-title"><em class="fa fa-angle-right"></em> &nbsp; <em>{{url.orig
  <div class="input-group">
  <button type="submit" class="btn btn-primary">Submit</button>
  </div>
- <p id="new-reg-message" class="text-danger"></p>
+ <!-- <p id="new-reg-message" class="text-danger"></p> -->
  </div>
  </form>
+ <div id="new-reg-message" class="card" hidden>
+ <h5 id="new-reg-title" class="card-header"></h5>
+ <div class="card-body">
+ <h5 class="card-title"><em class="fa fa-link"></em> &nbsp; <span id="new-short-uri"></span></h5>
+ <p class="card-text"><em class="fa fa-angle-right"></em>&nbsp; <span id="new-original-uri"></span></p>
+ </div>
+ </div>
  </div>
  <div class="col-sm-2 col-md-3 col-lg-4"></div>
  </div>

src/app/dashboard/dashboard.component.ts

@@ -78,11 +78,16 @@ export class DashboardComponent implements OnInit {
  const newuri = this.registerationForm.get('newurl').value;
  this.uriService.newUri({uri: newuri}).subscribe((data) => {
  if (data['status'] === 200) {
- document.getElementById('new-reg-message').innerText = 
- 'Registered new URL\nOrignial URL: ' + data['originalUri'] + '\nShort URL: ' + data['shortUri'];
+ document.getElementById('new-reg-title').innerText = data['message'];
+ document.getElementById('new-short-uri').innerText = data['shortUri'];
+ document.getElementById('new-original-uri').innerText = data['originalUri'];
+ document.getElementById('new-reg-message').hidden = false;
  this.fetchAll();
  } else if (data['status'] === 201) {
- document.getElementById('new-reg-message').innerText = 'URI already shortened\nShort URL: ' + data['shortUri'];
+ document.getElementById('new-reg-title').innerText = data['message'];
+ document.getElementById('new-short-uri').innerText = data['shortUri'];
+ document.getElementById('new-original-uri').innerText = data['originalUri'];
+ document.getElementById('new-reg-message').hidden = false;
  } else if (data['status'] === 203) {
  document.getElementById('new-reg-message').innerText = 'INVALID URL ERROR: Enter a valid URL';
  } else {