HTML display password without <input> - javascript

I would like the admin user of my app to be able to invite new users.
The flow is:
admin user input new user name and email
generate a random password for the new user
display name, email and password for review
admin user click a button, and ajax sends name, email and password to server
server create new user
The rest is easy, except for step 3.
What I want is something like: <p>{password}</p>, and it will be displayed as ****** for default.
If admin user want to see the password, click some button and the password will show as normal text.
I know how to do this with <input>, but is it possible without using <input>?
My current solution is managing a show state for the <p> with javascript, if show === false, display <p>********</p>, else display <p>{password}</p>.
But I'd be happy to see a simpler solution without javascript.
UPDATE
A slightly different solution based on this; password keeps showing even when mouse moved away.
Any element with a tabindex
could be focused
p {
position: relative;
width: 100px;
}
p:after{
content: '*****';
position: absolute;
background-color: white;
right: 0;
left: 0;
top:0;
}
p:focus:after{
content: ''
}
<p tabindex="-1">password1</p>
<p tabindex="-1">password2</p>

try this
[data-pass]:hover:after {
content: attr(data-pass);
}
<p data-pass="{password}">********</p>
now could be selected
p {
position: relative;
width: 100px;
}
p:after{
content: '*****';
position: absolute;
background-color: white;
right: 0;
left: 0;
top:0;
}
p:hover:after{
content: ''
}
<p>{password}</p>

Thanks #ahmad, I came up with this. Would be better if the text could be selected... (pseudo element can't be selected)
[data-pass]:before {
content: "****";
}
[data-pass]:hover:before {
content: "";
}
[data-pass]:hover:after {
content: attr(data-pass);
}
<p data-pass="{password}"></p>

Alternative
input[type=checkbox] {
display: none;
}
input[type=checkbox]:checked~.remove-check {
display: none;
}
input[type=checkbox]:checked~#password {
display: block;
}
#password {
display: none;
position:absolute;
top:0; left:0; background-color:yellow;
padding:0; margin:0;
}
<label class="remove-check" for="chk">*****</label><input id="chk" type="checkbox">
<p id="password">{password}</p>

Related

How to create a popup component with all background blured/disabled?

I am building a react app.
I want to show a popup window in the center of screen in which user can give review to the product.
While showing that window how to prevent scrolling of background and disable all background such that if user clicks outside of that window(even on a button) only that window should disappear?
I want to do something like this:
I have not idea about how it is done.
Please suggest just some way of doing that or suggest some topics which can be used here.
To prevent background, pop a black div that overides entire window.
width: 100vw;
height: 100vh;
position: fixed;
z-index: 99;
in that div, place another div with your content to be displayed.
Here is a working example:
let myEl = document.getElementById("hideScreen")
//myEl.style.display = "block";
addEventListener("click", () => {
myEl.style.display = "block";
})
#hideScreen {
top:0; left: 0;
width: 100%;
height: 100%;
position: fixed;
background: rgba(50,50,50,0.9);
display: none;
}
input {
margin: 50vmin;
}
<body>
Some text to be vanished.
Click to activate.
<div id="hideScreen">
<input type="text" id="userReview" placeHolder="your review"></input>
</div>
</body>

Mudblazor - Click inside the zone of the drag and drop

