A password is a technique used to obscure information, aiming to transform recognizable data into unreadable form. While some individuals can reprocess this unreadable information, it's generally considered secure. In Chinese, "password" refers to the general term for "passcode." The "passwords" you enter when logging into websites, email accounts, or ATMs are technically called "passcodes," as they aren't true encrypted codes but can still be referred to as secret numbers.
What is a Strong Password?
- Unique: You should set a separate password for each account.
- Long: It should be at least 12 characters long.
- Complex: It includes uppercase and lowercase letters, numbers, and symbols.
What is a Random Passsword Generator?
A random password generator is a software or program that randomly generates passwords for your various software and website accounts. Using this tool, you don't have to manually change your passwords often and can get strong passwords made up of strings of letters, numbers, and symbols.
Why not create random character combinations yourself? Because humans are not good at generating random passwords and tend to use common numbers, characters, and names. Regardless of how smart you think you are, computers can easily crack passwords generated by humans. This is why you should use our password generator.
Is a Random Password Generator Secure?
When choosing a random password generator, people are most concerned about security. It's uncertain whether the company behind the password generator will know your new password. These companies, like many secure sites, use the HTTPS communication protocol, but it may not be as secure as banking systems.
Therefore, when choosing a password manager or password generator, it's best to choose one with a good reputation and high security. Our password generator has secure local encryption, making it impossible for hackers to access the created passwords. We do not store your details online.
Why Should Your Password Be Unique?
Its absolutely necessary to set a unique password for each of your online accounts.
Reusing passwords across accounts poses significant risks. Once a hacker steals your password for one account, they gain access to all other accounts.
Creating new passwords by simply adding extra characters, symbols, or numbers to an existing password is not a good idea. We recommend using our strong password generator, which provides additional protection.
Why Should Your Password Be Random?
Strong passwords consist of uppercase and lowercase letters, numbers, and special characters, making them impossible for even the most skilled hackers to crack. They should also be unrelated to your personal information. If you use phone numbers, social security numbers, postal codes, ID numbers, door numbers, and birthdays in your password, attackers can easily compromise your account.
Code
UI Layout
<div class="password w theme-bg-color">
<div class="content">
<div class="tool-title">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-mima1"></use>
</svg>
<h1>Password Generator</h1>
</div>
<div class="tool-main">
<el-input class="password-input" size="large" v-model="passwordVal">
<template #suffix>
<div class="input-icon-box">
<svg
class="icon refresh-icon"
aria-hidden="true"
@click="handleRefreshClick"
>
<use xlink:href="#icon-shuaxin"></use>
</svg>
</div>
<div class="input-icon-box copy-icon-box" @click="copyText(passwordVal)">
Copy
</div>
</template>
</el-input>
<div class="input-icon-box m-copy-icon-box" @click="copyText(passwordVal)">
Copy
</div>
<div class="config-item-box">
<span>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-peizhi"></use>
</svg>
<span>Configuration Options</span>
</span>
<div>
<el-checkbox
@change="updatePassword"
size="large"
label="Numbers (0-9)"
v-model="numbers"
/>
<el-checkbox
@change="updatePassword"
size="large"
label="Lowercase Letters (a-z)"
v-model="lowercase"
/>
<el-checkbox
@change="updatePassword"
size="large"
label="Uppercase Letters (A-Z)"
v-model="uppercase"
/>
<el-checkbox
@change="updatePassword"
size="large"
label="Special Characters (!@#$%^&*)"
v-model="symbols"
/>
</div>
<div>
<el-checkbox
@change="updatePassword"
label="Exclude Confusing Characters (1lI, 0oO)"
v-model="exclude"
/>
</div>
</div>
<div class="password-length-box">
<span>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-changdu"></use>
</svg>
<span>Password Length</span>
</span>
<el-slider
@change="updatePassword"
v-model="passLength"
show-input
class="slider"
:min="1"
:max="50"
/>
</div>
<div class="history-box">
<div class="record-box">
<el-checkbox label="Record History" v-model="isHistory" />
<span>---This feature records the last 100 passwords you generated. And the history is not stored on our cloud server, but on your browser's local storage.</span>
</div>
<div class="look-history-box">
<span @click="historyPassword">
{{ isMore ? "Hide History" : "View History" }}
<i class="bi bi-chevron-down"></i>
</span>
</div>
<div class="remove-btn" v-if="isMore" @click="removeHistory">Clear History</div>
<div class="history-content" v-if="isMore">
<div
class="history-pw-item"
v-for="(item, idx) in dataMap.passList"
:key="idx"
>
<span @click="copyText(item)">{{ item }}</span>
</div>
</div>
</div>
<div class="about-password-box">
<span>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-guanyu-"></use>
</svg>
<span>About the Password Generator</span>
</span>
<p>
A password is a technique used to obscure information, aiming to transform recognizable data into unreadable form. Of course, for a small number of people, this unreadable information can be reprocessed and restored. In Chinese, "password" refers to the general term for "passcode." The "passwords" you enter when logging into websites, email accounts, and ATMs are technically called "passcodes," as they are not true encrypted codes, but can still be referred to as secret numbers.
</p>
</div>
</div>
</div>
</div>
CSS Styles
.password .content {
padding: 50px 100px;
}
.tool-main {
padding-top: 20px;
}
.tool-title {
display: flex;
align-items: center;
}
.tool-title h1 {
font-size: 24px;
}
.tool-title .icon {
width: 2.2em;
height: 2.2em;
margin-right: 5px;
}
.input-icon-box {
display: flex;
align-items: center;
padding: 10px 5px;
}
.copy-icon-box,
.m-copy-icon-box {
cursor: pointer;
background-color: var(--themeTextColor);
margin: 5px 0;
padding: 5px 25px;
border-radius: 2px;
color: #fff;
line-height: 35px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
user-select: none;
&:hover {
opacity: 0.8;
}
}
.m-copy-icon-box {
margin-top: 10px;
display: none;
}
.icon {
width: 2em;
height: 2em;
cursor: pointer;
margin-right: 10px;
}
.config-item-box,
.password-length-box,
.about-password-box {
margin: 20px 0;
span {
font-weight: 500;
display: flex;
align-items: center;
.icon {
width: 1.2em;
height: 1.2em;
}
}
}
.config-item-box {
margin-top: 20px;
}
.password-length-box span {
margin-right: 20px;
}
.password-length-box .slider {
width: 400px;
}
.history-box p {
font-size: 14px;
}
.record-box {
font-size: 12px;
display: flex;
align-items: center;
flex-wrap: wrap;
span {
margin-left: 20px;
}
}
.look-history-box {
display: flex;
align-items: center;
span {
font-size: 14px;
cursor: pointer;
user-select: none;
display: flex;
align-items: center;
.bi {
margin-left: 3px;
}
}
}
.bi-chevron-down::before {
transform: rotate(0deg);
transition: all 0.3s;
vertical-align: middle;
}
.bi-chevron-down.open-more::before {
transform: rotate(180deg);
transition: all 0.3s;
}
.remove-btn {
margin-top: 10px;
background-color: red;
width: 90px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 5px;
padding: 8px 0;
color: #fff;
font-size: 12px;
cursor: pointer;
transition: all 0.2s;
&:hover {
background-color: rgb(229, 41, 41);
transition: all 0.2s;
}
}
.history-content {
padding: 10px;
display: flex;
align-items: center;
flex-wrap: wrap;
background-color: #fff;
border-radius: 5px;
margin-top: 10px;
.history-pw-item {
padding: 8px 0;
width: 50%;
overflow-wrap: break-word;
span {
color: rgb(12, 6, 1);
font-weight: 500;
font-size: 14px;
cursor: pointer;
transition: all 0.2s;
&:hover {
color: var(--linkTextColor);
transition: all 0.2s;
}
}
}
p {
font-size: 14px;
}
}
.about-password-box {
margin-top: 30px;
p {
font-size: 14px;
margin: 10px 0;
}
}
:deep(.el-input__wrapper.is-focus) {
box-shadow: none;
}
:deep(.el-slider__runway) {
background-color: #666;
}
:deep(.el-slider__bar) {
background-color: var(--themeTextColor);
}
:deep(.el-slider__button) {
border-color: var(--themeTextColor);
}
:deep(.el-checkbox__label) {
color: var(--balckTextColor) !important;
}
:deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
background-color: var(--themeTextColor);
border-color: var(--themeTextColor);
}
:deep(.password-input .el-input__inner) {
font-size: 20px;
font-weight: 600;
color: var(--balckTextColor);
}
.rotate-animation {
animation: rotate 0.3s linear infinite;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@media (max-width: 860px) {
.password .content {
padding: 10px;
}
.tool-main {
padding: 0;
}
.password-input .icon {
margin-right: 0;
}
.copy-icon-box {
display: none;
}
.m-copy-icon-box {
display: block;
}
.password-length-box .slider {
width: 100%;
}
.look-history-box {
margin-top: 10px;
}
.history-pw-item {
width: 100% !important;
}
}
Variable Definitions
const dataMap = reactive({
passList: [],
});
let passwordVal = ref("");
let passLength = ref(12);
let numbers = ref(true);
let lowercase = ref(true);
let uppercase = ref(true);
let symbols = ref(true);
let exclude = ref(true);
let isHistory = ref(true);
let isMore = ref(false);
let maxPw = ref(100);
Refresh Password Method
const updatePassword = () => {
const charSets = {
uppercase: "ABCDEFGHIJKLMNOPQRSTUVWXYZ",
lowercase: "abcdefghijklmnopqrstuvwxyz",
numbers: "0123456789",
symbols: "!@#$%^&*()_+-=[]{}|;:,.<>?",
};
let allChars = "";
for (const [key, value] of Object.entries(charSets)) {
if (key === "exclude" && exclude.value) {
allChars = allChars.replace(/[1lI0oO]/g, "");
} else if (key === "symbols" && symbols.value) {
allChars += value;
} else if (key !== "exclude" && key !== "symbols" && eval(`${key}.value`)) {
allChars += value;
} else {
allChars = allChars.replace(new RegExp("[" + value + "]", "g"), "");
}
}
passwordVal.value = "";
for (let i = 0; i < passLength.value; i++) {
const randomIndex = Math.floor(Math.random() * allChars.length);
passwordVal.value += allChars[randomIndex];
}
if (isHistory.value) {
dataMap.passList = getStore("PASS_WORD_LIST")?.length
? getStore("PASS_WORD_LIST")
: [];
if (dataMap.passList.length < maxPw.value) {
dataMap.passList.push(passwordVal.value);
setStore("PASS_WORD_LIST", dataMap.passList);
}
}
};
Page Load or Refresh
onMounted(() => {
updatePassword();
});
if (getStore("PASS_WORD_LIST")?.length) {
dataMap.passList = getStore("PASS_WORD_LIST");
}
Add Animation to Refresh Button
const handleRefreshClick = () => {
const iconBox = document.querySelector(".refresh-icon");
iconBox.classList.add("rotate-animation");
setTimeout(() => {
iconBox.classList.remove("rotate-animation");
}, 500);
updatePassword();
};
Show/Hide History Button
const historyPassword = () => {
isMore.value = !isMore.value;
const moreIcon = document.querySelector(".bi-chevron-down");
moreIcon.classList.toggle("open-more");
};
Clear History
const removeHistory = () => {
clearStore("PASS_WORD_LIST");
dataMap.passList = getStore("PASS_WORD_LIST");
isMore.value = false;
};
Copy Text Function
const copyText = (val) => {
navigator.clipboard
.writeText(val)
.then(() => {
ElNotification({
title: "Success",
message: "Your generated password has been copied successfully!",
type: "success",
zIndex: 99999,
});
})
.catch(() => {
ElNotification({
title: "Failed",
message: "An error occurred while copying the password, please try again",
type: "warning",
zIndex: 99999,
});
});
};