Angular Rails Not Resolving - ruby-on-rails

We currently have some hardcoded code:
ng-form class="form-horizontal" name="genderForm">
<div data-fields="">
<div class="form-field-gender control-group form-field" data-field="">
<div class="controls" data-input="">
<label class="radio">
<input type="radio" ng-model="appuser.traits[6]" ng-value= "[42198]" name="field-input-gender" id="field-input-gender-0" required>
<i class="fa fa-male fa-fw"></i> {{genderQuestion.traits[0].value_text}}
</label>
<label class="radio">
<input type="radio" name="field-input-gender" ng-model="appuser.traits[6]" id="field-input-gender-1" ng-value="[42199]" required>
<i class="fa fa-female fa-fw"></i> {{genderQuestion.traits[1].value_text}}
</label>
</div>
<div class="controls">
<div class="text-error" data-error="">
</div>
</div>
</div>
</div>
</ng-form>
Ideally it will be dynamic so it should be something like this:
ng-form class="form-horizontal" name="genderForm">
<div data-fields="">
<div class="form-field-gender control-group form-field" data-field="">
<div class="controls" data-input="">
<label class="radio">
<input type="radio" ng-model="appuser.traits[{{genderQuestion.id}}]" ng-value= "[{{genderQuestion.traits[0].id}}]" name="field-input-gender" id="field-input-gender-0" required>
<i class="fa fa-male fa-fw"></i> {{genderQuestion.traits[0].value_text}}
</label>
<label class="radio">
<input type="radio" name="field-input-gender" ng-model="appuser.traits[6]" id="field-input-gender-1" ng-value="[{{genderQuestion.traits[1].id}}]" required>
<i class="fa fa-female fa-fw"></i> {{genderQuestion.traits[1].value_text}}
</label>
</div>
<div class="controls">
<div class="text-error" data-error="">
</div>
</div>
</div>
</div>
</ng-form>
But something about going from ng-model="appuser.traits[6]" to ng-model="appuser.traits[{{genderQuestion.id}}]" and ng-value="[42199]" to ng-value="[{{genderQuestion.traits[1].id}}]" seems to make it spazz out and not resolve any of the {{}} fields.
Any idea where I'm going wrong? Technically genderQuestion.id = 6 and genderQuestion.traits[1].id = 42199 but in this format it doesn't seem to like those.
Maybe I'm missing like a toString format or something?

2 way data binding with the ngModel directive doesn't need {{ }} again. You can directly refer to the scope object with genderQuestion.id
appuser.traits[genderQuestion.id].
Ta

Related

How to use the scaffolded LoginModel in another view than Login.cshtml?

I created a dropdown menu to log in instead of logging in at Login.cshtml but i can't seem to be able to use the model that contains the email password etc. I am not sure how to explain this but here is what i made so far:
I created the dropdown form and placed it in _LoginPartial.cshtml so it shows on the navbar
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Log-In
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton" style="width: 300px" >
<!----------->
<div class="col-lg-12">
<div class="text-center">
<h3><b>Log In</b></h3></div>
<form id="ajax-login-form" method="post" role="form" autocomplete="off">
<div class="form-group">
<label for="username">Username</label>
<input type="text" name="username" id="username" tabindex="1" class="form-control" placeholder="Username" value="" autocomplete="off">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" name="password" id="password" tabindex="2" class="form-control" placeholder="Password" autocomplete="off">
</div>
<div class="form-group">
<div class="col-xs-5">
<input type="submit" name="login-submit" id="login-submit" tabindex="4" class="form-control btn btn-danger" value="Log In">
</div>
</div>
<div class="col-xs-5" align="Center">
<input type="checkbox" tabindex="3" name="remember" id="remember">
<label for="remember"> Remember Me</label>
</div>
<div class="form-group">
<div class="row">
<div class="col-lg-12">
<div class="text-center">
<a tabindex="5" class="forgot-password">Forgot Password?</a>
</div>
</div>
</div>
</div>
</form>
</div>
and after this, i thought i can easily just insert #model loginmodel and i can start using that model but i'm met with so many errors. Any advice on how to do this? I am also open to other approaches too

Bootstrap 4 input field spacing in Chrome on IOS