I'm using a CSS framework for Blazor WebAssembly called Mudblazor.
I have added a button inside the drag and drop zone that will remove each image that has been uploaded. But when I click on the remove button, I only get the file manager up.
The problem is that the actual drag and drop zone is set to position: absolute none.
Is there a way to solve this?
Example of what this looks like. It is not possible to click on the remove button. File manager appears when I try to click the remove button.
CSS:
.drag-drop-zone {
display: flex;
align-items: center;
justify-content: center;
transition: all .4s;
/* min-height: 400px;
*/ border: 3px dotted;
min-height: 100px;
border: 2px dashed rgb(0, 135, 247);
}
.drag-drop-input {
position: absolute;
width: 100%;
height: 90%;
opacity: 0;
cursor: pointer;
z-index: 2;
}
.drag-enter {
box-shadow: var(--mud-elevation-10);
}
.list {
padding: 2em;
min-width: 100%;
}
Razor
<MudList Style="padding:2em;width:100%;" Dense="true">
#foreach (var file in fileNames)
{
<MudListItem #key="#file">
<MudChip Color="Color.Dark"
Style="width:60px; overflow:hidden;"
Text="#(file.Split(".").Last())" />
#file <MudButton Color="Color.Error" OnClick="() => Remove(file)" Style="position:unset;">Remove</MudButton>
</MudListItem>}
Remove method:
void Remove(string file)
{
var ret = fileNames.FirstOrDefault(x => x.Contains(file));
if (ret != null)
{
fileNames.Remove(ret);
}
}
I had the same problem when using the sample code from MudBlazor home page
https://mudblazor.com/components/fileupload#drag-and-drop-example
As Memetican states it seemed like the .drag-drop-input was overlaying the other content. I dont know what I am doing, so I will not give an explanation but the position: absolute; part caught my interest. Reading about it here led me to changing it from absolute to static. Together with some other minor changes from the sample code I have the following that seems to be working
#page "/tools/csvimport"
#inject ISnackbar Snackbar
<style>
.drag-drop-zone {
display: flex;
align-items: center;
justify-content: center;
transition: all .4s;
height: 100%;
}
.drag-drop-input {
position: static;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
z-index: 2;
}
.drag-enter {
box-shadow: var(--mud-elevation-10);
}
.list {
padding: 2em;
min-width: 100%;
}
</style>
<MudGrid Justify="Justify.Center" Spacing="4">
<MudItem xs="12" sm="12" md="6">
<MudPaper #ondragenter="#(()=>_dragEnterStyle="drag-enter")"
#ondragleave="#(()=>_dragEnterStyle=null)"
#ondragend="#(()=>_dragEnterStyle=null)"
Class=#("drag-drop-zone "+ _dragEnterStyle)
MinHeight="200px">
<InputFile OnChange="OnInputFileChanged" class="drag-drop-input" />
#if (file is null)
{
<MudText Typo="Typo.h6">Drag file here, or click to browse your files</MudText>
}
else
{
<MudChip Color="Color.Info">#file.Name</MudChip>
}
</MudPaper>
<MudGrid Justify="Justify.Center" Spacing="4" Class="mt-4">
<MudItem>
<MudButton OnClick="Upload" Disabled="#(file is null)" Color="Color.Primary" Variant="Variant.Filled">Upload</MudButton>
</MudItem>
<MudItem>
<MudButton OnClick="#(() => file = null)" Disabled="#(file is null)" Color="Color.Error" Variant="Variant.Filled">Clear</MudButton>
</MudItem>
</MudGrid>
</MudItem>
</MudGrid>
#code {
string _dragEnterStyle;
IBrowserFile file;
void OnInputFileChanged(InputFileChangeEventArgs e)
{
file = e.File;
}
void Upload()
{
//Upload the files here
Snackbar.Configuration.PositionClass = Defaults.Classes.Position.TopCenter;
Snackbar.Add("TODO: Upload " + file.Name, Severity.Normal);
}
}
I think you've left out the code for your drop target, as most of your CSS styles aren't referenced.
However, it appears that your drop target is positioned on top of your files list. Note the z-index in your CSS...
.drag-drop-input {
position: absolute;
width: 100%;
height: 90%;
opacity: 0;
cursor: pointer;
z-index: 2; /* <== here */
}
This would create a glass-pane type effect. You can see your files list and remove buttons, because you have opacity: 0; - however you can't interact with them because your drop target is above them in the z-order.
Think of an HTML page as a bunch of overlapping rectangles. Mouse interactions hit the topmost layer only.
Solution 1: (workable) Remove that z-index, or set the z-index for your files list and your buttons higher than the drop target. This should work however it may create undesirable behaviors on some browsers, if the user tries to drop a file directly on your file list, or your remove buttons.
Solution 2: (recommended) Move your file list and remove buttons outside of the drop target. Design your drop target do its one function- accepting file drops, and mouse clicks that invoke the file upload action.

