Trouble passing, accessing, or prefilling data - Vue.js / Firestore - javascript

I am trying to figure out what I am missing here. I am trying to pre-fill some data for a user profile page. That pre-fill data is coming from a Firestore DB collection. I have been able to prefill existing fields when editing requests, however, I am stumped at the user profile portion. I've included a link to a video showing what I am seeing. Also here is an error I am getting:
vue-firestore.js?73c3:1 Uncaught (in promise) Error: This document (profile) is not exist or permission denied.
at Object.eval [as next] (vue-firestore.js?73c3:1)
at next (index.cjs.js?e89a:21048)
at eval (index.cjs.js?e89a:19341)
Video of my issue
I believe I am experiencing a problem with one of the following files. I can supply more info if needed.
Login.vue
<template>
<div class="login">
<!-- Modal -->
<div class="modal fade" id="login" tabindex="-1" role="dialog" aria-labelledby="loginTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-body">
<ul class="nav nav-fill nav-pills mb-3" id="pills-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-login" role="tab" aria-controls="pills-login" aria-selected="true">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-register-tab" data-toggle="pill" href="#pills-register" role="tab" aria-controls="pills-register" aria-selected="false">Signup</a>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-login" role="tabpanel" aria-labelledby="pills-login-tab">
<h5 class="text-center">Login Please</h5>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" v-model="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" #keyup.enter="login" v-model="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<button class="btn btn-primary" #click="login">Login</button>
</div>
</div>
<div class="tab-pane fade" id="pills-register" role="tabpanel" aria-labelledby="pills-register-tab">
<h5 class="text-center">Create New Account</h5>
<div class="form-group">
<label for="name">Your name</label>
<input type="text" v-model="name" class="form-control" id="name" placeholder="Your nice name">
</div>
<div class="form-group">
<label for="email">Email address</label>
<input type="email" v-model="email" class="form-control" id="email" aria-describedby="emailHelp" placeholder="Enter email">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" v-model="password" class="form-control" id="password" placeholder="Password">
</div>
<div class="form-group">
<button class="btn btn-primary" #click="register">Signup</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import {fb, db} from '../firebase'
export default {
name: "Login",
props: {
msg: String
},
data(){
return {
name: null,
email: null,
password: null
}
},
methods:{
login(){
fb.auth().signInWithEmailAndPassword(this.email, this.password)
.then(() => {
$('#login').modal('hide')
this.$router.replace('admin');
})
.catch(function(error) {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
if (errorCode === 'auth/wrong-password') {
alert('Wrong password.');
} else {
alert(errorMessage);
}
console.log(error);
});
},
register(){
fb.auth().createUserWithEmailAndPassword(this.email, this.password)
.then((user) => {
$('#login').modal('hide')
// Add a new document in collection "profiles"
db.collection("profiles").doc("user.user.uid").set({
name: this.name,
})
.then(function() {
console.log("Document successfully written!");
})
.catch(function(error) {
console.error("Error writing document: ", error);
});
this.$router.replace('admin');
})
.catch(function(error) {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
if (errorCode == 'auth/weak-password') {
alert('The password is too weak.');
} else {
alert(errorMessage);
}
console.log(error);
});
}
}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
</style>
Here is the Profile.vue
<template>
<div class="profile">
<div class="container">
<div class="intro h-100">
<div class="row h-100 align-items-center">
<div class="col-md-6 ml-3">
<h3>Profile settings</h3>
<p>
Change your profile settings here
</p>
</div>
<div class="col-md-5">
<img src="/img/svg/profile.svg" width="300" alt="" class="img-fluid">
</div>
</div>
</div>
<div class="profile-content">
<ul class="nav nav-pills ml-3" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="true">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="account-tab" data-toggle="tab" href="#account" role="tab" aria-controls="account" aria-selected="false">Account settings</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active pt-3" id="profile" role="tabpanel" aria-labelledby="profile-tab">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<input type="text" name="" v-model="profile.name" placeholder="Full name" class="form-control">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input type="text" v-model="profile.phone" placeholder="Phone" class="form-control">
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<input type="text" v-model="profile.address" placeholder="Address" class="form-control">
</div>
</div>
<div class="col-md-8">
<div class="form-group">
<input type="text" v-model="profile.postCode" placeholder="Postcode" class="form-control">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<input type="submit" #click="updateProfile" value="Save Changes" class="btn btn-primary w-100">
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade pt-3" id="account" role="tabpanel" aria-labelledby="account-tab">
<div class="container">
<div class="row">
<div class="col-md-">
<div class="alert alert-info">
Please use the Reset password email button for reseting the password. The form doens't work currently
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input type="text" v-model="account.name" placeholder="User name" class="form-control">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input type="text" v-model="account.email" placeholder="Email address" class="form-control">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input type="text" v-model="account.password" placeholder="New password" class="form-control">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input type="text" v-model="account.confirmPassword" placeholder="Confirm password" class="form-control">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<input type="file" #change="uploadImage" class="form-control">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<input type="submit" value="Save Changes" class="btn btn-primary w-100">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<input type="button" #click="resetPassword" value="Reset password email" class="btn btn-success w-100">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { fb, db } from '../firebase';
export default {
name: "Profile",
components: {
},
props: {
msg: String
},
data(){
return {
profile: {
name:null,
phone:null,
address:null,
postcode:null
},
account:{
name:null,
email:null,
photoUrl:null,
emailVerified:null,
password:null,
confirmPassword:null,
uid:null
}
}
},
firestore(){
const user = fb.auth().currentUser;
return {
profile: db.collection('profiles').doc(user.uid),
}
},
methods:{
resetPassword(){
const auth = fb.auth();
auth.sendPasswordResetEmail(auth.currentUser.email).then(() => {
Toast.fire({
type: 'success',
title: 'Email sent'
})
}).catch((error) => {
console.log(error);
});
},
updateProfile(){
this.$firestore.profile.update(this.profile);
},
uploadImage(){
}
},
created(){
}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
</style>
Here is main.js
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import jQuery from "jquery";
import { fb } from "./firebase";
import VueFirestore from "vue-firestore";
import Swal from "sweetalert2";
Vue.use(VueFirestore, {
key: "id",
enumerable: true
});
window.Swal = Swal;
const Toast = Swal.mixin({
toast: true,
position: "top-end",
showConfirmButton: false,
timer: 3000
});
window.Toast = Toast;
window.$ = window.jQuery = jQuery;
Vue.use(VueFirestore);
import "popper.js";
import "bootstrap";
import "./assets/app.scss";
Vue.component("Navbar", require("./components/Navbar.vue").default);
Vue.component("NavAdmin", require("./views/NavAdmin.vue").default);
Vue.component("Requests", require("./views/Requests.vue").default);
Vue.component(
"ViewBulkRequest",
require("./views/ViewBulkRequest.vue").default
);
Vue.config.productionTip = false;
let app = "";
fb.auth().onAuthStateChanged(function(user) {
if (!app) {
new Vue({
router,
render: h => h(App)
}).$mount("#app");
}
});


This was not resolved, we simply switched over to some new code. Thank you.

Related

How to store a connection state in Vue3?

I'm new sorry if I don't know how to write a help request.
I've created a ToDoList in Vue3 and NodeJs, I've already setted my backend, so now I work on my front.
I have a problem with my Vue script, I want to store my connection state, so when I push the button Login, the button "Créer une tache" appears, and my login button transform into a logout button in my Navigation bar
So my problem, is when I change my view I go for example in "Liste des tâches" my button "Créer une tâche" and "Logout" disappear.
Thank's for the future answers !
So this is my Navbar.vue script :
<template>
<nav class="navbar-light bg-light">
<ul class="ul1">
<li><router-link to="/"> <button id="inscription-button" class="btn inscription-button"> Accueil </button> </router-link></li>
<li><router-link to="/informations" id="inscription-button" class="btn inscription-button"> Informations </router-link></li>
<li><router-link to="/tasklist" id="inscription-button" class="btn inscription-button"> Liste de tâches </router-link></li>
<router-link to="/createtask" v-if="isLoggedIn" id="inscription-button" class="btn inscription-button"> Créer une tâche </router-link>
<li><router-link to="/contact" id="inscription-button" class="btn inscription-button"> Contact </router-link></li>
</ul>
<ul>
<li v-if="!navLoggedIn">
<router-link to="/login">Login</router-link>
</li>
<li v-if="navLoggedIn">
<button #click="logout">Logout</button>
</li>
</ul>
</nav>
</template>
<script>
import { mapActions, mapState } from 'vuex';
export default {
data() {
return{
navLoggedIn : false
}
},
props: {
isLoggedIn: Boolean,
},
name: 'Navbar',
methods: {
...mapActions('navbar', { logout: 'logout' }),
},
async mounted(){
this.navLoggedIn=this.isLoggedIn
},
watch: {
// whenever question changes, this function will run
isLoggedIn(newvalue) {
this.navLoggedIn =newvalue;
}
},
};
</script>
and this is my Login.vue script :
<template>
<navbar :isLoggedIn="return_log()"></navbar>
<section class="vh-100">
<div class="container py-5 h-100">
<div class="row d-flex align-items-center justify-content-center h-100">
<div class="col-md-8 col-lg-7 col-xl-6">
<img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-login-form/draw2.svg"
class="img-fluid" alt="Phone image">
</div>
<div class="col-md-7 col-lg-5 col-xl-5 offset-xl-1">
<form #submit.prevent="submitForm">
<div class="form-outline mb-4">
<input type="email" id="form1Example13" class="form-control form-control-lg" required v-model="email" name="user_mail" />
<label class="form-label" for="form1Example13">Adresse email</label>
</div>
<div class="form-outline mb-4">
<input type="password" id="form1Example23" class="form-control form-control-lg" required v-model="password" name="user_password" />
<label class="form-label" for="form1Example23" >Mot de passe</label>
</div>
<div class="d-flex justify-content-around align-items-center mb-4">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="form1Example3" checked />
<label class="form-check-label" for="form1Example3"> Se souvenir de moi </label>
</div>
Mot de passe oublié ?
</div>
<button type="submit" class="btn btn-primary btn-lg btn-block">Se connecter</button>
<div class="divider d-flex align-items-center my-4">
</div>
</form>
</div>
</div>
</div>
</section>
</template>
<script>
import { mapActions } from "vuex";
import Navbar from "../components/Navbar.vue"
import Swal from 'sweetalert2'
export default {
components: {Navbar},
// props: {
// isLoggedIn: {
// type: Boolean,
// required: true
// }
// },
data() {
return{
email:'',
password:'',
isLoggedIn : false
}
},
methods: {
return_log : function(){
return this.isLoggedIn
},
submitForm: async function () {
const response = await this.login({
email:this.email,
password:this.password
});
if(response.success) {
Swal.fire({
title: 'Connexion réussie ! ',
text: response.message,
icon: 'success'
});
this.isLoggedIn= true
// this.$router.push('/tasklist')
}
else{
Swal.fire({
title: 'Connexion échouée ',
text: response.message,
icon: 'error'
});
}
},
...mapActions("requests/auth", ["login"]),
}
}
</script>
I tried to add in my App.vue my navbar to get my connection state stored in all my views.

How to make a dynamic list using queue approach

I am working on vue.js rendering dynamic list, When user clicks on a button then the link in corresponding input field renders, then again I am pasting a link in input field and clicking add it adds the value to the second index which I don't want I know I have o use queue concept but here on ui I don't how to implement it
What I have done
new Vue({
el: '#app',
data() {
return {
anchorTags: [{
url: '',
value: ''
}]
}
},
methods: {
validateYouTubeUrl() {
var url = document.getElementById('youtubeUrl').value
this.anchorTags.push({
url: url,
value: url
});
}
}
})
.as-console-wrapper { max-height: 3em !important; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.9/vue.js"></script>
<div id=app>
<div class="container-fluid row">
<div class="form-group col-xs-12 col-sm-12 col-md-8 col-lg-8 col-xl-8" id="first">
<div class="input-group">
<input type="text" class="form-control" id="youtubeUrl" placeholder="Paste link here...">
<div class="input-group-append">
<button class="btn btn-primary" type="button" #click="validateYouTubeUrl">Add</button>
</div>
</div>
<hr>
</div>
<div class="form-group col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4" id="second">
<h3 class="form-control">Playlist</h3>
<hr>
<ul class="list-group">
<li v-for="(anchorTag, k) in anchorTags" :key="k" class="list-group-item">
<a :href="anchorTag.url" #click.prevent="playVideo($event)">{{anchorTag.value}}</a>
<span v-if="anchorTag.url!==''"><i class="fas fa-trash-alt"></i></span>
</li>
</ul>
</div>
</div>
</div>
So What I am trying to do is
To do it like quee like FIFO, when I enter some thing it is on top the again I enter something the latest one should be on top

I allowed myself to make some extra changes, moreover, to give you an answer (I used the v-model):
new Vue({
el: "#app",
data() {
return {
youtubeUrl: null,
anchorTags: []
};
},
methods: {
validateYouTubeUrl() {
this.anchorTags.push({
url: this.youtubeUrl,
value: this.youtubeUrl
});
}
},
computed: {
anchorList() {
return this.anchorTags.slice().reverse();
}
}
});
.as-console-wrapper {
max-height: 3em !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id=app>
<div class="container-fluid row">
<div class="form-group col-xs-12 col-sm-12 col-md-8 col-lg-8 col-xl-8" id="first">
<div class="input-group">
<input type="text" class="form-control" v-model="youtubeUrl" placeholder="Paste link here...">
<div class="input-group-append">
<button class="btn btn-primary" type="button" #click="validateYouTubeUrl">Add</button>
</div>
</div>
<hr>
</div>
<div class="form-group col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4" id="second">
<h3 class="form-control">Playlist</h3>
<hr>
<ul class="list-group">
<li v-for="(anchorTag, k) in anchorList" :key="k" class="list-group-item">
<a :href="anchorTag.url" #click.prevent="playVideo($event)">{{anchorTag.value}}</a>
<span v-if="anchorTag.url!==''"><i class="fas fa-trash-alt"></i></span>
</li>
</ul>
</div>
</div>
</div>
If that's not what you meant, edit your question and try to describe it in a more pathological way.

Why I am getting error in form when clicking on form

Created one page in bootstrap 4. There is a modal. Inside the modal if you click on any input field or any button, the same error is shown. I really do not know whats going on here? When I do click in the input field in that form I get error message in console as:-
tab.js:146 Uncaught TypeError: Cannot read property 'nodeName' of undefined
at i.t._activate (tab.js:146)
at i.t.show (tab.js:112)
at HTMLDivElement.<anonymous> (tab.js:230)
at Function.each (jquery.min.js:2)
at w.fn.init.each (jquery.min.js:2)
at w.fn.init.i._jQueryInterface [as tab] (tab.js:217)
at HTMLDivElement.<anonymous> (tab.js:245)
at HTMLDocument.dispatch (jquery.min.js:2)
at HTMLDocument.y.handle (jquery.min.js:2)
Yes below is the total code. There is a modal in the account tab. When you click on account tab then click on log in and you will be getting the error code in console and in the page itself nothing happens.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="autor" content="time">
<meta name="description" content="shows you tech tutorial and life tips.">
<title> Life</title>
<link rel="stylesheet" href="/main.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<!-- Jumbotron -->
<div class="jumbotron" style="background-color: rgba(0,0,0,0.78);border-radius:0px;">
<!-- logo -->
<div class="logo">
<div class="block">
</div>
<div class="tagline">
</div>
</div>
<!-- logo ends here -->
</div>
<!-- Jumbotron ends here -->
<!-- Nav -->
<ul class="nav nav-tabs justify-content-end">
<li class="nav-item">
<a class="nav-link" href="">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">About</a>
</li>
<li class="nav-item">
<a class="nav-link dropdown" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Account</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Profile</a>
<a class="dropdown-item" href="#">Setting</a>
<a class="dropdown-item" href="#" data-toggle="modal" data-target="#MyModal">Log In</a>
</div>
</li>
</ul>
<!-- Nav ends -->
<!-- <button class="btn btn-primary" data-toggle="modal" data-target="#MyModal" type="button" name="button">Modal</button> -->
<!-- Modal -->
<div class="modal fade" id="MyModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<section>
<div class="container">
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<a class="nav-item nav-link active justify-content" id="nav-signIn-tab" data-toggle="tab" href="#nav-signIn" role="tab" aria-controls="nav-signIn" aria-selected="true">Sign In</a>
<a class="nav-item nav-link justify-content" id="nav-signUp-tab" data-toggle="tab" href="#nav-signUp" role="tab" aria-controls="nav-signUp" aria-selected="false">Sign Up</a>
</div>
</div>
</section>
</div>
<div class="modal-body">
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-signIn" role="tabpanel" aria-labelledby="nav-signIn-tab"><!-- Sign In tab -->
<div class="signintab" data-toggle="tab">
<form class="frm-group" action="../test.php" method="post" onsubmit="">
<label for="email">E Mail:</label>
<input class="form-control" type="text" id="email" name="email" value="" placeholder="E-Mail">
<label for="Password">Password:</label>
<input class="form-control" type="password" id="pass" name="Password" value="" placeholder="Password">
<span>Forgot Password?</span><br>
<button class="btn btn-primary" type="submit" name="button">Log In</button>
<span id='erroin'></span>
</form>
<!-- <button class="btn btn-secondary" type="submit" name="button" href="#nav-signUp" aria-controls="nav-signUp">Sign Up</button><br> -->
</div>
</div>
<div class="tab-pane fade" id="nav-signUp" role="tabpanel" aria-labelledby="nav-signUp-tab"><div class="signuptab" data-toggle="tab">
<label for="First Name">First Name:</label>
<input class="form-control" type="text" id="fname" name="fname" value="" placeholder="First Name">
<label for="Last Name">Last Name:</label>
<input class="form-control" type="text" id="lname" name="lname" value="" placeholder="Last Name">
<label for="email">E Mail:</label>
<input class="form-control" type="text" id="upemail" name="upemail" value="" placeholder="E-Mail">
<label for="Password">Password:</label>
<input class="form-control" type="password" id="uppass" name="uppassword" value="" placeholder="Password"><br>
<button class="btn btn-secondary" type="button" name="button">Register</button><br>
<span id='erroup'></span>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- modal ends here -->
</body>
</html>
Below I am providing the tab.js
import $ from 'jquery'
import Util from './util'
/**
* --------------------------------------------------------------------------
* Bootstrap (v4.1.3): tab.js
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* --------------------------------------------------------------------------
*/
const Tab = (($) => {
/**
* ------------------------------------------------------------------------
* Constants
* ------------------------------------------------------------------------
*/
const NAME = 'tab'
const VERSION = '4.1.3'
const DATA_KEY = 'bs.tab'
const EVENT_KEY = `.${DATA_KEY}`
const DATA_API_KEY = '.data-api'
const JQUERY_NO_CONFLICT = $.fn[NAME]
const Event = {
HIDE : `hide${EVENT_KEY}`,
HIDDEN : `hidden${EVENT_KEY}`,
SHOW : `show${EVENT_KEY}`,
SHOWN : `shown${EVENT_KEY}`,
CLICK_DATA_API : `click${EVENT_KEY}${DATA_API_KEY}`
}
const ClassName = {
DROPDOWN_MENU : 'dropdown-menu',
ACTIVE : 'active',
DISABLED : 'disabled',
FADE : 'fade',
SHOW : 'show'
}
const Selector = {
DROPDOWN : '.dropdown',
NAV_LIST_GROUP : '.nav, .list-group',
ACTIVE : '.active',
ACTIVE_UL : '> li > .active',
DATA_TOGGLE : '[data-toggle="tab"], [data-toggle="pill"], [data-toggle="list"]',
DROPDOWN_TOGGLE : '.dropdown-toggle',
DROPDOWN_ACTIVE_CHILD : '> .dropdown-menu .active'
}
/**
* ------------------------------------------------------------------------
* Class Definition
* ------------------------------------------------------------------------
*/
class Tab {
constructor(element) {
this._element = element
}
// Getters
static get VERSION() {
return VERSION
}
// Public
show() {
if (this._element.parentNode &&
this._element.parentNode.nodeType === Node.ELEMENT_NODE &&
$(this._element).hasClass(ClassName.ACTIVE) ||
$(this._element).hasClass(ClassName.DISABLED)) {
return
}
let target
let previous
const listElement = $(this._element).closest(Selector.NAV_LIST_GROUP)[0]
const selector = Util.getSelectorFromElement(this._element)
if (listElement) {
const itemSelector = listElement.nodeName === 'UL' ? Selector.ACTIVE_UL : Selector.ACTIVE
previous = $.makeArray($(listElement).find(itemSelector))
previous = previous[previous.length - 1]
}
const hideEvent = $.Event(Event.HIDE, {
relatedTarget: this._element
})
const showEvent = $.Event(Event.SHOW, {
relatedTarget: previous
})
if (previous) {
$(previous).trigger(hideEvent)
}
$(this._element).trigger(showEvent)
if (showEvent.isDefaultPrevented() ||
hideEvent.isDefaultPrevented()) {
return
}
if (selector) {
target = document.querySelector(selector)
}
this._activate(
this._element,
listElement
)
const complete = () => {
const hiddenEvent = $.Event(Event.HIDDEN, {
relatedTarget: this._element
})
const shownEvent = $.Event(Event.SHOWN, {
relatedTarget: previous
})
$(previous).trigger(hiddenEvent)
$(this._element).trigger(shownEvent)
}
if (target) {
this._activate(target, target.parentNode, complete)
} else {
complete()
}
}
dispose() {
$.removeData(this._element, DATA_KEY)
this._element = null
}
// Private
_activate(element, container, callback) {
let activeElements
if (container.nodeName === 'UL') {
activeElements = $(container).find(Selector.ACTIVE_UL)
} else {
activeElements = $(container).children(Selector.ACTIVE)
}
const active = activeElements[0]
const isTransitioning = callback &&
(active && $(active).hasClass(ClassName.FADE))
const complete = () => this._transitionComplete(
element,
active,
callback
)
if (active && isTransitioning) {
const transitionDuration = Util.getTransitionDurationFromElement(active)
$(active)
.one(Util.TRANSITION_END, complete)
.emulateTransitionEnd(transitionDuration)
} else {
complete()
}
}
_transitionComplete(element, active, callback) {
if (active) {
$(active).removeClass(`${ClassName.SHOW} ${ClassName.ACTIVE}`)
const dropdownChild = $(active.parentNode).find(
Selector.DROPDOWN_ACTIVE_CHILD
)[0]
if (dropdownChild) {
$(dropdownChild).removeClass(ClassName.ACTIVE)
}
if (active.getAttribute('role') === 'tab') {
active.setAttribute('aria-selected', false)
}
}
$(element).addClass(ClassName.ACTIVE)
if (element.getAttribute('role') === 'tab') {
element.setAttribute('aria-selected', true)
}
Util.reflow(element)
$(element).addClass(ClassName.SHOW)
if (element.parentNode &&
$(element.parentNode).hasClass(ClassName.DROPDOWN_MENU)) {
const dropdownElement = $(element).closest(Selector.DROPDOWN)[0]
if (dropdownElement) {
const dropdownToggleList = [].slice.call(dropdownElement.querySelectorAll(Selector.DROPDOWN_TOGGLE))
$(dropdownToggleList).addClass(ClassName.ACTIVE)
}
element.setAttribute('aria-expanded', true)
}
if (callback) {
callback()
}
}
// Static
static _jQueryInterface(config) {
return this.each(function () {
const $this = $(this)
let data = $this.data(DATA_KEY)
if (!data) {
data = new Tab(this)
$this.data(DATA_KEY, data)
}
if (typeof config === 'string') {
if (typeof data[config] === 'undefined') {
throw new TypeError(`No method named "${config}"`)
}
data[config]()
}
})
}
}
/**
* ------------------------------------------------------------------------
* Data Api implementation
* ------------------------------------------------------------------------
*/
$(document)
.on(Event.CLICK_DATA_API, Selector.DATA_TOGGLE, function (event) {
event.preventDefault()
Tab._jQueryInterface.call($(this), 'show')
})
/**
* ------------------------------------------------------------------------
* jQuery
* ------------------------------------------------------------------------
*/
$.fn[NAME] = Tab._jQueryInterface
$.fn[NAME].Constructor = Tab
$.fn[NAME].noConflict = function () {
$.fn[NAME] = JQUERY_NO_CONFLICT
return Tab._jQueryInterface
}
return Tab
})($)
export default Tab

Your form was wrapped inside an extra div tag
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="autor" content="time">
<meta name="description" content="shows you tech tutorial and life tips.">
<title> Life</title>
<link rel="stylesheet" href="/main.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<!-- Jumbotron -->
<div class="jumbotron" style="background-color: rgba(0,0,0,0.78);border-radius:0px;">
<!-- logo -->
<div class="logo">
<div class="block">
</div>
<div class="tagline">
</div>
</div>
<!-- logo ends here -->
</div>
<!-- Jumbotron ends here -->
<!-- Nav -->
<ul class="nav nav-tabs justify-content-end">
<li class="nav-item">
<a class="nav-link" href="">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">About</a>
</li>
<li class="nav-item">
<a class="nav-link dropdown" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Account</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Profile</a>
<a class="dropdown-item" href="#">Setting</a>
<a class="dropdown-item" href="#" data-toggle="modal" data-target="#MyModal">Log In</a>
</div>
</li>
</ul>
<!-- Nav ends -->
<!-- <button class="btn btn-primary" data-toggle="modal" data-target="#MyModal" type="button" name="button">Modal</button> -->
<!-- Modal -->
<div class="modal fade" id="MyModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<section>
<div class="container">
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<a class="nav-item nav-link active justify-content" id="nav-signIn-tab" data-toggle="tab" href="#nav-signIn" role="tab" aria-controls="nav-signIn" aria-selected="true">Sign In</a>
<a class="nav-item nav-link justify-content" id="nav-signUp-tab" data-toggle="tab" href="#nav-signUp" role="tab" aria-controls="nav-signUp" aria-selected="false">Sign Up</a>
</div>
</div>
</section>
</div>
<div class="modal-body">
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-signIn" role="tabpanel" aria-labelledby="nav-signIn-tab">
<!-- Sign In tab -->
<form class="frm-group" action="../test.php" method="post" onsubmit="">
<label for="email">E Mail:</label>
<input class="form-control" type="text" id="email" name="email" value="" placeholder="E-Mail">
<label for="Password">Password:</label>
<input class="form-control" type="password" id="pass" name="Password" value="" placeholder="Password">
<span>Forgot Password?</span><br>
<button class="btn btn-primary" type="submit" name="button">Log In</button>
<span id='erroin'></span>
</form>
<!-- <button class="btn btn-secondary" type="submit" name="button" href="#nav-signUp" aria-controls="nav-signUp">Sign Up</button><br> -->
</div>
<div class="tab-pane fade" id="nav-signUp" role="tabpanel" aria-labelledby="nav-signUp-tab">
<form class="frm-group" action="">
<label for="First Name">First Name:</label>
<input class="form-control" type="text" id="fname" name="fname" value="" placeholder="First Name">
<label for="Last Name">Last Name:</label>
<input class="form-control" type="text" id="lname" name="lname" value="" placeholder="Last Name">
<label for="email">E Mail:</label>
<input class="form-control" type="text" id="upemail" name="upemail" value="" placeholder="E-Mail">
<label for="Password">Password:</label>
<input class="form-control" type="password" id="uppass" name="uppassword" value="" placeholder="Password"><br>
<button class="btn btn-secondary" type="button" name="button">Register</button><br>
<span id='erroup'></span>
</form>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- modal ends here -->
</body>
</html>

this error is probably in your tab.js file on line 146. It should certainly be a variable that does not have the NodeName property. Put your code of your tab.js file here to analyze

PrimeNg ConfirmDialog design messed up, CSS not applying

Template :
<p-confirmDialog header="Confirmation" icon="fa fa-question-circle" appendTo="body" responsive="true"></p-confirmDialog>
<button type="button" class="btn btn-primary" (click)="confirm()" >Save</button>
Component:
confirm() {
console.log('confirm?');
this.confirmationService.confirm({
message: 'Are you sure that you want to update?',
accept: () => {
console.log('update clicked');
}
});
}
Output display:
Is there any css file etc that I need to include?
Template(full):
<!---------------- Meta and Title ---------------->
<meta charset="utf-8">
<title>Solid Waste Management System</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<div class="tables-basic" data-spy="scroll" data-target="#nav-spy" data-offset="300">
<!-- -------------- Body Wrap -------------- -->
<div id="main">
<p-confirmDialog header="Confirmation" icon="fa fa-question-circle" appendTo="body" responsive="true"></p-confirmDialog>
<!-- -------------- Topbar -------------- -->
<header id="topbar" class="alt">
<div class="topbar-left">
<ol class="breadcrumb">
<li class="breadcrumb-icon">
<a href="#">
<span class="fa fa-eye"></span>
</a>
</li>
<li class="breadcrumb-active">
Organizational User
</li>
</ol>
</div>
<div class="topbar-right">
<a class="btn btn-primary btn-sm" href="Edit.html">
<i class="fa fa-edit"></i> Edit
</a>
<a class="btn btn-dark btn-sm" href="UserList.html">
<i class="fa fa-arrow-left"></i> Back
</a>
</div>
</header>
<!-- -------------- /Topbar -------------- -->
<!-- -------------- Content -------------- -->
<section id="content" class="table-layout animated fadeIn">
<!-- -------------- Column Center -------------- -->
<div class="chute chute-center">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="panel panel-visible p10">
<div class="panel-body pn mn allcp-form theme-primary">
<form id="form-order" (ngSubmit)="onSubmit(f)" #f="ngForm">
<h6>OrgUser</h6>
<div class="section row ">
</div>
<!-- -------------- /section -------------- -->
<div class="section row">
<div class="col-md-6 ph10 mb5">
<label for="userid">User ID: </label>
<p-autoComplete (ngModelChange)="orguser.userid = $event" class="ui-autocomplete autocomplete" [suggestions]="results" (completeMethod)="search($event)"
(onSelect)="onSelect($event)" (onBlur)="onBlur($event.target.value)" field="userid"></p-autoComplete>
<input type="hidden" name="userid" [ngModel]="orguser?.userid">
</div>
<div class="col-md-6 ph10 mb5">
<label for="perid">Personnel ID:</label>
<input type="text" class="form-control" [ngModel]="orguser?.perid" (ngModelChange)="orguser.perid = $event" name="perid"
id="perid">
</div>
</div>
<div class="section row">
<div class="col-md-6 ph10 mb5">
<label for="Password">Password:</label>
<input type="text" class="form-control" [ngModel]="orguser?.password" (ngModelChange)="orguser.password = $event" name="password"
id="password">
</div>
<div class="col-md-6 ph10 mb5">
<label for="fullname">Name:</label>
<input type="text" class="form-control" name="fullname" disabled [ngModel]="orguser?.perfullname" (ngModelChange)="orguser.perfullname = $event"
id="fullname">
</div>
</div>
<div class="section row">
<div class="col-md-6 ph10 mb5">
<label for="type">CreatedOn:</label>
<input type="text" class="form-control" name="createdon" disabled [ngModel]="orguser?.createdon" (ngModelChange)="orguser.createdon = $event"
id="createdon">
</div>
<div class="col-md-6 ph10 mb5 ">
<label for="CreatedBy ">CreatedBy:</label>
<input type="text" class="form-control" name="createdby" disabled [ngModel]="orguser?.createdby" (ngModelChange)="orguser.createdby = $event"
[(ngModel)]="orguser.createdby" id="createdby">
</div>
</div>
<div class="section row">
<div class="col-md-6 ph10 mb5">
<label for="Deletedby">Deleted By:</label>
<input type="text" class="form-control" disabled name="Deletedby" id="Deletedby">
<div class="col-md-6 ph10 mb5">
<label for="isactive">IsActive:</label>
<input type="checkbox" id="isactive" [ngModel]="orguser?.isactive" (ngModelChange)="orguser.isactive = $event" name="isactive">
</div>
</div>
<div class="section row">
<div class="col-md-6 ph10 mb5">
<label for="isdeleted">Is Deleted:</label>
<input type="checkbox" id="isdeleted" [ngModel]="orguser?.isdeleted" (ngModelChange)="orguser.isdeleted = $event" name="isdeleted">
</div>
</div>
</div>
<!-- -------------- /section -------------- -->
<hr>
<!-- -------------- /section -------------- -->
<div class="section text-right mb10 ">
<button type="button" class="btn btn-primary" (click)="confirm()">Save</button>
</div>
<!-- -------------- /Panel Body -------------- -->
</form>
</div>
</div>
</div>
</div>
</div>
<!-- -------------- /Column Center -------------- -->
</section>
<!-- -------------- /Content -------------- -->
</div>
</div>
Componenet(full):
import { Component, OnInit, ViewChild } from '#angular/core';
import { orguser } from '../../Models/orguser';
import { PersonnelService } from '../../services/personnel.service';
import { OrguserService } from '../../services/orguser.service';
import {ConfirmDialogModule} from 'primeng/confirmdialog';
import {ConfirmationService} from 'primeng/api';
#Component({
selector: 'app-orguseraddedit',
templateUrl: './orguseraddedit.component.html',
styleUrls: ['./orguseraddedit.component.css'],
})
export class OrguseraddeditComponent implements OnInit {
orguser: orguser = new orguser();
val: any;
results: any[];
constructor(private _PersonnelService: PersonnelService, private _OrguserService: OrguserService,private confirmationService: ConfirmationService) {
}
confirm() {
console.log('confirm?');
this.confirmationService.confirm({
message: 'Are you sure that you want to update?',
accept: () => {
console.log('update clicked');
}
});
}
confirm1() {
this.confirmationService.confirm({
message: 'Are you sure that you want to Add?',
accept: () => {
console.log('add clicked');
},
key:"add"
});
}
search(event) {
this._OrguserService.GetOrgUsersForAutocomplete(event.query)
.subscribe((userdata: any[]) => { this.results = userdata;console.log('xxxx'); console.log(this.results); }, (error) => {
//this.statusMessage = 'Problem with service. Please try again.'
console.error(error);
});
}
handleDropdown(event) {
console.log(event.query);
//event.query = current value in input field
}
ngOnInit() {
//this.orguser=null;
}
onBlur(value){
this._OrguserService.selectOrgUsersById(value)
.subscribe((userdata: any[]) => { this.orguser = userdata[0]; }, (error) => {
console.error(error);
});
}
onSelect(value) {
this.getuser(value.userid);
}
getuser(value){
this._OrguserService.selectOrgUsersById(value)
.subscribe((userdata: any[]) => { this.orguser = userdata[0]; console.log(this.orguser); }, (error) => {
console.error(error);
});
}
onSubmit(f) {
this._OrguserService.addupdateOrguser(f.value)
.subscribe((res: any) => {
console.log(res);
this.orguser = res;
{ console.log('success'); this.getuser(f.value.userid); };
}, (error) => {
console.error(error);
});
}
}
interface IAutoCompleteItem {
value: any;
text: string;
markup?: string;
isFocus?: boolean;
}
After removing all the stylesheet references and everything else on the template this is what I am getting:

I am not sure what you exactly wrong. But I'Ll give the proper way to use primeng confirm dialog box. You can get what you missing from that
First you need import ConfirmationService from primeng package
import { ConfirmationService} from 'primeng/primeng';
Then you should inject this via constructor like
constructor(private confirmationService: ConfirmationService) { }
And use the below code while open confirmation dialog box
this.confirmationService.confirm({
message: 'Are you sure to delete this?',
icon: 'fa fa-question-circle',
header: 'Delete Confirmation',
accept: () => {
// do accept criteria
}
},
reject: () => {
//close the dialogue
}
});
And the HTML code Could be
<p-confirmDialog width="500"></p-confirmDialog>
EDIT
While looking your code, You are missing to assign any value for Confirmation object in header="Confirmation".So please remove header="Confirmation" and add that in confirmationservice parameter. also remove appendTo="body". Please try this and let me know

Finally, I have figured out what I was missing.
<link rel="stylesheet" href="https://unpkg.com/primeng#4.1.0/resources/themes/omega/theme.css" />
<link rel="stylesheet" href="https://unpkg.com/primeng#4.1.0/resources/primeng.min.css" />
Since I am new to angular I am not sure about the correct way to reference the local files in node_modules so I have used cdn.
It working.

Javascript function does not execute after certain line

I am currently creating a Dapp for Ethereum using Truffle and testrpc. On our register page, I have a button that signs the user up with all the information entered. However, when the button is clicked, the register function in the app.js javascript file is called, but does not execute passed the var regi = Register.deployed(); line. I am gettig an error in the console on the webpage as seen below. I have attempted to debug this for hours but with no success.
This is the app.js file. The register function is the function that takes the data inputted and sends it to the Register Contract.
The code below that is the index.html file. The <button id="confirmsignup" onclick="register()">Sign Up</button> tag is the button that calls register() in app.js when clicked.
Finally, the last one is the code for the Contract Register that sets up an account for the user.
var accounts;
var account;
var balance;
var logged;
function setStatus(message) {
var status = document.getElementById("status");
status.innerHTML = message;
};
function refreshBalance() {
var meta = MetaCoin.deployed();
meta.getBalance.call(account, {from: account}).then(function(value) {
var balance_element = document.getElementById("balance");
balance_element.innerHTML = value.valueOf();
}).catch(function(e) {
console.log(e);
setStatus("Error getting balance; see log.");
});
};
function sendCoin() {
var meta = MetaCoin.deployed();
var amount = parseInt(document.getElementById("amount").value);
var receiver = document.getElementById("receiver").value;
setStatus("Initiating transaction... (please wait)");
meta.sendCoin(receiver, amount, {from: account}).then(function() {
setStatus("Transaction complete!");
refreshBalance();
}).catch(function(e) {
console.log(e);
setStatus("Error sending coin; see log.");
});
getAccountBalance();
};
function getAccountBalance() {
var meta = MetaCoin.deployed();
var balance = meta.getBalance(msg.sender);
}
function register() {
var nickname = document.getElementById("userid").value;
var email = document.getElementById("Email").value;
var password = document.getElementById("password").value;
var rePassword = document.getElementById("reenterpassword").value;
var addr = document.getElementById("ethereumAddress").value;
logged = true;
var regi = Register.deployed();
web3.eth.defaultAccount = addr;
if (password == rePassword) {
regi.setAccountInfo(nickname, email, password, addr).then(function() {
console.log("The account was setup with the appropriate details");
}).catch(function(e) {
console.log(e);
});
alert("Congratulations! You registered an account with Cogitaire!");
} else {
alert("The passwords do not match!");
}
};
function displayInfo() {
var display = Register.deployed();
var idCheck = document.getElementById("idForCheck").value;
if (logged) {
console.log("The user is logged: " + logged);
display.getNickname.call(web3.eth.defaultAccount).then(function(value) {
document.getElementById('nickshow').innerHTML = value;
}).catch(function(e) {
console.log(e);
});
display.getEmail.call(web3.eth.defaultAccount).then(function(value) {
document.getElementById('emailshow').innerHTML = value;
}).catch(function(e) {
console.log(e);
});
} else {
alert("You are not logged in! Please log in to see your user information or enter address to see someone elses user information");
}
};
function logOff() {
var log = Register.deployed();
logged = false;
alert("You are now logged off!");
web3.eth.defaultAccount = '0xda9c209aafee487d729866bc0d58223a62bfe383';
};
function showLogin() {
registerSection.style.display = 'none';
loginSection.style.display = 'block';
};
function showRegister() {
registerSection.style.display = 'block';
loginSection.style.display = 'nice';
};
window.onload = function() {
var Web3 = require([web3]);
// create an instance of web3 using the HTTP provider.
// in mist web3 is already available, so check first if its available before instantiating
if (typeof web3 !== 'undefined') {
var web3 = new Web3(web3.currentProvider);
} else {
// set the provider you want from Web3.providers
var web3 = new Web3(new Web3.providers.HttpProvider("http://localhost:8080"));
}
//var web3 = new Web3(new Web3.providers.HttpProvider("http://localhost:8080"));
web3.eth.getAccounts(function(err, accs) {
if (err != null) {
alert("There was an error fetching your accounts.");
return;
}
if (accs.length == 0) {
alert("Couldn't get any accounts! Make sure your Ethereum client is configured correctly.");
return;
}
getAddress.call().then(function(value) {
web3.eth.defaultAccount = value;
});
accounts = accs;
account = accounts[0];
refreshBalance();
});
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Cogitare</title>
<!-- jQuery -->
<script src="/js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="/js/bootstrap.min.js"></script>
<script src="/javascripts/app.js"></script>
<script src="/javascripts/bundle.js"></script>
<script src="javascripts/require.js"></script>
<!-- Bootstrap Core CSS -->
<link href="/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="/css/landing-page.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-custom navbar-fixed-top topnav" role="navigation">
<div class="container topnav">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img class="navbar-brand topnav" src="img/BIRD2thin.jpg" alt="can't display rn">
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
<a style="color:white;" href="./newProjectInfo.html">Submit An Idea</a>
</li>
<li>
<a style="color:white;" href="#">Services</a>
</li>
<li>
<a style="color:white;" href="#contact">Contact</a>
</li>
<li>
<a style="color:white;" href="#signup" data-toggle="modal" data-target=".bs-modal-lg">Sign In/Register</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Header -->
<a name="about"></a>
<div class="intro-header">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="intro-message">
<h1>Where ideas take flight</h1>
<h3>ejofaojwefojwejoaewoj</h3>
<hr class="intro-divider">
<ul class="list-inline intro-social-buttons">
<li>
</i> <span class="network-name">Discover Projects</span>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- /.container -->
</div>
<!-- Footer -->
<footer>
<div class="container">
<div class="row">
<div class="col-lg-12">
<ul class="list-inline">
<li>
Home
</li>
<li class="footer-menu-divider">⋅</li>
<li>
About
</li>
<li class="footer-menu-divider">⋅</li>
<li>
Services
</li>
<li class="footer-menu-divider">⋅</li>
<li>
Contact
</li>
</ul>
<p class="copyright text-muted small">Copyright © Your Company 2014. All Rights Reserved</p>
</div>
</div>
</div>
</footer>
<div class="modal fade bs-modal-lg" id="myModal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<br>
<div class="bs-example bs-example-tabs">
<ul id="myTab" class="nav nav-tabs">
<li class="active"><a style="color:black" href="#signin" data-toggle="tab">Sign In</a></li>
<li class=""><a style="color:black" href="#signup" data-toggle="tab">Register</a></li>
<li class=""><a style="color:black" href="#why" data-toggle="tab">Show User Information</a></li>
</ul>
</div>
<div class="modal-body">
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in" id="why">
<p>Click this button to show information about you!</p>
<!--<p></p><br> Please contact <a mailto:href="theoluan#gmail.com"></a>theoluan#gmail.com</a> with questions.</p>-->
<button id="display" onclick="displayInfo()">Display Information</button>
<br><label id="nickshow">test</label></br>
<br><label id="emailshow">test</label></br>
</div>
<div class="tab-pane fade active in" id="signin">
<form class="form-horizontal">
<fieldset>
<!-- Sign In Form -->
<div class="control-group">
<label class="control-label" for="reenterpassword">Ethereum Address</label>
<div class="controls">
<input id="ethereumAddress" class="form-control" name="ethid" type="text" placeholder="2309482309" class="input-large" required="">
</div>
</div>
<div class="control-group">
<label class="control-label" for="Email">Email:</label>
<div class="controls">
<input id="Email" name="Email" class="form-control" type="text" placeholder="theo#theo.com" class="input-medium" required="">
</div>
</div>
<div class="control-group">
<label class="control-label" for="passwordinput">Password</label>
<div class="controls">
<input required="" id="passwordinput" name="passwordinput" class="form-control" type="password" placeholder="********" class="input-medium">
</div>
</div>
<div class="control-group">
<label class="control-label" for="signin"></label>
<div class="controls">
<button id="signin" name="signin" class="btn btn-success">Sign In</button>
</div>
</div>
</fieldset>
</form>
</div>
<!--Register-->
<div class="tab-pane fade" id="signup">
<form class="form-horizontal">
<fieldset>
<div class="control-group">
<label class="control-label" for="reenterpassword">Ethereum Address</label>
<div class="controls">
<input id="ethereumAddress" class="form-control" name="ethid" type="text" placeholder="2309482309" class="input-large" required="">
</div>
</div>
<div class="control-group">
<label class="control-label" for="Email">Email:</label>
<div class="controls">
<input id="Email" name="Email" class="form-control" type="text" placeholder="theo#theo.com" class="input-large" required="">
</div>
</div>
<div class="control-group">
<label class="control-label" for="userid">Nickname:</label>
<div class="controls">
<input id="userid" name="userid" class="form-control" type="text" placeholder="theo" class="input-large" required="">
</div>
</div>
<div class="control-group">
<label class="control-label" for="password">Password:</label>
<div class="controls">
<input id="password" name="password" class="form-control" type="password" placeholder="********" class="input-large" required="">
<em>1-8 Characters</em>
</div>
</div>
<div class="control-group">
<label class="control-label" for="reenterpassword">Re-Enter Password:</label>
<div class="controls">
<input id="reenterpassword" class="form-control" name="reenterpassword" type="password" placeholder="********" class="input-large" required="">
</div>
</div>
<!-- Multiple Radios (inline) -->
<br>
<!-- Button -->
<!--<button id="confirmsignup" class="btn btn-success" onclick="register()">Sign Up</button>-->
<button id="confirmsignup" onclick="register()">Sign Up</button>
</fieldset>
</form>
</div>
</div>
</div>
<div class="modal-footer">
<center>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</center>
</div>
</div>
</div>
</div>
</body>
</html>
contract Register {
//address public userAddr;
struct User {
address userAddress;
string nickname;
string email;
string password;
bool isLoggedIn;
}
mapping(address => User) users;
address public creator;
//bool public isLoggedIn;
function Register() {
creator = msg.sender;
}
function setAccountInfo(string nickname, string email, string password, address addr) {
users[addr].nickname = nickname;
users[addr].email = email;
users[addr].password = password;
}
function getNickname(address addr) returns (string) {
return users[addr].nickname;
}
function getEmail(address addr) returns (string) {
return users[addr].email;
}
function getAddress() constant returns (address) {
return creator;
}
function setLoggedStatus(address addr, bool condition) {
users[addr].isLoggedIn = condition;
}
function getLoggedStatus(address addr) constant returns (bool success) {
return users[addr].isLoggedIn;
}
}
I can't figure out why the code does not execute after the javascript line Register.deployed(). Any help that could possibly lead me in the right direction would be helpful. Thank you so much!

Categories