Skip to content

Commit

Permalink
login and signup improvement
Browse files Browse the repository at this point in the history
  • Loading branch information
@SubhamB2003
SubhamB2003 committed Aug 5, 2023
1 parent 7f6a5d6 commit 5c566ae
Show file tree
Hide file tree
Showing 2 changed files with 113 additions and 95 deletions.
43 changes: 22 additions & 21 deletions login/login.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,12 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Login</title>

<!-- Nav Bar Theme -->
<meta name="theme-color" content="#0E034D">
<meta name="msapplication-navbutton-color" content="#04C8FF">
<meta name="msapplication-TileColor" content="#0E034D">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="#0E034D">
<!-- Nav Bar Theme -->
<meta name="theme-color" content="#0E034D" />
<meta name="msapplication-navbutton-color" content="#04C8FF" />
<meta name="msapplication-TileColor" content="#0E034D" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="#0E034D" />

<!-- Favicons -->
<link href="../assets/img/logo.webp" rel="icon" />
Expand Down Expand Up @@ -198,13 +198,12 @@ <h1 class="sign-in text-center p-0">Login</h1>
<div id="error-msg" class="text-danger font-weight-bold"></div>

<!-- login button -->
<div class="btn-wrapper" >
<button class="btn"onclick="validateForm()">
<span class="btn-pos Span">LOGIN</span>
<div class="flow"></div>
<div class="btn-wrapper">
<button class="btn" onclick="validateForm()">
<span class="btn-pos Span">LOGIN</span>
<div class="flow"></div>
</button>
</div>


<!-- forgot password & dont have account -->
<div
Expand Down Expand Up @@ -283,7 +282,7 @@ <h1 class="sign-in text-center p-0">Login</h1>
}
}
</script>
<script>
<!-- <script>
const togglePassword = document.getElementById("togglePassword");
const passwordField = document.getElementById("password");
Expand Down Expand Up @@ -322,7 +321,7 @@ <h1 class="sign-in text-center p-0">Login</h1>
// Add your sign-in with email and password logic here
}
}
</script>
</script> -->
<script
type="text/javascript"
src="https://studio.alan.app/web/lib/alan_lib.min.js"
Expand All @@ -333,15 +332,17 @@ <h1 class="sign-in text-center p-0">Login</h1>
left: "50px",
bottom: "50px",
onCommand: function (commandData) {
if (commandData && commandData.command === 'openURL') {
if (commandData.target === '_blank') {
window.open(commandData.url, '_newtab' + Math.floor(Math.random() * 999999));
} else {
window.location.href = commandData.url;
if (commandData && commandData.command === "openURL") {
if (commandData.target === "_blank") {
window.open(
commandData.url,
"_newtab" + Math.floor(Math.random() * 999999)
);
} else {
window.location.href = commandData.url;
}
}
}

},
},

rootEl: document.getElementById("alan-btn"),
});
Expand Down
165 changes: 91 additions & 74 deletions signup/signup.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -126,7 +126,7 @@ <h1 class="logo me-auto" id="landingPage"><a href="#">OS-CODE</a></h1>
<!-- signup container -->
<div class="signup-container min-vh-100">
<div
class="signup-box text-white d-flex flex-column align-items-center justify-content-center mx-auto"
class="signup-box text-white d-flex flex-column align-items-center justify-content-center mx-auto"
>
<h1 class="signuptxt text-center p-0">Sign Up</h1>
<!-- p class="text-center fw-bolder p-0">It's quick and easy.</p -->
Expand All @@ -153,13 +153,13 @@ <h1 class="signuptxt text-center p-0">Sign Up</h1>
<form class="form-container d-flex flex-column">
<!-- inputs -->
<div class="name d-flex w-100">
<div class="user-box name-part">
<div class="user-box name-part" style="width: 50%">
<input id="f_name" type="text" required />
<label for="firstName">First name</label>
<span class="error-msg" id="firstnameerr"></span>
</div>

<div class="user-box name-part">
<div class="user-box name-part" style="width: 50%">
<input id="s_name" type="text" required />
<label for="surname">Surname</label>
<span class="error-msg" id="surnameerr"></span>
Expand Down Expand Up @@ -188,7 +188,12 @@ <h1 class="signuptxt text-center p-0">Sign Up</h1>

<!-- sign up button -->
<div class="btn-wrapper">
<button id="signUp" type="submit" onclick="validateForm()" class="submit-button">
<button
id="signUp"
type="submit"
onclick="validateForm()"
class="submit-button"
>
<span class="btn-pos Span"> signup</span>
<div class="flow"></div>
</button>
Expand All @@ -204,7 +209,7 @@ <h1 class="signuptxt text-center p-0">Sign Up</h1>
</div>

<!-- javascript -->

<script>
togglePassword.addEventListener("click", (e) => {
if (document.getElementById("password").type == "password") {
Expand All @@ -214,81 +219,93 @@ <h1 class="signuptxt text-center p-0">Sign Up</h1>
}
});
</script>
<script>

