New password | Visma UX

This is a recurring cookie banner intentionally included on the demo page. In the banner we always allow the user to learn more
Light mode Dark mode
				
<body class="login-page login-page-secondary">
   <!-- Cookies consent notification -->
   <div class="alert alert-dismissible cookies-alert" role="alert">
      <span class="vismaicon vismaicon-filled vismaicon-info"></span>
      <p>Visma Online saves certain data to enhance the user experience. By using MyVisma you approve this. <a href="#">More info</a></p>
      <button class="btn btn-close" type="button" data-dismiss="alert" arie-label="Close">OK</button>
   </div>

   <div class="login-box">
      <div class="login-header">
         <img src="..." alt="Visma product logo">
         <h1>Visma Product</h1>
      </div>

      <div class="login-content">
         <form>
            <div class="alert alert-info" role="alert">
               Please, enter your new password:
            </div>

            <div class="form-group required">
               <label for="inputPassword" class="control-label">Password</label>
               <input id="inputPassword" type="password" class="form-control" placeholder="Password" data-container="body" aria-describedby="tooltipNewPass">
               <div id="tooltipNewPass" class="tooltip tooltip-password-validation bottom in" role="tooltip">
                  <div class="tooltip-inner">
                     <ul>
                        <li class="password-success">...</li>
                        <li class="password-error">...</li>
                     </ul>
                  </div>
               </div>
            </div>

            <div class="form-group">
               <button type="submit" class="btn btn-primary btn-lg">Reset passwords</button>
            </div>

            <div class="form-group">
               <div class="row">
                  <div class="col-12">
                     <a class="btn btn-link" href="#"><span class="vismaicon vismaicon-move-left-circle"></span> Back</a>
                  </div>
               </div>
            </div>
         </form>
      </div>

   <div class="login-footer">
      <a href="#" class="logo-footer">Visma</a>
   </div>

   <!-- Footer section with usefull links -->
   <div class="alert login-footer-alert" role="alert">
      <ul
         <li> ... </li>
      </ul>
   </div>
</body>
Visma eAccounting
