瀏覽代碼

Added Register Modal, Not styled properly yet. Recaptcha only works on 172.16.1.2 due to API Key Setup

theflametrooper 8 年之前
父節點
當前提交
e0e14dacb3
共有 3 個文件被更改,包括 24 次插入19 次删除
  1. 1 0
      frontend/build/index.html
  2. 22 18
      frontend/components/HomeBody.vue
  3. 1 1
      frontend/components/MainHeader.vue

+ 1 - 0
frontend/build/index.html

@@ -12,6 +12,7 @@
 	<link rel="stylesheet" href="./vendor/bootstrap.min.css">
 	<script src="./vendor/jquery.min.js"></script>
 	<script src="./vendor/bootstrap.min.js"></script>
+	<script src='https://www.google.com/recaptcha/api.js'></script>
 </head>
 <body>
 	<App></App>

+ 22 - 18
frontend/components/HomeBody.vue

@@ -1,25 +1,29 @@
 <template>
-	<div class="body">
-		{{ title }}
+	<div class="modal fade" id="register" tabindex="-1" role="dialog" aria-labelledby="register-modal">
+		<div class="modal-dialog" role="document">
+			<div class="modal-content">
+				<div class="modal-header">
+					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+					<h4 class="modal-title">Register</h4>
+				</div>
+				<div class="modal-body">
+					<input class="form-control" type="text" placeholder="Email..."/>
+					<input class="form-control" type="text" placeholder="Username..."/>
+					<input class="form-control" type="password" placeholder="Password..."/>
+					<div class="g-recaptcha" data-sitekey="6Ld5jygTAAAAAEi0E1IwovUuVFhZKctMvKnY553W"></div>
+				</div>
+				<div class="modal-footer">
+					<button type="button" class="btn btn-primary" data-dismiss="modal">Submit</button>
+				</div>
+			</div>
+		</div>
 	</div>
 </template>
 
-<script>
-	export default {
-		data() {
-			return {
-				title: "This is thee body"
-			}
-		}
-	}
-</script>
-
 <style lang="sass" scoped>
-	.body {
-		width: 100%;
-		height: 256px;
-		line-height: 256px;
-		text-align: center;
-		background-color: green;
+	.g-recaptcha {
+		display: flex;
+		justify-content: center;
+		margin-top: 10px;
 	}
 </style>

+ 1 - 1
frontend/components/MainHeader.vue

@@ -14,7 +14,7 @@
 				<ul class="nav navbar-nav navbar-right">
 					<li><a href="#">The Project</a></li>
 					<li><a href="#">Donate</a></li>
-					<li><a href="#">Login</a></li>
+					<li><a href="#" data-toggle="modal" data-target="#register">Register</a></li>
 				</ul>
 			</div>
 		</div>