var f_name = document.getElementById("f_name");
var s_name = document.getElementById("s_name");
var email = document.getElementById("email");
var password = document.getElementById("password");
var fnameerr = document.getElementById("firstnameerr");
var surnameerr = document.getElementById("surnameerr");
var emailerr = document.getElementById("emailerr");
var passwderr = document.getElementById("passworderr");

function validEmail(mail)
{
if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(mail))
{ return true;}
return false;
<script>
var f_name = document.getElementById("f_name");
var s_name = document.getElementById("s_name");
var email = document.getElementById("email");
var password = document.getElementById("password");
var fnameerr = document.getElementById("firstnameerr");
var surnameerr = document.getElementById("surnameerr");
var emailerr = document.getElementById("emailerr");
var passwderr = document.getElementById("passworderr");

function validEmail(mail) {
if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(mail)) {
return true;
}
return false;
}
function validateForm(){
console.log("called");
// Validation check
if (f_name.value=='') {
function validateForm() {
console.log("called");
// Validation check
if (f_name.value == "") {
fnameerr.innerText = "*First name is required";
} else if (s_name.value=='') {
} else if (s_name.value == "") {
fnameerr.innerText = "";
surnameerr.innerText = "*Surname is required!";
} else if(email.value=='')
{ fnameerr.innerText = ""; surnameerr.innerText=""; emailerr.innerText = "*Email is required!"; }
else if(!validEmail(email.value))
{ fnameerr.innerText = ""; surnameerr.innerText=""; emailerr.innerText = "*Enter valid email!";}
else if(password.value =='')
{ fnameerr.innerText = ""; surnameerr.innerText=""; emailerr.innerText = ""; passwderr.innerText = "*Password is required!";}
else
{
fnameerr.innerText = ""; surnameerr.innerText=""; emailerr.innerText =""; passwderr.innerText="";
// Move on with auth
createUserWithEmailAndPassword(auth, email, password)
.then((userCredential) => {
// Signed in
const user = userCredential.user;

set(ref(database, "users/" + user.uid), {
email: email,
}).then(() => (window.location.href = "/"));
})
.catch((error) => {
// Handle errors here
const errorCode = error.code;
const errorMessage = error.message;

document.getElementById("error-msg").innerHTML = errorMessage;
});
}
}
</script>
<script type="text/javascript"
src="https://studio.alan.app/web/lib/alan_lib.min.js"></script>
<script>
var alanBtnInstance = alanBtn({
key: "4cc35fadda67f87264a5a62bdae65be32e956eca572e1d8b807a3e2338fdd0dc/stage",
left: '50px',
bottom: '50px',
onCommand: function (commandData) {
if (commandData && commandData.command === 'openURL') {
if (commandData.target === '_blank') {
window.open(commandData.url, '_newtab' + Math.floor(Math.random() * 999999));
} else {
window.location.href = commandData.url;
}
}
} else if (email.value == "") {
fnameerr.innerText = "";
surnameerr.innerText = "";
emailerr.innerText = "*Email is required!";
} else if (!validEmail(email.value)) {
fnameerr.innerText = "";
surnameerr.innerText = "";
emailerr.innerText = "*Enter valid email!";
} else if (password.value == "") {
fnameerr.innerText = "";
surnameerr.innerText = "";
emailerr.innerText = "";
passwderr.innerText = "*Password is required!";
} else {
fnameerr.innerText = "";
surnameerr.innerText = "";
emailerr.innerText = "";
passwderr.innerText = "";
// Move on with auth
createUserWithEmailAndPassword(auth, email, password)
.then((userCredential) => {
// Signed in
const user = userCredential.user;

},
set(ref(database, "users/" + user.uid), {
email: email,
}).then(() => (window.location.href = "/"));
})
.catch((error) => {
// Handle errors here
const errorCode = error.code;
const errorMessage = error.message;

rootEl: document.getElementById("alan-btn"),
document.getElementById("error-msg").innerHTML = errorMessage;
});
</script>
<script src="signup.js" type="module"></script>
}
}
</script>
<script
type="text/javascript"
src="https://studio.alan.app/web/lib/alan_lib.min.js"
></script>
<script>
var alanBtnInstance = alanBtn({
key: "4cc35fadda67f87264a5a62bdae65be32e956eca572e1d8b807a3e2338fdd0dc/stage",
left: "50px",
bottom: "50px",
onCommand: function (commandData) {
if (commandData && commandData.command === "openURL") {
if (commandData.target === "_blank") {
window.open(
commandData.url,
"_newtab" + Math.floor(Math.random() * 999999)
);
} else {
window.location.href = commandData.url;
}
}
},

rootEl: document.getElementById("alan-btn"),
});
</script>
<script src="signup.js" type="module"></script>
</body>
</html>

0 comments on commit 5c566ae

Please sign in to comment.