onSubmit Adding a Second Javascript Action After Form Validation

I have a form that uses very basic input validation using javascript onSubmit before the server side processing begins in PHP.
However, due to the time the PHP script takes to process (uploading images etc) I am trying to use the same onSubmit function to display a "please wait" notice if it passes validation. Or is there a better way? I tried in PHP, but the processing has to complete before I can echo any output. Anything I have tried from other SO posts stops the validation process.
<form id="form" method="post" action="" onsubmit="return Validate(this)" autocomplete="off">
Current Javascript Example
function Validate(myForm) {
var error = '';
// Example Filed
if(myForm.name.value == '') {
error += '- Please enter your Name.\n';
}
// Show Error Notice
if(error != '') {
error = 'The form has not been completed correctly, please check the following:\n\n' + error;
alert(error); // Displays Error
return false;
} else {
// Allows the form to move on to PHP Processing
// Need to Show Waiting Notice here
return true;
}
}
CSS & HTML Waiting Notice (Initially Hidden)
<style>
#processing {
display:block;
position: fixed;
top: 0;
left: 0;
background: rgba(255,255,255,0.8);
width: 100%;
height: 100%;
}
#popup {
width: 300px;
min-height: 160px;
padding:20px;
background-color: #fff;
border: 5px solid #06C;
text-align: center;
color: #202020;
position: absolute;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -100px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
#popup img {
height:60px;
width:60px;
}
</style>
<div id="processing">
<div id="popup">
<img width="60" height="60" src="../waiting.gif" />
<h3>Please Wait!</h3>
<p>The form is processing...</p>
</div>
</div>
Any help would be appreciated
All you need to do is have the "...Please Wait..." element already present in the document, but hidden and then show it when the submit takes place. You do this by applying a CSS class to the element in the HTML, which hides it initially and then remove that class when the form is valid.
A couple of side notes...
Don't use inline HTML event attributes (onsubmit, onclick, etc.). That is how events were registered 20 years ago and there are many drawbacks to using them. Unfortunately, because most people just copy what others have done, the use of this approach just will not die. Instead, follow modern standards and use .addEventListener().
Also, don't ever name an element or a variable name as name is a property of the Global window object and the use of that name can cause problems in the code.
// Get references to the DOM elements that your code will need
var frm = document.getElementById("form");
var wait = document.getElementById("processing");
var userName = document.getElementById("txtName");
frm.addEventListener("submit", validate); // Set up events the modern, standards-based way
// All event handlers will automatically be passed a reference
// to the event object for that event
function validate(evt) {
var error = '';
// Example Filed
if(userName.value == '') {
error += '- Please enter your Name.\n';
}
// Show Error Notice
if(error != '') {
error = 'The form has not been completed correctly, please check the following:\n\n' + error;
alert(error); // Displays Error
evt.preventDefault(); // Stop the event
} else {
// Allows the form to move on to PHP Processing
// Need to Show Waiting Notice here
wait.classList.remove("hidden"); // Remove the hidden class
}
}
#processing {
display:block;
position: fixed;
top: 0;
left: 0;
background: rgba(255,255,255,0.8);
width: 100%;
height: 100%;
}
#processing.hidden { display:none } /* This hides the message by default */
#popup {
width: 300px;
min-height: 160px;
padding:20px;
background-color: #fff;
border: 5px solid #06C;
text-align: center;
color: #202020;
position: absolute;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -100px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
#popup img {
height:60px;
width:60px;
}
<form id="form" method="post" action="#" autocomplete="off">
<input type="text" id="txtName">
<input type="submit">
</form>
<div id="processing" class="hidden">
<div id="popup">
<img width="60" height="60" src="../waiting.gif" />
<h3>Please Wait!</h3>
<p>The form is processing...</p>
</div>
</div>
On your javascript validation, you could let the user know the image is loading by showing a simple message.
<div class="loading" style="display:none;">Loadin ...</div>
function Validate(myForm) {
var error = '';
// Example Filed
if(myForm.name.value == '') {
error += '- Please enter your Name.\n';
}
// Show Error Notice
if(error != '') {
error = 'The form has not been completed correctly, please check the following:\n\n' + error;
alert(error); // Displays Error
return false;
} else {
// Allows the form to move on to PHP Processing
// Need to Show Waiting Notice here
// show the user the image is loading
$('#form .loading').show();
return true;
}
}
After it loads you may remove the message once you get a response from the server.
$('#form .loading').hide();

