export 'ValidationProvider' (imported as 'ValidationProvider') was not found in 'vee-validate' - vuejs3

I'm using vue 3 with vee-validate:
package.json file
"vee-validate": "^4.7.3",
Code
...
...
...
<ValidationObserver ref="form" v-slot="{ passes }">
<form #submit.prevent="passes(onSubmit)">
<h1>Login</h1>
<p class="text-medium-emphasis">Sign In to your account</p>
<div class="mb-3">
<div class="input-group ">
<ValidationProvider vid="email" name="email" v-slot="{ errors }">
<input v-model="email" placeholder="Email" name="email" autocomplete="Email" class="form-control">
<div class="error-message">{{ errors[0] }}</div>
</ValidationProvider>
</div>
</div>
<div class="mb-4">
<div class="input-group ">
<ValidationProvider vid="password" name="password" v-slot="{ errors }">
<input v-model="password" placeholder="Password" name="password" autocomplete="current-password" class="form-control" type="password">
<span>{{ errors[0] }}</span>
</ValidationProvider>
</div>
</div>
<div class="row">
<div class="col-6">
<button class="btn btn-primary px-4">Sign in</button>
</div>
<div class="col-6 text-right">
<button class="btn btn-link px-0" type="button"> Forgot password? </button>
</div>
</div>
</form>
</ValidationObserver>
...
...
...
<script>
import { Form, Field, ErrorMessage, ValidationProvider,
ValidationObserver } from "vee-validate";
export default {
components: { Form, Field, ErrorMessage, ValidationProvider, ValidationObserver },
...
...
...
But has warning:
export 'ValidationObserver' (imported as 'ValidationObserver') was not found in 'vee-validate' (possible exports: ErrorMessage, Field, FieldArray, FieldContextKey, Form, FormContextKey, IS_ABSENT, configure, defineRule, useField, useFieldArray, useFieldError, useFieldValue, useForm, useFormErrors, useFormValues, useIsFieldDirty, useIsFieldTouched, useIsFieldValid, useIsFormDirty, useIsFormTouched, useIsFormValid, useIsSubmitting, useResetForm, useSubmitCount, useSubmitForm, useValidateField, useValidateForm, validate)
And in console:
Has anyone had the same situation as me?

None of that stuff is in Vee-Validate version 4.7.3. You need to use an older version if you want ValidationObserver and ValidationProvider. Try this:
"vee-validate": "^3.1.0",

Related

Prestashop module link redirects to Admin dashboard in production server

I developed a Prestashop module form my customer. I migrated the changes to the production server and I found out that if I access the controller url in production it redirects to the Admin Dashboard (or login screen if not logged in), but in local server it executes the code.
// working -> http://example.test/module/mymodule/mycontroller
// not working -> https://example.com/module/mymodule/mycontroller
public function postProcess()
{
parent::postProcess();
if (Tools::getIsset('request-budget-form')) {
$this->requestBudget();
$this->success[] = 'lorem ipsum';
$this->redirectWithNotifications('/');
}
die('this line is printed in local, but the controller is never executed in production. its redirecting to admin dashboard instead.');
Tools::redirect('/');
}
I added the quotation form to the cart-detailed-actions.tpl template.
{block name='cart_detailed_actions'}
<div class="checkout cart-detailed-actions card-block">
{if $cart.minimalPurchaseRequired}
<div class="alert alert-warning" role="alert">
{$cart.minimalPurchaseRequired}
</div>
<div class="text-sm-center">
<button type="button" class="btn btn-primary disabled" disabled>{l s='Proceed to checkout' d='Shop.Theme.Actions'}</button>
</div>
{elseif empty($cart.products) }
<div class="text-sm-center">
<button type="button" class="btn btn-primary disabled" disabled>{l s='Proceed to checkout' d='Shop.Theme.Actions'}</button>
</div>
{else}
<div class="text-sm-center">
{if $requires_budget}
<form action="{$link->getModuleLink('mymodule', 'mycontroller', [], true)|escape:'html'}" method="post">
{if ! $customer.is_logged}
<div class="form-group">
<label for="budget-nom" style="width: 100%;text-align: left;">{l s='Nombre' d='Shop.Theme.Actions'}</label>
<input id="budget-nom" type="text" name="name" class="form-control" required>
</div>
<div class="form-group">
<label for="budget-email" style="width: 100%;text-align: left;">{l s='Email' d='Shop.Theme.Actions'}</label>
<input id="budget-email" type="email" name="email" class="form-control" required>
</div>
{/if}
<div class="form-group">
<label for="budget-comments" style="width: 100%;text-align: left;">{l s='Comments' d='Shop.Theme.Actions'}</label>
<textarea class="form-control" name="comments" id="budget-comments" minlength="10" required></textarea>
</div>
<button type="submit" name="request-budget-form" class="btn btn-primary">
{l s='Ask for a quotation' d='Shop.Theme.Actions'}
</button>
</form>
{else}
{l s='Proceed to checkout' d='Shop.Theme.Actions'}
{hook h='displayExpressCheckout'}
{/if}
</div>
{/if}
</div>
{/block}

Why after redirection the page style is off with a huge white space

I am currently debugging an issue on a login page after resetting user's password. The login page's style is off after user resets their password successfully and clicks the 'change password' button to redirect to the main login page.
The first code section is for my typescript code which will redirect to my local host, for example localhost:44332/login, login page. And the first html code is for my resetting password code, while the second html code is for my main login page.
resetPassword() {
if (this.isPermittedToUpdate) {
if (this.passwordForm.dirty && this.passwordForm.valid) {
this.spinnerService.show();
const newPassword = this.passwordForm.get('newPwd').value;
this.userService.ResetPassword(newPassword, this.urlIdentifier).subscribe(result => {
if (result.retCode === APIReturnEnum.Successful) {
this.toastrService.success('Password has been updated');
this.router.navigateByUrl('/login');
}
<div class="row" style="padding-left:2%;padding-bottom: 1%">
<h1>
Reset Password
</h1>
<hr />
</div>
<div *ngIf="isPermittedToUpdate">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="dashboard_graph x_panel">
<div class="x_content" style="margin-top:0 !important; padding: 0px !important">
<form [formGroup]="passwordForm" class="form-horizontal" role="form" style="margin-top:2%"
(ngSubmit)="resetPassword()">
<div class="form-group">
<label class="control-label col-sm-1" style="width:150px">New Password</label>
<div class="col-sm-6">
<input class="form-control" type="password" formControlName="newPwd" name="newPwd"
placeholder="Enter your new password here" style="width:80%" />
<app-validationmessage [control]="passwordForm.controls.newPwd"></app-validationmessage>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-1" style="width:150px">Confirm New Password</label>
<div class="col-sm-6">
<input class="form-control" type="password" formControlName="confirmNewPwd" name="confirmNewPwd"
placeholder="Confirm your new Password here" style="width:80%" />
<app-validationmessage [control]="passwordForm.controls.confirmNewPwd"></app-validationmessage>
</div>
</div>
<button type="submit" class="btn btn-default" style="margin-left:150px; margin-top: 20px;"
[disabled]="!isPermittedToUpdate">Change Password
</button>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="login1">
<div class="login_wrapper">
<section class="login_content">
<div class="login-container-wrapper">
<ng-container *ngIf="!isPasswordReset; else forgotPassword">
<h1 class="welcome">Welcome, please login</h1>
<form class="form-horizontal login-form" [formGroup]="signForm"
(submit)="submit(email.value, password.value)">
<div class="form-group-login">
<div class="relative">
<label for="email">Email</label>
<input type="text" id="email" formControlName="email" class="form-control" placeholder="Email" #email
style="background-color:#fff !important;" />
<i class="fa fa-user fa-2x"></i>
</div>
<app-validationmessage class="form-error" [control]="signForm.controls.email"></app-validationmessage>
</div>
<div class="form-group-login">
<div class="relative password">
<label for="password">Password</label>
<input type="password" id="password" formControlName="password" class="form-control"
placeholder="Password" #password style="background-color:#fff !important;" />
<i class="fa fa-lock fa-2x"></i>
</div>
<app-validationmessage class="form-error" [control]="signForm.controls.password"></app-validationmessage>
</div>
<div class="form-group-login log">
<button type="submit" class="btn dark-grey">Log in</button>
</div>
<div class="forgot-pwd">
<a (click)="switchView()">Forgot Password?</a>
</div>
</form>
</ng-container>
<ng-template #forgotPassword>
<p>Please enter the email address you registered with Softchoice</p>
<form [formGroup]="confirmEmailForm" (submit)="sendResetPasswordEmail()">
<div class="form-group-login">
<input type="email" class="form-control" formControlName="email" placeholder="">
<app-validationmessage [control]="confirmEmailForm.controls.email"></app-validationmessage>
</div>
<div class="form-group-login">
<button type="submit" class="btn dark-grey">Send</button>
</div>
<div class="forgot-pwd">
<a (click)="goBackToLogin()"> Go back to Login Page</a>
</div>
<div>
</div>
</form>
</ng-template>
</div>
<!--</form>-->
</section>
</div>
</div>

How to Align and Style my View Page in Angular

I am working on a project using Angular-7. I tried to render a modal form with the code shown below:
user.component.html
<div id="addModal" class="modal" style="background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.4);">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Add New {{ User }}</h5>
<button type="button" class="close" (click)='closeAddModal()'>
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="alert alert-danger" [hidden]="!error.role">
{{ error.role }}
</div>
<div class="alert alert-danger" [hidden]="!error.email">
{{ error.email }}
</div>
<div class="alert alert-danger" [hidden]="!error.first_name">
{{ error.first_name }}
</div>
<div class="alert alert-danger" [hidden]="!error.last_name">
{{ error.last_name }}
</div>
<div class="alert alert-danger" [hidden]="!error.client_id">
{{ error.client_id }}
</div>
<div class="alert alert-danger" [hidden]="!error.password">
{{ error.password }}
</div>
<form #editUserForm=ngForm>
<div class="form-group">
<label for="name">First Name</label>
<input type="name" name="first_name" id="inputName" class="form-control" placeholder="First Name" [(ngModel)]="form.first_name" required>
</div>
<div class="form-group">
<label for="name">Last Name</label>
<input type="name" name="last_name" id="inputName" class="form-control" placeholder="Last Name" [(ngModel)]="form.last_name" required>
</div>
<div class="form-group">
<label for="name">Email</label>
<input type="email" name="email" id="inputEmail" class="form-control" placeholder="example#email.com" required [(ngModel)]="form.email">
</div>
<div class="form-group">
<label for="name">Client</label>
<select class="form-control pt-1" name="client_id" [(ngModel)]="form.client_id">
<option value="null">Select Client</option>
<option *ngFor="let c of clients" value="{{c?.client_id}}">{{c.client_name}}</option>
</select>
</div>
<div class="form-group">
<label for="name">Role</label>
<div *ngFor="let role of roles">
<input type="checkbox" name="{{ role.name }}" value="{{ role.name }}" (change)="checkboxAdd($event)"> {{ role.name }}
</div>
</div>
<div class="form-group">
<label for="name">Password</label>
<input type="password" name="password" id="inputPassword" [(ngModel)]="form.password" class="form-control" placeholder="Password" required>
</div>
<div class="form-group">
<label for="name">Password Confirmation</label>
<input type="password" name="password_confirmation" id="inputPasswordConfirm" [(ngModel)]="form.password_confirmation" class="form-control" placeholder="Re enter Password" required>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" (click)='addModalSubmit()' [disabled]="!editUserForm.valid">Save changes</button>
<button type="button" class="btn btn-secondary" (click)='closeAddModal()'>Close</button>
</div>
</div>
</div>
</div>
In the form, I have checkboxes for user roles. I observed that the form got truncated and some of the checkboxes not being displayed. Also, the submit button is not showing. Even the vertical scrollbar on the page could not resolve the problem.
How do I resolve this and make everything visible?
How do I make the checkboxes to be divided into three (3) columns using:
<div class="col-xs-4">
How do I resolve this and make everything visible?
Using overflow, solve this problem easily. For example;
<div class="content">
this is content * 70
</div>
<style>
.content {
overflow-y: scroll; /* for vertical scroll */
}
</style>
How do I make the checkboxes to be divided into three (3) columns using:
Use flex. Everyting is easy :)
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
<div class="area">
<div *ngFor="let role of roles" class="item">
<input type="checkbox" name="{{ role.name }}" value="{{ role.name }}" (change)="checkboxAdd($event)"> {{ role.name }}
</div>
</div>
<style>
.area {
display: flex;
flex-direction: row;
width: 100%;
}
.area .item {
width: 33.3%;
}
</style>
You could use bootstrap class checkbox-inline to have all the options in one line.
Please Look at this

This connection is not secure Mozilla

I have deployed an application build in laravel 5.3. On my login forms I see this warning : This connection is not secure. Logins entered here could be compromised.
This is my form :
<form class="form-horizontal" role="form" method="POST" action="{{ url('/login') }}">
{{ csrf_field() }}
<div class="form-group{{ $errors->has('email') ? ' has-error' : '' }}">
<label for="email" class="col-md-3 control-label"></label>
<div class="col-md-6">
<input id="email" type="email" class="form-control" placeholder="Email" name="email" value="{{ old('email') }}" required autofocus>
#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 for="password" class="col-md-3 control-label"></label>
<div class="col-md-6">
<input id="password" type="password" placeholder="Password" class="form-control" name="password" required>
#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-3">
<div class="checkbox">
<label>
<input type="checkbox" name="remember"> Remember Me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-8 col-md-offset-3">
<button type="submit" class="btn btn-primary">
Login
</button>
<a class="btn btn-link" href="{{ url('/password/reset') }}">
Forgot Your Password?
</a>
</div>
</div>
</form>
What I'm I missing or how can I fix this warning?
This is a Firefox feature to warn visitors of websites that information they submit is not transferred securely.
The browser shows this warning for pages containing an <input type="password" /> which are delivered through HTTP instead of HTTPS.
To mitigate this, obtain a certificate for your site and install it, so your users are protected against eavesdropping.

Form design with validation messages

I have a form, where the first name and last name are after each other.
Now both have their own validation ng-messages. But when an error happens in e.g. the last name, and the first name has no errors. The form becomes really ugly.
How can I make it so when one of the two has an error, both go up.
https://plnkr.co/edit/B4qrUgxhntkvwuIPGIBs?p=preview
<div class="smallContainer myForm">
<form name="userForm" ng-name="userForm" ng-submit="signup(userForm.$valid, userForm)" novalidate>
<!-- First name -->
<div id="firstName" class="form-group"
ng-class="{ 'has-error' : userForm.first_name.$touched && userForm.first_name.$invalid,
'has-success' : userForm.first_name.$valid }">
<div class="col-10">
<input class="form-control" type="text" placeholder="First name"
name="first_name"
ng-model="user.first_name"
ng-minlength="2"
ng-maxlength="25"
required>
<div class="help-block" ng-messages="userForm.first_name.$error" ng-if="userForm.first_name.$touched">
<p ng-message="minlength">Your name is too short.</p>
<p ng-message="maxlength">Your name is too long.</p>
<p ng-message="required">Your name is required.</p>
</div>
</div>
</div>
<!-- Last name -->
<div id="lastName" class="form-group"
ng-class="{ 'has-error' : userForm.last_name.$touched && userForm.last_name.$invalid,
'has-success' : userForm.last_name.$valid }">
<div class="col-12">
<input class="form-control" type="text" placeholder="Last name"
name="last_name"
ng-model="user.last_name"
ng-minlength="2"
ng-maxlength="25"
required>
<div class="help-block" ng-messages="userForm.last_name.$error" ng-if="userForm.last_name.$touched">
<p ng-message="minlength">Your name is too short.</p>
<p ng-message="maxlength">Your name is too long.</p>
<p ng-message="required">Your name is required.</p>
</div>
</div>
</div>
<!-- Email-->
<div class="form-group"
ng-class="{ 'has-error' : userForm.email.$touched && userForm.email.$invalid,
'has-success' : userForm.email.$valid }">
<div class="col-10">
<input class="form-control" type="email" placeholder="Email"
name="email"
ng-model="user.email"
ng-minlength="2"
ng-maxlength="50"
ng-pattern="emailFormat"
required>
<div class="help-block" ng-messages="userForm.email.$error" ng-if="userForm.email.$touched">
<p ng-message="maxlength">Your email is too long.</p>
<p ng-message="required">Your email is required.</p>
<p ng-message="pattern">This is not a valid email.</p>
<p ng-message="validationError">This email is already taken.</p>
</div>
</div>
</div>
<!-- Password1-->
<div class="form-group"
ng-class="{ 'has-error' : userForm.password.$touched && userForm.password.$invalid,
'has-success' : userForm.password.$valid }">
<div class="col-10">
<input class="form-control" type="password" placeholder="Password"
name="password"
ng-model="user.password"
ng-minlength="8"
ng-maxlength="30"
required>
<div class="help-block" ng-messages="userForm.password.$error" ng-if="userForm.password.$touched">
<p ng-message="minlength">Your password is too short.</p>
<p ng-message="maxlength">Your password is too long.</p>
<p ng-message="required">Your password is required.</p>
</div>
</div>
</div>
<!-- Password2-->
<div class="form-group"
ng-class="{ 'has-error' : userForm.password2.$touched && userForm.password2.$invalid,
'has-success' : userForm.password2.$valid }">
<div class="col-10">
<input class="form-control" type="password" placeholder="Confirm your password"
name="password2"
ng-model="user.password2"
ng-minlength="8"
ng-maxlength="30"
data-password-verify="user.password"
required>
<div class="help-block" ng-messages="userForm.password2.$error" ng-if="userForm.password2.$touched">
<p ng-message="passwordVerify ">Passwords do not match.</p>
</div>
</div>
</div>
<div>
<p class="cover-3">Are you ready to find your</p> <p class="cover-1 cover-3">peers?</p>
<button id="startButton" type="submit" class="btn btn-primary btn-lg center-block" >Start now</button>
</div>
</form>
</div>
You need to add:
vertical-align:top;
Here the code:
#firstName {
display: inline-block;
width: 250px;
vertical-align:top;
}
#lastName {
display: inline-block;
vertical-align:top;
width: 350px;
}
to the first 2 input fields.
https://plnkr.co/edit/F9kWfWPF8tJyE4HvfdbH?p=preview

Resources