Converting Markdown to HTML - html

I am creating a website. I am using Node.JS, Express and MongoDB
This is the schema that I designed for my website
var reviewSchema = new mongoose.Schema({
title: String,
author: String,
paper: String,
content: String
})
If I click the "Submit" button, the data is well inserted into the DB.
However, when I click the post. This is what I see
Here is my code.
<div class="container">
<h1> <%= review.title%></h1>
<h3> <%= review.author %> - <%= review.paper %></h3>
<a role="button" class="addbutton btn btn-default btn-info" href="<%=review._id%>/edit" style="margin-left: 0px;">Edit</a>
<form action="/reviews/<%=review._id%>?_method=DELETE" method="POST">
<button class="addbutton btn btn-default btn-danger" style="margin-left: 0px">Delete</button>
</form>
<hr>
<p> <%= review.content %> </p>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/pagedown/1.0/Markdown.Converter.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/pagedown/1.0/Markdown.Editor.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/pagedown/1.0/Markdown.Sanitizer.js"></script>
<script>
var converter = Markdown.getSanitizingConverter();
var editor = new Markdown.Editor(converter);
editor.run();
</script>
What am I doing wrong?

need to download markdown converter
and use
makrdown.toHTML()

Related

Add jsp global variable to href html

Guys I need to send request to servlet named sendOTP when click the change password button I also want to send the parameter named email along with it.How to do that? Please help!
<html>
<body>
<h1>ADMIN</h1>
<div class="btn-group" >
<button>VIEW ORDERS</button>
<button>VIEW PRODUCTS</button>
<button>VIEW SELLER</button>
<button>SEND REQUEST</button>
<a href="http://localhost:8090/Bootathon2_war_exploded/SendOTP?email="+<%=email%>><button>CHANGE PASSWORD</button></a>
<button>LOGOUT</button>
</div>
</body>
<%!
String email;
%>
<%
email=request.getSession().getAttribute("email").toString();
%>
</html>

How to change the page diaplayed on the same route based on whether the person is logged in or not? I'm using node.js express auth0

If someone visits the site , they are going to be directed towards '/' which will display index page
This page has login and signup options.
server.js--
const express = require("express");
const ejs = require('ejs');
const app = express();
const { requiresAuth } = require('express-openid-connect');
const { auth } = require('express-openid-connect');
app.get('/', (req, res) => {
res.render('pages/index');
});
however , if the person has logged in and wants to view the index page again I want to remove those login and signup links.
these links are coded in navigation bar in html, ejs.
index.ejs--
<%- include('../partials/head.ejs') %>
<body>
<%- include('../partials/navbar.ejs') %>
<form action="/" method="POST">
<button class="btn btn-light btn-lg btn-block addPG"> Add New...</button>
</form>
<%- include('../partials/footer.ejs') %>
</body>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</html>
I wrote a new index page for those who have logged in but I cant figure a way to do so.
Is my approach right or is there a better way to implement the stuff that I desire.
How I did it in my navbar was with if statements, Below is a snippet of how I have my ejs file
<%if (user && user.role==2) { %>
<li class="treeview">
<a href="#">
<i data-feather="user-check"></i>
<span>Admin</span>
<span class="pull-right-container">
<i class="fa fa-angle-right pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li><i class="icon-Commit"><span class="path1"></span><span class="path2"></span></i>Users</li>
<li><i class="icon-Commit"><span class="path1"></span><span class="path2"></span></i>Recent Devices</li>
</ul>
</li>
<% } %>
<% } %>
<%if (!user) { %>
<li>
<a href="/signin">
<i data-feather="log-in"></i>
<span>Signin</span>
</a>
</li>
<% } %>
That just checks if there is a user, and you can update your HTML to show stuff based on roles and such.

EJS in HTML not working

is this a correct syntax for EJS technology in HTML ? The "flash object" is send from controller . Here it is my "log in" action in Controller and HTML code. I want a peace of HTML is executed base on the content of "flash object". But it doesn't work.This is controller in back end:
login: function(req, res){
var x = new LdapService();
x.login(req.body.userid, req.body.password, function(isAuth){
if(isAuth ){
res.send('successful login');
}
else{
res.view('login/index', {locals: {flash: req.flash('error', 'Wrong Credentials')}}) ;
}
});
},
=============================================
Here it is the HTML code in front end.
<% if (req.flash('error')!=''){ %>
<p>Hi</p>
<p><%- (req.flash('error')) %></p>
<div class="box-body">
<div class="alert alert-danger alert-dismissable">
<i class="fa fa-ban"></i>
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
<b>Alert!</b> Wrong
</div>
</div>
<% } %>
Once you access the flash object using req.flash, its value is cleared. So the conditional test will clear the flash object.
The value is also stored in the session, so I test the session directly before displaying the flash value.
<% if(req.session.flash && req.session.flash.error){ %>
<div class="row form-row m-l-20 m-r-20 xs-m-l-10 xs-m-r-10">
<div class="alert alert-error">
<button class="close" data-dismiss="alert"></button>
<%- req.flash('error') %>
</div>
</div>
<% }%>
It's not entirely clear why you need to use flash messages in this case, since you're setting the message and displaying it in the same request. Flash messages are more appropriate when you're setting a message and then redirecting, because the code before the redirect doesn't have the opportunity to set the view locals directly. You could just do:
res.view('login/index', {locals: {flash: {'error':'Wrong Credentials'}}});
and in your template:
<% if((flash = {} || flash) && flash.error){ %>
<div class="row form-row m-l-20 m-r-20 xs-m-l-10 xs-m-r-10">
<div class="alert alert-error">
<button class="close" data-dismiss="alert"></button>
<%- flash.error %>
</div>
</div>
<% }%>
If you were redirecting from another view, then you could use flash messages and keep the same template. In the action you're redirecting from, you'd set a flash message:
req.flash('error', 'my error message');
res.redirect('/someOtherLoginRoute');
and in the action you redirected TO, do:
res.view("login/index", {locals: {flash: req.flash()}});
It's kind of a contrived example, but there you have it.