How to use Placeholder value as a title of the text box when user clicks on it?

I want to use the placeholder value as the title when user click on the text box.
For example in this image Image One the placeholder value is "Email or phone" when user clicks on it it becomes the title of this text box as shown in second image here Image Two . If you didn't understand correctly then please go to gmail.com (New Look Of Sign In) when you click on the text box the placeholder value goes top and when you click outside, that value becomes the placeholder. I want exactly that functionality but I'm unable to do it.
Help me.
You can check this
HTML Code
<div>
<input type="text" class="inputText" />
<span class="floating-label">Email or phone</span>
</div>
CSS Code
input:focus ~ .floating-label,
input:not(:focus):valid ~ .floating-label{
top: 8px;
bottom: 10px;
left: 20px;
font-size: 11px;
opacity: 1;
}
.inputText {
font-size: 14px;
width: 200px;
height: 35px;
}
.floating-label {
position: absolute;
pointer-events: none;
left: 20px;
top: 18px;
transition: 0.2s ease all;
}
Check this fiddle https://jsfiddle.net/60Lfj34s/
I tried for a long time to come up with a pure CSS solution to this, but there is a real issue in that the <input> element will not take a ::before pseudo-element, so you cannot use (for example):
input:focus::before {
content: attr(placeholder);
}
So here is a javascript solution instead:
var myInput = document.getElementsByTagName('input')[0];
var myPlaceHolder = myInput.getAttribute('placeholder');
function addInputLabel() {
if (document.getElementsByClassName('my-label').length < 1) {
var myLabel = document.createElement('div');
myLabel.textContent = myPlaceHolder;
myLabel.classList.add('my-label');
document.body.insertBefore(myLabel, myInput);
}
}
myInput.addEventListener('keypress', addInputLabel, false);
.my-label {
height: 16px;
line-height: 16px;
font-size: 11px;
color: rgb(255, 0, 0);
}
<input placeholder="Placeholder Text" />

How to do Dropbox Like Login Button?

I'm trying to do Dropbox like login button.
There was a thread dropbox login popup method in jQuery? but I couldn't do something on this.
I want it to be opened when I press the login button same as dropbox.com
This is an example code. Now it works on hover. But I want on click. I tried focus but couldn't succeed.
<div id="login">
Login
<div>
Login Form
Lorem Ipsum blablbalbabababa lbablaabalbalba
</div>
</div>
And
div#login {
position: relative;
float: right;
height: 20px;
padding: 5px;
}
div#login:focus {
background: rgba(0,0,0,.2);
}
div#login div {
position: absolute;
top:30px;
right:0;
width: 200px;
height: 100px;
padding: 10px;
background: rgba(0,0,0,.2);
visibility: hidden;
}
div#login:focus div {
visibility: visible;
}
This is the demo of this code http://jsfiddle.net/sXmAe/
Probably it is easier with Jquery but I don't know how.
Simply eliminate this rule:
div#login:focus div {
visibility: visible;
}
And then this piece of jQuery will make it visible on click:
$("#login a").click(function(){
$("#login div").css("visibility","visible");
});
You can see it action here: http://jsfiddle.net/jPPew/2/
(I added a margin so the JSFiddle "Result" banner wouldn't get in the way of the click.")
EDIT: If you require that the behavior also "close" the login area if you click elsewhere, try something like this: http://jsfiddle.net/jPPew/6/
$("#login").click(function(e){
$("#login div").css("visibility","visible");
e.stopPropagation();
});
$("body").click(function(e){
$("#login div").css("visibility","hidden");
});
You can try this http://jsfiddle.net/sXmAe/50/

Categories