I've got an issue I cannot seems to figure out. I have a simple form for four text input fields. The spacing looks great on all the browsers except for Chrome on IOS. The spacing between the input fields just seems to be ignored.
I'm using Bootstrap 4. Here's the HTML:
<div class="form-row">
<div class="col-md-2 col-lg-2 col-sm-5 col-6 pt-2">
<input type="text" class="form-control form-control-sm bg-color-light-gray2" placeholder="First name">
</div>
<div class="col-md-2 col-lg-2 col-sm-5 col-6 pt-2">
<input type="text" class="form-control form-control-sm bg-color-light-gray2" placeholder="Last name">
</div>
<div class="col-md-3 col-lg-3 col-sm-3 col-6 pt-2">
<input type="text" class="form-control form-control-sm bg-color-light-gray2" placeholder="E-Mail">
</div>
<div class="col-md-2 col-lg-2 col-sm-2 col-6 pt-2">
<input type="tel" class="form-control form-control-sm rounded bg-color-light-gray2" placeholder="Zip Code" name="loanzip" id="loanzip" maxlength="5" value="" />
</div>
<div class="col-md-3 col-lg-3 col-sm-5 col-12 search-results pt-2">
<button type="submit" class="btn btn-success btn-block btn-sm rounded font-size-15">Get Approved <i class="fa fa-thumbs-up" aria-hidden="true"> </i></button>
</div>
So frustrating when it looks Ok everywhere else.
Enclosed is a screen shot from Chrome on IOS.
Thanks for any help!
Tim
Here it is on mobile Safari...
Latest HTML but leaves extra spacing after the button only on IOS Chrome.
<form name="carloan" id="carloan" action="car-loan-application/" method="post">
<div class="row ml-2 mr-2">
<div class="col-6 col-xl-2 mb-2">
<input type="text" class="form-control form-control-sm bg-color-light-gray2" placeholder="First Name">
</div>
<div class="col-6 col-xl-2 mb-2">
<input type="text" class="form-control form-control-sm bg-color-light-gray2" placeholder="Last Name">
</div>
<div class="col-6 col-xl-2 mb-2">
<input type="email" class="form-control form-control-sm bg-color-light-gray2" placeholder="E-Mail">
</div>
<div class="col-6 col-xl-2 mb-2">
<input type="tel" class="form-control form-control-sm bg-color-light-gray2" placeholder="Zip Code">
</div>
<div class="col-12 col-xl-4 mb-2 search-results">
<button type="submit" class="btn btn-success btn-block btn-sm rounded font-size-15">Get Approved <i class="fa fa-thumbs-up" aria-hidden="true"></i></button>
</div>
</div>
</form>
In your code, I can see your using col-md-3 which is for tablets, you are to use "col-xs (portrait device) or col-sm (landscape device)" depending on the width on IOS device. Or you can just use media queries or bootstrap 4 form-group class for your div (for a proper view). E.g.
<div class="form-group"> input or form button... </div>

How does Basic Authentication works specific directory in Laravel5.1?

I want to set Basic Authentication in specific views directory.
I set a htaccess file and htpasswd file in views directory, but it dosen't work.
resources--views--admin ←set them here!
I know there is a htaccess file in public directory.
Should i use it to set Basic Authentication works specific directory?
Please tell me how to work Basic Authentication at specific directory in Laravel5.1.
The basic Laravel Authentication is set up by running a php artisan commend:
php artisan auth:make
This will then make your view for the login page and a HomeController. and update your routes.php file under the middleware web
Once you have done that you will just need to make a form on the login page which looks like this. Which you can find under ../resources/views/auth/login.blade.php
<form class="form-horizontal" role="form" method="POST" action="{{ url('/login') }}">
{!! csrf_field() !!}
<div class="form-group{{ $errors->has('email') ? ' has-error' : '' }}">
<label class="col-md-4 control-label">E-Mail Address</label>
<div class="col-md-6">
<input type="email" class="form-control" name="email" value="{{ old('email') }}">
#if ($errors->has('email'))
<span class="help-block">
<strong>{{ $errors->first('email') }}</strong>
</span>
#endif
</div>
</div>
<div class="form-group{{ $errors->has('password') ? ' has-error' : '' }}">
<label class="col-md-4 control-label">Password</label>
<div class="col-md-6">
<input type="password" class="form-control" name="password">
#if ($errors->has('password'))
<span class="help-block">
<strong>{{ $errors->first('password') }}</strong>
</span>
#endif
</div>
</div>
<div class="form-group">
<div class="col-md-6 col-md-offset-4">
<div class="checkbox">
<label>
<input type="checkbox" name="remember"> Remember Me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-6 col-md-offset-4">
<button type="submit" class="btn btn-primary">
<i class="fa fa-btn fa-sign-in"></i>Login
</button>
<a class="btn btn-link" href="{{ url('/password/reset') }}">Forgot Your Password?</a>
</div>
</div>
</form>
And you will be given a register page which will look like this. Which can be found under ../resources/views/auth/resgister.blade.php
<form class="form-horizontal" role="form" method="POST" action="{{ url('/register') }}">
{!! csrf_field() !!}
<div class="form-group{{ $errors->has('name') ? ' has-error' : '' }}">
<label class="col-md-4 control-label">Name</label>
<div class="col-md-6">
<input type="text" class="form-control" name="name" value="{{ old('name') }}">
#if ($errors->has('name'))
<span class="help-block">
<strong>{{ $errors->first('name') }}</strong>
</span>
#endif
</div>
</div>
<div class="form-group{{ $errors->has('email') ? ' has-error' : '' }}">
<label class="col-md-4 control-label">E-Mail Address</label>
<div class="col-md-6">
<input type="email" class="form-control" name="email" value="{{ old('email') }}">
#if ($errors->has('email'))
<span class="help-block">
<strong>{{ $errors->first('email') }}</strong>
</span>
#endif
</div>
</div>
<div class="form-group{{ $errors->has('password') ? ' has-error' : '' }}">
<label class="col-md-4 control-label">Password</label>
<div class="col-md-6">
<input type="password" class="form-control" name="password">
#if ($errors->has('password'))
<span class="help-block">
<strong>{{ $errors->first('password') }}</strong>
</span>
#endif
</div>
</div>
<div class="form-group{{ $errors->has('password_confirmation') ? ' has-error' : '' }}">
<label class="col-md-4 control-label">Confirm Password</label>
<div class="col-md-6">
<input type="password" class="form-control" name="password_confirmation">
#if ($errors->has('password_confirmation'))
<span class="help-block">
<strong>{{ $errors->first('password_confirmation') }}</strong>
</span>
#endif
</div>
</div>
<div class="form-group">
<div class="col-md-6 col-md-offset-4">
<button type="submit" class="btn btn-primary">
<i class="fa fa-btn fa-user"></i>Register
</button>
</div>
</div>
</form>
With these you can set up your Authentication with in laravel. Just make sure any routes that are using your Auth method are in the web middleware group
If you are wanting an admin pages and you have auth then you can set up a middleware so it checks they are admin before they can even hit the route

