Github-clone/signUp.html at master · shilpashingnapure/Github-clone · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<script src="https://code.iconify.design/2/2.1.0/iconify.min.js"></script>
	<link rel="stylesheet" type="text/css" href="./style/home.css">
	<title></title>
</head>
<body>
	<div class="form_page">
		<a href="index.html">
			<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/91/Octicons-mark-github.svg/600px-Octicons-mark-github.svg.png" width="50px" height="50px" />
		</a>
		<h1>Sign up to GitHub</h1>
		<div class="erro_div">
			<p>User already exists &nbsp;<small>(Try with anthor one)</small></p>
			<span class="iconify hide_erro_msg" data-icon="gridicons:cross-small"></span>
		</div>
		<form onsubmit="register(event)" class="form">
			<label>Name</label>
			<input type="text" id="name" placeholder="name">
			<label>Email</label>
			<input type="email" id="email" placeholder="email">
			<label>Username</label>
			<input type="text" id="username" placeholder="username">
			<label>Password</label>
			<input type="password" id="password" placeholder="password">
			<label>Mobile</label>
			<input type="number" id="mobile" placeholder="mobile">
			<label>Desciption</label>
			<input type="text" id="description" placeholder="des">
			<input type="submit" value="Sign up" id="submit">
		</form>

		<div class="new_acc">
			<p>Already have GitHub?<a href="signIn.html">logged an account</a></p>
		</div>
		<ul class="git_policy">
			<li><a href="#">Terms</a></li>
			<li><a href="#">Privacy</a></li>
			<li><a href="#">Security</a></li>
			<li>Contact GitHub</li>
		</ul>
	</div>


</body>
</html>

<script>

	async function register(event){
		try{
			event.preventDefault()
			var register_data = {
				name : document.getElementById("name").value ,
				email : document.getElementById("email").value ,
				username : document.getElementById("username").value ,
				password : document.getElementById("password").value ,
				mobile : document.getElementById("mobile").value ,
				description : document.getElementById("description").value
			}

			checkvalidtion(register_data)
			register_data = JSON.stringify(register_data)
			console.log("register_data",register_data)
		}catch(err){
			console.log(err)
		}


		let reg_api = `https://masai-api-mocker.herokuapp.com/auth/register`
		let response = await fetch(reg_api , {
			method:"POST" ,
			body: register_data ,
			headers:{
				"Content-Type":"application/json"
			}
		})

		let data = await response.json()
		console.log("data" , data)
		if(!data.error){
			window.location.href = "signIn.html"
		}else{
			var err = document.querySelector(".erro_div")
			var err_msg = document.querySelector(".erro_div > p")
			err_msg.innerHTML = "User already exists &nbsp;<small>(Try with anthor one)</small>"
			err.style.display = "flex"
			var msg = document.querySelector(".hide_erro_msg")
			msg.addEventListener("click" , function(){
				err.style.display = "none"
			})
		}
	}

	function checkvalidtion(register_data){
		if(register_data.name == "" || register_data.email == "" || register_data.username == "" || register_data.password == "" || register_data.mobile == "" || register_data.description == ""){
			var err = document.querySelector(".erro_div")
			var err_msg = document.querySelector(".erro_div > p")
			err_msg.innerHTML = "Please fill all empty fields"
			err.style.display = "flex"
			var msg = document.querySelector(".hide_erro_msg")
			msg.addEventListener("click" , function(){
				err.style.display = "none"
			})
		}
	}

</script>