We help IT Professionals succeed at work.

Simple Angular 2 login page

zolf
zolf asked
on
8,125 Views
Last Modified: 2018-03-21
Hello there,

I have created my first page using Angular 2 and the page is a login page. I have used Bootstrap for the L&F. Now I want to test a simple feature where when I clcik on the login button it it will show me the landing page and this landing page will be pure html for now. Later I plan to have this in landing page as component. Can somebody please guide me the correct way.

cheers
Zolf

Here is my index.html

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>TZClient</title>
  <base href="/">

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

Open in new window


and here is my root app's templateUrl

<div class="login-page">

  <div class="header">
    <h1>BarcodeMe</h1>
    <h2>Enter you login data</h2>
  </div>
  <!-- .header -->

  <div class="form-box">
    <form action="dashboard.html" method="POST" class="validate">
      <div class="form-group">
        <label>E-mail</label>
        <input type="email" name="email" class="form-control">
      </div>
      <!-- .form-group -->

      <div class="form-group">
        <label>Password</label>
        <input type="password" name="password" class="form-control">
      </div>
      <!-- .form-group -->

      <div class="form-group">
        <input type="submit" value="Login" class="btn btn-blue">
      </div>
      <!-- .form-group -->
    </form>
  </div>
  <!-- .form-box -->
</div>
<!-- .login-page -->

Open in new window

Comment
Watch Question

CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
Have you setup routing for your application yet?

Authentication is going to be tied into your routing. You have a click handler on the login button that does the authentication (usually through an Authentications service you provide).
If the Authentication succeeds the application is routed to the landing page - if not you route back to the login page.

If you have defined your routes already can you post how far you have managed to get.

Author

Commented:
Thanks for your comments. No i do not having routing yet. I thought to first have the html pages setup statically then go about implementing the server side. What do you recommend.
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019
Commented:
This problem has been solved!
(Unlock this solution with a 7-day Free Trial)
UNLOCK SOLUTION

Author

Commented:
Cheers