glyphicon-lock is not showing

I'm working on an ASP.NET MVC web application, and I'm using Bootstrap 3.
I have the following markup inside my login view to show username and password:
<fieldset>
<div class="input-group input-group-lg">
<span class="input-group-addon">
<i class="glyphicon glyphicon-user blue"></i>
</span>
<input type="text" class="form-control" placeholder="Username" name="Username" value="#Model.UserName">
</div>
<div class="clearfix"></div><br>
<div class="input-group input-group-lg">
<span class="input-group-addon">
<i class="glyphicon glyphicon-lock blue"></i>
</span>
<input type="password" class="form-control" placeholder="Password" name="password">
</div>
<div class="clearfix"></div>
<p class="center col-md-5">
<button type="submit" class="btn btn-primary">Login</button>
</p>
</fieldset>
However, the glyphicon-lock inside the password field is not showing on IE, FF, or Safari:

File upload formatting in Bootstrap MVC

I have this in an MVC view
<form id="fileupload" action="#Url.Action("Save")" method="POST" enctype="multipart/form-data">
<div class="container">
<div class="row">
<div class="form-group">
<label for="datepicker1">Invoice Date</label>
<div class='bfh-datepicker' id='datepickerDiv'>
<input type='text' id="datepicker1" class="form-control" />
</div>
</div>
<div class="form-group">
<label for="InvoiceNumberTB">Invoice Number</label>
<input type="text" class="form-control" id="InvoiceNumberTB" />
</div>
<div class="form-group">
<label for="NetAmountTB">Net Amount</label>
<input type="text" id="NetAmountTB" class="form-control text-right" placeholder="0.00" />
</div>
<div class="form-group">
<label for="TaxAmountTB">Sales Tax</label>
<input type="text" id="TaxAmountTB" class="form-control text-right" placeholder="0.00" />
</div>
<div class="form-group">
<label for="InvoiceTotalTB">Invoice Total</label>
<input type="text" id="InvoiceTotalTB" class="form-control text-right" placeholder="0.00" />
</div>
<div class="form-group">
<label for="InvoiceDescriptionTB">Description</label>
<input type="text" id="InvoiceDescriptionTB" class="form-control" />
</div>
<div class="form-group">
<label for="DocumentUploadTB">Optional - Upload Invoice (PDF)</label>
<span class="btn btn-success fileinput-button">
<span>Add File...</span>
<input type="file" id="DocumentUploadTB" class="form-control" />
</span>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-plus-sign"></span> Save</button>
</div>
</div>
</div>
But the label for the file upload is not formatting as I would have hoped (at the top of the field as the others) but looks like this
Could someone point me in the correct direction?
Thanks
Wrap the content after the label in a form-control-static div and lose the form-control class on the input:
<div class="form-group">
<label for="DocumentUploadTB">Optional - Upload Invoice (PDF)</label>
<div class="form-control-static">
<span class="btn btn-success fileinput-button">
<span>Add File...</span>
<input type="file" id="DocumentUploadTB" />
</span>
</div>
</div>
You want your btn span to display as a block element. Try adding a display: block; style to it, or use a simple bootstrap utility class like .show:
<div class="form-group">
<label for="DocumentUploadTB">Optional - Upload Invoice (PDF)</label>
<span class="btn btn-success fileinput-button show">
<span>Add File...</span>
<input type="file" id="DocumentUploadTB" class="form-control" />
</span>
</div>
Example: http://codepen.io/kspearrin/pen/PqpgYq

Resources