Angular html not loading properly

Sorry if this has a really obvious answer, I'm fairly new to Angular JS and this is something that I have been stuck on for an annoyingly long time.
To give you a bit of background, I am calling ng-repeat on a directive as follows:
<div ng-controller = 'salesctrl'>
<salecell ng-repeat = "kpi in kpis" kpi ="kpi"></salecell>
</div>
With the directive being described as follows:
.directive("salecell", function(){
return{
templateUrl: "sale-cell-template.html" ,
restrict: 'E',
scope: {
kpi: '='
},
link: function(scope){
return scope;
},
controller: function($scope){
if(typeof $scope.kpi != 'undefined'){
$scope.kpi.value = 0;
$scope.increment = function(){
$scope.kpi.value++;
}
$scope.decrement = function(){
if($scope.kpi.value != 0){
$scope.kpi.value--;
}
}
}
}
};
})
and the attached controller:
.controller("salesctrl", function($scope, $rootScope, SalesSvc){
SalesSvc.query().$promise.then(function(data){
$scope.kpis = data;
});
$scope.submit = function(){
SalesSvc.save($scope.kpis).$promise.then(function(){
for(var i = 0; i < $scope.kpis.length; i++){
$scope.kpis[i].value = 0;
}
});
$rootScope.$emit('salecreate');
}
})
The issue that I am having is that, regardless of the contents of my associated template, only the outer element is being rendered. For example if I have:
<tr>
<div class="col-md-6"> <label class="control-label">{{kpi.title}}</label></div>
<div ng-show="!kpi.dollar" class="col-md-6">
<div id="spinner4">
<div class="input-group" style="width:150px;">
<div class="spinner-buttons input-group-btn">
<button ng-click="decrement()" type="button" class="btn spinner-up btn-warning">
<i class="fa fa-minus"></i>
</button>
</div>
<input ng-model="kpi.value" type="text" class="spinner-input form-control" maxlength="3" >
<div class="spinner-buttons input-group-btn">
<button ng-click="increment()" type="button" class="btn spinner-down btn-primary">
<i class="fa fa-plus"></i>
</button>
</div>
</div>
</div>
</div>
<div ng-show="kpi.dollar" class="col-md-6">
<div class="input-group m-bot15" style="width: 150px;">
<span class="input-group-addon">$</span>
<input ng-model="kpi.value" type="text" class="form-control">
</div>
</div>
Nothing will load on the page, and likewise, if I have:
<tr>
<h1> Hello World! </h1>
</tr>
Nothing is loaded either.
Things I have already checked:
-I have made sure that both $scope.kpis and $scope.kpi are defined
-I have ensured that the template is actually being called (both by inspecting elements and by calling a console.log from within the template)
-A bit of searching around suggested that it might be an error within the template, but this seems strange given that it doesn't work even with a near-empty template.
The only other thing that I can think to add is that when I was using console.log in the template that was visible in the element inspector (Chrome), but nothing else has been.
Let me know if you need anything else, and once again I hope this isn't something really stupid that I have missed.
Ensure that the content inside the table are wrapped in <td> tags. Currently they are directly inside <tr> tags and is invalid HTML.
<tr>
<td>
<div class="col-md-6"> <label class="control-label">{{kpi.title}}</label></div>
...
</td>
</tr>

popup with bootstrap

how can i create a popup with MVC bootstrap?
I have this code, when I click on "generate password" calls to a function (it´s in my controller Admin) and it returns me a string. How can i display the string in a popup window??
<div class="editor-field" title="User Password">
<a class="btn btn-primary btn-small" href="#"
onclick="location.href='#Url.Action("GeneratePsw", "Admin", null)'; return false;">
<i class="icon-lock icon-white"></i> Generate password
</a>
</div>
Since event listeners are better than click events, I'd probably do something like this:
<div class="editor-field" title="User Password">
<a id="pwd_gen" class="btn btn-primary btn-small" href="#">
<i class="icon-lock icon-white"></i> Generate password
</a>
</div>
$(function() { // document.ready shorthand
$('#pwd_gen').click(function() {
var myPwd = $(this).location.href='#Url.Action("GeneratePsw", "Admin", null);
alert(myPwd); // or however you want to handle it with Bootstrap
});
});
$(document).on("click", ".open-ShowPwdDialogUser", function () {
var pwd="";
$.get("#Url.Action("GeneratePsw", "Admin")",function(data){
pwd=data;
$(".modal-body #pwdUser").val(pwd);
$('#1').modal('show');
});
})