This project using Angular + Boostrap + Moralis
Go to https://getbootstrap.com/docs/5.1/getting-started/introduction/ and copy the CDN´s and paste on index.html file
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Angular Moralis</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<!-- bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<!-- Moralis -->
<!-- Note -->
<!-- You can use npm info moralis versions to obtain a list of the available versions and replace <VERSION> below with the latest value. -->
<script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
<script src="https://unpkg.com/moralis/dist/moralis.js"></script>
</head>
<body>
<app-root></app-root>
<!-- bootstrap -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
</body>
</html>
app.component.ts
import { Component } from '@angular/core';
import { environment } from './../environments/environment';
declare var Moralis;
Moralis.start({ serverUrl: environment.server_url, appId: environment.app_id });
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
public title = 'Angular + Moralis Login';
public user: string;
public isLoggedIn = false;
public createdAt: string;
public updatedAt: string;
public ethAddress: string;
public isAuthenticated = false;
// Login
async login() {
this.user = await Moralis.User.current();
if (!this.user) {
let user = await Moralis.authenticate();
console.log("login ==> ", user);
this.createdAt = user.createdAt;
this.updatedAt = user.updatedAt;
this.ethAddress = user.attributes.ethAddress;
}
this.isLoggedIn = true;
}
// Logout
async logOut() {
await Moralis.User.logOut();
console.log("logged out ==>");
this.isLoggedIn = false;
}
}app.component.html
<div class="container">
<div class="row">
<div class="col"></div>
<div class="col">
<div *ngIf="!isLoggedIn">
<h3 class="mt-5 mb-5">{{ title }}</h3>
<div class="card text-center" style="width: 18rem">
<img src="../assets/moralis-logo.png" class="card-img-top" alt="..." />
<div class="card-body">
<a class="btn btn-outline-primary" (click)="login()">Login with MetaMask</a>
</div>
</div>
</div>
<div *ngIf="isLoggedIn">
<h3 class="mt-5 ml-2">Authenticated area</h3>
<div class="card text-dark bg-light mt-5" style="max-width: 18rem">
<div class="card-header">Logged</div>
<div class="card-body">
<h5 class="card-title">CreatedAt</h5>
<p class="card-text">{{ createdAt | date: "dd/MM/yyyy" }}</p>
<h5 class="card-title">UpdateAt</h5>
<p class="card-text">{{ updatedAt | date: "dd/MM/yyyy" }}</p>
<h5 class="card-title">ETH Address</h5>
<p class="card-text">{{ ethAddress }}</p>
<hr />
<div class="text-center mt-5">
<a class="btn btn-outline-primary" (click)="logOut()">Log Out</a>
</div>
</div>
</div>
</div>
</div>
<div class="col">
</div>
</div>
</div>
<router-outlet></router-outlet>Run npm run start
Run ng test to execute the unit tests