Last active
August 14, 2022 21:22
-
-
Save AhsanAyaz/46e85060567bdded4e530143f56fdaf5 to your computer and use it in GitHub Desktop.
"Node Redis Auth" tutorial files to begin with
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Express</title> | |
| <link rel="stylesheet" href="/stylesheets/style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <style> | |
| html, body { | |
| padding: 0; | |
| margin: 0; | |
| } | |
| </style> | |
| </head> | |
| <body onload="main()" class="flex min-w-100 min-h-[100vh] flex-col"> | |
| <header class="flex items-center bg-purple-700 h-16 text-white px-8"> | |
| <nav class="flex justify-between w-full items-center"> | |
| <div id="userName"></div> | |
| <a class="px-2 py-1.5 bg-transparent rounded hover:shadow-md cursor-pointer hover:bg-white active:bg-slate-100 active:text-purple-700 hover:text-purple-700 transition-all ease-in duration-100" onclick="logout()" href="/auth/logout">Logout</a> | |
| </nav> | |
| </header> | |
| <main class="invisible flex-col flex-1 pb-20 justify-center items-center px-4 lg:px-0"> | |
| <div class="flex mb-8 gap-4 flex-col favorite-language justify-center items-center"> | |
| <div class="icon"> | |
| <img class="w-32 h-32 object-contain" /> | |
| </div> | |
| <div class="name"></div> | |
| </div> | |
| <div class="flex flex-col md:flex-row gap-4 justify-center select-favorite-language"> | |
| <div class="xl:w-96"> | |
| <select class="form-select appearance-none | |
| block | |
| w-full | |
| px-3 | |
| py-1.5 | |
| text-base | |
| font-normal | |
| text-gray-700 | |
| bg-white bg-clip-padding bg-no-repeat | |
| border border-solid border-gray-300 | |
| rounded | |
| transition | |
| ease-in-out | |
| m-0 | |
| focus:text-gray-700 focus:bg-white focus:border-purple-600 focus:outline-none" aria-label="Default select example"> | |
| <option selected value="">Choose your favorite language</option> | |
| </select> | |
| </div> | |
| <button id="markAsFavBtn" type="button" class="inline-block px-6 py-2.5 disabled:bg-slate-50 disabled:text-slate-500 disabled:border-slate-200 disabled:shadow-none bg-purple-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-purple-700 hover:shadow-lg focus:bg-purple-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-purple-800 active:shadow-lg transition duration-150 ease-in-out">Mark as Favorite</button> | |
| </div> | |
| </main> | |
| <footer class="h-16"> | |
| <p class="text-xl py-4 font-light text-center text-purple-600"> | |
| Developed by <span class="bold"><a target="_blank" href="https://ahsanayaz.com/youtube">@CodeWithAhsan</a></span> | |
| </p> | |
| </footer> | |
| <script> | |
| const main = async () => { | |
| console.log('%c 🔊 Have you shared on your socials that you are following this video? If not, please do it as it helps us grow. You can find Ahsan\'s socials to tag him here: https://bio.link/muhd_ahsanayaz', 'background: #fff; color: rgb(126, 34, 206); border: 1px solid #dcdcdc; border-radius: 8px; padding: 4px; margin: 4px;'); | |
| } | |
| </script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "C": "c", | |
| "C++": "cpp", | |
| "C#": "csharp", | |
| "CSS": "css", | |
| "Go": "go", | |
| "Haskell": "haskell", | |
| "HTML": "html", | |
| "Java": "java", | |
| "Javascript": "javascript", | |
| "Kotlin": "kotlin", | |
| "Lua": "lua", | |
| "PHP": "php", | |
| "Python": "python", | |
| "R": "r", | |
| "Ruby": "ruby", | |
| "Swift": "swift", | |
| "Typescript": "typescript" | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>User Login</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| </head> | |
| <body> | |
| <div class="relative flex flex-col justify-center min-h-screen overflow-hidden mx-4 lg:mx-0"> | |
| <div | |
| class="w-full p-6 m-auto bg-white rounded-md shadow-md border-top max-w-sm lg:max-w-md"> | |
| <h1 class="text-3xl font-semibold text-center text-purple-700">Login</h1> | |
| <form id="loginForm" class="mt-6"> | |
| <div class="relative mb-8"> | |
| <input id="username" name="email" type="text" | |
| class="w-full h-10 text-gray-900 placeholder-transparent border-b-2 border-gray-300 peer focus:outline-none focus:border-purple-600" | |
| placeholder="john@doe.com" required/> | |
| <label for="username" | |
| class="absolute left-0 -top-3.5 text-gray-600 text-sm transition-all peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-400 peer-placeholder-shown:top-2 peer-focus:-top-3.5 peer-focus:text-gray-600 peer-focus:text-sm">Username</label> | |
| </div> | |
| <div class="relative mb-4"> | |
| <input id="password" name="password" type="password" | |
| class="w-full h-10 text-gray-900 placeholder-transparent border-b-2 border-gray-300 peer focus:outline-none focus:border-purple-600" | |
| placeholder="password" required/> | |
| <label for="password" | |
| class="absolute left-0 -top-3.5 text-gray-600 text-sm transition-all peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-400 peer-placeholder-shown:top-2 peer-focus:-top-3.5 peer-focus:text-gray-600 peer-focus:text-sm"> | |
| Password</label> | |
| </div> | |
| <div class="mt-6"> | |
| <button | |
| class="w-full px-4 py-2 tracking-wide text-white transition-colors duration-200 transform bg-purple-700 rounded-md hover:bg-purple-600 focus:outline-none focus:bg-purple-600"> | |
| Login | |
| </button> | |
| </div> | |
| </form> | |
| <p class="mt-8 text-xs font-light text-center text-gray-700"> | |
| Don't have an account? | |
| <a href="/register" class="font-medium text-purple-600 hover:underline">Sign up</a> | |
| </p> | |
| <p class="mt-8 text-xs font-light text-center text-purple-600"> | |
| Developed by <span class="bold"><a target="_blank" href="https://ahsanayaz.com/youtube">@CodeWithAhsan</a></span> | |
| </p> | |
| </div> | |
| </div> | |
| </body> | |
| <script> | |
| const onFormSubmit = async () => { | |
| // form submit code here | |
| } | |
| console.log('%c 🔊 Have you shared on your socials that you are following this video? If not, please do it as it helps us grow. You can find Ahsan\'s socials to tag him here: https://bio.link/muhd_ahsanayaz', 'background: #fff; color: rgb(126, 34, 206); border: 1px solid #dcdcdc; border-radius: 8px; padding: 4px; margin: 4px;'); | |
| </script> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>User Registration</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| </head> | |
| <body> | |
| <div class="relative flex flex-col justify-center min-h-screen overflow-hidden mx-4 lg:mx-0"> | |
| <div | |
| class="w-full p-6 m-auto bg-white rounded-md shadow-md border-top max-w-sm lg:max-w-md"> | |
| <h1 class="text-3xl font-semibold text-center text-purple-700">Register</h1> | |
| <form id="registrationForm" class="mt-6"> | |
| <div class="relative mb-8"> | |
| <input id="username" name="email" type="text" | |
| class="w-full h-10 text-gray-900 placeholder-transparent border-b-2 border-gray-300 peer focus:outline-none focus:border-purple-600" | |
| placeholder="john@doe.com" required/> | |
| <label for="username" | |
| class="absolute left-0 -top-3.5 text-gray-600 text-sm transition-all peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-400 peer-placeholder-shown:top-2 peer-focus:-top-3.5 peer-focus:text-gray-600 peer-focus:text-sm">Username</label> | |
| </div> | |
| <div class="relative mb-4"> | |
| <input id="password" name="password" type="password" | |
| class="w-full h-10 text-gray-900 placeholder-transparent border-b-2 border-gray-300 peer focus:outline-none focus:border-purple-600" | |
| placeholder="password" required/> | |
| <label for="password" | |
| class="absolute left-0 -top-3.5 text-gray-600 text-sm transition-all peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-400 peer-placeholder-shown:top-2 peer-focus:-top-3.5 peer-focus:text-gray-600 peer-focus:text-sm"> | |
| Password</label> | |
| </div> | |
| <div class="mt-6"> | |
| <button | |
| class="w-full px-4 py-2 tracking-wide text-white transition-colors duration-200 transform bg-purple-700 rounded-md hover:bg-purple-600 focus:outline-none focus:bg-purple-600"> | |
| Register | |
| </button> | |
| </div> | |
| </form> | |
| <p class="mt-8 text-xs font-light text-center text-gray-700"> | |
| Already have an account? | |
| <a href="/login" class="font-medium text-purple-600 hover:underline">Login</a> | |
| </p> | |
| <p class="mt-8 text-xs font-light text-center text-purple-600"> | |
| Developed by <span class="bold"><a target="_blank" href="https://ahsanayaz.com/youtube">@CodeWithAhsan</a></span> | |
| </p> | |
| </div> | |
| </div> | |
| </body> | |
| <script> | |
| const onFormSubmit = async () => { | |
| // registration code here | |
| } | |
| console.log('%c 🔊 Have you shared on your socials that you are following this video? If not, please do it as it helps us grow. You can find Ahsan\'s socials to tag him here: https://bio.link/muhd_ahsanayaz', 'background: #fff; color: rgb(126, 34, 206); border: 1px solid #dcdcdc; border-radius: 8px; padding: 4px; margin: 4px;'); | |
| </script> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment