Merge branch 'security1'

This commit is contained in:
Rene Vergara 2023-06-26 12:42:03 -05:00
commit e33e0a7f36
Signed by: pitmutt
GPG Key ID: 65122AD495A7F5B2
15 changed files with 377 additions and 515 deletions

View File

@ -11,6 +11,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
- Modified order service to query API using `token`.
- Modified receipt component to use the new `token`.
- Modified invoice component to use the new `token`.
- Modified payment service component to remove order-creation logic.
### Fixed

View File

@ -1,6 +1,6 @@
{
"name": "zgo",
"version": "2.2.0",
"version": "2.3.0",
"scripts": {
"ng": "ng",
"start": "ng serve",

View File

@ -45,7 +45,7 @@
style="margin-top: 10px;
margin-bottom: 20px;">
<div >&copy; 2023 Vergara Technologies LLC</div>
<div class="tiny">Version 2.2.0</div>
<div class="tiny">Version 2.3.0</div>
<div class="tiny">{{ vE.mainPriceData }}</div>
</div>
<div></div>

View File

@ -89,14 +89,14 @@
</tr>
</table>
<div style="height: 15px;"></div>
<div width="100%"
<div *ngIf="!order.paid" width="100%"
style="font-size: 14px;
font-weight: 700;
font-style: italic;
text-align: center;">
{{ vE.invoiceScanQrcode }}
</div>
<div style="text-align: center;
<div *ngIf="!order.paid" style="text-align: center;
margin-top: 10px;
line-height: 30px;">
<div style="font-family: 'Spartan';

View File

@ -22,6 +22,8 @@ export class LanguageService {
private loginURL = ConfigData.Be_URL + 'getloginlang';
private mainURL = ConfigData.Be_URL + 'getmainlang';
private scanURL = ConfigData.Be_URL + 'getscanlang';
private invoiceURL = ConfigData.Be_URL + 'getinvoicelang';
private pmtservURL = ConfigData.Be_URL + 'getpmtservicelang';
public zgoLanguage: string = '';
@ -58,6 +60,10 @@ export class LanguageService {
return this.http.get<LanguageData>(this.mainURL + '/?lang=' + this.zgoLanguage, {headers: reqHeaders, params: params});
} else if (viewName === 'scan') {
return this.http.get<LanguageData>(this.scanURL + '/?lang=' + this.zgoLanguage, {headers: reqHeaders, params: params});
} else if (viewName === 'invoice') {
return this.http.get<LanguageData>(this.invoiceURL + '/?lang=' + this.zgoLanguage, {headers: reqHeaders, params: params});
} else if (viewName === 'pmtservice') {
return this.http.get<LanguageData>(this.pmtservURL + '/?lang=' + this.zgoLanguage, {headers: reqHeaders, params: params});
} else {
return this.http.get<LanguageData>(this.baseURL +
'/?lang=' + this.zgoLanguage +

View File

@ -214,7 +214,8 @@ export class OrderComponent implements OnInit{
dialogConfig.disableClose = true;
dialogConfig.autoFocus = true;
dialogConfig.data = {
orderId: this.order._id
orderId: this.order._id,
orderToken: this.order.token
};
//console.log ('order_id : ' + this.order._id);

View File

@ -24,11 +24,11 @@
<div style="height: 50px;">
</div>
<div style="font-weight: 700;
font-size: 25px;
fonT-size: 25px;
text-align: center;">
{{ vE.pmtservicePmtsrvNot }}<br>
{{ vE.pmtserviceEnabledFor }}<br>
{{ owner.name}}
{{ shop }}
</div>
<div style="height: 40px;">
</div>
@ -131,7 +131,7 @@
</div>
<div class="invoiceDetail"
*ngIf="reportType==0"
id="invoice">
>
<div class="invoiceHdrTxt1">{{ vE.pmtserviceHdrTxt1 }}</div>
<div class="invoiceHdrTxt2">{{ vE.pmtserviceHdrTxt2 }}{{orderId}}</div>
<div class="invoiceHdrTxt3">{{ vE.pmtserviceHdrTxt3 }}{{order.timestamp | date}}
@ -206,7 +206,7 @@
</td>
<td width="25%">
<div style="text-align: right;"
id="payment-qr"
id="invoice-qr"
*ngIf="!order.paid"></div>
</td>
</tr>

View File

@ -4,8 +4,6 @@ import { HttpClient, HttpParams, HttpHeaders } from "@angular/common/http";
import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
import { PmtData } from "./pmtservice.model";
import { XeroInvoice } from "./xeroinvoice.model";
import { Owner } from '../owner.model';
// import { Item } from '../items/item.model'
import { Order } from '../order/order.model'
import { ConfigData } from '../configdata';
import { faCheck, faHourglass } from '@fortawesome/free-solid-svg-icons';
@ -32,6 +30,7 @@ export class PmtserviceComponent implements OnInit {
beUrl = ConfigData.Be_URL;
private reqHeaders: HttpHeaders = new HttpHeaders();
public shop: string = '';
public pmtData : PmtData = {
ownerId :'',
invoice: '',
@ -54,25 +53,8 @@ export class PmtserviceComponent implements OnInit {
inv_ProcDate : new Date()
};
public owner: Owner = {
_id: '',
address: '',
name: '',
currency: 'usd',
tax: false,
taxValue: 0,
vat: false,
vatValue: 0,
paid: false,
zats: false,
invoices: false,
expiration: new Date(Date.now()).toISOString(),
payconf: false,
crmToken: '',
viewkey: ''
};
public order: Order = {
public order: Order = {
_id : '',
address: '',
session: '',
@ -98,19 +80,19 @@ public order: Order = {
private invData_raw : string = '';
private invData_buff : any = null;
public reportType = 1000;
public reportType = 0;
public Status = 0;
codeString: string = '';
codeString: string = 'ZGo - The Zcash Register';
zcashUrl: SafeUrl = '';
zPrice: number = 1.0;
name: string = '';
error: boolean = false;
orderId : string = '';
// -------------------------------------
// Language Support
//
vE = {
// -------------------------------------
// Language Support
//
vE = {
pmtserviceInvalidOwnerid : '',
pmtserviceNotservClose : '',
pmtserviceNotservError : '',
@ -150,21 +132,19 @@ vE = {
pmtserviceCopyAddress : '',
pmtserviceCopyAmount : '',
pmtserviceCopyMemo : ''
}
//
}
//
constructor(private activatedRoute : ActivatedRoute,
private http : HttpClient,
private sanitizer: DomSanitizer,
private notifierService : NotifierService,
private languageService : LanguageService ) {}
ngOnInit() {
private languageService : LanguageService ){
var auth = 'Basic ' + Buffer.from(ConfigData.UsrPwd).toString('base64');
this.reqHeaders = new HttpHeaders().set('Authorization', auth);
this.activatedRoute.queryParams.subscribe((params) => {
this.pmtData.ownerId = params["owner"];
this.pmtData.invoice = params["invoiceNo"];
this.pmtData.amount = params["amount"];
this.pmtData.amount = +params["amount"];
this.pmtData.currency = params["currency"];
this.pmtData.shortcode = params["shortCode"];
this.getInvoiceData( this.pmtData );
@ -172,175 +152,28 @@ vE = {
this.chgUILanguage();
}
ngOnInit() {
}
getInvoiceData( reqData : PmtData ) {
//
// Verify owner id ( Status = 1 if not exists )
// ( Status = 2 if service not available for user )
//
// console.log('getOwner -> '+ reqData.ownerId);
// console.log('received amount -> ' + reqData.amount);
const ownParams = new HttpParams().append('id', reqData.ownerId);
let obs = this.http.get<{message:string, owner: any}>
( this.beUrl+'api/ownerid',
{ headers: this.reqHeaders,
params: ownParams,
observe: 'response'});
obs.subscribe((OwnerDataResponse) => {
//console.log('api/getowner', OwnerDataResponse.status);
if (OwnerDataResponse.status == 200) {
this.owner = OwnerDataResponse.body!.owner;
console.log('Owner => ' + this.owner.name );
//
// ==> remove "== false" for production enviroment
//
if ( this.owner.invoices ) {
// process data
console.log("Owner check passed!!!");
this.getXeroInvoiceData( reqData );
} else {
console.log("Owner check failed!!!")
this.reportType = 2;
};
} else {
if ( OwnerDataResponse.status == 204 ) {
console.log('Res.Status = ' + OwnerDataResponse.status)
console.log('Owner id not found!!!');
this.reportType = 1;
}
}});
}
getXeroInvoiceData( reqData : PmtData ) {
/*
// Call test Xero API
let url : string = "http://localhost:3000/xero/" + reqData.invoice;
this.http
.get<any>(url)
*/
console.log('>> find current zcash price');
this.getPrice(this.owner.currency);
console.log('get Invoice -> ' + reqData.invoice);
let invParams = new HttpParams();
invParams = invParams.append('address', this.owner.address);
invParams = invParams.append('inv', reqData.invoice);
let inv = this.http.get<{message:string, invData: any}>
( this.beUrl+'api/invdata',
{ headers: this.reqHeaders,
params: invParams,
observe: 'response'});
inv.subscribe( invDataResponse => {
// console.log('Response from ZGo-Xero');
// console.log(invDataResponse.status);
this.invData_buff = invDataResponse.body;
this.invData.inv_Type = this.invData_buff.invdata.inv_Type;
this.invData.inv_Id = this.invData_buff.invdata.inv_Id;
this.invData.inv_No = this.invData_buff.invdata.inv_No;
this.invData.inv_Contact = this.invData_buff.invdata.inv_Contact;
this.invData.inv_Currency = this.invData_buff.invdata.inv_Currency;
this.invData.inv_CurrencyRate = this.invData_buff.invdata.inv_CurrencyRate;
this.invData.inv_Total = this.invData_buff.invdata.inv_Total;
this.invData.inv_Status = this.invData_buff.invdata.inv_Status;
this.invData.inv_Date = this.invData_buff.invdata.inv_Date;
this.invData.inv_shortCode = reqData.shortcode;
/*
console.log('>>> inv_Type -> ' + this.invData.inv_Type);
console.log('>>> inv_Id -> ' + this.invData.inv_Id);
console.log('>>> inv_No -> ' + this.invData.inv_No);
console.log('>>> inv_Contact -> ' + this.invData.inv_Contact);
console.log('>>> inv_Currency-> ' + this.invData.inv_Currency);
console.log('>>> inv_CurrencyRate -> ' + this.invData.inv_CurrencyRate);
console.log('>>> inv_Total -> ' + this.invData.inv_Total);
console.log('>>> inv_Status-> ' + this.invData.inv_Status);
console.log('>>> inv_Date -> ' + this.invData.inv_Date);
*/
if ( this.invData.inv_Type == 'ACCREC' ) {
console.log('Invoice type is correct!!');
// Test if invoice is not already paid
if ( this.invData.inv_Status == 'AUTHORISED') {
console.log('invoice is payable');
// Test if Invoice's currency is supported
if ( this.invData.inv_Currency == reqData.currency ) {
console.log('Invoice currency supported');
// Test if requested amount is as reported by Xero
if ( this.invData.inv_Total == reqData.amount ) {
console.log('Invoice amount Ok - create Order');
// =====> Create order here
this.createOrder();
//
} else {
console.log('Invoice amount does not match')
this.reportType = 8;
}
} else {
console.log('Invoice currency not supported');
this.reportType = 7;
}
} else {
console.log('Invoice already paid');
this.reportType = 6;
}
} else {
console.log('Invoice type is invalid' );
this.reportType = 5;
}
},
error => {
console.log("Error while getting invData!!!");
console.log(error);
console.log(error.status);
if ( error.status == 500 ) {
// Assume that invoice was not found by haskell server
this.reportType = 4;
}
});
}
createOrder() {
this.reportType = 0;
// console.log('Starting order generation');
// console.log('>> find current zcash price');
this.order = {
_id: '',
address: this.owner.address,
session: 'Xero-' + this.owner._id,
currency: this.owner.currency,
timestamp: new Date(Date.now()).toISOString(),
closed: true,
totalZec: this.invData.inv_Total/this.zPrice,
price: this.zPrice,
total: this.invData.inv_Total,
paid: false,
externalInvoice: this.invData.inv_No,
shortCode: this.invData.inv_shortCode,
token: '',
lines: [{qty: 1,
name: 'Invoice from ' + this.owner.name + '[' + this.invData.inv_No + ']',
cost: this.invData.inv_Total}]
};
let obs = this.http.post<{message: string, order: Order}>
(this.beUrl+'api/orderx',
{payload: this.order},
{ headers: this.reqHeaders }
//this.getXeroInvoiceData( reqData );
let obs = this.http.post<{reportType: number, order: Order, shop: string}>
(this.beUrl+'invdata',
{payload: reqData},
{headers: this.reqHeaders, observe: 'response' }
);
obs.subscribe((orderData) => {
// console.log('Order created');
// console.log(orderData.order);
this.order = orderData.order
console.log('>> order -> ' + JSON.stringify(this.order));
obs.subscribe((invoiceData) => {
if(invoiceData.status == 201) {
this.reportType = invoiceData.body!.reportType;
this.order = invoiceData.body!.order;
this.shop = invoiceData.body!.shop;
this.orderId = String(this.order._id);
// console.log('Generating QRCode....')
// console.log('Generating QRCode....')
this.codeString = `zcash:${this.order.address}?amount=${this.order.totalZec.toFixed(8)}&memo=${URLSafeBase64.encode(Buffer.from('ZGo Order::'.concat(this.orderId).concat(' Invoice: ').concat(orderData.order.externalInvoice)))}`;
this.codeString = `zcash:${this.order.address}?amount=${this.order.totalZec.toFixed(8)}&memo=${URLSafeBase64.encode(Buffer.from('ZGo Order::'.concat(this.orderId).concat(' Invoice: ').concat(this.order.externalInvoice)))}`;
var qrcode = new QRCode(document.getElementById("payment-qr"), {
var qrcode = new QRCode(document.getElementById("invoice-qr"), {
text: this.codeString,
logo: "/assets/zcash.png",
width: 180,
@ -351,9 +184,10 @@ vE = {
});
this.zcashUrl = this.sanitizer.bypassSecurityTrustUrl(this.codeString);
}, error => {
console.log(error.message);
} else {
this.reportType = invoiceData.body!.reportType;
console.log('reportType ' + invoiceData.body!.reportType + ' code ' + invoiceData.status);
}
});
}
@ -364,25 +198,9 @@ vE = {
}
getPrice(currency: string){
//var currency = 'usd';
const params = new HttpParams().append('currency', currency);
let obs = this.http.get<{message: string, price: any}>(this.beUrl+'api/price', { headers:this.reqHeaders, params: params, observe: 'response'});
obs.subscribe((PriceData) => {
if (PriceData.status == 200) {
this.zPrice = PriceData.body!.price.price;
console.log("price", this.zPrice);
} else {
console.log('No price found for currency', currency);
this.zPrice = 1.0;
}
});
return obs;
}
copyAddress() {
if (!navigator.clipboard) {
// alert("Copy functionality not supported");
// alert("Copy functionality not supported");
this.notifierService
.showNotification(this.vE.pmtserviceCopyNotavail,
this.vE.pmtserviceNotservClose,
@ -397,12 +215,13 @@ vE = {
this.vE.pmtserviceNotservClose,
"error",
this.vE.pmtserviceNotservError);
// console.error("Error", err);
// console.error("Error", err);
}
}
copyAmount() {
if (!navigator.clipboard) {
// alert("Copy functionality not supported");
// alert("Copy functionality not supported");
this.notifierService
.showNotification(this.vE.pmtserviceCopyNotavail,
this.vE.pmtserviceNotservClose,
@ -417,13 +236,13 @@ vE = {
this.vE.pmtserviceNotservClose,
"error",
this.vE.pmtserviceNotservError);
// console.error("Error", err);
// console.error("Error", err);
}
}
copyMemo() {
if (!navigator.clipboard) {
// alert("Copy functionality not supported");
// alert("Copy functionality not supported");
this.notifierService
.showNotification(this.vE.pmtserviceCopyNotavail,
this.vE.pmtserviceNotservClose,
@ -438,7 +257,7 @@ vE = {
this.vE.pmtserviceNotservClose,
"error",
this.vE.pmtserviceNotservError);
// console.error("Error", err);
// console.error("Error", err);
}
}

View File

@ -14,7 +14,8 @@ var Buffer = require('buffer/').Buffer;
})
export class ReceiptService {
beUrl = ConfigData.Be_URL;
private dataStore: {order: Order, owner: Owner } = {
private dataStore: {order: Order, owner: Owner, name: string } = {
name: '',
owner: {
_id: '',
name: '',
@ -58,34 +59,30 @@ export class ReceiptService {
public readonly orderUpdate: Observable<Order> = this._orderUpdated.asObservable();
public _nameUpdated: BehaviorSubject<string> = new BehaviorSubject(this.dataStore.owner.name);
public readonly nameUpdate: Observable<string>= this._nameUpdated.asObservable();
public readonly ownerUpdate;
//public readonly ownerUpdate;
private reqHeaders: HttpHeaders;
private session: null|string;
private params: HttpParams;
constructor(
private http: HttpClient,
public userService: UserService
) {
this.session = localStorage.getItem('s4z_token');
//this.session = localStorage.getItem('s4z_token');
this.params = new HttpParams();
var auth = 'Basic ' + Buffer.from(ConfigData.UsrPwd).toString('base64');
this.reqHeaders = new HttpHeaders().set('Authorization', auth);
this.ownerUpdate = userService.ownerUpdate;
//this.ownerUpdate = userService.ownerUpdate;
}
getOrderById(id:string, token: string) {
let obs = this.http.get<{message: string, order: any}>(this.beUrl+'order/'+id, { headers:this.reqHeaders, params: this.params.append("token", token), observe: 'response'});
let obs = this.http.get<{message: string, order: any, shop: string}>(this.beUrl+'order/'+id, { headers:this.reqHeaders, params: this.params.append("token", token), observe: 'response'});
obs.subscribe((OrderDataResponse) => {
if (OrderDataResponse.status == 200) {
this.dataStore.order = OrderDataResponse.body!.order;
this.dataStore.name = OrderDataResponse.body!.shop;
this._orderUpdated.next(Object.assign({}, this.dataStore).order);
this.userService.getOwner();
this.ownerUpdate.subscribe((owner) => {
this.dataStore.owner = owner;
this._nameUpdated.next(Object.assign({}, this.dataStore).owner.name);
});
this._nameUpdated.next(Object.assign({}, this.dataStore).name);
} else {
this._orderUpdated.next(Object.assign({}, this.dataStore).order);
console.log('No order found');

View File

@ -42,7 +42,7 @@
<mat-form-field class="full-width"
appearance="fill">
<mat-label>{{ vE.settingsVkeyLbl }}</mat-label>
<textarea matInput placeholder="{{ vE.settingsVkeyPlaceholder }}"
<textarea matInput [readonly]="vKaccess" placeholder="{{ vE.settingsVkeyPlaceholder }}"
formControlName="vKey">
</textarea>
</mat-form-field>

View File

@ -29,7 +29,6 @@ export class SettingsComponent implements OnInit {
owner: Owner;
useZats: boolean;
proVersion: boolean = false;
useVKey: boolean = false;
linkMsg: string = '';
xeroAccCod: string = '';
saveAccOk: boolean = false;
@ -117,6 +116,7 @@ export class SettingsComponent implements OnInit {
};
//
languageRdy = new Subject<boolean>();
vKaccess = true;
// ------------------------------------------------------------
constructor(
@ -128,13 +128,11 @@ export class SettingsComponent implements OnInit {
private dialogRef: MatDialogRef<SettingsComponent>,
@Inject(MAT_DIALOG_DATA) public data: {o: Owner}) {
this.useZats = data.o.zats;
this.useVKey = data.o.payconf;
this.settingsForm = fb.group({
name: [data.o.name, Validators.required],
currency: [data.o.currency, Validators.required],
useZats: [data.o.zats, Validators.required],
useVKey: [data.o.payconf, Validators.required],
// proVersion: [data.invoices, Validators.required],
vKey: [data.o.viewkey]
});
this.accCodForm = fb.group ({
@ -142,7 +140,8 @@ export class SettingsComponent implements OnInit {
});
if (data.o.payconf) {
this.settingsForm.get('vKey')!.enable();
this.vKaccess = false;
//this.settingsForm.get('vKey')!.enable();
}
this.owner = data.o;
this.viewkey = data.o.viewkey;
@ -181,8 +180,9 @@ export class SettingsComponent implements OnInit {
ngOnInit() {
this.settingsForm.get('vKey')!.disable();
//this.settingsForm.get('vKey')!.disable();
//
this.vKaccess = true;
this.chgUILanguage();
//console.log('SETTINGS: Return from chgUILanguage()');
//
@ -206,7 +206,7 @@ export class SettingsComponent implements OnInit {
close() {
this.dialogRef.close();
this.dialogRef.close(null);
}
closeIntegration() {
@ -223,8 +223,8 @@ export class SettingsComponent implements OnInit {
this.owner.currency = this.settingsForm.value.currency;
this.owner.zats = this.settingsForm.value.useZats;
this.owner.payconf = this.settingsForm.value.useVKey;
this.viewkey = this.settingsForm.value.vKey;
//this.owner.invoices = this.settingsForm.value.proVersion
this.owner.viewkey = this.settingsForm.value.vKey;
console.log('Settings component key: ' + this.owner.viewkey);
this.dialogRef.close(this.owner);
}
@ -237,15 +237,16 @@ export class SettingsComponent implements OnInit {
}
onChangeVKeyOn(ob: MatSlideToggleChange) {
// console.log("Viewing key switch is " +
// ( ob.checked ? "[ON]." : "[OFF]." ) );
// console.log("Viewing key switch is " +
// ( ob.checked ? "[ON]." : "[OFF]." ) );
this.useVKey = ob.checked;
if ( ob.checked )
this.settingsForm.get('vKey')!.enable();
else
this.settingsForm.get('vKey')!.disable();
if ( ob.checked ) {
//this.settingsForm.get('vKey')!.enable();
this.vKaccess = false;
} else {
//this.settingsForm.get('vKey')!.disable();
this.vKaccess = true;
}
}

View File

@ -162,6 +162,10 @@ export class UserService{
}
saveOwnerSettings(o: Owner) {
console.log('saveOwnerSettings: ' + o.viewkey);
if(o.viewkey.length > 20) {
this.saveOwnerViewingKey(o.viewkey).subscribe({
next: () => {
let obs = this.http.post(this.beUrl + 'api/ownersettings', {payload: o}, {headers: this.reqHeaders, params: this.reqParams});
obs.subscribe({
next: () => {
@ -172,7 +176,40 @@ export class UserService{
this.notifierService.showNotification("Saving settings failed", "Close", "error")
}
}
})
});
}
});
} else {
let obs = this.http.post(this.beUrl + 'api/ownersettings', {payload: o}, {headers: this.reqHeaders, params: this.reqParams});
obs.subscribe({
next: () => {
this.getOwner();
},
error: (error) => {
if ( error.status == 500 ){
this.notifierService.showNotification("Saving settings failed", "Close", "error")
}
}
});
}
}
saveOwnerViewingKey(vk: string){
let obs = this.http.post(this.beUrl + 'api/ownervk', {payload: vk}, {headers: this.reqHeaders, params: this.reqParams});
obs.subscribe({
next: () => {
this.getOwner();
},
error: (error) => {
if (error.status == 400) {
this.notifierService.showNotification('Invalid viewing key, changes not saved', 'Close', 'error');
} else if (error.status == 403) {
this.notifierService.showNotification('Viewing key does not match shop, changes not saved', 'Close', 'error');
}
}
});
return obs;
}
getOwner() {

View File

@ -65,8 +65,8 @@ export class XeroService {
return obs;
}
getXeroAccessToken(code: string, address: string){
const params = this.reqParams.append('code', code).append('address', address);
getXeroAccessToken(code: string){
const params = this.reqParams.append('code', code);
let obs = this.http.get(this.beUrl + 'api/xerotoken' , {headers: this.reqHeaders, params: params, observe: 'response'});
return obs;
}

View File

@ -77,7 +77,7 @@ export class XeroRegComponent implements OnInit {
this.activatedRoute.queryParams.subscribe((params) => {
//console.log(params);
if (params.state === this.owner.address.substring(0,6)) {
this.xeroService.getXeroAccessToken(params.code, this.owner.address).subscribe(tokenData => {
this.xeroService.getXeroAccessToken(params.code).subscribe(tokenData => {
if (tokenData.status == 200) {
//console.log(tokenData.body!);
this.flag = true;

View File

@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="utf-8">
<title>Z-Go!</title>
<title>ZGo - The Zcash Register</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">