@ynotzort/sveltekit-password-protect
Version:
Simple utility to add a layer of protection to your websites, very useful for agencies and freelancers
2 lines (1 loc) • 3.27 kB
TypeScript
export declare const PAGE_TEMPLATE = "<!DOCTYPE html>\n<html class=\"%theme%\">\n\t<head>\n\t\t<title>%title%</title>\n\t\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n\n\t\t<style>\n\t\t\t:root {\n\t\t\t\t--foreground: #000;\n\t\t\t\t--background: #f0f0f0;\n\t\t\t\t--card: #fff;\n\t\t\t\t--muted: #666;\n\t\t\t\t--border: #ccc;\n\t\t\t\t--primary: #357DED;\n\t\t\t\t--primary-foreground: #fff;\n --error: #E9190F;\n\t\t\t}\n\n\t\t\t* {\n\t\t\t\tmargin: 0;\n\t\t\t\tpadding: 0;\n\t\t\t\tbox-sizing: border-box;\n\t\t\t}\n\n\t\t\tbody {\n\t\t\t\tbackground-color: var(--background);\n\t\t\t\tcolor: var(--foreground);\n\t\t\t}\n\n\t\t\t.container {\n\t\t\t\tdisplay: flex;\n\t\t\t\tflex-direction: column;\n\t\t\t\talign-items: center;\n\t\t\t\tjustify-content: center;\n\t\t\t\tmin-height: 100vh;\n\t\t\t\tmin-height: 100dvh;\n\t\t\t}\n\n\t\t\tform {\n\t\t\t\tborder: 1px solid var(--border);\n\t\t\t\tpadding: 16px;\n\t\t\t\tmax-width: 360px;\n\t\t\t\tborder-radius: 8px;\n\t\t\t\tbox-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);\n\t\t\t\tbackground-color: var(--card);\n\t\t\t}\n\n\t\t\tform * {\n\t\t\t\tmargin-bottom: 16px;\n\t\t\t}\n\n\t\t\th1 {\n\t\t\t\tfont-size: 1.3rem;\n\t\t\t\tfont-weight: 600;\n\t\t\t\tmargin-bottom: 10px;\n\t\t\t}\n\n\t\t\tp {\n\t\t\t\tfont-size: 0.8rem;\n\t\t\t\tcolor: var(--muted);\n\t\t\t\tmargin-bottom: 10px;\n\t\t\t}\n\n\t\t\tlabel {\n\t\t\t\tfont-size: 0.8rem;\n\t\t\t\tcolor: var(--muted);\n\t\t\t\tmargin-bottom: 10px;\n\t\t\t\ttext-transform: uppercase;\n\t\t\t}\n\n\t\t\tinput {\n\t\t\t\tpadding: 10px;\n\t\t\t\tborder: 1px solid var(--border);\n\t\t\t\tborder-radius: 5px;\n\t\t\t\twidth: 100%;\n\t\t\t\tdisplay: block;\n\t\t\t\tmargin-top: 4px;\n\t\t\t}\n\n\t\t\tbutton {\n\t\t\t\tpadding: 10px;\n\t\t\t\tborder: 1px solid var(--border);\n\t\t\t\tbackground-color: var(--primary);\n color: var(--primary-foreground);\n\t\t\t\tborder-radius: 5px;\n\t\t\t\twidth: 100%;\n\t\t\t\tfont-size: 0.8rem;\n\t\t\t\ttext-transform: uppercase;\n\t\t\t\tfont-weight: 600;\n\t\t\t\ttransition: all 0.2s ease-in-out;\n\t\t\t}\n\n\t\t\tinput:focus {\n\t\t\t\toutline: none;\n\t\t\t}\n\n\t\t\tbutton:hover {\n\t\t\t\tcursor: pointer;\n\t\t\t\topacity: 0.8;\n\t\t\t}\n\n\t\t\t.dark {\n\t\t\t\t--foreground: #fff;\n\t\t\t\t--background: #000;\n\t\t\t\t--card: #111;\n\t\t\t\t--muted: #ccc;\n\t\t\t\t--border: #333;\n\t\t\t\t--primary: #357DED;\n\t\t\t\t--primary-foreground: #fff;\n\t\t\t}\n\n\t\t\t.error {\n\t\t\t\tcolor: var(--error);\n\t\t\t\tmargin-bottom: 10px;\n\t\t\t\tfont-size: 0.8rem;\n\t\t\t\tfont-style: italic;\n\t\t\t}\n\t\t</style>\n\t</head>\n\t<body>\n\t\t<div class=\"container\">\n\t\t\t<form action=\"%path%\" method=\"POST\">\n\t\t\t\t<h1>%title%</h1>\n\t\t\t\t<p>%description%</p>\n <div class=\"error\">\n %error%\n </div>\n\t\t\t\t<label for=\"password\">Password</label>\n\t\t\t\t<input type=\"password\" name=\"password\" placeholder=\"Password\" required />\n\t\t\t\t<input type=\"hidden\" name=\"redirect\" value=\"%redirect%\" />\n\t\t\t\t<input type=\"hidden\" name=\"csrf_token\" value=\"%csrf_token%\" />\n\t\t\t\t<button type=\"submit\">Submit</button>\n\t\t\t</form>\n\t\t</div>\n\t</body>\n</html>\n";